闻乐 | 发自 凹非寺
量子位 | 公众号 QbitAI

看到心仪的前端网站设计惊艳，想复刻同款却苦于繁琐的工程 CSS 调试？

告别 F12 逐行抄代码的时代！GitHub 上那个斩获 2万 Star的师最神器——ai-website-cloner-template，仅需一行命令，不想即可实现任意网站的看到克隆像素级克隆。

视频演示：https://mp.weixin.qq.com/s/aY5GjbcafuVZZvWBizF73g

核心能力：从 URL 到完整工程

只需输入目标 URL，源项AI 即可自动执行全站逆向解析：

1. 深度采集：精确计算页面元素样式，目出命令遍历滚动、现行点击、任意悬停等全量交互逻辑。网站
2. Token 提取：标准化提取设计 Token（色彩、前端字体、工程间距等）。师最
3. 多 Agent 并行重建：基于 Git 工作树，不想调度多个智能体并行构建组件。看到克隆
4. 工程输出：最终生成一套可直接本地运行的 Next.js 完整前端工程。

产物包含标准化路由、模块化组件及严格的 TypeScript 类型定义，执行 npm run dev即可启动开发服务。

全平台 AI 助手兼容：
完美支持 Claude Code、Codex CLI、Cursor、Copilot、Gemini CLI、Windsurf 等主流 AI 编程工具。

💡 作者建议：使用 Claude Code + Opus 4.7效果最佳。

极简使用指南

该项目为 GitHub 模板仓库，操作逻辑简单粗暴：

1. 生成仓库：访问项目页，点击 Use this template一键生成个人仓库。
2. 本地部署：

git clone https://github.com/你的用户名/你的新仓库.gitcd 你的新仓库npm install

1. 启动 AI：建议启用 --chrome参数以允许 AI 直接操控浏览器：

claude --chrome

1. 执行克隆：输入灵魂命令：

/clone-website https://目标网站URL

随后，AI 将自动接管后续工作。

批量处理：
支持同时输入多个 URL，AI 将并行处理，各站点隔离互不干扰：

/clone-website https://siteA.com https://siteB.com https://siteC.com

多平台一致性：
项目通过 AGENTS.md文件作为所有 AI 编码工具的“单一事实来源”。各平台配置文件由此自动同步生成，确保体验一致。新增平台支持只需修改 AGENTS.md并运行同步脚本：

bash scripts/sync-agent-rules.sh

技术揭秘：AI 全站复刻五步流水线

虽然交互简单，但背后的 AI 工作流极为复杂：

第一阶段：全域采集 (Global Scraping)

AI 对目标网站进行“全面体检”：
* 交互模拟：自动滚动页面，模拟鼠标悬浮、点击，测试不同视口宽度的响应式表现。
* 视觉录制：记录整站的视觉状态与交互行为。
* Token 提取：通过 getComputedStyle()获取浏览器真实计算值，提取配色、字体、字重、间距、圆角、阴影等设计 Token。
* 限制说明：私有业务 JS、需登录态的动态内容、第三方嵌入组件可能无法完整捕获。

第二阶段：基础搭建 (Foundation Setup)

• 全局样式更新：根据提取的 Token，配置字体文件、CSS 变量、颜色系统及 Tailwind 配置。
• 资源落盘：下载原站所有静态资源（图片、视频、favicon、OG 图等），按目录结构存储。
• 效果：项目底色与原站完全对齐，为后续组件开发奠定基础。

第三阶段：组件规格书 (Component Specs)

这是最核心的环节。AI 将页面拆解为独立区块（如导航栏、Hero 区、卡片、定价表、页脚），并为每个区块生成详细的组件规格文件：
* 精确的 CSS 计算值。
* 状态过渡细节（持续时间、缓动函数）。
* 响应式断点下的布局变化。
* 完整的文案内容。

第四阶段：并行构建 (Parallel Construction)

• Git Worktree 隔离：为每个组件创建独立的 Git 工作树。
• 多 Agent 施工：调度多个 Builder 智能体同时开发不同组件（如一个建导航，一个建 Hero 区），互不干扰，大幅提升效率。

第五阶段：组装质检 (Assembly & QA)

• 代码合并：将各 Worktree 代码合并至主分支，拼接完整页面，配置路由与布局。
• 自动化测试：执行 npm run check，进行 ESLint 检查、TypeScript 类型检查及生产环境构建。
• 最终产物：一套基于 Next.js 16+ / shadcn/ui / Tailwind CSS v4 / TypeScript Strict Mode的现代化前端工程，可直接修改或部署。

适用场景与合规提醒

作者推荐以下三种正当用途：

1. 平台迁移：将 WordPress、Webflow 或 Squarespace 搭建的网站迁移至 Next.js 技术栈，先生成基础代码再二次开发，避免从零重写。
2. 源码恢复：当网站在线但代码仓库丢失（如开发人员离职、老技术栈废弃）时，逆向还原为现代化代码。
3. 学习拆解：深入研究特定布局、滚动动画或响应式方案，通过阅读生成的代码，比手动在 F12 中调试更高效。

⚠️ 重要合规声明：
* 严禁用于钓鱼攻击。
* 尊重版权，使用前请核查目标网站的服务条款。
* 请合理使用工具，遵守法律法规。

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

(责任编辑：德甲)