[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3907":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},3907,"ai-website-cloner-template","JCodesMore\u002Fai-website-cloner-template","JCodesMore","Clone any website with one command using AI coding agents","https:\u002F\u002Fdsc.gg\u002Fjcodesmore",null,"TypeScript",16798,2586,86,5,0,61,568,2320,349,45,"MIT License",false,"master",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"ai","ai-agents","ai-tools","automation","boilerplate","claude","claude-code","clone","developer-tools","nextjs","react","reverse-engineering","shadcn-ui","skills","tailwindcss","template","typescript","web-scraping","website-clone","2026-06-12 02:00:56","# AI Website Cloner Template\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FJCodesMore\u002Fai-website-cloner-template\u002Fblob\u002Fmaster\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue\" alt=\"MIT License\" \u002F>\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FJCodesMore\u002Fai-website-cloner-template\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FJCodesMore\u002Fai-website-cloner-template?style=flat\" alt=\"Stars\" \u002F>\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FhrTSX5yTpB\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1400896964597383279?label=discord\" alt=\"Discord\" \u002F>\u003C\u002Fa>\n\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. \n\n**Recommended: [Claude Code](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code) with Opus 4.6 for best results** — but works with a variety of AI coding agents.\n\nPoint it at a URL, run `\u002Fclone-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.\n\n## Demo\n\n[![Watch the demo](docs\u002Fdesign-references\u002Fcomparison.png)](https:\u002F\u002Fyoutu.be\u002FO669pVZ_qr0)\n\n> Click the image above to watch the full demo on YouTube.\n\n## Quick Start\n\n1. **Clone this repository**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FJCodesMore\u002Fai-website-cloner-template.git my-clone\n   cd my-clone\n   ```\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n3. **Start your AI agent** — Claude Code recommended:\n   ```bash\n   claude --chrome\n   ```\n4. **Run the skill**:\n   ```\n   \u002Fclone-website \u003Ctarget-url1> [\u003Ctarget-url2> ...]\n   ```\n5. **Customize** (optional) — after the base clone is built, modify as needed\n\n> Using a different agent? Open `AGENTS.md` for project instructions — most agents pick it up automatically.\n\n## Supported Platforms\n\n| Agent                                                         | Status                     |\n| ------------------------------------------------------------- | -------------------------- |\n| [Claude Code](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code) | **Recommended** — Opus 4.6 |\n| [Codex CLI](https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex)                  | Supported                  |\n| [OpenCode](https:\u002F\u002Fopencode.ai\u002F)                              | Supported                  |\n| [GitHub Copilot](https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcopilot)         | Supported                  |\n| [Cursor](https:\u002F\u002Fcursor.com\u002F)                                 | Supported                  |\n| [Windsurf](https:\u002F\u002Fcodeium.com\u002Fwindsurf)                      | Supported                  |\n| [Gemini CLI](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fgemini-cli)     | Supported                  |\n| [Cline](https:\u002F\u002Fgithub.com\u002Fcline\u002Fcline)                       | Supported                  |\n| [Roo Code](https:\u002F\u002Fgithub.com\u002FRooCodeInc\u002FRoo-Code)            | Supported                  |\n| [Continue](https:\u002F\u002Fcontinue.dev\u002F)                             | Supported                  |\n| [Amazon Q](https:\u002F\u002Faws.amazon.com\u002Fq\u002Fdeveloper\u002F)               | Supported                  |\n| [Augment Code](https:\u002F\u002Fwww.augmentcode.com\u002F)                  | Supported                  |\n| [Aider](https:\u002F\u002Faider.chat\u002F)                                  | Supported                  |\n\n## Prerequisites\n\n- [Node.js](https:\u002F\u002Fnodejs.org\u002F) 24+\n- An AI coding agent (see [Supported Platforms](#supported-platforms))\n\n## Tech Stack\n\n- **Next.js 16** — App Router, React 19, TypeScript strict\n- **shadcn\u002Fui** — Radix primitives + Tailwind CSS v4\n- **Tailwind CSS v4** — oklch design tokens\n- **Lucide React** — default icons (replaced by extracted SVGs during cloning)\n\n## How It Works\n\nThe `\u002Fclone-website` skill runs a multi-phase pipeline:\n\n1. **Reconnaissance** — screenshots, design token extraction, interaction sweep (scroll, click, hover, responsive)\n2. **Foundation** — updates fonts, colors, globals, downloads all assets\n3. **Component Specs** — writes detailed spec files (`docs\u002Fresearch\u002Fcomponents\u002F`) with exact computed CSS values, states, behaviors, and content\n4. **Parallel Build** — dispatches builder agents in git worktrees, one per section\u002Fcomponent\n5. **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()` values, interaction models, multi-state content, responsive breakpoints, and asset paths. No guessing.\n\n## Use Cases\n\n- **Platform migration** — rebuild a site you own from WordPress\u002FWebflow\u002FSquarespace into a modern Next.js codebase\n- **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\n- **Learning** — deconstruct how production sites achieve specific layouts, animations, and responsive behavior by working with real code\n\n## Not Intended For\n\n- **Phishing or impersonation** — this project must not be used for deceptive purposes, impersonation, or any activity that breaks the law.\n- **Passing off someone's design as your own** — logos, brand assets, and original copy belong to their owners.\n- **Violating terms of service** — some sites explicitly prohibit scraping or reproduction. Check first.\n\n## Project Structure\n\n```\nsrc\u002F\n  app\u002F              # Next.js routes\n  components\u002F       # React components\n    ui\u002F             # shadcn\u002Fui primitives\n    icons.tsx       # Extracted SVG icons\n  lib\u002Futils.ts      # cn() utility\n  types\u002F            # TypeScript interfaces\n  hooks\u002F            # Custom React hooks\npublic\u002F\n  images\u002F           # Downloaded images from target\n  videos\u002F           # Downloaded videos from target\n  seo\u002F              # Favicons, OG images\ndocs\u002F\n  research\u002F         # Extraction output & component specs\n  design-references\u002F # Screenshots\nscripts\u002F\n  sync-agent-rules.sh  # Regenerate agent instruction files\n  sync-skills.mjs      # Regenerate \u002Fclone-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)\n```\n\n## Commands\n\n```bash\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\n```\n\n### If using docker\n\n```bash\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\n## Updating for Other Platforms\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`                             | `bash scripts\u002Fsync-agent-rules.sh` |\n| `\u002Fclone-website` skill | `.claude\u002Fskills\u002Fclone-website\u002FSKILL.md` | `node scripts\u002Fsync-skills.mjs`     |\n\nEach script regenerates the platform-specific copies automatically. Agents that read the source files natively need no regeneration.\n\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=JCodesMore\u002Fai-website-cloner-template&type=Date)](https:\u002F\u002Fstar-history.com\u002F#JCodesMore\u002Fai-website-cloner-template&Date)\n\n## License\n\nMIT\n","AI Website Cloner Template 是一个使用 AI 编码代理一键克隆任何网站的项目。其核心功能在于通过 AI 识别目标网站的设计元素和资产，自动生成基于 Next.js 的现代化代码库。技术特点包括支持多种 AI 编码代理（推荐 Claude Code），并利用 React 和 TailwindCSS 等现代前端技术栈实现高效重构。该项目非常适合需要快速原型设计、学习优秀网站结构或进行逆向工程分析的开发者使用。",2,"2026-06-11 02:57:02","top_language"]