AI Website Cloner

The AI Website Cloner is an open-source Claude Code template published by developer JCodesMore that turns a live URL into a real, editable Next.js codebase rather than a screenshot or mockup. It works by driving a real browser through the target site — taking full-page screenshots at desktop and mobile widths, sweeping for scroll-, click-, and hover-triggered behavior, and extracting fonts, colors, and every real image or video asset. The skill describes its own process as a "foreman walking the job site": rather than inspecting the whole page and then building everything from memory, it documents one section at a time in a written spec file — exact computed CSS values, DOM structure, states, and responsive behavior — and hands each spec to a builder agent working in its own isolated git worktree, so extraction and construction happen in parallel instead of as two separate phases.

The output is a pre-scaffolded project built on Next.js 16, React 19, TypeScript, shadcn/ui, and Tailwind CSS v4, assembled through five phases — Reconnaissance, Foundation, Spec & Dispatch, Merge, and Visual QA — with the last phase running a mandatory side-by-side comparison against the live original to catch gaps a passing build alone wouldn't reveal. It's intended for legitimate use cases like migrating a site off a page-builder platform, recovering a site whose source code was lost, or studying how a well-built page achieves a particular effect — not for impersonation or misrepresenting someone else's design as your own. To use it, you start from the GitHub template (not the original repo directly), install dependencies, connect browser automation like Chrome MCP, and run /clone-website <url> from inside Claude Code.