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.
Advanced specStructured 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 |
RunbookSteps
- 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.
Copy promptPrompt
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.