Loop 022
War Loops: Autonomous Frontend Designer
A judge-gated frontend workflow that captures a reference, builds static and moving versions, measures fidelity, and surgically repairs the weakest gaps.
Ready-to-use prompt
Copy the loop
Point War Loops at a URL or image. Capture the page with a genuine browser, extract a ground-truth design spec, and produce two self-correcting builds: a polished static mirror in Pencil and a moving code build in Forge. Judge each build against the original across static design, experiential motion, and responsive reflow. After each evaluation, use the surgical critic to target the weakest signals. Repair, do not rebuild: keep what already matches and change only the highest-impact gaps. Repeat until the measures say it matches, fidelity passes, progress stagnates, or the source capture is blocked. Return the best build with its spec, renders, scores, findings, and run metrics.
Verify / stop
The build matches the reference across every measured fidelity axis.
Static design, experiential motion, and responsive reflow pass their gates, or the best result stops honestly on stagnation or a blocked capture.
Context and guidance When to use it, steps, safety notes, and related loops
Use this when
Use this when a frontend must be reconstructed from a URL or image and fidelity needs to be measured across appearance, motion, and responsive behavior instead of judged from one screenshot.
How to run it
- Capture the reference with a genuine browser and extract the ground-truth design spec, including layout, tokens, content, motion, and responsive behavior.
- Produce the static Pencil mirror and moving Forge code build from the verified spec.
- Judge the builds across static design, experiential motion, and responsive reflow, then identify the weakest signals.
- Use surgical repair to fix the highest-impact gaps, preserve what already matches, and repeat until a terminal fidelity decision is reached.
Why it works
War Loops separates a page's still appearance from how it moves and reflows. Multiple judges and targeted repairs let the system improve weak dimensions without churning parts that already match.
Implementation note
Confirm authorization to reproduce the reference. If the genuine-browser capture reaches a bot wall, login gate, or wrong page, stop instead of building from a bad source.