你在任何一个 AI 编程代理里敲一行命令 /clone-website <target-url>,它就能把一个线上网站,从设计稿到代码,完整复刻成一个干净的 Next.js 工程。不是截图,不是模仿风格,是连字体、颜色、动画、响应式断点都还原出来的可运行代码。
这个项目叫 AI Website Cloner Template,作者 JCodesMore,GitHub 上两个月拿了将近两万五千颗星,MIT 许可证。
核心技术是五阶段流水线:
侦察 Reconnaissance — 启动浏览器截图、滚动、点击、悬停,提取设计令牌
基础 Foundation — 写入设计令牌,下载所有素材
组件规格 Component Specs — 先写文档再写代码,精确 CSS 值 + 交互状态
并行构建 Parallel Build — git worktree 多分支,多个代理同时干活
组装质检 Assembly & QA — 合并分支,视觉对比,修偏差
支持 13 个 AI 编程代理:Claude Code(推荐)、Codex CLI、Copilot、Cursor、Gemini CLI、Windsurf、Cline、Roo Code、Continue、Amazon Q、Augment Code、Kiro、OpenCode。靠单一真相文件(AGENTS.md + SKILL.md)加自动同步脚本实现跨平台。
克隆出来的技术栈:Next.js 16 + React 19 + TypeScript strict + shadcn/ui + Tailwind CSS v4 + Lucide React。2026 年现代前端事实标准。
正当用途:平台迁移(WordPress/Webflow → Next.js)、源码丢失恢复、学习研究。 不适用场景:钓鱼冒充、盗用设计、违反服务条款。
时间轴:
00:00 开场:一条命令克隆任意网站
00:56 什么是 GitHub 模板
01:59 五阶段流水线:从侦察到质检(核心)
03:48 并行构建:多个代理同时干活
04:54 支持 13 个 AI 代理 + 单一真相架构
06:28 技术栈:2026 现代前端标准
07:35 三个正当用途
08:52 伦理边界
09:56 凭什么两个月两万五千颗星
11:14 更大的趋势:从截图到代码到工程
12:31 总结
项目:github.com/JCodesMore/ai-website-cloner-template