Design
Visual Feedback Repair
Show the agent the page, not just the code.
Use when
The frontend technically works but looks wrong, drifts from design intent, or breaks at specific viewport sizes.
Cadence
After AI-generated UI changes or visual bug reports
Verification
Before/after screenshots, console state, and responsive checks show the visual issue is fixed without breaking adjacent states.
Structured loop spec
| Field | Value |
|---|---|
| Name | Visual Feedback Repair |
| Category | Design |
| Trigger | After AI-generated UI changes or visual bug reports |
| Objective | Show the agent the page, not just the code. |
| Allowed inputs | Relevant files, source notes, logs, tests, screenshots, metrics, or task state for this loop |
| Allowed actions | Capture the failing screen, viewport, interaction state, expected design intent, and any console/network errors.; Ask the agent to identify likely causes from screenshot, DOM, CSS, and component structure before editing.; Patch the smallest layout, spacing, color, typography, or state-handling issue.; Recheck the same viewport plus at least one adjacent viewport or interaction state.; Stop when the issue is fixed with visual evidence or when the remaining judgment is taste/design approval. |
| Verification | Before/after screenshots, console state, and responsive checks show the visual issue is fixed without breaking adjacent states. |
| Stop condition | Stop when the verifier passes, the budget is exhausted, no progress is made, a blocker appears, or approval is required. |
| Budget | Set a time, turn, token, retry, file, or dollar cap before running the loop. |
| Approval boundary | Human approval required before publishing, sending, deleting, spending, changing accounts, touching production, or making reputational/legal/financial commitments. |
| Safe output | Draft, report, checklist, table, or approval-gated recommendation |
| Works with | Claude, ChatGPT, Gemini, any tool-using AI assistant |
Steps
- Capture the failing screen, viewport, interaction state, expected design intent, and any console/network errors.
- Ask the agent to identify likely causes from screenshot, DOM, CSS, and component structure before editing.
- Patch the smallest layout, spacing, color, typography, or state-handling issue.
- Recheck the same viewport plus at least one adjacent viewport or interaction state.
- Stop when the issue is fixed with visual evidence or when the remaining judgment is taste/design approval.
Prompt
Run the Visual Feedback Repair loop. Capture the failing screenshot, viewport, interaction state, design expectation, and browser console/network state. Analyze likely causes from screenshot, DOM, CSS, and component structure before editing. Make the smallest frontend fix, then verify with before/after screenshots, the same viewport, one adjacent viewport, and relevant interaction states. Stop for human design judgment when the remaining issue is taste rather than correctness.Run in Claude Code
Paste this into Claude Code (or any tool-using agent) to run the loop bounded: one change per round, the same verification every round, durable state files, and explicit stop conditions.
Run the "Visual Feedback Repair" loop from AI Loop Library (https://ailooplibrary.com/loops/visual-feedback-repair/) as a bounded loop.
Goal: Show the agent the page, not just the code.
Rules: one change per round; run the same verification every round (Before/after screenshots, console state, and responsive checks show the visual issue is fixed without breaking adjacent states.); append each round to docs/loops/visual-feedback-repair/progress.md and update docs/loops/visual-feedback-repair/state.json; stop on verifier pass, 8 rounds, 3 consecutive failed verifications, no progress, a blocker, or anything needing human approval (money, production, outbound, deletion). Finish with a proof report: rounds used, changes made, verification output, remaining risk, and the next human decision.