Back to portfolio

AI engineering · 5 min read

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

Five specialised agents turn a URL or a Figma frame into reviewed, build-verified UI, one section at a time, and learn from every run.

  • Claude Code
  • Subagents
  • Playwright
  • Figma MCP
  • Next.js

Source code (generic version)

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 flowsSections run strictly one at a time, so each agent keeps a small, clean context.

Once per page

  1. Input
    Live URL or Figma frames
  2. Phase 0 · Discover
    Scroll, find sections, capture 4 breakpoints
  3. Pick sections
    One, several, or all

For each section, in order

  1. Phase 1 · Harvest
    Tokens, assets, hover and scroll behaviour, screenshots
  2. Compress
    Shrink the handoff JSON before the next agent reads it
  3. Phase 2 · Build UI
    Widget code wired into the page template
  4. Verify build
    Pass moves on. Fail retries, up to 3 times

After the run

  1. Hill-climb
    Mine notes and failures into reusable rules
  2. 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.