Limitations of the Website Cloning Feature: Technical Scope and Constraints

The website cloning feature generates static frontend code only and cannot replicate backend logic, databases, authentication flows, or real-time APIs, while requiring functional browser MCP tools and manual post-processing for SEO and accessibility compliance.

The website cloning feature in the JCodesMore/ai-website-cloner-template repository automates the reverse-engineering of live websites into Next.js + shadcn/ui + Tailwind v4 codebases. While the tool delivers pixel-perfect visual replication through browser automation, it operates within strict architectural boundaries defined in .opencode/commands/clone-website.md that limit its scope to static frontend reproduction.

Backend Logic and Dynamic Features Are Excluded

The clone deliberately restricts its scope to what can be captured reliably by browser automation. According to .opencode/commands/clone-website.md (lines 20-23), the pipeline constructs only a static front-end that mimics visual and interaction behavior.

Server-Side Logic and Databases

The generated codebase never reproduces server-side logic, databases, authentication flows, WebSockets, or real-time APIs. Any content generated by server-side processes or pulled from databases at request time is excluded from the final output, as the tool only extracts what is rendered in the browser at the moment of capture.

Authentication and Protected Resources

Pages behind authentication walls, CAPTCHAs, or aggressive rate-limiting cannot be inspected automatically. During the pre-flight validation phase, the agent stops and requests user intervention when encountering these barriers, preventing automated cloning of protected content.

Browser Automation Dependencies

All extraction operations—including CSS analysis, asset downloading, computed style extraction, and interaction sweeps—require a functional browser automation "MCP" tool such as Chrome MCP or Playwright MCP. As specified in .opencode/commands/clone-website.md (lines 27-31), if no MCP is available, the skill aborts immediately.

# Start the Claude agent with Chrome MCP support

claude --chrome

# Inside the Claude chat, issue the clone command:

/clone-website https://example.com

Content Fidelity and Asset Limitations

Static Snapshots of Dynamic Content

While the tool aims for pixel-perfect visual fidelity, dynamic content is captured only as the snapshot seen during extraction. Personalized recommendations, A/B test variations, and user-specific content are frozen as static HTML, reflecting only the state observed during the browser automation session.

Complex Animations and Third-Party Widgets

Very complex CSS animation timelines, canvas-based graphics, or embedded third-party widgets—such as maps, payment frames, or interactive embeds—may be missed or only partially reproduced. The extraction script records computed CSS values and static DOM structures, which cannot fully capture runtime JavaScript behaviors or complex rendering contexts.

Static Asset Freezing

Images, videos, and SVGs are downloaded once and stored under public/. Any assets generated on-the-fly by servers will be saved only as the static snapshot captured during cloning, as noted in .opencode/commands/clone-website.md (lines 31-34).

Specification and Workflow Constraints

Mandatory Component Specifications

Every component must have a corresponding spec file in docs/research/components/. If a specification file is missing, the builder will attempt to guess, resulting in incomplete or inaccurate components. This requirement creates a practical limitation for very large sites where maintaining comprehensive specs becomes operationally burdensome, as referenced in .opencode/commands/clone-website.md (lines 10-14).

Complexity Budget and Parallel Processing

When builder prompts exceed approximately 150 lines of specification content, the system automatically splits them into smaller pieces. As documented in .opencode/commands/clone-website.md (lines 49-50), extremely complex sections may require many parallel agents, increasing resource usage and raising the risk of merge conflicts during the final assembly phase.

The pipeline uses Git worktree isolation to run parallel builder agents separately, but merging many worktrees can become a bottleneck for large sites.

Missing SEO and Accessibility Optimizations

The generated site does not include SEO meta tags, accessibility audits, or analytics integrations. Developers must manually add these critical features after the cloning process completes, as the tool focuses exclusively on visual replication rather than production-ready optimizations.

Pipeline Architecture and Design Tokens

Understanding these limitations requires examining the multi-phase pipeline:

1. Reconnaissance: Screenshots, token extraction, and interaction sweeps
2. Foundation: Global styles and asset downloading to src/app/globals.css
3. Specification: Writing component specifications in docs/research/components/
4. Builder Dispatch: Parallel agent execution in isolated Git worktrees
5. Assembly and QA: Merging worktrees and validation

Each phase depends on the previous one, so any failure aborts the entire process. Design tokens extracted from the target site are written to src/app/globals.css and src/app/layout.tsx. If the target uses dynamic theming (CSS variables switched via JavaScript), only the initial state is captured.

// src/app/globals.css – token placeholders added by the pipeline
:root {
  --color-primary: #1a73e8;   /* extracted from target */
  --font-sans: 'Inter', ui-sans-serif, system-ui;
}

/* ...shadcn/ui token mappings... */

Every builder agent must pass validation before merging:

# Ensure the clone compiles before merging worktrees

npm run typecheck   # runs `npx tsc --noEmit`

npm run build       # production build

Summary

• Static frontend only: No backend logic, databases, authentication, or real-time APIs are replicated
• Browser MCP required: Chrome MCP or Playwright MCP must be available for extraction to function
• Dynamic content frozen: Personalized content and A/B tests are captured as static snapshots only
• Mandatory specifications: Every component requires a spec file in docs/research/components/
• Complexity limits: Spec files exceeding ~150 lines are automatically split, potentially causing merge conflicts
• No automatic optimizations: SEO, accessibility, and analytics must be added manually
• Protected content barriers: Authentication walls and CAPTCHAs halt automated processing

Frequently Asked Questions

Can the website cloning feature replicate user login systems and authentication flows?

No, the tool cannot reproduce authentication flows, session management, or protected content. It only clones publicly visible static frontend code. Pages behind login walls trigger a stop condition during pre-flight validation, requiring manual user intervention to proceed.

Why does the cloning process fail without a browser MCP?

The extraction phase depends entirely on browser automation tools to capture computed CSS values, DOM structures, and interaction states. Without a functional MCP such as Chrome MCP or Playwright MCP, the system cannot perform the reconnaissance sweep or asset extraction, causing the skill to abort immediately as defined in .opencode/commands/clone-website.md (lines 27-31).

Are JavaScript-generated images and server-rendered assets preserved accurately?

Only as static snapshots. Images generated on-the-fly by servers or created via JavaScript canvas operations are saved as the static state captured during extraction and stored in public/. The resulting codebase references these frozen assets rather than dynamic generation endpoints.

How large can a website be before hitting the complexity budget?

The system imposes a soft limit of approximately 150 lines per specification file. When components exceed this threshold, the pipeline automatically splits them into smaller pieces processed by parallel agents. Extremely large sites may experience resource saturation and increased merge-conflict risk during the final assembly phase.

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