design-vision-loop

> **AI-consumed reference.** This skill *verifies* rendered UI; it does not generate taste (that's > `frontend-aesthetics`) or enforce statically (that's the `design-conformance` hook + > `theme-consistency` rule). Close the loop: build → **see** → critique → fix. # Design Vision Loop Open-loop text guidance is why "correct" UI still looks off — nobody looked at it. This skill adds the eyes: **render → screenshot → critique → iterate**, the pattern Anthropic endorses for UI agents (*Building agents with the Claude Agent SDK*: "visual feedback… can be helpful"; computer-use docs: "after each step, take a screenshot and carefully evaluate… only when you confirm a step was executed correctly should you move on"). ## Precondition The UI must be renderable: a running dev server URL/route, or a static HTML artifact. If nothing renders (component with no harness), say so and either spin up a preview or fall back to static review — don't pretend to have looked. ## The loop (max 3 iterations by default) ```toon loop[4]{step,action,tools}: 1,Render + capture,"navigate → resize each viewport → screenshot; emulate dark mode, screenshot again" 2,Tier-1 deterministic gates,"run the design-conformance check + read console errors — cheap, run FIRST" 3,Tier-2 vision critique,"read the screenshots, score against references/critique-rubric.md" 4,Verdict,"PASS → done · defects → fix → re-enter step 1 (until pass or budget hit)" ``` **Two-tier verification is deliberate** (Anthropi...