丢一个 URL 就能重建整个网站：34.9 千星的 AI 克隆模板

把一个网站 URL 丢给 coding agent，它就去截屏、提取设计 token、拆组件、写规格、并行重建——最后交付一个干净的 Next.js 16 应用。这就是 ai-website-cloner-template（34.9 千 stars，MIT），今天 Trending 上最实用的项目之一。

它是怎么工作的

/clone-website 技能跑的是一条五阶段流水线：

1. 侦察：截屏、提取设计 token、交互扫描（滚动、点击、悬停、响应式）；
2. 地基：更新字体、颜色、全局样式，下载全部资源；
3. 组件规格：把每个组件写成详细的 spec 文件——精确到 getComputedStyle() 的计算值、交互模型、多状态内容、响应式断点和资源路径，全部写死，不让 agent 猜；
4. 并行构建：在 git worktree 里派出 builder agent，一个区块一个；
5. 组装与 QA：合并 worktree、接线页面、跑视觉 diff 对比原图。

技术栈是 Next.js 16（App Router、React 19、TypeScript strict）+ shadcn/ui + Tailwind CSS v4（oklch design tokens）+ Lucide 图标。

快速上手

项目本身就是个模板，推荐让 agent 自己搞定环境：

Set up https://github.com/JCodesMore/ai-website-cloner-template
as a standalone project in a new folder on my computer.
Ask me where to put it. Clone the repository, remove its origin remote,
install dependencies, and run npm run check. Leave it ready for me
to clone a website.

然后开打：

建好后想让 agent 改哪里直接说。需要 Node.js 24+，Claude Code（Opus 5 效果最佳）、Codex、Cursor、OpenCode 都支持。

三个真实场景

• 平台迁移：把 WordPress/Webflow/Squarespace 上你自己拥有的站点，重建成现代 Next.js 代码库；
• 源码丢失抢救：站点还活着、仓库没了、开发者离职了、技术栈过时了——用现代格式把代码拿回来；
• 学习：拆解生产级站点是怎么实现特定布局、动画和响应式行为的，对着真实代码学最快。

一条红线

README 把不可用途写得很清楚：钓鱼与冒充——不能用于欺骗性目的或违法行为；把别人的设计当成自己的——logo、品牌资产和原创文案归原作者所有；部分网站的服务条款明确禁止克隆。

这个自觉值得点赞：工具本身中立，但"能克隆"和"可以冒充"之间的界线，项目方主动帮你画出来了。

仓库地址：github.com/JCodesMore/ai-website-cloner-template（MIT）。