How CSS Is Generated and Adapted for Cloned Sites in the AI Website Cloner Template

The template extracts design tokens from the target website using getComputedStyle(), injects them as CSS custom properties into src/app/globals.css, and compiles Tailwind 4 via PostCSS to produce pixel-perfect stylesheets.

The JCodesMore/ai-website-cloner-template repository implements a data-driven CSS generation pipeline that mirrors the styling of any target website. By harvesting design tokens directly from the source and feeding them into a Tailwind 4-based build system, the template ensures that cloned sites match the original pixel-for-pixel while maintaining responsive and theming capabilities.

Three-Stage CSS Generation Pipeline

The CSS adaptation process follows three tightly-coupled stages that transform scraped visual data into a compiled stylesheet.

Stage 1: Design Token Extraction

During the Reconnaissance phase, the AI agent scrapes the target page and calls getComputedStyle() on every relevant element. This captures exact values for colors, spacing, border radius, and font families. These raw values are written into CSS custom properties within :root and .dark blocks, stored in the generated output under docs/research/. For example, the primary brand color is recorded as --color-primary: oklch(0.205 0 0);.

Stage 2: Global CSS Scaffolding

The src/app/globals.css file serves as the central stylesheet that bridges extracted tokens with Tailwind's utility system. It imports Tailwind's base, the Shadcn UI pre-flight styles, and defines a custom dark-mode variant:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

The extracted design tokens are injected after these imports, creating a single source of truth for variables like --color-primary, --radius-lg, and font families.

Stage 3: Tailwind Compilation

The project runs Tailwind 4 via PostCSS as configured in postcss.config.mjs. The @tailwindcss/postcss plugin processes the @tailwind directives, resolves utility classes like bg-primary and rounded-lg against the custom properties, and outputs a final styles.css. Next.js automatically bundles and serves this compiled stylesheet.

Design Token Structure and Dark Mode Support

The template generates separate variable blocks for light and dark themes. The :root selector holds default tokens, while the .dark class overrides them for dark mode. This approach enables immediate theming without JavaScript runtime calculations.

Example generated token block:

:root {
  --color-primary: oklch(0.205 0 0);
  --radius-lg: calc(var(--radius) * 1);
  --font-family-sans: "Inter", sans-serif;
}

.dark {
  --color-primary: oklch(0.95 0 0);
  --color-background: oklch(0.145 0 0);
}

Components reference these tokens through Tailwind utilities:

<button className="bg-primary dark:bg-primary-foreground text-white rounded-lg">
  Toggle
</button>

Safe Class Composition with tailwind-merge

To prevent conflicting utility classes at runtime, the repository uses tailwind-merge wrapped in a cn utility function. Located in src/lib/utils.ts, this helper safely combines Tailwind class strings.

import { twMerge } from "tailwind-merge";
import { clsx, type ClassValue } from "clsx";

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

Usage in components ensures that dynamic class assignments don't create duplicate or conflicting utilities:

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

export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("bg-primary rounded-lg p-4 shadow-lg", className)}>
      {children}
    </div>
  );
}

Key Configuration Files

The CSS adaptation relies on several specific files in the repository:

File	Role
src/app/globals.css	Imports Tailwind, defines custom variants, and hosts the extracted design-token variables.
postcss.config.mjs	Configures PostCSS to run the @tailwindcss/postcss plugin for Tailwind 4 compilation.
package.json	Declares Tailwind 4, @tailwindcss/postcss, and tailwind-merge dependencies.
src/lib/utils.ts	Provides the cn wrapper around twMerge for safe class-name composition.
docs/research/	Contains the raw token extraction output that populates the :root and .dark blocks.

Summary

• Design tokens are extracted from the target website using getComputedStyle() during the Reconnaissance phase.
• Global CSS scaffolding in src/app/globals.css imports Tailwind 4 and injects custom properties for both light and dark modes.
• Tailwind compilation via PostCSS processes the tokens and generates utility classes that match the original site's exact values.
• Runtime safety is ensured through the cn utility in src/lib/utils.ts, which uses tailwind-merge to prevent class conflicts.
• The pipeline is data-driven, allowing the cloned site to mirror the original design while maintaining Tailwind's responsive capabilities.

Frequently Asked Questions

How does the template extract exact colors from the target website?

The AI agent uses Chrome MCP or a similar browser tool to call window.getComputedStyle(element) on every relevant DOM node. It records the computed values for color, spacing, typography, and border radius, then writes these as CSS custom properties (e.g., --color-primary: oklch(0.205 0 0);) into the generated stylesheet.

What version of Tailwind does the AI Website Cloner Template use?

The template uses Tailwind 4, which runs via PostCSS as specified in postcss.config.mjs and package.json. This version processes the @import "tailwindcss" directive in src/app/globals.css and compiles utility classes against the injected design tokens.

How does the template handle dark mode in the generated CSS?

Dark mode is implemented through a custom variant defined in src/app/globals.css using @custom-variant dark (&:is(.dark *)). The token extraction generates separate variable blocks for :root (light mode) and .dark (dark mode), allowing Tailwind utilities like dark:bg-primary-foreground to resolve correctly.

Where are the extracted design tokens stored before compilation?

The raw token extraction output is stored in the docs/research/ directory (generated during the cloning process). These values are then injected into src/app/globals.css as CSS custom properties within :root and .dark blocks, where Tailwind 4 reads them during compilation.

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