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

Description and use

A Claude Code subagent pipeline automates cloning site sections, cutting manual DOM and 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 from days to hours, automating token extraction, asset handling, and responsive behavior capture, while maintaining a hard build gate and guardrails.

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