# How the AI-Website-Cloner Template Extracts Design Tokens from Target Websites

> Learn how the AI website cloner template extracts design tokens. It inspects live page styles and transforms them into Tailwind CSS custom properties and JSON artifacts for easy reuse.

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

---

**The template extracts design tokens by orchestrating a browser-MCP (Model Context Protocol) workflow that inspects computed styles on the live target page, then translates those values into Tailwind-compatible CSS custom properties and a JSON artifact.**

The `JCodesMore/ai-website-cloner-template` takes a unique approach to design system replication. Rather than employing static CSS parsers that fail against runtime-generated styles, the template uses live browser automation to extract design tokens directly from the rendered DOM.

## Why Browser Automation Beats Static Parsing

Traditional static analysis tools cannot extract design tokens defined in CSS variables, external stylesheets loaded dynamically, or values generated at runtime by JavaScript. When you invoke the `/clone-website <url>` command, the template launches a Chrome MCP (Model Context Protocol) environment that navigates to the target page and exposes the full computed style tree. This browser-driven approach captures the exact visual values users actually see, including colors in OKLCH or HSLA spaces, web font stacks, and responsive spacing scales.

## The Extraction Workflow Defined in clone-website.md

The specific steps for token extraction are documented in **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)**. This workflow file instructs the AI agent to perform targeted inspections of the live DOM using standard Web APIs.

### Discovering the Color Palette

The agent iterates over representative page elements and reads `getComputedStyle(element).color` and `backgroundColor` properties. It aggregates distinct values—whether hex, RGBA, HSLA, or OKLCH—into a deduplicated palette. This process captures the complete color system, including subtle variations that might be defined in CSS custom properties or calculated by the browser.

### Capturing Typography

To extract font information, the agent queries **`document.fonts`** to discover loaded typefaces and inspects `getComputedStyle(element).fontFamily` to record complete fallback stacks. This ensures the cloned site preserves the original typography hierarchy, including system fonts and web-loaded families.

### Deriving Spacing Scales

The workflow inspects layout containers for `margin`, `padding`, `gap`, and `grid` values. By analyzing these computed dimensions across multiple elements, the agent derives a consistent spacing scale that mirrors the original site's visual rhythm and layout density.

## Token Storage and Persistence

After extraction, the template persists tokens in two locations. First, raw values are saved as **`docs/research/<hostname>/tokens.json`**, creating a reproducible data source for subsequent build steps. Second, the values are translated into CSS custom properties inside **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)**, mapped to shadcn/ui token names like `--background`, `--primary`, and `--foreground` within `:root` and `.dark` blocks.

## Integration with Tailwind v4

The repository's **[`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts)** is configured to read the CSS custom properties generated in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css). This enables the final build to emit a design system that faithfully mirrors the original site using modern color spaces. As noted in the repository's [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md), the template specifically leverages OKLCH for perceptually uniform color reproduction.

## Code Implementation Examples

The actual style reading is performed by JavaScript injected into the page via the MCP. This snippet runs in the browser context to access computed styles hidden from static analysis:

```javascript
// This snippet runs inside the target page via the MCP
(async () => {
  const elements = Array.from(document.querySelectorAll('*'));
  const colors = new Set();

  for (const el of elements) {
    const style = getComputedStyle(el);
    if (style.color) colors.add(style.color);
    if (style.backgroundColor) colors.add(style.backgroundColor);
  }

  // Return a deduped array of CSS color strings
  return Array.from(colors);
})();

```

On the Node.js side, the extracted palette is written to the global stylesheet:

```ts
import { writeFileSync } from 'fs';
import { resolve } from 'path';

function updateGlobalsCss(palette: string[]) {
  const css = palette
    .map((c, i) => `  --color-${i + 1}: ${c};`)
    .join('\n');

  const content = `:root {\n${css}\n}\n`;
  writeFileSync(resolve('src/app/globals.css'), content, { flag: 'a' });
}

```

The resulting artifact follows this structure:

```json
{
  "colors": ["#1a202c", "#2d3748", "#4a5568"],
  "fonts": ["Inter, sans-serif", "Georgia, serif"],
  "spacing": ["0.25rem", "0.5rem", "1rem"]
}

```

## Summary

- The template extracts design tokens using **browser-MCP automation** rather than static parsing, ensuring runtime-generated styles are captured.
- Extraction logic is defined in **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)**, which guides the agent to inspect `getComputedStyle`, `document.fonts`, and layout properties.
- Discovered tokens are persisted to **`docs/research/<hostname>/tokens.json`** and **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** as CSS custom properties mapped to shadcn/ui variables.
- The pipeline integrates with **Tailwind v4** and uses **OKLCH** color spaces for accurate visual reproduction.
- This process is fully isolated per target site, ensuring each cloned project maintains its own precise design foundation.

## Frequently Asked Questions

### Does the template use a CSS parser to extract design tokens?

No. According to the source code in `JCodesMore/ai-website-cloner-template`, the template delegates token extraction to a browser-MCP workflow. This approach accesses the rendered DOM and computed styles via Chrome MCP, capturing values that static CSS parsers miss, such as those defined in external stylesheets or generated at runtime.

### Where are the extracted design tokens stored?

The tokens are stored in two locations: a JSON artifact at **`docs/research/<hostname>/tokens.json`** for build-time consumption, and as 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. The CSS file maps these values to shadcn/ui token names like `--background` and `--primary`.

### How does the extraction handle dark mode variants?

The workflow writes tokens into both `:root` and `.dark` CSS blocks in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). This dual-block structure allows the template to capture and replicate the original site's light and dark color schemes, which are then applied through the standard shadcn/ui theming system.

### Can the template capture fonts loaded dynamically by JavaScript?

Yes. Because the extraction script runs inside the browser context via the MCP, it can query **`document.fonts`** to discover typefaces loaded dynamically. This allows the template to record complete font stacks including web fonts that would be invisible to static analysis tools.