How to Extract and Configure Design Tokens (Colors, Fonts, Spacing) from a Target Website

The AI Website Cloner extracts design tokens during the Reconnaissance phase by inspecting computed CSS values, exports them to docs/research/DESIGN_TOKENS.md, and configures them in src/app/globals.css to ensure the cloned site matches the original’s visual language.

The JCodesMore/ai-website-cloner-template automates the extraction and configuration of design tokens from any target website during its Reconnaissance phase. This process captures the exact colors, typography, and spacing scales used by the source site and transplants them into your Next.js project's global styles. By leveraging the clone-website skill and the cn utility in src/lib/utils.ts, the template ensures that every Tailwind CSS class references the precise visual variables of the original design.

The Three-Phase Token Extraction Pipeline

The process to extract and configure design tokens follows a structured pipeline defined in the repository's workflow files. Each phase ensures that no visual detail is lost when transitioning from the target site to your cloned implementation.

Phase 1: Capture Tokens During Reconnaissance

During the Reconnaissance phase, the AI agent opens the target URL and extracts computed styles using getComputedStyle() on DOM nodes. According to the inspection guide in docs/research/INSPECTION_GUIDE.md, you must record specific computed values:

• Colors: Background, text, accent, border, hover states, error, success, and warning values
• Typography: Font family, size, weight, line-height, and letter-spacing
• Spacing: Padding and margin scales (typically 4px, 8px, 12px, 16px increments)

The agent uses Chrome MCP or any DevTools-compatible inspector to browse the target site and capture these values systematically.

Phase 2: Export to DESIGN_TOKENS.md

Once captured, the agent writes a markdown specification file at docs/research/DESIGN_TOKENS.md. This file enumerates every token with its CSS variable name and raw value, serving as the single source of truth for the project's visual language.

The skill definition in .github/skills/clone-website/SKILL.md (line 59) drives this automated generation, ensuring consistent naming conventions and value mapping across all cloned projects.

Phase 3: Configure Global Styles

The final phase transplants the extracted tokens into src/app/globals.css. As documented in .windsurf/workflows/clone-website.md (lines 131-184), the agent updates:

• The :root block with light-mode color variables
• The .dark block with dark-mode equivalents
• Custom CSS variables for tokens that don't map directly to Shadcn UI's default palette

This configuration ensures that the tailwind.config.ts can reference the same design tokens via the cn() utility, and every Shadcn UI component inherits the exact visual properties of the original site.

Key Files in the Token Extraction Workflow

Understanding where design tokens live in the codebase helps you manually verify or override automated extractions:

• docs/research/INSPECTION_GUIDE.md: Contains the checklist for which computed values to collect during reconnaissance
• docs/research/DESIGN_TOKENS.md: The auto-generated specification file mapping token names to CSS values
• src/app/globals.css: The global stylesheet where CSS custom properties are defined in :root and .dark blocks
• src/lib/utils.ts: Houses the cn() utility function that bridges Tailwind classes with CSS variables
• .github/skills/clone-website/SKILL.md: Defines the automation logic for token extraction at line 59
• .windsurf/workflows/clone-website.md: Documents the detailed workflow for updating global CSS between lines 131-184

Integrating Tokens with Tailwind CSS and Shadcn UI

The template uses a variable-first approach to theming. After configuration in globals.css, Tailwind's extend.theme reads the CSS variables, allowing utility classes like bg-primary and text-foreground to resolve to your extracted values.

The cn() utility in src/lib/utils.ts merges Tailwind classes while respecting these CSS variables, ensuring that component compositions maintain the target site's visual hierarchy and spacing relationships.

Code Examples

Sample DESIGN_TOKENS.md Output

The AI agent generates this specification automatically after inspecting the target site:

# Design Tokens

## Colors

- --color-primary: #0d9efd
- --color-background: #ffffff
- --color-foreground: #111111
- --color-muted: #f5f5f5
- --color-error: #e53935

## Typography

- --font-sans: "Inter", ui-sans-serif, system-ui
- --font-size-base: 1rem   /* 16px */
- --font-weight-bold: 700

## Spacing

- --spacing-1: 4px
- --spacing-2: 8px
- --spacing-3: 12px
- --spacing-4: 16px

Configuring globals.css

Based on the token spec above, update src/app/globals.css with the extracted values:

/* src/app/globals.css */
:root {
  --color-primary: #0d9efd;
  --color-background: #ffffff;
  --color-foreground: #111111;
  --color-muted: #f5f5f5;
  --color-error: #e53935;

  --font-sans: "Inter", ui-sans-serif, system-ui;
  --font-size-base: 1rem;
  --font-weight-bold: 700;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
}

/* Dark mode overrides */
.dark {
  --color-background: #111111;
  --color-foreground: #ffffff;
  /* …other dark values… */
}

Using Tokens in Components

Reference the CSS variables through Tailwind utilities in your components. The cn() utility ensures proper class merging:

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

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

In this example, bg-primary and text-foreground resolve to the CSS variables defined in globals.css, ensuring the button matches the original site's appearance pixel-for-pixel.

Summary

• Extract design tokens during the Reconnaissance phase by inspecting computed CSS values from the target website using the methodology defined in docs/research/INSPECTION_GUIDE.md
• Export captured values to docs/research/DESIGN_TOKENS.md automatically via the clone-website skill defined in .github/skills/clone-website/SKILL.md
• Configure global styles by transplanting tokens into src/app/globals.css within the :root and .dark blocks, as documented in .windsurf/workflows/clone-website.md
• Integrate with Tailwind through the cn() utility in src/lib/utils.ts, enabling utility classes to reference your custom CSS variables
• Maintain visual fidelity by ensuring all Shadcn UI components inherit the exact colors, fonts, and spacing scales from the source site

Frequently Asked Questions

What specific design tokens does the AI Website Cloner extract?

The template extracts three categories of design tokens: colors (background, text, accent, border, hover, error, success, warning), typography (font family, size, weight, line-height, letter-spacing), and spacing (padding and margin scales). The specific checklist for extraction is defined in docs/research/INSPECTION_GUIDE.md under the "Design Tokens to Extract" section.

How does the clone-website skill automate token extraction?

The skill defined in .github/skills/clone-website/SKILL.md at line 59 drives an automated process where the AI agent uses browser DevTools to call getComputedStyle() on DOM nodes, captures the computed values, and generates the DESIGN_TOKENS.md specification file. This eliminates manual copy-pasting and ensures comprehensive token capture from the target website.

Can I manually override extracted design tokens?

Yes. After the automated extraction, you can manually edit docs/research/DESIGN_TOKENS.md to adjust values, then update src/app/globals.css to reflect your changes. The modular CSS variable architecture allows you to tweak specific tokens—such as changing a primary brand color or adjusting the spacing scale—without breaking the Tailwind integration managed by the cn() utility.

How do dark mode tokens work in this template?

Dark mode tokens are configured in the .dark block within src/app/globals.css. During the Reconnaissance phase, the AI inspects the target site's dark mode values (if available) and maps them to CSS variables that override the light mode :root values when the dark class is applied to the HTML element. This ensures the cloned site supports theme switching with the exact color values from the original implementation.

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