Clone site skill
description: Clone any website into a pixel-perfect Next.js replica.
by ericosiu·MIT license·★ 3,615 Stars on the repo·GitHub ↗
Use now
npx degit ericosiu/ai-marketing-skills/clone-site#main ~/.claude/skills/clone-siteChecked ·commit main
Files of Clone site
SKILL.md
Show the full text73 lines
name: clone-site description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL".
Clone Site
Reverse-engineer and rebuild any website as a pixel-perfect Next.js clone.
Quick Start
User says: "Clone yourcompany.com" or "Make a landing page like this: [url]"
How It Works
- Recon — Screenshots the target at desktop + mobile, extracts all design tokens (fonts, colors, spacing), downloads all assets
- Foundation — Sets up Next.js with the target's exact fonts, colors, and global styles
- Component Specs — Writes detailed specs for each section with exact CSS values from getComputedStyle()
- Parallel Build — Dispatches builder agents in git worktrees, one per section
- Assembly & QA — Merges everything, wires up the page, visual diff against original
Requirements
- Chrome MCP must be enabled:
claude --chrome - Node.js 20+
- A Next.js + Tailwind v4 + shadcn/ui scaffold as the base project
Setup (first time only)
cd /path/to/your-clone-project
npm install
To Clone a Site
cd /path/to/your-clone-project
Edit TARGET.md with the URL and scope, then run the skill in Claude Code.
Or just tell any agent: "clone [url]" and they'll handle it.
Full Technical Reference
The complete cloning methodology (reconnaissance, extraction, parallel dispatch, QA) is in:
references/FULL_METHODOLOGY.md
Only read this when actively executing a clone — it's ~500 lines of detailed instructions.
Output
- Pixel-perfect Next.js site in your project directory
- All assets downloaded to
public/ - Component specs in
docs/research/components/ - Screenshots in
docs/design-references/ - Run with
npm run devto preview
| 1 | |
| 2 | |
| 3 | ## Preamble (runs on skill start) |
| 4 | |
| 5 | |
| 6 | # Version check (silent if up to date) |
| 7 | python3 telemetry/version_check.py 2>/dev/null || true |
| 8 | |
| 9 | # Telemetry opt-in (first run only, then remembers your choice) |
| 10 | python3 telemetry/telemetry_init.py 2>/dev/null || true |
| 11 | |
| 12 | |
| 13 | > **Privacy:** This skill logs usage locally to `~/.ai-marketing-skills/analytics/`. Remote telemetry is opt-in only. No code, file paths, or repo content is ever collected. See `telemetry/README.md`. |
| 14 | |
| 15 | |
| 16 | name: clone-site |
| 17 | description: Clone any website into a pixel-perfect Next.js replica. Point it at a URL and it reverse-engineers the design, extracts assets, and rebuilds it section by section using parallel builder agents. Use when asked to clone, copy, replicate, rebuild, or reverse-engineer any website or landing page. Also use for "make it look like this site" or "build a page based on this URL". |
| 18 | |
| 19 | |
| 20 | # Clone Site |
| 21 | |
| 22 | Reverse-engineer and rebuild any website as a pixel-perfect Next.js clone. |
| 23 | |
| 24 | ## Quick Start |
| 25 | |
| 26 | User says: "Clone yourcompany.com" or "Make a landing page like this: [url]" |
| 27 | |
| 28 | ## How It Works |
| 29 | |
| 30 | **Recon** — Screenshots the target at desktop + mobile, extracts all design tokens (fonts, colors, spacing), downloads all assets |
| 31 | **Foundation** — Sets up Next.js with the target's exact fonts, colors, and global styles |
| 32 | **Component Specs** — Writes detailed specs for each section with exact CSS values from getComputedStyle() |
| 33 | **Parallel Build** — Dispatches builder agents in git worktrees, one per section |
| 34 | **Assembly & QA** — Merges everything, wires up the page, visual diff against original |
| 35 | |
| 36 | ## Requirements |
| 37 | |
| 38 | Chrome MCP must be enabled: `claude --chrome` |
| 39 | Node.js 20+ |
| 40 | A Next.js + Tailwind v4 + shadcn/ui scaffold as the base project |
| 41 | |
| 42 | ## Setup (first time only) |
| 43 | |
| 44 | |
| 45 | cd /path/to/your-clone-project |
| 46 | npm install |
| 47 | |
| 48 | |
| 49 | ## To Clone a Site |
| 50 | |
| 51 | |
| 52 | cd /path/to/your-clone-project |
| 53 | |
| 54 | |
| 55 | Edit `TARGET.md` with the URL and scope, then run the skill in Claude Code. |
| 56 | |
| 57 | Or just tell any agent: "clone [url]" and they'll handle it. |
| 58 | |
| 59 | ## Full Technical Reference |
| 60 | |
| 61 | The complete cloning methodology (reconnaissance, extraction, parallel dispatch, QA) is in: |
| 62 | `references/FULL_METHODOLOGY.md` |
| 63 | |
| 64 | Only read this when actively executing a clone — it's ~500 lines of detailed instructions. |
| 65 | |
| 66 | ## Output |
| 67 | |
| 68 | Pixel-perfect Next.js site in your project directory |
| 69 | All assets downloaded to `public/` |
| 70 | Component specs in `docs/research/components/` |
| 71 | Screenshots in `docs/design-references/` |
| 72 | Run with `npm run dev` to preview |
| 73 |
Discussion
Browse more free Claude skills.