Extracting Computed Colors and Mapping Them to CSS Variables in the AI Website Cloner Template

The AI Website Cloner Template automates pixel-perfect color replication by extracting computed styles from target websites and mapping them to CSS custom properties in src/app/globals.css, making them available as Tailwind utilities throughout the Next.js application.

The JCodesMore/ai-website-cloner-template repository implements a sophisticated multi-phase pipeline that enables AI agents to reverse-engineer any website into a modern Next.js project. During the Foundation phase, the agent performs browser-side inspection to capture the exact color palette of the target site, then transforms these values into reusable design tokens and CSS variables.

How the Foundation Phase Extracts Computed Colors

The color extraction workflow begins with automated browser instrumentation. The AI agent drives a headless Chrome instance (or any supported MCP) and executes window.getComputedStyle on every relevant element, including typography, backgrounds, and borders.

This process captures raw RGB and HEX values for each unique appearance found on the target page. The agent then deduplicates these values and sorts them by usage frequency, creating a design token file (JSON) that maps readable names like primary or accent-1 to the exact color strings extracted from the source site.

Generating the Global CSS Variable Block

Once the design tokens are established, the agent writes a :root block inside src/app/globals.css. Each token becomes a CSS custom property prefixed with --color-, creating a single source of truth for all color values in the cloned application.

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Auto-generated from the target site */
  --color-primary: #1e3a8a;
  --color-secondary: #64748b;
  --color-accent-1: #f59e0b;
  --color-accent-2: #10b981;
}

The globals.css file serves as the central registry for the extracted palette, ensuring that any color updates propagate consistently across the entire component tree.

Tailwind Configuration for CSS Variables

The repository bridges CSS variables with Tailwind utilities through the theme configuration in tailwind.config.ts. By extending the colors object to reference the custom properties, the template enables semantic class names that resolve to the generated variable values.

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{ts,tsx,jsx,js}"],
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        secondary: "var(--color-secondary)",
        "accent-1": "var(--color-accent-1)",
        "accent-2": "var(--color-accent-2)",
      },
    },
  },
} satisfies Config;

This configuration allows Tailwind v4 to resolve arbitrary CSS variables, meaning utility classes like bg-primary or text-accent-1 automatically map to the extracted values without hard-coding hex strings in the markup.

Using Color Variables in Components

UI components consume the generated variables through the cn utility function exported from src/lib/utils.ts. This helper merges Tailwind class names and enables conditional styling while referencing the CSS custom properties.

// src/components/ui/button.tsx
import { cn } from "@/lib/utils";

export function Button({ children }: { children: React.ReactNode }) {
  return (
    <button
      className={cn(
        "rounded-md px-4 py-2",
        "bg-primary text-white",
        "hover:bg-primary/90"
      )}
    >
      {children}
    </button>
  );
}

The hover:bg-primary/90 syntax demonstrates Tailwind's ability to apply opacity modifiers to CSS variables, allowing for subtle interactive states while maintaining the connection to the original extracted color.

Agent Coordination and Rule Synchronization

The extraction logic is governed by instructions documented in AGENTS.md, which serves as the source-of-truth for AI-agent behavior during the reconnaissance phase. The scripts/sync-agent-rules.sh script regenerates platform-specific copies of these rules, ensuring that the color-extraction methodology remains consistent across different deployment environments.

Summary

• Browser inspection: The agent uses window.getComputedStyle in a headless browser to capture every RGB and HEX value from the target website.
• Token generation: Extracted colors are deduplicated and mapped to semantic names in a JSON design token file.
• CSS variable emission: Tokens are written as custom properties in src/app/globals.css within a :root block.
• Tailwind integration: The tailwind.config.ts maps theme colors to the CSS variables, enabling utilities like bg-primary.
• Component consumption: The cn helper in src/lib/utils.ts composes class names that reference the generated variables for pixel-perfect styling.

Frequently Asked Questions

How does the AI agent determine which elements to inspect for color extraction?

The agent targets elements that contribute to the visual design system, including typography nodes, background layers, border elements, and interactive components. According to the AGENTS.md instructions, the agent systematically traverses the DOM to collect computed styles from every element that displays a unique color appearance, then filters and deduplicates these values based on usage frequency to identify the core palette.

Can the extracted colors be modified for dark mode or theme variations?

Yes. Because the colors are stored as CSS custom properties in src/app/globals.css, you can override them within media queries or data-attribute selectors. The Tailwind configuration supports dark mode variants, allowing you to redefine --color-primary and other variables under a dark class or prefers-color-scheme media query, which automatically updates all component styles that reference those variables.

What happens if the target website uses CSS gradients or complex background patterns?

The extraction pipeline focuses on discrete color values for the design system foundation. While window.getComputedStyle returns computed colors for individual elements, complex gradients are typically captured as specific token values or handled as extended utilities in the Tailwind config. The agent prioritizes solid colors for the primary variable mapping, as these form the base layer of the design system in the cloned Next.js application.

Where are the design token files stored before they become CSS variables?

The AI agent generates intermediate JSON design token files during the Foundation phase, which are used to populate the :root block in src/app/globals.css. These tokens map semantic names to the exact hex or RGB strings extracted from the target site, serving as a translation layer between the raw browser inspection data and the final CSS custom properties consumed by components.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}