Common Extraction Failures in AI Website Cloner: 6 Critical Issues and How to Troubleshoot Them

Most extraction failures in the AI Website Cloner stem from incomplete CSS capture, missing lazy-loaded assets, and ignored component states, which can be diagnosed by inspecting generated spec files and resolved by re-running extraction with full getComputedStyle() and state simulation.

The AI Website Cloner automates website replication by inspecting target sites in the browser and generating component specifications. When using the JCodesMore/ai-website-cloner-template, understanding these common extraction failures ensures you can quickly troubleshoot issues and produce accurate clones. This guide covers the six primary failure modes and their specific fixes based on the source implementation.

The Six Most Common Extraction Failures

1. Incomplete CSS Extraction

The extraction script often captures only default states or hand-measures a few properties instead of pulling the full computed style object. This results in missing style keys like padding, border-radius, or box-shadow in the generated specification.

How to diagnose: Open the generated spec file (e.g., docs/research/components/<Component>.md) and verify that all computed style properties are present.

Fix: Re-run the extraction script using the extractStyles helper to ensure the full getComputedStyle() output is stored. According to .windsurf/workflows/clone-website.md (lines 259-272), the extraction must capture every property in the computed style object:

function extractStyles(element: Element) {
  const computed = getComputedStyle(element);
  const style: Record<string, string> = {};

  // Capture every property (the loop ensures completeness)
  for (const name of computed) {
    style[name] = computed.getPropertyValue(name);
  }

  return { styles: style };
}

2. Missing Asset Files (Images, Videos, SVGs)

The script downloads assets only for elements visible in the initial viewport, skipping lazy-loaded or off-screen content. This causes broken UI elements in the final clone when assets fail to load.

How to diagnose: Check the public/images/ or public/videos/ folders for expected filenames referenced in your component specs.

Fix: Scroll the page in the browser MCP before running the extractor, or manually trigger asset downloads for lazy-loaded elements. Ensure the extraction loop visits all sections, not just the first view.

3. Ignoring Component States (Hover, Active, Focus, Loading)

The extractor typically runs once per element, capturing only the currently rendered state. This misses critical interaction states like hover effects, focus rings, or loading spinners.

How to diagnose: Compare the spec file against the live site by hovering over buttons on the original and verifying the cloned component has matching hover styles.

Fix: Perform a second extraction after simulating state changes. As documented in .windsurf/workflows/clone-website.md (lines 448-452), "Don't extract only the default state." Trigger events programmatically before extraction:

el.dispatchEvent(new Event("mouseover"));
const hoverSpec = extractStyles(el);
// Merge hoverSpec.styles into the component spec under a "hover" key

4. Skipping Responsive Breakpoints

Extraction runs at a single viewport size (usually desktop), causing mobile or tablet layouts to break in the cloned site even when desktop appears correct.

How to diagnose: Open the spec file and look for missing media-query entries or responsive style variations.

Fix: Run the extractor at multiple widths (1440px, 768px, 390px) and record computed styles for each breakpoint. The documentation recommends testing three sizes as noted in .windsurf/workflows/clone-website.md (lines 456-460).

5. Faulty Specification Files

Malformed JSON/YAML, truncated content, or missing keys in the spec file cause the builder agent to fail or generate incorrect code.

How to diagnose: Builder logs will reference "spec file missing property X" errors. Open the spec file to confirm it is complete and correctly formatted.

Fix: Regenerate the spec by re-extracting the component, double-checking the styles and content sections, and committing the updated file before re-dispatching the builder.

6. Overly Complex Component Specs

Specs exceeding approximately 150 lines overwhelm the builder agent, causing truncation or misinterpretation of the component data.

How to diagnose: Check the line count of generated specs in your diff view.

Fix: Split the component into smaller sub-components (e.g., separate card variants) following the Complexity budget rule from .windsurf/workflows/clone-website.md (lines 46-48).

How to Troubleshoot Extraction Failures

When you encounter common extraction failures, follow this systematic workflow to identify and resolve issues:

1. Verify extraction script execution – Confirm the extractStyles helper runs for each target element.
2. Inspect generated spec files – Look for missing style keys, asset references, or incomplete state sections.
3. Rerun extraction for problematic elements – Simulate required states (hover, scroll) and capture responsive breakpoints.
4. Commit corrected specs – Ensure the builder receives a clean, complete contract.
5. Re-dispatch the builder – The system automatically picks up the updated spec and rebuilds the component.

As noted in .windsurf/workflows/clone-website.md (lines 420-424): "If the spec was wrong: re-extract from browser MCP, update the spec, fix the component."

Fixing Extraction Issues with Code Examples

Use this extraction pattern when running the browser MCP to capture complete component data:

// Pseudo-code executed inside the browser MCP
const containers = document.querySelectorAll("[data-clone-section]");
containers.forEach((el) => {
  const spec = {
    element: el.outerHTML,
    ...extractStyles(el),               // Full CSS snapshot
    content: el.textContent?.trim() ?? "", // Real text content
  };
  // Write spec to docs/research/components/<name>.md
});

For multi-state components, execute state changes before extraction:

// Capture default state
const defaultSpec = extractStyles(el);

// Capture hover state
el.dispatchEvent(new Event("mouseover"));
const hoverSpec = extractStyles(el);

// Merge into final specification
const finalSpec = {
  ...defaultSpec,
  states: {
    hover: hoverSpec.styles
  }
};

Key Files for Debugging

Understanding these source files helps you troubleshoot common extraction failures effectively:

• .windsurf/workflows/clone-website.md – Contains the central extraction rules, complexity budget guidelines, and troubleshooting steps referenced throughout this guide.
• docs/research/INSPECTION_GUIDE.md – Outlines what to capture including design tokens, states, and breakpoints.
• docs/research/components/<Component>.md – Runtime-generated spec files where extraction data is stored for each UI piece.
• .github/skills/clone-website/SKILL.md – Defines the command that triggers the pipeline, including extraction guidance.

Summary

• Incomplete CSS extraction occurs when getComputedStyle() loops are skipped; always capture the full computed style object.
• Missing assets result from viewport-limited extraction; scroll the page before running the extractor.
• Ignored states require event simulation (e.g., dispatchEvent(new Event('mouseover'))) before extraction.
• Responsive failures happen at single viewport sizes; extract at 1440px, 768px, and 390px.
• Faulty specs cause builder failures; validate JSON/YAML syntax and required keys.
• Complexity overload occurs above 150 lines; split components according to the complexity budget rule.

Frequently Asked Questions

Why are my cloned components missing hover effects?

Missing hover effects occur when the extractor only captures the default state. You must simulate the hover state using element.dispatchEvent(new Event('mouseover')) before running extractStyles(), then merge those styles into your component specification under a "hover" key.

How do I know if my extraction captured all CSS properties?

Check the generated spec file in docs/research/components/ for completeness. If properties like padding, border-radius, or box-shadow are missing, your extraction script likely used manual property selection instead of iterating through the full getComputedStyle() object. Re-run extraction using the loop-based extractStyles helper shown in .windsurf/workflows/clone-website.md.

What causes the builder to fail with "spec file missing property" errors?

This indicates a malformed or incomplete specification file. The builder expects complete JSON/YAML with all required styles and content keys. Regenerate the spec by re-extracting the component, ensure the file is properly formatted, and commit the corrected version before re-dispatching the builder.

How do I fix mobile layout issues in my cloned website?

Mobile layout failures stem from extracting at a single desktop viewport. Run the extraction process at multiple breakpoints (1440px, 768px, and 390px) as recommended in the workflow documentation, and ensure each breakpoint's computed styles are recorded in the component specification.

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