JCodesMore /
ai-website-cloner-template
Next.js template that has an AI coding agent rebuild a website from its URL
- 37.2k stars
- 1.6k stars since 3 Oct
- TypeScript
- Updated 3 days ago
- Some experience
- Coding agents & dev tools
Rebuilding an existing website by hand is slow. You have to study each section, copy spacing and colors, and guess how menus and animations behave. This template hands that work to an AI coding agent. You give the agent a URL, and it produces a Next.js app that imitates the page.
It works through a skill called /clone-website that runs in stages. The agent takes screenshots, pulls out design values, and scrolls, clicks and hovers to see how the page behaves. It writes a spec for each component using exact computed CSS values. Builder agents then work in separate git worktrees, one per section. Finally the work is merged and compared visually with the original.
The project is a starter template, not a hosted service. It uses Next.js 16, React 19, shadcn/ui and Tailwind CSS v4. The README recommends Claude Code with Opus 5.5 and says Codex CLI, Cursor and OpenCode are also supported. It also lists uses it is not meant for: phishing, impersonation, passing off others' designs, and ignoring a site's terms of service.
What it does
One command to start a clone
Run /clone-website with a URL in Claude Code or Cursor. The agent needs browser access enabled.
Five-phase pipeline
Reconnaissance, foundation, component specs, parallel build, then assembly and QA with a visual diff against the original.
Exact style extraction
Specs record getComputedStyle() values, interaction states, responsive breakpoints and asset paths, and each builder agent receives them inline.
Parallel builder agents
Each section or component is built by its own agent in a git worktree, and the results are merged afterward.
Works with several agents
One portable skill lives in .agents/skills/. Codex, Cursor and OpenCode read it directly, and Claude Code uses a small command bridge.
What you could build
- Rebuild a site you own from WordPress, Webflow or Squarespace into a modern Next.js codebase.
- Recover the code for a live site when the repo is lost or the original developer has left.
- Study how a production site achieves a layout, animation or responsive behavior by reading the generated code.
- Ask your agent for changes after the clone is built, and use the result as a starting point for your own site.
Get started
Create your own copy of the template, or ask your agent to set it up in a new folder. Install dependencies and run the check, which needs Node.js 24 or newer. Then open the project in your agent with browser access and run /clone-website with the URL.
npm run check/clone-website https://example.comCommands are copied from the project's README. Read it on GitHub for the full setup.
More in Coding agents & dev tools
rea
MCP server that lets AI agents reverse engineer apps, binaries and websites locally
opencode
Open source AI coding agent for your terminal, with a beta desktop app
claude-code
Terminal coding assistant that reads your codebase and takes plain-English commands
codex
A coding agent from OpenAI that runs in your terminal on your own machine
pi
A minimal terminal coding agent you extend with skills, extensions and packages
orca
Desktop and mobile app for running many coding agents side by side
Understand-Anything
Turns a codebase or wiki into an interactive graph you can search and ask questions about
screenshot-to-code
Turns screenshots, mockups and screen recordings into front-end code with AI models
warp
Rust terminal that adds a built-in coding agent and runs other CLI agents
free-claude-code
Local proxy that lets Claude Code, Codex, Aider and others run on free or cheap models