{"slug": "ai-website-cloner-template-clone-any-website-using-ai-coding-agents", "title": "AI-website-cloner-template: Clone any website using AI coding agents", "summary": "A developer released an open-source template that uses AI coding agents to reverse-engineer any website into a modern Next.js codebase. The tool, recommended for use with Claude Code and Opus 4.7, runs a multi-phase pipeline to extract design tokens, assets, and component specs, then rebuilds the site. It is intended for legitimate purposes such as platform migration or recovering lost source code, not for phishing or impersonation.", "body_md": "A reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents.\n\n**Recommended: Claude Code with Opus 4.7 for best results** — but works with a variety of AI coding agents.\n\nPoint it at a URL, run `/clone-website`\n\n, and your AI agent will inspect the site, extract design tokens and assets, write component specs, and dispatch parallel builders to reconstruct every section.\n\nClick the image above to watch the full demo on YouTube.\n\nImportant:Start by making your own copy with GitHub'sUse this templatebutton. Do not clone this template repository directly for your website project, and do not open pull requests here with your generated website.\n\n-\n**Create your own repository from this template** On the GitHub page for this project, click\n\n**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\n\n**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.\n\n-\n**Open your new repository on your computer** After GitHub creates your copy, open that new repository. Click\n\n**Code** and open or clone your new repository with your preferred coding tool.If you use the terminal, the command will look like this:\n\n```\ngit clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git\ncd YOUR-NEW-REPOSITORY\n```\n\n-\n**Install dependencies**\n\n```\nnpm install\n```\n\n-\n**Start your AI agent**— Claude Code recommended:\n\n```\nclaude --chrome\n```\n\n-\n**Run the skill**:\n\n```\n/clone-website <target-url1> [<target-url2> ...]\n```\n\n-\n**Customize**(optional) — after the base clone is built, modify as needed\n\nUsing a different agent? Open\n\n`AGENTS.md`\n\nfor project instructions — most agents pick it up automatically.\n\n| Agent | Status |\n|---|---|\n|\n\n**Recommended**— Opus 4.7[Codex CLI](https://github.com/openai/codex)[OpenCode](https://opencode.ai/)[GitHub Copilot](https://github.com/features/copilot)[Cursor](https://cursor.com/)[Windsurf](https://codeium.com/windsurf)[Gemini CLI](https://github.com/google-gemini/gemini-cli)[Cline](https://github.com/cline/cline)[Roo Code](https://github.com/RooCodeInc/Roo-Code)[Continue](https://continue.dev/)[Amazon Q](https://aws.amazon.com/q/developer/)[Augment Code](https://www.augmentcode.com/)[Aider](https://aider.chat/)[Node.js](https://nodejs.org/)24+- An AI coding agent (see\n[Supported Platforms](#supported-platforms))\n\n**Next.js 16**— App Router, React 19, TypeScript strict** shadcn/ui**— Radix primitives + Tailwind CSS v4** Tailwind CSS v4**— oklch design tokens** Lucide React**— default icons (replaced by extracted SVGs during cloning)\n\nThe `/clone-website`\n\nskill runs a multi-phase pipeline:\n\n**Reconnaissance**— screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)** Foundation**— updates fonts, colors, globals, downloads all assets** Component Specs**— writes detailed spec files (`docs/research/components/`\n\n) with exact computed CSS values, states, behaviors, and content**Parallel Build**— dispatches builder agents in git worktrees, one per section/component** Assembly & QA**— merges worktrees, wires up the page, runs visual diff against the original\n\nEach builder agent receives the full component specification inline — exact `getComputedStyle()`\n\nvalues, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.\n\n**Platform migration**— rebuild a site you own from WordPress/Webflow/Squarespace into a modern Next.js codebase** Lost source code**— your site is live but the repo is gone, the developer left, or the stack is legacy. Get the code back in a modern format**Learning**— deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code\n\n**Phishing or impersonation**— this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.** Passing off someone's design as your own**— logos, brand assets, and original copy belong to their owners.** Violating terms of service**— some sites explicitly prohibit scraping or reproduction. Check first.\n\n```\nsrc/\n  app/              # Next.js routes\n  components/       # React components\n    ui/             # shadcn/ui primitives\n    icons.tsx       # Extracted SVG icons\n  lib/utils.ts      # cn() utility\n  types/            # TypeScript interfaces\n  hooks/            # Custom React hooks\npublic/\n  images/           # Downloaded images from target\n  videos/           # Downloaded videos from target\n  seo/              # Favicons, OG images\ndocs/\n  research/         # Extraction output & component specs\n  design-references/ # Screenshots\nscripts/\n  sync-agent-rules.sh  # Regenerate agent instruction files\n  sync-skills.mjs      # Regenerate /clone-website for all platforms\nAGENTS.md           # Agent instructions (single source of truth)\nCLAUDE.md           # Claude Code config (imports AGENTS.md)\nGEMINI.md           # Gemini CLI config (imports AGENTS.md)\nnpm run dev    # Start dev server\nnpm run build  # Production build\nnpm run lint   # ESLint check\nnpm run typecheck # TypeScript check\nnpm run check  # Run lint + typecheck + build\ndocker compose up app --build # build and run the app\ndocker compose up dev --build # run the app in dev mode on port 3001\n```\n\nTwo source-of-truth files power all platform support. Edit the source, then run the sync script:\n\n| What | Source of truth | Sync command |\n|---|---|---|\n| Project instructions | `AGENTS.md` |\n`bash scripts/sync-agent-rules.sh` |\n`/clone-website` skill |\n`.claude/skills/clone-website/SKILL.md` |\n`node scripts/sync-skills.mjs` |\n\nEach script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.\n\nMIT", "url": "https://wpnews.pro/news/ai-website-cloner-template-clone-any-website-using-ai-coding-agents", "canonical_source": "https://github.com/JCodesMore/ai-website-cloner-template", "published_at": "2026-06-25 06:00:22+00:00", "updated_at": "2026-06-25 06:13:44.188712+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents", "generative-ai", "large-language-models"], "entities": ["Claude Code", "Opus 4.7", "Next.js", "GitHub", "shadcn/ui", "Tailwind CSS", "React", "TypeScript"], "alternates": {"html": "https://wpnews.pro/news/ai-website-cloner-template-clone-any-website-using-ai-coding-agents", "markdown": "https://wpnews.pro/news/ai-website-cloner-template-clone-any-website-using-ai-coding-agents.md", "text": "https://wpnews.pro/news/ai-website-cloner-template-clone-any-website-using-ai-coding-agents.txt", "jsonld": "https://wpnews.pro/news/ai-website-cloner-template-clone-any-website-using-ai-coding-agents.jsonld"}}