How to Use Windsurf for Cloning Websites with the AI Website Cloner Template

Windsurf clones websites by reading the central AGENTS.md instruction file and executing the auto-generated workflow at .windsurf/workflows/clone-website.md after you run node scripts/sync-skills.mjs.

The AI Website Cloner Template from JCodesMore/ai-website-cloner-template enables autonomous website cloning through AI coding agents. When using Windsurf, you do not need custom command files—instead, the platform automatically detects the project’s configuration and executes a multi-phase pipeline that extracts design tokens, generates components, and assembles a pixel-perfect replica. This guide covers the complete workflow for using Windsurf to clone websites using this template.

Prerequisites and Initial Setup

Before initiating a clone operation, you must prepare the scaffold and verify that the base application builds correctly. The Windsurf workflow explicitly checks for a successful build and aborts if the scaffold is broken.

First, clone the repository and install dependencies:

git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install

Then verify the scaffold builds without errors:

npm run build

This step is critical because the workflow defined in .windsurf/workflows/clone-website.md includes a pre-flight check that ensures the Next.js + shadcn/ui + Tailwind v4 project compiles before proceeding with any cloning operations.

How Windsurf Integration Works

Windsurf follows a "single source of truth" architecture that eliminates redundant configuration files. The integration relies on three core mechanisms:

• AGENTS.md – The master instruction file located at the repository root that all agents (including Windsurf) read automatically. This file contains the canonical definitions for cloning workflows.
• .windsurfrules – A minimal pointer file that tells Windsurf to use AGENTS.md as its primary instruction source.
• scripts/sync-skills.mjs – A Node.js script that generates platform-specific workflow files by copying the canonical skill definition from .claude/skills/clone-website/SKILL.md into .windsurf/workflows/clone-website.md.

When you launch Windsurf, it detects .windsurfrules, reads the instructions from AGENTS.md, and loads the generated workflow file to present the Clone Website command in its UI.

Synchronizing Skills for Windsurf

To generate the Windsurf-specific workflow file, you must run the synchronization script. This script propagates changes from the canonical skill definition to all supported platforms.

Execute the following command:

node scripts/sync-skills.mjs

This command writes the markdown workflow to .windsurf/workflows/clone-website.md. The file contains a header indicating it is auto-generated and should not be edited directly. Running this script is required after any modification to AGENTS.md or the skill definitions to ensure Windsurf operates with the latest instructions.

Executing the Clone Workflow

Once the workflow file is generated, launch Windsurf through the Codeium UI or the windsurf CLI. The tool automatically detects the generated workflow and surfaces the Clone Website command.

To start cloning, invoke the command with a target URL:

/clone-website https://example.com

Windsurf executes the markdown workflow, which drives a six-phase autonomous pipeline:

1. Reconnaissance – Uses browser automation tools (Chrome MCP, Playwright) to screenshot the target site and extract design tokens.
2. Foundation Build – Validates the base scaffold and prepares the project structure.
3. Specification Creation – Generates detailed component specifications in docs/research/components/.
4. Parallel Component Building – Dispatches builder agents in parallel worktrees; each agent receives a spec file and produces a compile-passing component.
5. Assembly – Merges all builder outputs into the main application.
6. Visual QA – Performs pixel-perfect comparison against the original site to ensure accuracy.

The workflow runs fully autonomously, requiring only the initial URL input from the user.

Key Files in the Windsurf Integration

Understanding these file paths is essential for debugging and extending the integration:

File Path	Purpose
AGENTS.md	Centralized instruction set for all AI agents; Windsurf reads this automatically.
.windsurfrules	Pointer file directing Windsurf to use AGENTS.md.
scripts/sync-skills.mjs	Generates platform-specific workflows from the canonical skill definition.
.windsurf/workflows/clone-website.md	Auto-generated markdown workflow executed by Windsurf when running /clone-website.
README.md	High-level overview of supported platforms and quick-start instructions.

Best Practices and Troubleshooting

Follow these guidelines to ensure reliable cloning operations:

• Never edit the generated workflow directly – Any manual changes to .windsurf/workflows/clone-website.md will be overwritten the next time you run sync-skills.mjs.
• Run the sync script after every AGENTS.md modification – This propagates updates to Windsurf and maintains consistency across platforms.
• Ensure browser automation is available – The workflow’s pre-flight section checks for Chrome MCP or Playwright; install these tools before attempting to clone.
• Maintain a clean scaffold – The workflow aborts with an instructional error if npm run build fails, as the template requires a passing build to ensure component validity.

Summary

• Windsurf integrates with the template by reading AGENTS.md via the .windsurfrules pointer file.
• Run node scripts/sync-skills.mjs to generate the Windsurf workflow at .windsurf/workflows/clone-website.md.
• Execute /clone-website <url> to trigger an autonomous pipeline that handles reconnaissance, component generation, and assembly.
• The workflow requires a successful npm run build and available browser automation tools to execute properly.

Frequently Asked Questions

Do I need to manually create the Windsurf workflow file?

No. You generate the workflow by running node scripts/sync-skills.mjs, which copies the canonical skill definition from .claude/skills/clone-website/SKILL.md into .windsurf/workflows/clone-website.md. This ensures the workflow stays synchronized with the master instructions in AGENTS.md.

What happens if I edit the generated workflow directly?

Any manual edits to .windsurf/workflows/clone-website.md will be lost when you subsequently run scripts/sync-skills.mjs. Always modify the source files (AGENTS.md or the files in .claude/skills/) and then regenerate the platform-specific workflows.

Why does the workflow require npm run build to pass before cloning?

The pre-flight check ensures the Next.js scaffold is functional before the multi-phase cloning process begins. If the base project fails to build, the workflow aborts to prevent cascading errors during the component assembly phase, as broken build configurations would cause all parallel builder agents to fail.

Which browser automation tools does Windsurf use for cloning?

The workflow is designed to work with Chrome MCP or Playwright for browser automation. These tools perform the initial reconnaissance phase, capturing screenshots and extracting design tokens from the target website. Ensure one of these tools is installed and accessible in your environment before running the clone command.

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