A multi-agent pipeline that clones live sites into production components

说明与用途

Claude Code 子代理管道自动化克隆网页部分，将手动 DOM 检查和设计令牌工作从数天缩短到数小时。

问题

Rebuilding a page section by hand is slow and mechanical, requiring DOM inspection, design token copying, hover state chasing, and responsive breakpoint fixing.

结果

The pipeline reduces manual effort, enabling faster cloning of page sections while maintaining reliability through build gates, guardrails, and a learning loop.

工作流

• Input live URL or Figma frames
• Phase 0 – Discover: scroll, find sections, capture 4 breakpoints
• Pick sections (one, several, or all)
• Phase 1 – Harvest: collect tokens, assets, hover and scroll behavior, screenshots
• Compress: shrink handoff JSON
• Phase 2 – Build UI: generate widget code wired into page template
• Verify build: pass moves on, fail retries up to 3 times
• Hill‑climb: mine notes and failures into reusable rules
• Generate learnings.md read by agents next run

证据

Rebuilding a page section by hand means inspecting the DOM, copying design tokens, chasing hover states and fixing responsive breakpoints.

来源

The result: new sections that used to take days now take hours, and most of that time is human review instead of pixel-pushing.

来源