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

Description and use

A Claude Code subagent pipeline automates cloning of web page sections, cutting manual DOM inspection and design token work from days to hours.

Problem

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

Outcome

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

Workflow

• 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

Evidence

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

Source

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

Source