
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. Recommended: Claude Code with Opus 4.7 for best results — but works with a variety of AI coding agents. Point it at a URL, run /clone-website, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.
A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents.
Recommended: Claude Code with Opus 4.7 for best results — but works with a variety of AI coding agents.
Point it at a URL, run /clone-website, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.
Click the image above to watch the full demo on YouTube.
Important: Start by making your own copy with GitHub's Use this template button. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.
Create your own repository from this template
On the GitHub page for this project, click Use this template, then click Create a new repository.
Give your new repository a name, choose whether it should be public or private, then click Create repository. If GitHub shows an Include all branches option, you can leave it off.
This gives you your own separate project to work in, so your website changes stay in your account instead of coming back to the main template.
Open your new repository on your computer
After GitHub creates your copy, open that new repository. Click Code and open or clone your new repository with your preferred coding tool.
If you use the terminal, the command will look like this:
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git
cd YOUR-NEW-REPOSITORY
Install dependencies
npm install
Start your AI agent — Claude Code recommended:
claude --chrome
Run the skill:
/clone-website <target-url1> [<target-url2> ...]
Customize (optional) — after the base clone is built, modify as needed
Using a different agent? Open
AGENTS.mdfor project instructions — most agents pick it up automatically.
| Agent | Status |
|---|---|
| Claude Code | Recommended — Opus 4.7 |
| Codex CLI | Supported |
| OpenCode | Supported |
| GitHub Copilot | Supported |
| Cursor | Supported |
| Windsurf | Supported |
| Gemini CLI | Supported |
| Cline | Supported |
| Roo Code | Supported |
| Continue | Supported |
| Amazon Q | Supported |
| Augment Code | Supported |
| Aider | Supported |
The /clone-website skill runs a multi-phase pipeline:
docs/research/components/) with exact computed CSS values, states, behaviors, and contentEach builder agent receives the full component specification inline — exact getComputedStyle() values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.
src/
app/ # Next.js routes
components/ # React components
ui/ # shadcn/ui primitives
icons.tsx # Extracted SVG icons
lib/utils.ts # cn() utility
types/ # TypeScript interfaces
hooks/ # Custom React hooks
public/
images/ # Downloaded images from target
videos/ # Downloaded videos from target
seo/ # Favicons, OG images
docs/
research/ # Extraction output & component specs
design-references/ # Screenshots
scripts/
sync-agent-rules.sh # Regenerate agent instruction files
sync-skills.mjs # Regenerate /clone-website for all platforms
AGENTS.md # Agent instructions (single source of truth)
CLAUDE.md # Claude Code config (imports AGENTS.md)
GEMINI.md # Gemini CLI config (imports AGENTS.md)
npm run dev # Start dev server
npm run build # Production build
npm run lint # ESLint check
npm run typecheck # TypeScript check
npm run check # Run lint + typecheck + build
docker compose up app --build # build and run the app
docker compose up dev --build # run the app in dev mode on port 3001
Two source-of-truth files power all platform support. Edit the source, then run the sync script:
| What | Source of truth | Sync command |
|---|---|---|
| Project instructions | AGENTS.md | bash scripts/sync-agent-rules.sh |
/clone-website skill | .claude/skills/clone-website/SKILL.md | node scripts/sync-skills.mjs |
Each script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.
MIT
How To Clone a $10,000 Website in Seconds With AI..
Darrel Wilson · 337K views
I Cloned an Award-Winning Website in 15 Minutes using AI (0 Coding)
Sameer Vish · 196K views
How to Clone and Customize Any Website It in Minutes - 2026 | HeyBoss AI Tutorial
Dan - Smart Tutorials · 27K views
AI
Companies use AI to filter candidates. I just gave candidates AI to choose companies. Career-Ops (career-ops.org, also known as careerops) turns any AI coding CLI into a full job search command center. Instead of manually tracking applications in a spreadsheet, you get an AI-powered pipeline that: Career-ops is agentic: Claude Code navigates career pages with Playwright, evaluates fit by reasoning about your CV vs the job description (not keyword matching), and adapts your resume per listing.
AI
CLI-Anything: Bridging the Gap Between AI Agents and the World's Software 🌐 CLI-Hub: pip install cli-anything-hub then cli-hub install — browse, install, and manage all community-built CLIs. Want to add your own? Open a PR — the hub updates instantly. 🎬 See Demos: Watch AI agents use generated CLIs plus preview, live preview, and trajectory loops to produce real artifacts — CAD builds, 3D scenes, diagrams, gameplay, subtitles, and more.
AI
A self-hosted AI workspace -- meant to be the self-hosted version of the UI experience you get from ChatGPT and Claude. But with more jank and fun. Running on your own hardware, with your own data -- local-first, privacy-first, and no trojan. A full, hover-to-play tour lives on the landing page (docs/index.html). Defaults work out of the box: clone, run, then configure models/search/email inside Settings. Only edit .env for deployment-level overrides like APPBIND, APPPORT, AUTHENABLED, DATABASEURL, or a pre-seeded admin password.
AI
Most AI material teaches in scattered pieces. A paper here, a fine-tuning post there, a flashy agent demo somewhere else. The pieces rarely line up. You ship a chatbot but can't explain its loss curve. You hook a function to an agent but can't say what attention does inside the model that's calling it. This curriculum is the spine. 20 phases, 503 lessons, four languages: Python, TypeScript, Rust, Julia. Linear algebra at one end, autonomous swarms at the other. Every algorithm gets built from raw math first. Backprop. Tokenizer. Attention. Agent loop. By the time PyTorch shows up, you already know what it's doing under the hood. Each lesson runs the same loop: read the problem, derive the math, write the code, run the test, keep the artifact. No five-minute videos, no copy-paste deploys,