一个命令，把任意网站逆向还原成 Next.js 代码库。
这是 ai-website-cloner-template 在做的事。

场景：你看到一个网站的设计很好，想复刻它的结构和视觉；或者你自己的网站还在线，但源码丢了——开发者离职、老仓库找不到、技术栈已经是遗留系统。以前这两种情况都很棘手，现在有了另一条路。

1. 它是怎么工作的
本质是一条多阶段的 agent pipeline，分工很清晰：
1）侦察阶段：截图、提取设计 token、模拟交互（滚动、点击、hover、响应式断点），把目标网站的视觉和行为信息全部采集下来
2）基础建设：更新字体、颜色变量、全局样式，下载所有静态资源
3）组件规格：为每个区块写详细的 spec 文件，包含精确的 CSS 计算值、状态模型、内容结构和响应式断点
4）并行构建：多个 builder agent 同时跑，每个负责一个组件，在独立的 git worktree 里完成
5）组装 + QA：合并所有 worktree，接线，跑视觉 diff 和原站对比
整条流程 agent 自己完成，每个 builder 拿到的是精确的 getComputedStyle() 值和完整的交互模型。

2. 输出的是真正可用的现代代码
不是截图，不是静态 HTML。最终产物是 Next.js 16（App Router + React 19）+ TypeScript strict + Tailwind CSS v4 + shadcn/ui 的完整代码库，可以直接在自己的项目上继续开发。把逆向出来的东西直接落在一个主流、可维护的技术栈上，而不是还原成原来那堆遗留代码。

3. 适合哪些情况
几个具体的用途：
1）从 WordPress / Webflow / Squarespace 迁移到现代 Next.js 代码库
2）源码丢失但网站还在线，需要把代码找回来
3）想学某个生产级网站是怎么实现某个交互效果的，直接拿来拆解

支持 Claude Code、Codex、Cursor、Copilot、Gemini CLI 等主流 agent，推荐 Claude Code + Opus 4.7 跑效果最好。

项目地址：github.com/JCodesMore/ai-website-cloner-template

#HOW I AI# #程序员#