How to Fine-Tune the AI for Specific Cloning Scenarios in the AI Website Cloner Template

Fine-tune the AI by editing the AGENTS.md file and running the sync scripts to propagate custom instructions across all supported coding agents.

The JCodesMore/ai-website-cloner-template repository provides a framework for cloning websites using AI agents. To fine-tune the AI for specific cloning scenarios, you customize the centralized instructions in AGENTS.md and synchronize them across the pipeline. This approach ensures that every agent—from Claude to GitHub Copilot—follows the same behavioral rules when reconstructing target sites as Next.js 16 applications.

Understanding the Cloning Pipeline Architecture

The template operates through a six-stage pipeline where each stage has specific entry points for customization.

Prompt Definition happens in AGENTS.md, which contains human-readable directives that shape the AI's output, including component spec formats and naming conventions.

Skill Generation materializes the /clone-website command for each AI platform from the canonical skill file at .claude/skills/clone-website/SKILL.md, propagated via scripts/sync-skills.mjs.

Agent-Specific Configs are generated by scripts/sync-agent-rules.sh, which creates plain-text rule files (like .github/copilot-instructions.md and .clinerules) for agents that cannot read AGENTS.md directly.

Inspection and Spec Creation follows the checklist in docs/research/INSPECTION_GUIDE.md, where the AI runs Chrome DevTools to extract design tokens and screenshots, writing detailed component specs under docs/research/.

Parallel Builders execute in separate git worktrees, with each component receiving its spec and emitting React/TSX code based on the instructions provided.

Assembly and QA merges worktrees, wires pages together, and performs visual diffs against the original site.

Where to Inject Custom Behavior

You can intervene at specific files to alter the AI's behavior for your scenario.

Alter the overall tone or scope by editing AGENTS.md to add bullet points under Design Principles or create a new Scenario section. After editing, run bash scripts/sync-agent-rules.sh and node scripts/sync-skills.mjs to push the new wording to every agent.

Change the component-spec format by modifying the Component Specs description in AGENTS.md's How It Works section. The AI will include the new field when writing spec files, and builders automatically parse the updated markdown.

Introduce custom assets handling by extending scripts/sync-agent-rules.sh or creating a custom helper script that filters the asset list before the AI downloads files. Because the pipeline reads from public/ after download, any filtering is reflected downstream.

Add platform-specific flags by extending .claude/skills/clone-website/SKILL.md with optional arguments, then re-running node scripts/sync-skills.mjs. This allows invocation like /clone-website --no-images <url> if you implement the handling logic in the agent's prompt.

Enforce a particular UI library by replacing the UI bullet in the Tech Stack section of AGENTS.md. The AI will generate components using the specified library, though you may need to adjust the starter src/ folder to include new dependencies.

Practical Implementation Steps

Add a Custom Scenario to AGENTS.md

Create a new scenario section in AGENTS.md to handle specific requirements like accessibility-first cloning:

## Scenario: Accessibility-First Clone

- Prioritize WCAG 2.1 AA compliance.
- Generate ARIA attributes for all interactive elements.
- Add `skip-nav` links and visible focus outlines.
- Export a `design-tokens-a11y.md` file that includes contrast-checked color values.

After saving, propagate the changes:

bash scripts/sync-agent-rules.sh
node scripts/sync-skills.mjs

Expose a New Flag in the Skill File

Edit .claude/skills/clone-website/SKILL.md to add command-line options:

name: clone-website
description: Clone a website with optional flags.
arguments:
  - name: no-images
    type: boolean
    description: Skip downloading images for a faster preview.

Regenerate the platform copies:

node scripts/sync-skills.mjs

Filter Assets in the Sync Script

Modify scripts/sync-agent-rules.sh to restrict downloads to specific formats:

# After the RESOLVED_CONTENT variable is built

FILTERED_ASSETS=$(echo "$RESOLVED_CONTENT" | grep -E "\.svg$" || true)
write_file "$REPO_ROOT/public/asset-list.txt" "$FILTERED_ASSETS"

Point the AI's asset-download step at public/asset-list.txt by adding a new instruction to AGENTS.md.

Key Source Files for Customization

Understanding these files helps you fine-tune the AI for specific cloning scenarios effectively:

• AGENTS.md — The single source of truth containing tech stack definitions, design principles, and the core cloning prompt.
• scripts/sync-agent-rules.sh — Generates plain-text rule files for agents that cannot read AGENTS.md directly.
• scripts/sync-skills.mjs — Propagates the canonical skill file to every supported platform.
• docs/research/INSPECTION_GUIDE.md — The checklist the AI follows when inspecting target sites for design tokens and assets.
• src/app/page.tsx — The default landing page displaying the "Clone target not yet built" placeholder, useful for testing the end-to-end flow.

Summary

Fine-tuning the AI for specific cloning scenarios requires modifying the central configuration and synchronizing changes across the agent ecosystem:

• Edit AGENTS.md to shape the AI's overall behavior, design principles, and component specifications.
• Run sync scripts (bash scripts/sync-agent-rules.sh and node scripts/sync-skills.mjs) to push changes to every supported agent.
• Adjust the skill file at .claude/skills/clone-website/SKILL.md for new command-line flags or scenario-specific arguments.
• Leverage the inspection guide to ensure the AI harvests the correct design tokens and interaction data.
• Test modifications by invoking /clone-website <url> with any custom flags you added.

Frequently Asked Questions

What is the single source of truth for AI behavior in this template?

The AGENTS.md file serves as the single source of truth for all AI agents in the repository. It defines the behavior of every supported coding agent, including component specifications, naming conventions, and design principles. When you fine-tune the AI for specific cloning scenarios, you start by modifying this file.

How do I add a custom command-line flag to the clone-website skill?

Define the new flag in .claude/skills/clone-website/SKILL.md by adding an entry to the arguments section with a name, type, and description. After saving, run node scripts/sync-skills.mjs to propagate the flag to all platform-specific skill files. You must also implement the handling logic in your agent's prompt or scripts to respect the flag during execution.

Can I restrict asset downloads to specific file types like SVGs only?

Yes, you can filter assets by modifying scripts/sync-agent-rules.sh to process the RESOLVED_CONTENT variable and output only matching patterns to public/asset-list.txt. For example, pipe the content through grep -E "\.svg$" to create a manifest containing only SVG files. Then update AGENTS.md to instruct the AI to read from this filtered manifest during the asset-download step.

How do I ensure all AI agents receive my custom instructions?

After editing AGENTS.md, you must run both synchronization commands: bash scripts/sync-agent-rules.sh generates plain-text rule files for agents like GitHub Copilot and Cline, while node scripts/sync-skills.mjs updates the platform-specific skill definitions. Running both ensures consistent behavior across Claude, Copilot, Cline, and other supported agents.

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