尧图网页设计 
AI Website Cloner Template五阶段流水线全解工头模式如何指挥并行建造【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-templateAI Website Cloner TemplateAI网站克隆模板是一个基于AI编码代理的开源项目一条命令就能重建任何网站。给它一个目标URLAI代理会自动逆向分析原站的布局、配色、字体与交互产出一份像素级还原的现代 Next.js 代码库——全程无需手写代码。这个项目的核心是一条五阶段流水线和一个被称为工头模式Foreman的多代理协作设计。本文将逐个阶段拆解它的工作机制帮你彻底看懂这套流水线是如何运转的。 这个模板能做什么最直观的理解方式是看效果左边是原站右边是模板自动生成的克隆体——排版、卡片布局、选项卡切换甚至背景纹理都高度一致。它支持 Claude Code推荐、Codex CLI、Cursor、Gemini CLI、Cline 等 13 种以上 AI 编程客户端运行环境只需 Node.js 24 和任意一款 AI 代理。️ 五阶段流水线总览/clone-website技能按顺序执行五个阶段阶段名称核心任务产出物1侦察 Reconnaissance截图、提取设计令牌、交互扫描全页截图 行为记录2地基构建 Foundation更新字体、颜色、全局样式、下载资源可用的基础工程3组件规格 Specs为每个组件撰写精确规格文件*.spec.md规格文件4并行建造 Parallel Build派遣建造者代理在 worktree 中构建组件组件代码5组装与质检 Assembly QA合并分支、接线页面、视觉 diff像素级还原的克隆站整条流水线的灵魂是**提取与建造并行**的设计主代理一边提取下一节的规格一边让上一节的建造者代理在后台干活两者互不阻塞。 阶段一 侦察给网站做一次全面体检在动手之前先彻底了解目标。侦察阶段的代理会做四件事全页截图——桌面1440px与移动390px两种视口各截一张存入docs/design-references/作为后续所有阶段的基准参照提取设计令牌——字体、色板、圆角、阴影全部取自真实计算值不靠目测交互扫描——滚动、点击、悬停、响应式四种动作体检导航栏滚动多远会变色选项卡是滚动自动切换还是点击切换这些看不见的行为全部记录绘制页面拓扑——从上到下枚举每个区块标注固定定位、滚动动画和各区块的交互模型扫描结果汇总成行为档案BEHAVIORS.md和拓扑蓝图PAGE_TOPOLOGY.md是后续每个组件规格的必读依据。️ 阶段二 地基构建先打地基再盖楼地基阶段严格串行、不可并行因为它触碰的是全局共享文件合并字体与全局 CSS把原站色板映射为 src/app/globals.css 中的设计令牌将原站的内联 SVG 图标提取为 React 组件把全部图片、视频下载到 public/ 对应命名空间为内容结构定义 TypeScript 接口最后跑一次npm run build验证地基不牢并行建造寸步难行——这是整个流程中唯一不允许跳步的环节。 阶段三 组件规格并行建造的施工图纸这是流水线的核心。为每个组件必要时是子组件主代理撰写一份完整规格文件docs/research/站点/页面/components/名称.spec.md内容包含DOM 结构——元素层级关系精确 CSS 值——全部来自getComputedStyle()禁止估算所有状态与行为——悬停、滚动、点击前后两套样式差值以及过渡动画参数多状态内容——选项卡组件要逐个点击、逐个提取每个 Tab 的内容逐字文本与本地资源路径规格文件就是主代理与建造者代理之间的合同。项目还定了一条机械化的复杂度预算规则单个规格超过约 150 行说明区块太复杂必须拆分——任务越小产出越精准。⚡ 阶段四~五 并行建造、组装与视觉验收并行建造。主代理按规格文件派遣建造者代理每个代理在自己的 git worktree 分支中工作。每个建造者拿到的是规格文件全文、区块截图、目标文件路径——不需要读任何项目文档也不需要猜测任何一个 CSS 值。完工前必须通过npx tsc --noEmit类型自检。组装。主代理把各 worktree 分支合并回主干将组件接线到页面路由实现滚动动画、平滑滚动等页面级行为。视觉质检。合并后不可宣布完工原站与克隆体在桌面、移动两种视口下逐区块对比发现差异就回溯规格文件——规格错了就重新提取建造者写错了就按规格修正。全部通过视觉 diff克隆才算完成。 工头模式解析并行建造为什么不乱官方定义中有一个形象的比喻主代理不是先调研完再施工的两阶段流程而是一位在工地上走动的工头——检查到页面哪个区块就写下规格文件立刻把它交给专业建造者。三个设计决策让多个代理并行施工互不打架Worktree 隔离——每个建造者拥有独立分支文件冲突在物理上不可能发生冲突解决由掌握全部上下文的工头在合并时统一处理规格是唯一合同——建造者不读项目文档、不看模糊描述所有信息随提示词内联下发从源头消除沟通损耗步步验证——每个建造者自检tsc每次合并后npm run build构建中断在任何时刻都不被允许这套规则集中写在 AGENTS.md代理指令的唯一事实源中并通过 scripts/sync-agent-rules.sh 自动同步到 CLAUDE.md 和 GEMINI.md 等各平台副本。 快速上手四步克隆任意网站前提Node.js 24 与一款 AI 编程客户端推荐 Claude Code Opus 5。git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template my-clone cd my-clone npm install启动代理——例如在终端执行claude --chrome本技能依赖浏览器自动化一条命令启动流水线——输入/clone-website 目标URL支持一次传入多个 URL等待并行建造——工头自动执行侦察 → 地基 → 规格 → 并行建造 → 验收五个阶段个性化定制——像素级还原的基底完成后再按自己的品牌自由修改完整的五阶段工作流定义在技能文件 .claude/skills/clone-website/SKILL.md并通过 scripts/sync-skills.mjs 自动同步生成 Cline、Codex、Kiro、Roo Code 等各平台的版本。 为什么值得重点关注这个项目是当下增长最快的 AI 工具链项目之一GitHub Stars 持续攀升至 3 万它的适用场景非常务实平台迁移——把 WordPress / Webflow 老站重建为现代 Next.js 代码库源码丢失——站点还在线上但开发者离职、仓库没了用克隆拿回一份现代代码逆向学习——拆解生产级网站的布局、动画与响应式实现⚠️ 注意项目明确禁止用于钓鱼、冒充或把他人设计与文案据为己有使用前请确认目标站点允许复制。 附录项目关键文件速查文件作用SKILL.md五阶段流水线与工头模式的完整工作流定义AGENTS.md代理行为规则与并行建造约定单一事实源INSPECTION_GUIDE.md网站体检清单截图、令牌、布局、技术栈检查项README.zh-CN.md中文说明文档一句话总结AI Website Cloner Template 把克隆网站拆成五个可控阶段用规格合同 worktree 隔离 步步验证让一个工头代理安全地指挥多个建造者并行施工。无论是迁移站点、找回丢失代码还是逆向学习生产级网站这条五阶段流水线都是当前效率最高的路径之一。【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI Website Cloner Template五阶段流水线全解：工头模式如何指挥并行建造
AI Website Cloner Template五阶段流水线全解工头模式如何指挥并行建造【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-templateAI Website Cloner TemplateAI网站克隆模板是一个基于AI编码代理的开源项目一条命令就能重建任何网站。给它一个目标URLAI代理会自动逆向分析原站的布局、配色、字体与交互产出一份像素级还原的现代 Next.js 代码库——全程无需手写代码。这个项目的核心是一条五阶段流水线和一个被称为工头模式Foreman的多代理协作设计。本文将逐个阶段拆解它的工作机制帮你彻底看懂这套流水线是如何运转的。 这个模板能做什么最直观的理解方式是看效果左边是原站右边是模板自动生成的克隆体——排版、卡片布局、选项卡切换甚至背景纹理都高度一致。它支持 Claude Code推荐、Codex CLI、Cursor、Gemini CLI、Cline 等 13 种以上 AI 编程客户端运行环境只需 Node.js 24 和任意一款 AI 代理。️ 五阶段流水线总览/clone-website技能按顺序执行五个阶段阶段名称核心任务产出物1侦察 Reconnaissance截图、提取设计令牌、交互扫描全页截图 行为记录2地基构建 Foundation更新字体、颜色、全局样式、下载资源可用的基础工程3组件规格 Specs为每个组件撰写精确规格文件*.spec.md规格文件4并行建造 Parallel Build派遣建造者代理在 worktree 中构建组件组件代码5组装与质检 Assembly QA合并分支、接线页面、视觉 diff像素级还原的克隆站整条流水线的灵魂是**提取与建造并行**的设计主代理一边提取下一节的规格一边让上一节的建造者代理在后台干活两者互不阻塞。 阶段一 侦察给网站做一次全面体检在动手之前先彻底了解目标。侦察阶段的代理会做四件事全页截图——桌面1440px与移动390px两种视口各截一张存入docs/design-references/作为后续所有阶段的基准参照提取设计令牌——字体、色板、圆角、阴影全部取自真实计算值不靠目测交互扫描——滚动、点击、悬停、响应式四种动作体检导航栏滚动多远会变色选项卡是滚动自动切换还是点击切换这些看不见的行为全部记录绘制页面拓扑——从上到下枚举每个区块标注固定定位、滚动动画和各区块的交互模型扫描结果汇总成行为档案BEHAVIORS.md和拓扑蓝图PAGE_TOPOLOGY.md是后续每个组件规格的必读依据。️ 阶段二 地基构建先打地基再盖楼地基阶段严格串行、不可并行因为它触碰的是全局共享文件合并字体与全局 CSS把原站色板映射为 src/app/globals.css 中的设计令牌将原站的内联 SVG 图标提取为 React 组件把全部图片、视频下载到 public/ 对应命名空间为内容结构定义 TypeScript 接口最后跑一次npm run build验证地基不牢并行建造寸步难行——这是整个流程中唯一不允许跳步的环节。 阶段三 组件规格并行建造的施工图纸这是流水线的核心。为每个组件必要时是子组件主代理撰写一份完整规格文件docs/research/站点/页面/components/名称.spec.md内容包含DOM 结构——元素层级关系精确 CSS 值——全部来自getComputedStyle()禁止估算所有状态与行为——悬停、滚动、点击前后两套样式差值以及过渡动画参数多状态内容——选项卡组件要逐个点击、逐个提取每个 Tab 的内容逐字文本与本地资源路径规格文件就是主代理与建造者代理之间的合同。项目还定了一条机械化的复杂度预算规则单个规格超过约 150 行说明区块太复杂必须拆分——任务越小产出越精准。⚡ 阶段四~五 并行建造、组装与视觉验收并行建造。主代理按规格文件派遣建造者代理每个代理在自己的 git worktree 分支中工作。每个建造者拿到的是规格文件全文、区块截图、目标文件路径——不需要读任何项目文档也不需要猜测任何一个 CSS 值。完工前必须通过npx tsc --noEmit类型自检。组装。主代理把各 worktree 分支合并回主干将组件接线到页面路由实现滚动动画、平滑滚动等页面级行为。视觉质检。合并后不可宣布完工原站与克隆体在桌面、移动两种视口下逐区块对比发现差异就回溯规格文件——规格错了就重新提取建造者写错了就按规格修正。全部通过视觉 diff克隆才算完成。 工头模式解析并行建造为什么不乱官方定义中有一个形象的比喻主代理不是先调研完再施工的两阶段流程而是一位在工地上走动的工头——检查到页面哪个区块就写下规格文件立刻把它交给专业建造者。三个设计决策让多个代理并行施工互不打架Worktree 隔离——每个建造者拥有独立分支文件冲突在物理上不可能发生冲突解决由掌握全部上下文的工头在合并时统一处理规格是唯一合同——建造者不读项目文档、不看模糊描述所有信息随提示词内联下发从源头消除沟通损耗步步验证——每个建造者自检tsc每次合并后npm run build构建中断在任何时刻都不被允许这套规则集中写在 AGENTS.md代理指令的唯一事实源中并通过 scripts/sync-agent-rules.sh 自动同步到 CLAUDE.md 和 GEMINI.md 等各平台副本。 快速上手四步克隆任意网站前提Node.js 24 与一款 AI 编程客户端推荐 Claude Code Opus 5。git clone https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template my-clone cd my-clone npm install启动代理——例如在终端执行claude --chrome本技能依赖浏览器自动化一条命令启动流水线——输入/clone-website 目标URL支持一次传入多个 URL等待并行建造——工头自动执行侦察 → 地基 → 规格 → 并行建造 → 验收五个阶段个性化定制——像素级还原的基底完成后再按自己的品牌自由修改完整的五阶段工作流定义在技能文件 .claude/skills/clone-website/SKILL.md并通过 scripts/sync-skills.mjs 自动同步生成 Cline、Codex、Kiro、Roo Code 等各平台的版本。 为什么值得重点关注这个项目是当下增长最快的 AI 工具链项目之一GitHub Stars 持续攀升至 3 万它的适用场景非常务实平台迁移——把 WordPress / Webflow 老站重建为现代 Next.js 代码库源码丢失——站点还在线上但开发者离职、仓库没了用克隆拿回一份现代代码逆向学习——拆解生产级网站的布局、动画与响应式实现⚠️ 注意项目明确禁止用于钓鱼、冒充或把他人设计与文案据为己有使用前请确认目标站点允许复制。 附录项目关键文件速查文件作用SKILL.md五阶段流水线与工头模式的完整工作流定义AGENTS.md代理行为规则与并行建造约定单一事实源INSPECTION_GUIDE.md网站体检清单截图、令牌、布局、技术栈检查项README.zh-CN.md中文说明文档一句话总结AI Website Cloner Template 把克隆网站拆成五个可控阶段用规格合同 worktree 隔离 步步验证让一个工头代理安全地指挥多个建造者并行施工。无论是迁移站点、找回丢失代码还是逆向学习生产级网站这条五阶段流水线都是当前效率最高的路径之一。【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考