# How Design Tokens Are Extracted and Applied in Next.js: An AI-Driven Workflow

> Discover how AI extracts design tokens like fonts, colors, and spacing from websites and applies them to your Next.js project with OKLCH CSS custom properties and Tailwind CSS.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-10

---

**The ai-website-cloner-template repository uses an AI agent with browser automation to scrape computed CSS values from target websites and injects them as OKLCH-based CSS custom properties into a Next.js v16 project, consumed via Tailwind CSS v4 and a `cn` utility helper.**

The JCodesMore/ai-website-cloner-template implements a complete pipeline for extracting visual design tokens—fonts, colors, spacing, and radii—from any website and applying them to a Next.js application. This system bridges design and development by converting raw computed styles into reusable CSS variables that power a Tailwind-based component library.

## Extraction via Browser Automation

The token extraction process begins with an AI-driven browser automation environment. According to the workflow defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), a "clone-website" agent runs inside Chrome MCP or Playwright MCP to navigate the target page and read computed CSS values.

The agent systematically walks the DOM and records:

- **Color values** from computed background, text, and border colors
- **Font families** and **font sizes** from typography elements
- **Spacing values** including margins, paddings, and gaps
- **Border radius** values for component rounding

These unique values are collected and prepared for injection into the Next.js project structure, eliminating manual design token creation.

## Token Storage in Global Stylesheets

Once extracted, the AI agent writes the collected values into [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). This file serves as the single source of truth for design tokens across the application.

### OKLCH Color Definitions

The template uses **OKLCH** color format for superior color space handling. The generated CSS creates two primary blocks:

```css
/* src/app/globals.css – Generated token blocks */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
  --radius: 0.625rem;
  --radius-lg: 0.75rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}

```

The `.dark` block provides automatic dark-mode overrides, enabling seamless theme switching without JavaScript logic.

### CSS Custom Properties Architecture

The `:root` selector defines the default light-mode tokens, while the `.dark` class contains the dark-mode palette. This architecture leverages CSS specificity and the cascade rather than JavaScript state management, improving performance and reducing hydration mismatches in the Next.js v16 environment.

## Tailwind CSS v4 Integration

The repository leverages **Tailwind CSS v4** with specific configurations to consume these CSS custom properties. The [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) file includes the `@custom-variant dark (&:is(.dark *))` rule, which enables Tailwind's dark mode variants to automatically reference the `.dark` token set.

Because design tokens live as CSS variables, Tailwind classes reference them directly using arbitrary value syntax:

- `bg-[var(--background)]` applies the background color token
- `text-[var(--foreground)]` applies the text color token
- `rounded-[var(--radius-lg)]` applies the large border radius token

This approach maintains the utility-first paradigm while keeping the actual values centralized and easily swappable.

## Runtime Consumption with the cn Helper

Components throughout `src/components/ui/*` consume these tokens through the `cn` helper function defined in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts). This utility merges Tailwind class strings using `tw-merge` and `clsx`:

```typescript
// src/lib/utils.ts – The cn helper merges Tailwind classes
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

```

In practice, developers use this helper to apply extracted tokens without hard-coding values:

```tsx
// Example component consuming extracted design tokens
export default function Card() {
  return (
    <div className={cn(
      "rounded-[var(--radius-lg)]",
      "bg-[var(--background)]",
      "text-[var(--foreground)]",
      "border border-[var(--border)]",
      "p-4"
    )}>
      <h2 className="font-[var(--font-heading)] text-lg">
        Card Title
      </h2>
      <p className="font-[var(--font-sans)]">
        Content styled with cloned fonts and colors.
      </p>
    </div>
  );
}

```

The `cn` function resolves class conflicts and ensures the final output uses the token-based values consistently across the component tree.

## Summary

- **Extraction**: The AI agent in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) uses browser automation to harvest computed CSS values including fonts, colors, and spacing.
- **Storage**: Extracted values are written as OKLCH color definitions and CSS custom properties in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css), supporting both `:root` and `.dark` modes.
- **Integration**: Tailwind CSS v4 consumes these tokens via `var()` references within utility classes, with dark mode enabled through custom variants.
- **Consumption**: The `cn` helper in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) merges Tailwind classes, allowing components to reference semantic tokens without hard-coding design values.

## Frequently Asked Questions

### Where are the extracted design tokens stored in the repository?

The extracted design tokens are stored in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) as CSS custom properties within `:root` and `.dark` blocks. This file is automatically updated by the AI agent during the cloning workflow described in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md).

### How does the AI agent extract font and color information from websites?

The agent runs inside a browser-automation environment using Chrome MCP or Playwright MCP. It traverses the target website's DOM, reads computed CSS values for typography and color, and records the unique set of tokens in preparation for writing to the global stylesheet.

### Why does the template use OKLCH format for colors?

The template uses OKLCH (Lightness, Chroma, Hue) color format because it provides perceptually uniform color spaces and better handling of lightness shifts compared to HSL or RGB. This ensures that the cloned colors maintain their visual relationships when switching between light and dark modes.

### How do React components access these design tokens?

Components access tokens through Tailwind utility classes that reference CSS variables (e.g., `bg-[var(--background)]`), combined with the `cn` helper function from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts). This utility merges class strings using `tw-merge` and `clsx`, allowing developers to compose token-based styles without embedding raw color or font values in component files.