Limitations of Websites That Can Be Cloned with the AI Website Cloner Template

The AI Website Cloner Template can only replicate publicly accessible, static front-end interfaces using browser automation, and cannot recreate server-side logic, authentication systems, databases, or complex client-side JavaScript state machines.

The AI Website Cloner Template from JCodesMore/ai-website-cloner-template generates pixel-perfect Next.js replicas by driving browser automation tools like Chrome MCP or Playwright MCP. While powerful for front-end reconstruction, the pipeline has specific architectural constraints that limit which websites can be successfully cloned. Understanding these limitations of websites that can be cloned helps you determine whether your target URL is compatible with the extraction workflow defined in .github/skills/clone-website/SKILL.md.

Browser Automation Requirements

The cloning process begins with a Reconnaissance phase that mandates a real browser connection. According to the Pre-Flight checklist in .github/skills/clone-website/SKILL.md, the skill aborts immediately if no MCP tool is available.

# This succeeds - launches browser automation first

claude --chrome
/clone-website https://example.com

# This fails - no browser automation available

/clone-website https://example.com

# Error: Browser automation is required

Without a functioning browser MCP tool, the extractor cannot capture screenshots, computed CSS, or DOM state, making the cloning process impossible.

Static UI Extraction Only

The pipeline is deliberately scoped to front-end reconstruction. The Scope Defaults section in SKILL.md explicitly lists several capabilities as out of scope:

• Real backend or database – Server-side rendering logic and database queries are not replicated
• Authentication systems – Login states, session management, and protected routes cannot be cloned
• Real-time features – WebSockets, live updates, and streaming data are omitted
• SEO optimization – Meta tags, structured data, and server-side SEO are not preserved
• Accessibility audits – ARIA labels and screen reader optimizations are not verified

The tool extracts visual layout, styling, assets, and basic UI interactions, but the resulting Next.js application is fundamentally a static representation of the original interface.

Authentication and Access Barriers

URLs must resolve without requiring a login prompt. The skill file mandates that you "Parse $ARGUMENTS as one or more URLs … verify it is accessible via your browser MCP tool". This creates a hard constraint against gated content:

# Attempting to clone a protected dashboard

/clone-website https://my-private-dashboard.com

# Result: Pre-flight check fails - URL requires authentication

Sites protected by CAPTCHA, token-based API calls, or session cookies cannot be processed because the extractor only works with the DOM presented to the browser. You must first provide a logged-in session outside the scope of the template, or select a different target.

Asset and Font Limitations

The Phase 2 asset-discovery script assumes direct src URLs are fetchable. While the tool copies fonts, images, and SVGs that are publicly reachable, it fails when encountering:

• CDN-blocked resources – Assets behind CDNs that block automated downloads return 403 errors
• Proprietary font licensing – Subscription-based fonts or base64-encoded font obfuscation may not transfer correctly
• Dynamic asset generation – Images generated by JavaScript canvas elements or CSS shaders are captured as static snapshots, not living code

Downloaded assets populate the public/ directory and are referenced in src/app/globals.css and src/app/layout.tsx, but missing assets will result in broken links or fallback system fonts.

Complex Client-Side Logic Constraints

Interaction models relying on heavy custom JavaScript are difficult to capture accurately. The "What NOT to Do" list in SKILL.md warns against building mockups for content that is actually video or animation, noting that missing exact JavaScript behavior leads to broken clones.

Specific problematic patterns include:

• Complex state machines – Multi-step forms with intricate validation logic
• Canvas-driven UI – Games, data visualizations, or image editors using HTML5 Canvas
• Third-party widgets – Embeds that load external scripts dynamically
• Heavy animation libraries – GSAP or Framer Motion sequences that depend on specific timing

The extractor records computed CSS and DOM events, but cannot reverse-engineer arbitrary JavaScript execution flows.

Responsive Design Constraints

The Responsive sweep step only tests three viewport widths: desktop (1440px), tablet (768px), and mobile (390px). Sites employing many custom breakpoints between these values may lose fidelity. If a design shifts layout at 1024px or 480px, those intermediate states are not captured in the component specifications generated under docs/research/components/.

Complexity Budget and Spec Size Limits

The Complexity budget rule caps specification files at approximately 150 lines. When the extractor produces a component spec exceeding this limit, the pipeline automatically triggers a split or halts:

[ ] Spec file written to docs/research/components/<name>.spec.md with ALL sections filled

# If check fails:

Error: Component exceeds complexity budget (~150 lines)
Action required: Break into smaller sub-components

Extremely large components require manual partitioning, increasing the effort required to complete the clone.

Legal and Policy Restrictions

The README.md explicitly prohibits usage for phishing, impersonation, or any activity violating a site's terms of service. The "Not Intended For" section warns against:

• Deceptive practices targeting users or brands
• Scraping sites that explicitly prohibit reproduction in their ToS
• Commercial redistribution of cloned proprietary designs

Attempting to run the skill on prohibited domains should trigger an immediate abort rather than proceeding with extraction.

Summary

• Browser automation is mandatory – The skill requires Chrome MCP or Playwright MCP to function; without it, the pre-flight check fails.
• Only static front-ends – Server logic, databases, authentication, and real-time features are explicitly out of scope per SKILL.md.
• Public URLs only – Gated content, CAPTCHAs, and login-required pages cannot be processed.
• Asset dependencies – Blocked CDN resources and proprietary fonts may result in missing visual elements.
• JavaScript limitations – Complex state machines, canvas rendering, and third-party widgets often break or simplify during extraction.
• Three-breakpoint restriction – Responsive designs with custom breakpoints between 390px, 768px, and 1440px may lose fidelity.
• 150-line spec limit – Large components must be manually partitioned when they exceed the complexity budget.

Frequently Asked Questions

Can the AI Website Cloner Template clone websites that require login?

No. The template can only process publicly accessible URLs that resolve without authentication. According to .github/skills/clone-website/SKILL.md, the extractor verifies that URLs are accessible via your browser MCP tool, and sites requiring session cookies or token-based authentication will fail the pre-flight check. You must either manually recreate authentication flows after cloning or choose a publicly accessible version of the page.

Does the cloner capture backend functionality and databases?

No. The Scope Defaults section explicitly lists real backends and databases as out of scope. The tool extracts only the visual presentation layer—computed CSS, DOM structure, and static assets—producing a Next.js frontend that mimics the appearance but not the functionality of server-side logic. Any dynamic data must be mocked or manually reimplemented after cloning.

Why are some fonts or images missing in the cloned website?

Assets hosted on CDNs that block automated downloads or protected by referrer checks cannot be fetched during the Phase 2 asset-discovery phase. The script assumes direct src URLs are reachable. Proprietary fonts requiring subscription licenses or complex authentication will also fail to transfer, resulting in fallback fonts or broken image links in the generated public/ directory.

What happens if a website component is too complex?

The Complexity budget rule enforces a ~150-line limit on specification files in docs/research/components/. If extraction generates a spec exceeding this limit, the pipeline stops and prompts you to break the component into smaller sub-components. This prevents builder agents from being overwhelmed but requires manual intervention for extremely large or intricate interface sections.

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