很多企业官网、产品页一跑就是好几年。页面能打开，但源码早就不知道丢哪儿去了，或者老项目依赖一堆过时的库，谁也不敢动。
想重构吧，前端工程师得手动分析页面结构、抄样式、整理素材、重写组件，费时费力。
最近看到一个开源项目 JCodesMore/ai-website-cloner-template，思路挺直接的——让 AI Coding Agent 帮你把现有网站反向重构成干净的 Next.js 代码库。官方推荐用 Claude Code，但其实支持的工具还挺多。
它到底是什么？
简单说，这是一个给 AI Agent 用的前端重构模板。
不是爬虫，也不是简单扒 HTML/CSS。跑 /clone-website 之后，AI Agent 会自己去看目标页面：截图、提取设计 token、检查交互、测响应式，然后生成组件规格，再分派给多个 builder agent 并行重建。
出来的产物是一个正经的 Next.js + React + Tailwind 项目，不是一次性静态页面。
能解决什么问题？
说实话，这个场景比想象中常见：
网站还跑着，但代码仓库早没了
老项目是 WordPress / Webflow / Squarespace 做的，想迁出来
页面效果还行，但后续没人敢改
想学别人某个页面的布局是怎么实现的
想把官网重构成组件化的现代项目
官方 README 里也说了，这个工具不是用来抄别人网站的，而是帮你把自己有权处理的页面转成更好维护的工程。这点后面还会提到。
具体怎么用？
一条命令启动：
/clone-website <目标URL>
执行后 AI Agent 会做一轮"侦察"：截图、提取颜色/字体/间距/圆角/阴影这些设计 token、检查交互状态、测响应式断点，甚至还会去点一点按钮、悬停看看效果。
比自己打开 DevTools 一点点抄样式快多了。
技术栈
当前版本用的是：
Next.js 16
React 19
TypeScript（strict 模式）
Tailwind CSS v4
shadcn/ui + Radix primitives
Lucide React 图标
要求 Node.js 24 以上。提供的脚本有 dev、build、start、lint、typecheck、check 这些，走的是正常现代前端开发流程。
支持哪些 AI 工具？
虽然官方首推 Claude Code，但现在已经支持不少了：Codex CLI、OpenCode、GitHub Copilot、Cursor、Windsurf、Gemini CLI、Cline、Roo Code、Continue、Amazon Q、Augment Code、Aider……
v0.2.0 开始加入多平台 Agent 支持，不再只绑 Claude Code。对团队来说比较实用，毕竟大家用的工具可能不一样。
适合谁用？
旧站迁移是最直接的场景——把自己拥有的网站从老技术栈迁到 Next.js。
源码丢了也能派上用场，网站还在线，至少能拿 AI 生成的代码做参考重建。
另外用来学习也不错，看优秀页面的布局方式、响应式处理和组件拆分，比纯看教程直观。
部署参考
环境准备（以 Debian/Ubuntu 为例）：
bash
apt update
apt install -y git nodejs npm
# 建议用 Node.js 24+，可以用 nvm 安装
拉项目：
bash
git clone https://github.com/JCodesMore/ai-website-cloner-template.git my-clone
cd my-clone
npm install
npm run dev
然后用 AI Agent 执行重构。以 Claude Code 为例：
bash
claude --chrome
/clone-website https://你的网站地址
注意： 只填自己拥有的、客户授权的、或明确允许重构的网站，别拿去抄别人的品牌页面。
合规边界，这点很重要
官方 README 的 "Not Intended For" 部分写得很清楚：
不能用来做钓鱼、冒充、欺骗
不能把别人的设计假装成自己的作品
Logo、品牌资产、原创文案归原主所有
要检查目标网站是否禁止抓取/复现
合理的使用方式：
重构自己的网站 ✓
客户授权的网站 ✓
学习公开页面的布局思路 ✓
恢复自己丢失源码的旧项目 ✓
不该做的事：
仿冒登录页 ✗
复制竞争对手官网 ✗
冒充品牌页面 ✗
未经授权复刻商业设计 ✗
服务器部署建议
这个模板生成的是 Next.js 项目，可以在本地跑，也可以部署到服务器上当正式站点维护。
如果只是测试，本地就够了。但要上生产——比如企业官网、产品页、活动页——建议放稳定的云服务器上。
一个比较常见的结构：
AI 重构页面
↓
人工替换未授权图片和 Logo
↓
Next.js 构建
↓
服务器部署
↓
Nginx 反代 + HTTPS
配置方面，跑单个官网项目 2核4G 起步；多个前端项目 + 预览环境建议 4核8G；还要跑数据库、后台、CI/CD 的话 8核16G 起步。
上线前别忘了这些
AI 生成出来的页面不建议直接上线，稳妥流程是：
替换所有未授权的图片和 Logo
检查文案版权
检查链接和表单提交逻辑
测移动端适配
跑
npm run lint+typecheck+build测 Lighthouse 性能
配 HTTPS 和安全响应头
人工视觉验收
项目自带 npm run check，会上 lint、typecheck 和 build，上线前跑一遍比较安心。
我的看法
这个项目的思路其实挺务实的。老网站重构一直是个吃力不讨好的活——业务价值不明显，但工时耗死人。让 AI 先把脏活干了，人再来精修，这个分工我觉得是合理的。
当然，输出的代码质量肯定要看具体页面复杂度，不是所有场景都适合。而且合规那根线一定要守好，这个工具的能力边界其实写得挺清楚的，用之前值得认真读一下。
总的来说，如果你正好有老官网要重构、或者源码丢了想恢复，这个模板值得试试。配合一台稳定的云服务器，能把重构结果直接部署成长期维护的正式站点，省不少事。
项目地址： https://github.com/JCodesMore/ai-website-cloner-template
改稿说明：
去掉了原文"一、二、三……十"的编号条目结构，改为自然段落
删掉"核心价值""本质上""这种方式比较适合"等 AI 高频词
加入个人观点和语气（"思路挺直接的""这点后面还会提到""吃力不讨好的活"）
合并了部分列表，改为自然语言叙述
保留了所有技术细节、命令、合规提示和部署建议