# How to Use Windsurf for Cloning Websites with the AI Website Cloner Template > Learn how to clone websites using Windsurf and its AI Website Cloner Template. Follow simple steps to automate website duplication with this powerful tool. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: how-to-guide - Published: 2026-07-04 --- **Windsurf clones websites by reading the central [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) instruction file and executing the auto-generated workflow at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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: ```bash 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: ```bash npm run build ``` This step is critical because the workflow defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) into [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md). When you launch Windsurf, it detects `.windsurfrules`, reads the instructions from [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash node scripts/sync-skills.mjs ``` This command writes the markdown workflow to [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash /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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) | Centralized instruction set for all AI agents; Windsurf reads this automatically. | | `.windsurfrules` | Pointer file directing Windsurf to use [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md). | | `scripts/sync-skills.mjs` | Generates platform-specific workflows from the canonical skill definition. | | [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) | Auto-generated markdown workflow executed by Windsurf when running `/clone-website`. | | [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) will be overwritten the next time you run `sync-skills.mjs`. - **Run the sync script after every [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) via the `.windsurfrules` pointer file. - Run `node scripts/sync-skills.mjs` to generate the Windsurf workflow at [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md). - Execute `/clone-website ` 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md) into [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md). This ensures the workflow stays synchronized with the master instructions in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md). ### What happens if I edit the generated workflow directly? Any manual edits to [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) will be lost when you subsequently run `scripts/sync-skills.mjs`. Always modify the source files ([`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.