# How to Extract and Configure Design Tokens (Colors, Fonts, Spacing) from a Target Website > Extract and configure design tokens like colors fonts and spacing from any website. Learn how AI Website Cloner inspects CSS and applies styles for accurate visual replication. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: tutorial - Published: 2026-07-01 --- **The AI Website Cloner extracts design tokens during the Reconnaissance phase by inspecting computed CSS values, exports them to [`docs/research/DESIGN_TOKENS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md), and configures them in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). As documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)**: Contains the checklist for which computed values to collect during reconnaissance - **[`docs/research/DESIGN_TOKENS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md)**: The auto-generated specification file mapping token names to CSS values - **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)**: The global stylesheet where CSS custom properties are defined in `:root` and `.dark` blocks - **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)**: Houses the `cn()` utility function that bridges Tailwind classes with CSS variables - **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)**: Defines the automation logic for token extraction at line 59 - **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```markdown # 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) with the extracted values: ```css /* 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: ```tsx import { cn } from '@/lib/utils'; export function PrimaryButton({ children }: { children: React.ReactNode }) { return ( ); } ``` In this example, `bg-primary` and `text-foreground` resolve to the CSS variables defined in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md) - **Export captured values** to [`docs/research/DESIGN_TOKENS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md) automatically via the `clone-website` skill defined in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) - **Configure global styles** by transplanting tokens into [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) within the `:root` and `.dark` blocks, as documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) - **Integrate with Tailwind** through the `cn()` utility in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md) to adjust values, then update [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.