web-cloner

AI-powered website cloner. Reverse-engineer any website into clean, modern code using AI agents.

npm i web-cloner    # install
npx web-cloner      # install skill to your agent

Quick Start

Install

npx web-cloner --dest ./skills

This installs the skill to ./skills/web-cloner/.

Use in your AI agent

/clone https://example.com --output ./my-clone

Or trigger naturally:

• "clone this website"
• "rebuild this page"
• "pixel-perfect clone"
• "reverse engineer website"

Supported AI Tools

Claude Code (recommended)

# Project-local (recommended)
npx web-cloner --dest ./.claude/skills

# Global (all projects)
npx web-cloner --dest ~/.claude/skills

Cursor

npx web-cloner --dest ~/.cursor/skills

Then restart Cursor and enable Agent Skills in Settings → Rules.

Codex CLI

# Project-local
npx web-cloner --dest ./.agents/skills

# User-wide
mkdir -p ~/.agents/skills && npx web-cloner --dest ~/.agents/skills

Gemini CLI

npx web-cloner --dest ~/.gemini/skills

Windsurf

npx web-cloner --dest ~/.codeium/windsurf/skills

Features

• Pixel-perfect cloning — exact match in colors, spacing, typography, animations
• Framework-agnostic — outputs to Next.js, Vue, Svelte, or plain HTML/CSS
• Multi-URL support — clone multiple sites in parallel
• Asset extraction — downloads images, videos, fonts, SVGs
• Interaction detection — scroll-driven, click-driven, hover-driven behaviors
• Visual QA — side-by-side comparison with original

How It Works

The /clone skill runs a 5-phase pipeline:

1. Phase 0.5: Direction Confirm — scope, framework, output path
2. Phase 1: Reconnaissance — screenshots, design tokens, interaction sweep
3. Phase 2: Foundation — fonts, colors, globals, downloaded assets
4. Phase 3: Spec + Dispatch — component specs → parallel builder agents
5. Phase 4: Assembly — merge worktrees, wire up the page
6. Phase 5: QA — visual comparison, verify interactions

Output Structure

{output}/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with fonts + metadata
│   │   └── page.tsx            # Page assembly
│   ├── components/
│   │   ├── Header.tsx           # Fixed header (scroll-driven states)
│   │   ├── Hero.tsx            # Hero section
│   │   ├── Features.tsx         # Feature cards (scroll-driven)
│   │   ├── Pricing.tsx          # Tabbed pricing (click-driven)
│   │   ├── Footer.tsx          # Static footer
│   │   └── icons.tsx           # Extracted SVG icons
│   └── lib/
│       └── utils.ts            # cn() utility
├── public/
│   ├── images/                 # Downloaded images
│   ├── videos/                 # Downloaded videos
│   └── seo/                    # Favicons, OG images
├── docs/
│   ├── research/
│   │   ├── BEHAVIORS.md        # Interaction patterns
│   │   ├── PAGE_TOPOLOGY.md    # Section map
│   │   ├── WARNINGS.md         # Download errors
│   │   └── components/         # Spec files
│   │       ├── Hero.spec.md
│   │       ├── Features.spec.md
│   │       └── ...
│   └── design-references/
│       ├── homepage-desktop.png
│       ├── homepage-mobile.png
│       └── Hero-section.png
└── package.json

Arguments

| Argument | Default | Description | |----------|---------|-------------| | url(s) | required | Target URL(s) to clone | | --framework | nextjs | Output: nextjs, vue, svelte, html | | --output | ./cloned-{hostname}/ | Output directory |

Examples

# Clone a single site
/clone https://example.com

# Clone with specific framework
/clone https://example.com --framework vue --output ./my-vue-clone

# Clone multiple sites (parallel)
/clone https://site1.com https://site2.com https://site3.com --output ./sites/

Options

--dest <dir>       Destination directory
--repo <owner/repo> Download from GitHub (default: O-Pencil/skills)
--ref <branch>     Git ref (default: main)
--help, -h         Show this help

Examples:

# Install from local repo
npx web-cloner --dest ./skills

# Install from GitHub release
npx web-cloner --dest ~/.claude/skills --repo O-Pencil/skills --ref v1.0.0

Dependencies

• Browser automation required — Puppeteer MCP, Playwright MCP, Chrome MCP, etc.
• Your AI agent will detect available browser tools automatically.

License

MIT · GitHub