Rebuilding a page section by hand means inspecting the DOM, copying design tokens, chasing hover states and fixing responsive breakpoints. It is slow, and it is mostly mechanical. I built a pipeline of Claude Code subagents that does the mechanical part and leaves the review to a human.
How a clone run flows
Sections run strictly one at a time, so each agent keeps a small, clean context.
ONCE PER PAGE Input (Live URL or Figma frames) ──▶ Phase 0 · Discover (Scroll, find sections, capture 4 breakpoints) ──▶ Pick sections (One, several, or all) FOR EACH SECTION, IN ORDER Phase 1 · Harvest (Tokens, assets, hover and scroll behaviour, screenshots) ──▶ Compress (Shrink the handoff JSON before the next agent reads it) ──▶ Phase 2 · Build UI (Widget code wired into the page template) ──▶ Verify build (Pass moves on. Fail retries, up to 3 times) AFTER THE RUN Hill-climb (Mine notes and failures into reusable rules) ──▶ learnings.md (Read by every agent at the start of the next run) Why separate agents
- Each phase has one job and one output file (sections.json, harvest.json, the generated widget). A failed phase can be re-run without redoing the others.
- The main session orchestrates instead of a nested orchestrator agent. That saves context, and I can step in between phases.
- A Figma branch replaces only the discovery and harvest agents. It emits the same files, so the UI agent is reused untouched.
What keeps it reliable
- A hard build gate: a section only counts as done when the project builds. Errors go back to the agent for up to three retries.
- Guardrails written into the pipeline: shared directories are off limits, and protected files may only be changed by commenting out the original, never deleting it.
- A learning loop. Every run's notes and failures are distilled into rules the next run reads, so the same mistake is not repeated.
The result: new sections that used to take days now take hours, and most of that time is human review instead of pixel-pushing.
Originally published on my portfolio.
