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

> Customize AI website cloner with custom arguments, CSS edits, and asset script extensions for unique project needs. Learn how to tailor the cloning process now.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-28

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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:

```bash
/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) and [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) to add custom color tokens:

```css
: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:

```javascript
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) or adding new arguments, run the sync helper to update all agent-specific copies:

```bash
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

```bash

# 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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.