你看上一个落地页的排版和滚动动画，想拿来当自己项目的参考；或者手上有个还在跑的站点，源码已经找不着了，只剩线上页面。对着浏览器抠样式，字体、间距、hover 状态全靠手量，做出来往往只有七八分像。
ai-website-cloner-template 是一个给 AI 编程 Agent 用的项目模板。你给它一个网址，它会先把页面的真实样式和素材量清楚，再写成一套能继续改的 Next.js 工程，而不是一堆另存下来的静态 HTML。GitHub 上目前超过 3.9 万 star（截至 2026 年 11 月），MIT 协议。
这篇讲它做了什么、流水线怎么走、怎么用，以及使用时要注意的边界。
它给出的不是爬虫结果，是能接着改的工程
它本身不是一个装完就能点的独立软件，而是一个仓库模板。官方建议先用 GitHub 的 Use this template 生成你自己的仓库，再交给 Agent 去跑 /clone-website。
按当前仓库的说明，产出基于 Next.js 16 的 App Router、React 19 和 TypeScript 严格模式，UI 用 shadcn/ui，样式是 Tailwind CSS v4。图标默认用 Lucide，克隆过程中会被从原站提取的 SVG 替换。组件和素材按站点分开存放，研究记录和对比截图会留在 docs/ 里。
跑完之后可以用 npm run dev 启动，也可以用 npm run check 一次做完 lint、类型检查和构建。这和“另存为网页”拿到的那堆难以维护的文件不是一类东西。
流水线：先测量，再施工，最后对照
官方 README 把 /clone-website 的流程写成四步：
- Map：把源站 URL 映射到本地路由，并保留已有工作。
- Observe：检查桌面和移动端页面，提取真实素材和字体，并走一遍不同交互状态。
- Build：按可编辑组件和真实交互来实现；相对独立的区块可以交给多个 Agent 并行做。
- Compare：在相同尺寸和状态下对照源站与本地页面，修掉看得见的差异，再跑生产检查。
和“截张图让 AI 照着画”的差别，主要在 Observe 这一步。截图是扁的，真实的样式数值、hover 和点击后的样子、响应式断点很容易丢，Agent 只能猜。这个模板会先把这些值落到规格和图证里，再让负责搭建的 Agent 按规格写，而不是对着一张效果图想象。
怎么用
环境要求是 Node.js 24 或更高，以及一个支持的 AI 编程 Agent。官方当前列出的平台是：
| Agent | 说明 |
|---|---|
| Claude Code | 官方推荐，说明里写明配合 Opus 5.5 效果更好 |
| Codex CLI | 支持 |
| OpenCode | 支持 |
| Cursor | 支持 |
有两种起步方式。
第一种，直接让你正在用的 Agent 帮忙建项目。官方给了一段可以贴进 Claude Code 或 Codex 的说明：把这个模板建成一个独立项目，克隆仓库、去掉 origin 远程、安装依赖并跑 npm run check，同时问你放在哪个目录。
第二种，先在 GitHub 上用 Use this template 生成自己的仓库，再让 Agent 克隆到本地、安装依赖并跑检查。不要直接 clone 原模板仓库来存放你要还原的站点，以免和模板本身搅在一起。
项目准备好后，打开 Agent，并确保它能使用浏览器。在 Claude Code 或 Cursor 里运行：
/clone-website https://example.com
把网址换成你要还原的站点。指令写在 .agents/skills/clone-website/，Claude Code 通过 .claude/commands/clone-website.md 接到 /clone-website；Codex、Cursor、OpenCode 会直接读这套 skill。项目还提供 AGENTS.md 作为统一指令源。
如果更习惯容器，也可以用官方的 Docker Compose：docker compose up app --build 构建并运行，或 docker compose up dev --build 在 3001 端口跑开发模式。
还原出来的前端如果还要继续打磨视觉，可以再配合已经在用的前端方向 skill，比如让 Claude Code 写出不像模板的前端页面，frontend-design Skill 安装与提示词写法。
适合什么场景，以及必须守住的红线
官方自己列出的适用场景有三类：把你拥有的 WordPress、Webflow、Squarespace 站点迁到 Next.js；站点还在线上但源码丢失或技术栈已经没法维护，需要先拿回一套现代格式的代码；以及学习某个上线站点的布局、动画和响应式实现。
官方也把不该做的事写得很清楚：不能用来钓鱼或假冒别人的网站；不能把别人的设计、logo、品牌资产和原创文案当成自己的；有些网站的服务条款禁止抓取或复制，动手前要先看条款。
它还原的是前端表现，复杂的后端逻辑和动态数据不在范围内。还原结果仍然需要人对照、校对后再往下做。
小结
这个模板真正有用的，不是“能克隆网站”这一句，而是把测量、施工和对照做成了 Agent 能执行的流程。先拿到真实样式和状态，再并行搭建，最后按屏幕对照，得到的是一套能跑起来、能继续改的 Next.js 工程。
如果你在 Claude Code 或 Codex 里跑这套流程，也可以先看一眼AIGoCode 使用指南，按当前分组和模型来接。