Loop/loopDesign & UXlow riskintermediatesafety B · 80Forward Futurepre-dates current gate · under review

Rebuild a page pixel-for-pixel

Capture a real page, build a static mirror and a live version, then repair the weakest fidelity signals until they match.

prompt
→ Claude
Point War Loops at an authorized URL or image. Capture it with a genuine browser and record the layout, styles, content, motion, and responsive behavior. Build a static Pencil mirror and a moving Forge version. Compare both with the source at desktop, tablet, and mobile sizes; repair only the weakest fidelity signals. Stop when every gate passes, progress stalls, or capture is blocked. Finish with the builds, spec, renders, scores, and remaining gaps.
claude-code · codex

Use this when

Use War Loops when an authorized interface must be rebuilt from a URL or image and judged on appearance, motion, and responsive behavior.

How it runs

  1. Capture the source with a genuine browser and extract its design spec, motion, and target viewports.
  2. Build the static Pencil mirror and moving Forge version from the verified spec.
  3. Judge both across static design, experiential motion, and responsive reflow.
  4. Repair the weakest signals without rebuilding what already matches, then repeat to a terminal fidelity decision.

Done when

✓ The builds match the source across all three fidelity axes. Static appearance, experiential motion, and responsive reflow pass their gates, or the run reports stagnation or a blocked capture.

Why it works

War Loops separates a page's still appearance from how it moves and reflows. Its surgical critic targets the weakest measured signals without churning areas that already match.

Implementation note

The source implementation uses War Loops with Pencil and Forge. Confirm authorization to reproduce the reference, and stop on a bot wall, login gate, or unreliable capture.

Source: Forward Future ↗

More design loops

Build React UI to spec

Loop/ralphnew

Construct React components and UI elements, checking Thread #10 for completion criteria and exit signals.

prompt
→ Claude
/ralph-loop "Build React UI. Check Thread #10 for EXIT LOOP." --max-iterations 50
designmedium riskclaude-code

Build frontend UI to signal

Loop/ralphnew

Iteratively build frontend UI components while polling oracle threads for an EXIT LOOP signal, up to 50 iterations.

prompt
→ Claude
/ralph-loop "Build frontend UI. Check oracle threads() for EXIT LOOP signal." --max-iterations 50
designmedium riskclaude-code

Delete dead CSS, pixel-safe

Loop/loopForward Future

Remove one unused or redundant style at a time and keep it gone only when every tested screen looks identical.

prompt
→ Claude
Reduce the CSS styling code [site] sends to users without changing tested screens. First capture representative pages, sizes, themes, and interactions, and record the built CSS size. Treat coverage reports only as suggestions. Remove one declaration or rule, rebuild, and rerun screenshots and project checks. Keep it only if every screenshot is pixel-identical and built CSS is smaller; otherwise revert. Stop when no supported candidate remains, progress stalls, or approval is required. Return reduction, evidence, and untested states.
designlow riskclaude-codecodex