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

> Discover how the AI Website Cloner updates global CSS and design tokens. Learn how computed styles are extracted and mapped to CSS custom properties for instant theme propagation across your site.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: deep-dive
- Published: 2026-07-02

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md). The inspection criteria guiding this extraction are defined in [`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.

```css
: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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) and [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md)
3. **Patches [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), components consume them through the `cn()` utility located in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts). This utility injects the CSS variables via Tailwind classes like `bg-`, `text-`, and `border-`.

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md)
- **Mapping**: Values are translated to CSS custom properties in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), allowing instant visual updates when tokens change.