Design & UX loops

UI and accessibility loops that produce before/after evidence for human review.

6 graded loops in this category.

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

Polish page against design brief

Loop/ralph

Read the design brief, apply one focused improvement to the current implementation, re-check against all requirements until the brief is fully met.

prompt
→ Claude
/ralph-loop "Read the brief at /redesign/briefs/clients-brief.md. Compare the current implementation to the brief's requirements (every section of the brief, including Recipe Context and Implementation Notes). Apply one focused improvement. Re-check against the brief. If all brief requirements are met, output <promise PAGE-POLISH-COMPLETE</promise ." --max-iterations 8 --completion-promise "PAGE-POLISH-COMPLETE
designmedium riskclaude-code
source ↗

Score every screen on a real task

Loop/goalForward Future

Complete a real user task, score each meaningful screen with one checklist, fix the weak spots, and retest end to end.

prompt
→ Claude
Improve [user flow, such as signup] at [URL] until [completion criterion]. In a real browser, start each pass from fresh state—no saved login, cookies, or site data. Capture meaningful screens at the agreed sizes and modes, score them with one checklist, and improve the weakest safe area. Rerun the whole flow and keep only regression-free changes. Stop on success, two full passes with no gain, blocked access, or required approval. Return scores, screenshots, changes, and stop reason.
designlow riskclaude-codecodex

Rebuild a page pixel-for-pixel

Loop/loopForward Future

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.
designlow riskclaude-codecodex