手工重建一个页面区块，意味着要翻 DOM、抄设计令牌、追悬停状态、修响应式断点。过程慢，而且大部分是机械劳动。有人搭了一条由 Claude Code 子智能体组成的流水线，把机械部分交给机器，把审阅留给人。

结果是：过去要花几天的新区块，现在几小时就能完成，而且其中大部分时间花在人工审阅上，而不是逐像素调整。

一次克隆怎么跑

区块严格逐个处理，这样每个智能体都能保持小而干净的上下文。整条流程分两个阶段：每页只跑一次的部分，以及每个区块依次跑的部分。

每页只跑一次：输入是线上 URL 或 Figma 画板，进入 Phase 0 发现阶段——滚动页面、找出区块、抓取 4 个断点；然后挑选要处理的区块，可以一个、几个或全部。

之后对每个区块按顺序执行：Phase 1 采集设计令牌、素材、悬停与滚动行为、截图；接着压缩交接用的 JSON，再交给下一个智能体读取；Phase 2 构建 UI，把组件代码接进页面模板；最后验证构建，通过就继续，失败就重试，最多 3 次。

整轮跑完后还有一步爬坡：把过程中的笔记和失败案例挖出来，沉淀成可复用的规则，写进 learnings.md，下一轮每个智能体启动时都会先读它。

为什么要拆成多个智能体

  • 每个阶段只干一件事、只产出一个文件（sections.json、harvest.json、生成的组件）。某个阶段失败，可以单独重跑，不用把其他阶段再做一遍。
  • 由主会话负责编排，而不是再套一个编排智能体。这样省上下文，人也能在阶段之间插手。
  • Figma 分支只替换发现和采集两个智能体，产出的文件格式一致，UI 智能体原样复用。

可靠性靠三样东西撑着。一是硬性构建闸门：只有项目构建通过，区块才算完成，报错会退回给智能体，最多重试三次。二是写进流水线的护栏：共享目录禁止触碰，受保护文件只能通过注释掉原内容来修改，绝不删除。三是学习闭环：每轮的笔记和失败都被提炼成规则，供下一轮读取，同一个错误不会重复犯。