How Computed CSS Values Are Extracted Using the MCP Script in AI Website Cloner

The JCodesMore/ai-website-cloner-template extracts exact computed CSS values by executing JavaScript via a browser MCP tool that calls getComputedStyle() on DOM elements and serializes the results to JSON for component specifications.

This repository implements a browser-based MCP (Model-Context-Protocol) script to capture pixel-perfect styling from target websites. The extraction process runs inside the browser context through tools like Chrome MCP or Playwright MCP, ensuring that final computed values—including inherited and calculated properties—are preserved rather than approximated.

Browser MCP Setup and Execution Context

The workflow begins by verifying that a browser MCP tool is available, as documented in .windsurf/workflows/clone-website.md (Pre‑Flight section). Unlike static analysis tools that parse CSS files, this approach executes JavaScript directly inside the target page's runtime environment. This allows the script to access the CSS Object Model and retrieve values that account for inheritance, media queries, and dynamic JavaScript modifications.

The MCP runner injects a discovery script into the page context, captures the returned JSON payload, and writes the results to the repository's public/ or docs/ folders for downstream processing.

Global Asset Discovery and CSS Extraction

The primary extraction script walks the entire DOM, calling getComputedStyle() on every relevant element to build a comprehensive asset inventory. This code block, located in .windsurf/workflows/clone-website.md (lines 190‑200), executes via the browser MCP console:

// Run this via browser MCP to discover all assets
JSON.stringify({
  images: [...document.querySelectorAll('img')].map(img => ({
    src: img.src || img.currentSrc,
    alt: img.alt,
    width: img.naturalWidth,
    height: img.naturalHeight,
    parentClasses: img.parentElement?.className,
    siblings: img.parentElement ? [...img.parentElement.querySelectorAll('img')].length : 0,
    /** Computed CSS values */
    position: getComputedStyle(img).position,
    zIndex: getComputedStyle(img).zIndex
  })),
  videos: [...document.querySelectorAll('video')].map(v => ({
    src: v.src || v.querySelector('source')?.src,
    poster: v.poster,
    autoplay: v.autoplay,
    loop: v.loop,
    muted: v.muted
  })),
  backgroundImages: [...document.querySelectorAll('*')]
    .filter(el => {
      const bg = getComputedStyle(el).backgroundImage;
      return bg && bg !== 'none';
    })
    .map(el => ({
      url: getComputedStyle(el).backgroundImage,
      element: el.tagName + '.' + el.className?.split(' ')[0]
    })),
  /** Font families for the whole page */
  fonts: [...new Set([...document.querySelectorAll('*')].slice(0, 200)
            .map(el => getComputedStyle(el).fontFamily))],
  favicons: [...document.querySelectorAll('link[rel*="icon"]')]
            .map(l => ({ href: l.href, sizes: l.sizes?.toString() }))
});

Key extraction points:

• Runtime accuracy: getComputedStyle(element) resolves all CSS variables, inheritance chains, and viewport-relative units to their final pixel or string values.
• Comprehensive coverage: The script captures position, zIndex, backgroundImage, and fontFamily from up to 200 elements to ensure no styling context is missed.
• JSON serialization: Results are emitted as a JSON string that the MCP runner captures and persists for builder agents.

Per-Component Computed Style Extraction

When documenting specific UI components, the workflow prescribes a targeted extraction pattern defined in .windsurf/workflows/clone-website.md (Component Specification section). This approach isolates individual elements using CSS selectors and extracts their complete computed style object:

// Per-component extraction — run via browser MCP
// Replace SELECTOR with the actual CSS selector for the component
const cs = getComputedStyle(document.querySelector('SELECTOR'));
console.log(JSON.stringify(cs));

For example, to extract styles from a card component with the class .my-card:

const element = document.querySelector('.my-card');
const computed = getComputedStyle(element);
console.log(JSON.stringify(computed));

The serialized output contains every computed property—from margin and padding to display and color—which builder agents then reference to generate Tailwind utility classes or shadcn UI tokens.

Storing and Consuming Extracted CSS Data

The extracted JSON blobs flow into the repository's documentation layer according to the "Spec Files Are the Source of Truth" principle. The MCP runner writes computed style data to component specification files located in docs/research/components/…/*.spec.json:

# After running the MCP script and receiving JSON in $OUTPUT

cat <<EOF > docs/research/components/MyCard.spec.json
{
  "selector": ".my-card",
  "computedStyle": $OUTPUT,
  "screenshot": "docs/design-references/my-card.png"
}
EOF

Builder agents read these specifications to ensure pixel-perfect fidelity rather than approximations. Because the values originate from getComputedStyle() as implemented in JCodesMore/ai-website-cloner-template, they reflect the exact runtime state of the target website, including any JavaScript-modified styles or responsive breakpoints.

Additional documentation mirrors this extraction logic across agent platforms:

• .opencode/commands/clone-website.md contains identical getComputedStyle snippets for OpenCode agents.
• .github/skills/clone-website/SKILL.md reiterates the extraction steps for GitHub-based agents.

Summary

• Browser MCP execution: The script runs inside the page context via Chrome MCP or Playwright MCP, not during a standard npm build.
• getComputedStyle() usage: Every extraction calls this method on DOM elements to resolve final computed values for properties like position, zIndex, and fontFamily.
• Two-phase extraction: Global asset discovery scans up to 200 elements, while per-component extraction targets specific selectors for detailed documentation.
• JSON serialization: Results are stringified and stored in docs/research/components/*.spec.json files for builder agents to consume.
• Cross-platform consistency: The same extraction logic appears in .windsurf/workflows/clone-website.md, .opencode/commands/clone-website.md, and .github/skills/clone-website/SKILL.md.

Frequently Asked Questions

What is an MCP script in the context of computed CSS extraction?

An MCP (Model-Context-Protocol) script is a browser automation tool—such as Chrome MCP or Playwright MCP—that executes JavaScript inside a live webpage. In the JCodesMore/ai-website-cloner-template, this script calls getComputedStyle() on DOM elements to capture exact runtime CSS values that static file analysis cannot determine.

Which CSS properties does the extraction script capture?

The script captures all computed properties available through getComputedStyle(), including commonly referenced values like position, zIndex, backgroundImage, and fontFamily. The global extraction specifically targets these properties for images and background layers, while per-component extraction serializes the entire computed style object containing hundreds of properties including margins, padding, colors, and display values.

How does the per-component extraction differ from global asset discovery?

Global asset discovery scans the entire DOM (up to 200 elements) to build a site-wide inventory of images, videos, fonts, and background styles. Per-component extraction targets a specific CSS selector—such as .my-card—and extracts the complete computed style object for that single element. This allows builder agents to recreate individual components with precise styling rather than inferring values from the global stylesheet.

Where are the computed CSS values stored after extraction?

The JSON payloads containing computed CSS values are written to component specification files in docs/research/components/…/*.spec.json. These files serve as the source of truth for builder agents, which read the exact getComputedStyle() values to generate Tailwind classes, shadcn UI tokens, or custom CSS that matches the original website pixel-for-pixel.

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