Which CSS Properties Are Captured During Token Extraction in AI Website Cloner?

The AI Website Cloner extracts ten distinct categories of CSS properties—including colors, typography, spacing, border radius, shadows, breakpoints, icons, avatars, buttons, and inputs—to generate a comprehensive Tailwind CSS configuration using oklch color values.

During the design-token extraction phase, the JCodesMore/ai-website-cloner-template repository automatically inventories the visual language of any target website. These captured CSS properties serve as the single source of truth for the generated project's styling system, documented in docs/research/DESIGN_TOKENS.md and implemented through Tailwind CSS v4 with oklch design tokens.

Complete List of CSS Properties Captured During Token Extraction

According to docs/research/INSPECTION_GUIDE.md (lines 19‑25), the extraction process catalogs the following CSS properties into structured design tokens:

Colors

Background values, primary and secondary text colors, muted text variants, accent colors, border colors, hover states, and semantic colors for error, success, and warning states.

Typography

font-family declarations, font-size scales for headings (h1‑h6), body text, captions, and labels, plus font-weight, line-height, and letter-spacing values.

Spacing

Padding and margin patterns, typically captured as a modular scale such as 4 px, 8 px, 12 px, 16 px, 24 px, and 32 px increments.

Border Radius

Radius values applied to buttons, cards, avatars, and input fields.

Shadows and Elevation

box-shadow specifications for cards, dropdowns, modals, and other elevated components.

Breakpoints

Viewport widths where layout shifts occur, defining the responsive design grid.

Icons

Icon library identification, custom SVG dimensions, and CSS sizing rules applied to icon elements.

Avatars

Size constraints, shape definitions (circle or square), and fallback styling rules.

Buttons

Visual variants including primary, secondary, ghost, icon-only, and danger states, capturing color, border, radius, and shadow properties.

Inputs

Form control styling for text fields, textareas, selects, checkboxes, and toggles, including border styles, padding, and focus state visualization.

How the Token Extraction Process Works

The AI agent performs CSS property extraction using the browser's computed-style API, ensuring pixel-perfect value capture from the rendered target site. This automated inspection reads the specific properties listed in the inspection guide and persists the results to docs/research/DESIGN_TOKENS.md.

As implemented in the repository, the extraction targets the exact visual primitives needed to reconstruct the site's design system. The README (line 83) confirms that the template defaults to Tailwind CSS v4 with oklch color values, meaning extracted hex or rgb colors are converted to perceptually uniform oklch notation for the generated configuration.

Generating the Tailwind Configuration from Extracted Tokens

Captured CSS properties transform into a fully typed tailwind.config.ts file. The following example demonstrates how extracted values map to Tailwind theme extensions:

// tailwind.config.ts – generated from extracted design tokens
import type { Config } from 'tailwindcss';
export default {
  content: ['./src/**/*.{tsx,ts,js,jsx,mdx}'],
  theme: {
    extend: {
      colors: {
        // Example oklch colors extracted from the target site
        primary: 'oklch(55% 0.15 260)',
        secondary: 'oklch(80% 0.04 120)',
        error: 'oklch(60% 0.20 30)',
      },
      borderRadius: {
        btn: '0.5rem',
        card: '0.75rem',
        avatar: '9999px',
      },
      boxShadow: {
        card: '0 4px 12px oklch(0% 0 0 / 0.1)',
        modal: '0 8px 24px oklch(0% 0 0 / 0.2)',
      },
      spacing: {
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['Roboto Mono', 'monospace'],
      },
    },
  },
  plugins: [],
} satisfies Config;

CSS Custom Properties Fallback for Non-Tailwind Components

For components that do not use Tailwind utility classes, the system generates standard CSS custom properties derived from the same extracted tokens:

:root {
  /* Colors */
  --color-primary: oklch(55% 0.15 260);
  --color-secondary: oklch(80% 0.04 120);
  --color-error: oklch(60% 0.20 30);

  /* Border radius */
  --radius-btn: 0.5rem;
  --radius-card: 0.75rem;

  /* Shadows */
  --shadow-card: 0 4px 12px oklch(0% 0 0 / 0.1);
}

/* Example usage */
.button {
  background: var(--color-primary);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-card);
}

Summary

• The AI Website Cloner captures ten categories of CSS properties during token extraction, ranging from colors and typography to component-specific styles like buttons and avatars.
• The authoritative list is defined in docs/research/INSPECTION_GUIDE.md (lines 19‑25).
• Extraction uses the browser's computed-style API for pixel-perfect accuracy.
• Tokens are stored in docs/research/DESIGN_TOKENS.md and converted to oklch color values for Tailwind CSS v4 compatibility.
• Generated outputs include both tailwind.config.ts and CSS custom properties for maximum implementation flexibility.

Frequently Asked Questions

What file contains the official list of CSS properties to capture?

The complete specification resides in docs/research/INSPECTION_GUIDE.md at lines 19‑25. This document serves as the single source of truth for the AI agent during the extraction phase, defining exactly which CSS properties constitute the design token inventory.

How are extracted color values stored in the configuration?

Colors are converted to oklch notation, the default color space for Tailwind CSS v4 in this template. This provides better perceptual uniformity compared to hex or rgb values and ensures consistent color manipulation in the generated stylesheet.

Can the extracted tokens be used without Tailwind CSS?

Yes. The system generates CSS custom properties in :root as a fallback mechanism, allowing non-Tailwind components to reference the same design tokens through standard var() syntax while maintaining visual consistency.

Where does the AI write the extracted design tokens?

The tokens are documented in docs/research/DESIGN_TOKENS.md and subsequently transformed into the tailwind.config.ts file and CSS variable definitions, creating a maintainable, token-driven styling foundation for the generated Next.js project.

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