📌 项目地址：JCodesMore/ai-website-cloner-template | ⭐ 15,672 颗星 | 🔧 TypeScript | 📜 MIT
这个模板解决什么问题
很多人看到15,672个star，以为这是个“输入网址一键克隆完整网站”的自动化工具。实际上，JCodesMore/ai-website-cloner-template 是一个模板项目，它把“让AI帮你克隆网站”这个过程标准化了，而不是自动化到底。
作者在README第一行就强调：不要直接克隆这个仓库，要点“Use this template”创建自己的仓库。因为模板只负责提供Next.js + shadcn/ui + Tailwind的骨架，以及一套对话指令（存在AGENTS.md里）。你真正要干的，是让AI agent去干活——模板替你省掉每次重复搭环境、写prompt的时间。
两条命令启动克隆，剩下让AI跑
流程很简单，前提是你装好了Claude Code（或者其他AI agent）。
- 在GitHub上点
Use this template→Create a new repository，取个名字。 - 克隆你新建的仓库：
git clone https://github.com/YOUR-USERNAME/YOUR-NEW-REPOSITORY.git并cd进去。 - 安装依赖：
npm install - 启动Claude Code（推荐）：
claude --chrome - 在Claude Code交互中运行：
/clone-website https://目标网站.com
第5步是核心。AI agent会做四件事：分析目标站点结构 → 提取颜色、间距、字体等设计令牌 → 下载图片和SVG图标 → 并行生成Header、Card、Footer等模块的代码，然后组装成一个完整的Next.js项目。
克隆完成后，你可以按Next.js的标准方式启动开发服务器（不是模板需要你做的，但项目生成后自带脚本）。
AI是如何拆解网站的
这个模板的克隆不是截图转HTML那种残暴做法。它做的是语义化重建：
- 分析DOM结构和组件树（不是像素位置），识别出导航、卡片、表单、页脚等模块。
- 抽取视觉参数：从目标网站的CSS（或渲染结果）里提取颜色（用oklch色彩空间）、字号、间距、阴影等，写入
tailwind.config.ts的theme.extend。例如目标站用了#ff6600，AI可能生成oklch(0.6 0.18 30)——视觉一致，且维护性比硬编码色值好。 - 下载资源：图片、图标SVG保存到
public目录，Lucide React图标会被目标站的SVG替换。 - 并行构建组件：同时生成多个组件文件，再用Next.js路由组装。shadcn/ui的组件以源码形式内嵌（
components/ui/目录下），你可以直接修改圆角、大小等样式，不需要绕库的props。
整个过程依赖AI agent的分析能力。模板不提升AI的上限，只是把流程串起来。
实测：一个营销落地页的还原效果
我拿一个约600行HTML的落地页试了。目标网站是静态营销页面，设计比较规范（语义化CSS class，没有JS交互）。克隆完成后直接跑起来，视觉还原度大概85%。
出问题的地方主要是三个：
- 原站CDN图片没被下载：AI会试图下载，但有些CDN图片有防盗链，需要手动换成placeholder或本地图。
- 自定义字体没被正确提取：目标站用了
@font-face定义的字体，AI只提取了字体名，没下载字体文件。你得自己把字体文件丢到public/fonts，或者改tailwind.config.ts的fontFamily定义。 - hover动画基本都丢了：AI只读样式结构，不处理JavaScript交互。hover效果在CSS里定义的可能会保留（比如简单的color change），但涉及JS的动画（比如on hover弹出浮层）全部丢失。
这些局限不是模板的锅——项目README只说“reverse-engineering any website into a clean, modern Next.js codebase”，没承诺保留交互。
哪个AI agent干活最稳
官方测了八款agent，推荐列表放在AGENTS.md里。我自己试了Claude Code和Codex CLI，差距明显：
- Claude Code（Opus 4.7）：设计令牌提取最准。它能从目标CSS里拿出oklch格式的颜色值，而不是返回近似色。组件拆分合理，会把导航、卡片、表单拆成独立文件，文件名也符合Next.js惯例。
- Codex CLI：流程能跑通，但组件边界有时模糊。比如把两段不同区域的文本（一个是Hero标题，一个是下方描述）误判成同一个组件。
- Cursor / Windsurf / Gemini CLI：README标了Supported。我试了Cursor给一个复杂电商首页做克隆，结构提取不如Claude Code稳定，部分组件被合并成一个超大的
Page.tsx。
如果你打算用GPT-4o或其他模型驱动的agent，模板本身不解决这个——效果取决于agent的阅读理解能力。
什么值得克隆，什么不值得
值得做的：静态营销页、落地页、个人作品集、产品介绍页。这些页面的核心价值是设计（布局、配色、排版），交互极少。克隆后你拿到干净代码，可以往上加自己的业务逻辑。
不值得做的：后台管理面板、电商购物流程、仪表盘。这些站点的价值在交互逻辑（状态管理、表单验证、实时更新），克隆只拿到壳。JS交互全部丢失，你得从头写。不如直接用现成的管理模板。
项目作者在README里只提“reverse-engineering any website”，没承诺交互保留，所以不算噱头。
几个实用提示
- 选Opus 4.7模型：我用GPT-4o跑同一个站，设计令牌差了3-4个色值（把
#ff6600近似成了#ff6633），组件拆分也粗糙了一些。 - 目标网站越规范，克隆效果越好：HTML语义化好、CSS class命名清晰、不依赖JS渲染的页面，AI分析更准。SPA纯JS渲染的页面（比如React SPA）临时困难，因为AI抓取的是渲染后的HTML还是源代码？这取决于agent的浏览器能力（Claude Code的
--chrome模式会打开无头浏览器）。 - 如果你看到大量
!important或复杂媒体查询：AI可能会漏掉部分断点，比如一个针对平板宽度768px的布局没被还原。需要自己检查Lighthouse报告补全。 - 字体文件不会自动下载：要么在
public/fonts下手动放文件，要么改tailwind.config.ts里的字体定义，用Google Fonts或系统字体替代。
总结
这个模板值15,672个star，因为它解决了一个真实痛点——把“用AI抄设计”从每次手工写prompt变成了可重复的流程。它不完美，但比从零搭Next.js + shadcn/ui再逐段写prompt省至少一小时。
如果你想克隆后直接上线，会失望。如果你要找一个设计起点，在上面重写交互、换内容、加功能，这项目很高效。