How to Customize the Cloning Process for Specific Website Requirements in AI Website Cloner

You can customize the cloning process for specific website requirements by passing custom skill arguments to the /clone-website command, editing global design tokens in src/app/globals.css, and extending the asset download scripts to handle site-specific resources.

The AI Website Cloner template from JCodesMore/ai-website-cloner-template provides a multi-phase pipeline (reconnaissance → foundation → component specs → parallel build → assembly) for replicating websites. To customize the cloning process for specific website requirements, you can intervene at three natural extension points that control fidelity, styling, and asset handling without modifying the core pipeline.

Customize via Skill Arguments and Defaults

The /clone-website skill accepts URLs and respects extra user instructions that override built-in defaults. In .claude/skills/clone-website/SKILL.md, the skill definition specifies parameters for fidelity level, custom CSS tokens, and interaction models.

Supplying flags such as --fidelity=high or --skip-assets lets you change the scope without modifying code. For example, to capture a high-resolution clone while skipping heavy animation extraction:

/clone-website https://example.com --fidelity=high --skip-animations

The skill parser reads these flags and replaces the default "Pixel-perfect" fidelity with your specified settings.

Override Foundation Defaults with Configuration Files

Global design tokens are written into src/app/layout.tsx and src/app/globals.css. Updating these files changes the "foundation" step for all subsequent builds.

To match a specific site's branding, edit src/app/globals.css to add custom color tokens:

:root {
  --primary: #1e90ff; /* Example-site primary */
  --brand-primary: #ff4500;
}

Then update any shadcn UI components that reference bg-primary or text-primary. The next build will pick up the new palette automatically.

Extend Asset Handling with Project-Specific Scripts

The template ships with scripts/download-assets.mjs for pulling resources and scripts/sync-skills.mjs for regenerating platform-specific skill files. Extending download-assets.mjs lets you pull additional resources that the default browser-MCP sweep might miss, such as fonts from a private CDN, SVG icons, or video captions.

To fetch a private font bundle and custom media:

// scripts/download-assets.mjs
const fonts = [
  "https://cdn.example.com/fonts/awesome-font.woff2",
];

await Promise.all([
  ...fonts.map(download),
  download("https://example.com/logo.svg"),
  download("https://example.com/intro.mp4"),
]);

Run the script before invoking the skill so the assets land in public/ and become available to the Next.js build.

Regenerate Platform Skill Files

After changing the skill definition in .claude/skills/clone-website/SKILL.md or adding new arguments, run the sync helper to update all agent-specific copies:

node scripts/sync-skills.mjs

This ensures Claude Code, Gemini CLI, Cursor, and other platforms see the same customized skill definition.

Complete Customization Workflow

Combine these approaches for complex requirements:

1. Pass custom arguments to set fidelity and skip options
2. Override CSS variables for brand alignment
3. Extend asset scripts for proprietary resources
4. Sync skill files across platforms

# Example: Clone two sites with different fidelity levels

/clone-website https://news-site.com --fidelity=high \
               https://blog.example.org --fidelity=medium

Summary

• Skill arguments in .claude/skills/clone-website/SKILL.md support CLI flags like --fidelity=high to control extraction scope without code changes
• Configuration files src/app/globals.css and src/app/layout.tsx define global design tokens that determine the visual foundation of cloned sites
• Asset scripts in scripts/download-assets.mjs can be extended to fetch site-specific resources from private CDNs or authentication-protected endpoints
• Sync utility scripts/sync-skills.mjs propagates custom skill definitions across Claude Code, Gemini CLI, Cursor, and other supported platforms

Frequently Asked Questions

How do I change the fidelity level when cloning a website?

Pass the --fidelity flag followed by your desired level (low, medium, high) when invoking the /clone-website command. The skill parser reads this argument from .claude/skills/clone-website/SKILL.md and adjusts the resolution and detail of the capture accordingly.

Where are global design tokens defined in the AI Website Cloner template?

Global design tokens are defined in src/app/globals.css and src/app/layout.tsx. These files control the CSS variables, fonts, and spacing values used during the "foundation" phase of the cloning pipeline.

Can I download assets from private CDNs or authenticated sources?

Yes. Extend scripts/download-assets.mjs to include custom download logic for authenticated endpoints or private CDNs. The script serves as the extension point for asset acquisition beyond what the default browser-MCP sweep captures.

How do I ensure my custom skill modifications work across different AI platforms?

Run node scripts/sync-skills.mjs after editing .claude/skills/clone-website/SKILL.md. This utility regenerates platform-specific skill files for Claude Code, Gemini CLI, Cursor, and other agents, ensuring consistent behavior across environments.

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