Claude Code 多智能體流程將線上網站頁面轉成正式環境可用元件
A multi-agent pipeline that clones live sites into production components
Aniq Haider 建立一套以 Claude Code 子智能體運作的多智能體流程，把線上網站或 Figma 畫面轉成可用於正式環境的元件。各階段依序處理並可分別重跑；建置驗證失敗最多重試 3 次，每次執行的備註和失敗也會整理成後續 Agent 共用規則。過去需時數天的新區塊，現可於數小時完成，大部分時間用於人工檢查而非逐像素調整。
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.
來源：DEV Community · dev.to