How Global CSS and Design Tokens Are Updated for the Target Site in AI Website Cloner

The AI Website Cloner template uses a two-step workflow that extracts computed styles from the target site via browser MCP scripts and maps them to CSS custom properties in src/app/globals.css, enabling instant theme propagation across all components.

The JCodesMore/ai-website-cloner-template repository implements an automated pipeline to synchronize global CSS and design tokens with any website being cloned. This system ensures pixel-perfect fidelity by capturing the target site's visual identity—from colors and typography to spacing and animations—and applying them through a centralized stylesheet that serves as the single source of truth.

The Two-Step Workflow for Token Extraction

The repository treats src/app/globals.css as the definitive source for design tokens, updating it through a structured extraction and mapping process.

Step 1: Extracting Design Tokens from the Target Site

During the reconnaissance phase, the AI agent runs a browser-MCP script (such as Chrome MCP or Playwright MCP) that calls getComputedStyle() on the target page. This gathers every computed CSS value required for pixel-perfect fidelity, including:

• Colors and gradients
• Font families and typography scales
• Spacing values and border-radius
• Box shadows and keyframe animations
• Global UI patterns like smooth-scroll behaviors

The extracted values are written to a markdown specification file at docs/research/DESIGN_TOKENS.md. The inspection criteria guiding this extraction are defined in docs/research/INSPECTION_GUIDE.md, which specifies exactly which visual properties to capture from the target site.

Step 2: Mapping Tokens to CSS Custom Properties

After extraction, the agent updates the global CSS file (src/app/globals.css) to map the captured values to CSS custom properties. According to the source code at lines 51-84, the file uses a dual-block structure:

• The :root block holds light-mode token values
• The .dark block holds dark-mode equivalents

Each token follows the naming conventions used by shadcn/ui and Tailwind v4, expressed as custom properties like --background, --foreground, and --primary. When the target site contains values without direct counterparts, the agent adds new custom properties to the appropriate block.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --brand-primary: oklch(0.21 0.45 250); /* New token from target */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --brand-primary: oklch(0.88 0.30 250); /* Dark mode variant */
}

How the Clone-Website Command Automates CSS Updates

The entire workflow is orchestrated by the npm run clone-website <url> command, implemented in .windsurf/workflows/clone-website.md and .opencode/commands/clone-website.md. As documented in lines 131-183 of the workflow file, this command:

1. Executes the MCP extraction script
2. Writes the design-token specification to docs/research/DESIGN_TOKENS.md
3. Patches src/app/globals.css with the new values, including color tokens, spacing values, keyframe animations, utility classes, and global scroll behaviors

This automation ensures that globals.css remains synchronized with the target site's design language without manual copy-pasting.

Applying Design Tokens in Components

Once the tokens are defined in globals.css, components consume them through the cn() utility located in src/lib/utils.ts. This utility injects the CSS variables via Tailwind classes like bg-, text-, and border-.

import { cn } from '@/lib/utils';

export function Sidebar() {
  return (
    <aside className={cn(
      "bg-sidebar text-sidebar-foreground",
      "border border-sidebar-border",
      "rounded-lg"
    )}>
      {/* Component content */}
    </aside>
  );
}

Because the tokens are defined as CSS custom properties, changing a single value in globals.css instantly propagates to every component referencing that variable, ensuring the clone mirrors the target site's visual identity.

Summary

• Extraction: Browser MCP scripts capture computed styles via getComputedStyle() and write them to docs/research/DESIGN_TOKENS.md
• Mapping: Values are translated to CSS custom properties in src/app/globals.css within :root and .dark blocks
• Automation: The npm run clone-website <url> command orchestrates the entire update process
• Propagation: The cn() utility from src/lib/utils.ts applies these tokens via Tailwind classes, ensuring global consistency

Frequently Asked Questions

What file stores the global CSS and design tokens?

The file src/app/globals.css serves as the single source of truth for all design tokens. It contains CSS custom properties in :root (light mode) and .dark (dark mode) blocks, following the naming conventions of shadcn/ui and Tailwind v4.

How does the AI agent extract design tokens from the target website?

The agent runs browser-MCP scripts (Chrome MCP or Playwright MCP) that execute getComputedStyle() on the target page. This occurs during the reconnaissance phase defined in the inspection workflow, capturing colors, fonts, spacing, and animations to a specification file.

What happens if the target site uses a color not in the default token set?

When a target site value lacks a direct counterpart in the existing token set, the AI agent automatically adds a new CSS custom property to the appropriate block in src/app/globals.css. This ensures the clone can represent any unique brand colors or design elements from the original site.

How do components access the updated design tokens?

Components reference the tokens through the cn() utility function exported from src/lib/utils.ts. This utility applies Tailwind classes like bg-background or text-foreground, which map to the CSS custom properties defined in globals.css, allowing instant visual updates when tokens change.

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