引言“指向一个 URL运行/clone-websiteAI Agent 会检查网站、提取设计 Token 和资源、写组件规格然后派遣并行 Builder 重建每一个区块。”这是每日一个开源项目系列的第144篇文章。今天的主角是ai-website-cloner-template——一个用 AI 编程 Agent 把任意网站逆向成 Next.js 代码库的 GitHub 模板仓库。把网站截图变成可运行代码是一个经典的 Vibe Coding 场景但大多数实现都浅尝辄止让 LLM 看一张截图、近似还原布局、用占位符代替真实内容。这个模板的思路截然不同它设计了一套严格的多阶段 Agent 工作流核心原则是完整性优于速度——每一个 Builder Agent 在动手之前必须拿到精确的getComputedStyle()值、真实下载的资源文件、完整的交互状态规格。22k Stars 说明这个方向有真实需求但更值得关注的是它的工程设计——特别是用 git worktree 实现真正的 Agent 并行构建。你将学到什么五阶段克隆流水线侦察 → 基础建设 → 组件规格 → 并行构建 → 汇总 QAgit worktree 并行 Agent 模式每个 Builder Agent 在独立分支上工作的完整流程组件规格文件的设计原则为什么规格文件是合同而非参考交互模型识别区分点击驱动、滚动驱动、时间驱动的关键步骤跨平台 Agent 支持13 种 AI 编程工具的适配方式单一源文件 → 自动同步前置知识使用过 Claude Code 或 Cursor 等 AI 编程工具了解 Next.js 的基本概念了解 git 分支的基本操作项目背景项目简介ai-website-cloner-template 是一个 GitHub 模板仓库is_template: true预置了 Next.js 16 shadcn/ui Tailwind v4 的项目脚手架以及一个名为/clone-website的 AI Agent Skill技能。使用方式在 GitHub 上用Use this template创建自己的仓库启动 AI Agent执行/clone-website 目标URLAgent 自动完成从侦察到出码的整个流程。项目的核心工程贡献不是技术栈选择而是那套/clone-websiteSkill 背后的多 Agent 协作规范——特别是用 git worktree 实现真正并行的组件构建以及强制要求先写规格、再派 Builder的流程约束。作者/团队介绍作者: JCodesMore主要语言: TypeScriptLicense: MIT社区: Discord1400896964597383279项目数据⭐ GitHub Stars:22,100 Forks: 3,173大量用于创建独立项目 License: MIT 创建时间: 2026-03-13主要功能核心作用传统截图克隆方式 截图 → 让 LLM 近似还原 → 占位符内容 → 手动修正颜色/间距 → 反复迭代 ai-website-cloner-template 方式 /clone-website https://example.com ↓ 阶段1 侦察截图 滚动/点击/悬停交互扫描 提取设计 Token ↓ 阶段2 基础建设更新字体/颜色/globals.css 下载所有资源 提取 SVG 图标 ↓ 阶段3 组件规格逐区块写 spec 文件精确 CSS 值 真实内容 交互状态 ↓ 阶段4 并行构建git worktree 为每个区块开独立分支 派 Builder Agent 并行工作 ↓ 阶段5 汇总 QA合并所有 worktree 接线 npm run build 验证使用场景平台迁移把自己运营的 WordPress/Webflow/Squarespace 网站重建为 Next.js 代码库获得完整的代码控制权源码丢失网站在线运行但仓库没了、开发者离开了、或者技术栈太老——用 AI 从线上版本找回代码学习参考通过逆向真实生产网站理解特定布局、动画、响应式行为的实现方式拿到真正可运行的代码而不只是截图不适用场景README 明确列出钓鱼或仿冒用于欺骗性目的、冒充他人、或任何违法行为侵权Logo、品牌资源、原创文案属于原作者所有违反 ToS部分网站明确禁止抓取或复制——使用前自行确认快速开始1. 创建自己的仓库在 GitHub 项目页面点击Use this template→Create a new repository不要直接 clone 模板仓库。2. 克隆并安装gitclone https://github.com/YOUR-USERNAME/YOUR-NEW-REPO.gitcdYOUR-NEW-REPOnpminstall3. 启动 Claude Code推荐claude--chrome# --chrome 启动 Chrome MCP用于浏览器自动化4. 执行克隆技能/clone-website https://target-website.com支持多 URL 并行处理/clone-website https://site1.com https://site2.com5. 开发预览npmrun dev# 启动开发服务器npmrun check# 运行 lint typecheck build支持的 AI Agent 平台Agent状态Claude Code推荐Opus 4.7Codex CLI支持OpenCode支持GitHub Copilot支持Cursor支持Windsurf支持Gemini CLI支持Cline支持Roo Code支持Continue支持Amazon Q支持Augment Code支持Aider支持跨平台支持的实现方式AGENTS.md是单一真相来源执行bash scripts/sync-agent-rules.sh自动为所有平台生成各自格式的指令文件CLAUDE.md、GEMINI.md、.cursor/、.windsurf/等。项目详细剖析五阶段流水线阶段 1侦察Reconnaissance这不只是截图。侦察阶段要完成三个强制任务截图在 1440px桌面和 390px移动端两个视口各取一张全页截图存入docs/design-references/作为整个流程的视觉基准。强制交互扫描最容易被忽略的步骤滚动扫描从头到尾慢速滚动记录 - 导航栏在什么滚动位置改变外观 - 哪些元素滚入视口时有动画 - 哪些区块有 scroll-snap - 是否有 Lenis/Locomotive Scroll 等平滑滚动库 点击扫描点击每个看起来可交互的元素 - 每个 Tab/Pill 切换显示哪些内容 - 哪里弹出 Modal哪里展开 Dropdown 悬停扫描悬停每个可能有 hover 状态的元素 - 颜色变化、缩放、阴影、透明度… 响应式扫描在 1440px / 768px / 390px 三个视口验证记录布局变化点所有发现存入docs/research/BEHAVIORS.md——这是整个克隆过程的行为圣经。页面拓扑图从上到下列出页面所有区块记录每个区块的交互模型静态/点击驱动/滚动驱动/时间驱动存为docs/research/PAGE_TOPOLOGY.md。阶段 2基础建设Foundation Build由 Orchestrator Agent 亲自完成不派给子 Agent更新src/app/layout.tsx配置目标网站的真实字体next/font/google或next/font/local更新src/app/globals.css把目标网站的颜色 Token背景、前景、主色、静音色…映射到 shadcn 变量系统用 oklch 色彩空间提取所有 SVG 图标 → 保存为命名 React 组件存入src/components/icons.tsx执行资源下载脚本scripts/download-assets.mjs批量下载页面上所有图片、视频到public/验证npm run build通过资源发现用浏览器 MCP 执行 JavaScript精确枚举所有img、video、CSS background-image包括绝对定位的叠加层一个看起来像单图片的区块往往是背景图 前景 UI 截图 悬浮图标的多层叠加遗漏任何一层都会让克隆版本看起来是空的。阶段 3组件规格Component Specs每个区块构建之前必须先写规格文件docs/research/components/name.md。规格文件是 Builder Agent 的合同包含该区块的视口截图本地路径用getComputedStyle()提取的精确 CSS 值不是目测估算下载后的资源文件路径本地public/路径不是原始 URL真实文字内容从element.textContent提取不是占位符所有交互状态Tab 切换时每个状态的内容、滚动前后的 CSS 差异、过渡动画参数响应式断点行为CSS 提取脚本通过浏览器 MCP 执行// 对每个组件容器执行(function(selector){consteldocument.querySelector(selector);constcomputedgetComputedStyle(el);constprops[fontSize,fontWeight,fontFamily,lineHeight,letterSpacing,color,backgroundColor,background,padding,paddingTop,paddingRight,paddingBottom,paddingLeft,margin,borderRadius,boxShadow,display,flexDirection,gap,alignItems,justifyContent,position,zIndex,// ... 完整属性列表];returnObject.fromEntries(props.map(p[p,computed[p]]));})(selector)复杂度预算规则如果一个区块的规格文件超过约 150 行说明太复杂需要拆分。这是机械性检查不允许用但它们是相关的来绕过。阶段 4并行构建Parallel Build via git worktrees这是最关键的设计——用 git worktree 为每个 Builder Agent 创建独立的工作分支# Orchestrator 为每个区块创建 worktreegitworktreeadd.worktrees/hero-section feature/hero-sectiongitworktreeadd.worktrees/features-grid feature/features-gridgitworktreeadd.worktrees/pricing-section feature/pricing-section# ...以此类推# 每个 worktree 里派一个 Builder Agent 工作# Builder 接收完整的规格文件内容作为 prompt 的一部分# Builder 完成后验证 npx tsc --noEmit 通过每个 Builder Agent 的工作包包含规格文件的完整内容inline 进 prompt不是路径引用区块截图路径已下载资源的本地路径全局样式系统字体变量、颜色 TokenBuilder Agent 不需要读其他区块的代码不需要理解整体页面结构只需要根据规格文件实现这一个组件并确保 TypeScript 编译通过。阶段 5汇总 QAAssembly QA# Orchestrator 把所有 worktree 分支合并回主分支gitmerge feature/hero-section feature/features-grid feature/pricing-section...# 解决合并冲突Orchestrator 有全局上下文可以合理处理# 在 src/app/page.tsx 里按正确顺序组装所有区块组件# 最终验证npmrun build# 必须通过没有任何妥协交互模型识别最贵的错误SKILL 文件花了大篇幅强调这一点原因是把点击驱动的 UI 建成滚动驱动或反之意味着完全重写而不是 CSS 调整。识别方法先不要点击。慢速滚动观察是否有元素自动变化如果有 → 滚动驱动。提取机制IntersectionObserver / scroll-snap / sticky / animation-timeline / JS 滚动监听如果没有 → 再测试点击/悬停驱动在规格文件里明确标注INTERACTION MODEL: scroll-driven with IntersectionObserver或INTERACTION MODEL: click-to-switch with opacity transition项目结构src/ app/ # Next.js 路由 components/ ui/ # shadcn/ui 原语组件 icons.tsx # 从目标网站提取的 SVG 图标React 组件 lib/utils.ts # cn() 工具函数 types/ # TypeScript 接口 hooks/ # 自定义 React Hooks public/ images/ # 从目标网站下载的图片 videos/ # 从目标网站下载的视频 seo/ # favicon、OG 图、webmanifest docs/ research/ # 提取输出组件规格、行为文档、拓扑图 design-references/ # 截图桌面 移动端 scripts/ sync-agent-rules.sh # 同步 AGENTS.md 到各平台格式 sync-skills.mjs # 同步 /clone-website 到各平台 AGENTS.md # Agent 指令的单一真相来源 CLAUDE.md # Claude Code 配置导入 AGENTS.md GEMINI.md # Gemini CLI 配置导入 AGENTS.md项目地址与资源官方资源GitHub: JCodesMore/ai-website-cloner-templateDemo 视频: YouTube项目 README 内链接Discord: discord.gg/hrTSX5yTpB总结ai-website-cloner-template 的价值不在于技术栈选型Next.js shadcn Tailwind 是常规选择而在于那套经过思考的多 Agent 协作规范。几个值得记住的设计决定“完整性优于速度”Builder Agent 必须拿到完整的规格才能开工中间没有猜测环节。这个约束让结果更可靠代价是侦察阶段更慢——作者认为这个权衡是对的。复杂度预算150 行规格 拆分信号用一个机械性规则控制每个 Builder 任务的范围而不是让 Orchestrator 凭感觉判断。这是工程纪律不是灵感。git worktree 并行每个 Builder Agent 在独立分支工作Orchestrator 最后合并。并行不只是同时跑多个任务而是有明确的隔离边界和合并策略。单一源文件 同步脚本AGENTS.md是所有 Agent 平台指令的单一来源修改一次脚本自动同步到 13 个平台的格式。这是跨平台工具链设计的一个值得借鉴的模式。探索 PrimeSkills —— 精选 AI Agent 与技能的市场每一个都经过真实企业工作流验证去掉浮夸留下真正有用的。欢迎访问我的个人主页发现更多有价值的见解和有趣的产品。