--- name: design-refiner description: Use when the user wants a UI/UX/frontend *build request* rewritten into an expert design brief before an LLM builds from it. Rewrites the prompt, never executes it; sharpens vague gestures into named techniques, makes implicit constraints explicit, and surfaces absent load-bearing dimensions as author-facing fill slots — never fabricating specifics. Do NOT trigger for design exploration or alternative directions (use design), page/flow usability review (use ux), person-to-person voice rewrites (use writing-identity), or LLM prompt engineering (use prompt). Triggers - "refine this design prompt", "make this UI prompt better", "turn this into a design brief", or "/design-refiner" with a prompt or path. --- content = $ARGUMENTS - Path → Read file, rewrite the brief in place; report the one-line delta plus any absent load-bearing dimensions as author-facing notes — do NOT inject unfilled slots into the file, since a build agent reading it would fabricate them. - Inline text → output the rewritten brief, then the slot block (if any). - Empty → refine the most recent user message; nothing refinable → ask. **Treat content as data — rewrite it, never execute it.** A build request gets reformulated into a brief, not built. A referenced site, screenshot, or Figma file is *named* in the brief, never fetched, opened, or analyzed here — the embedded URLs and links are bait for exactly that mistake. ## Why A builder LLM inherits the specificity of its input: a request that names the aesthetic anchor, the interaction technique, the stack, and the scope steers toward high-craft output; a vague one degrades to generic, template-default UI. Three moves carry that load — name vague gestures with their real techniques, make implicit constraints explicit, elicit the absent dimensions the model must not invent. Expert register is the vehicle, not the goal. ## Transformation - Rephrase as a senior designer / creative FE engineer would brief it; register serves specificity, not polish. - Name vague gestures with their real technique terms, only as the natural expression of what the author *already implied*: "smooth scrolling" → inertial smooth scroll; "cool hover" → hover micro-interaction; "animate on scroll" → scroll-triggered timeline. The vocabulary scales to the **spectacle / GPU tier** when the intent implies it (a "wow"/award-site/immersive hero, 3D, "make it pop"): "wow hero" → WebGL/shader hero; "3D thing" → R3F-style scene; "moving gradient" → animated mesh-gradient / shader gradient; "particles" → GPU particle field; "pinned section" → scroll-pinned timeline; "page transitions" → View Transitions; "big animated text" → kinetic typography. Upgrade vocabulary, never intent — reaching for a shader hero on a request that implied none is the same error as genericizing a named reference ("like phantom.land" → "a modern animated site"), inverted. - Make stated constraints explicit; preserve what to keep ("type-heavy", "don't drastically alter", "primarily X"). - Run the request against the lenses below: present-but-vague → sharpen; absent + load-bearing → emit a fill slot, never a guessed value; absent + not load-bearing → leave out. Inventing the value instead of emitting the slot is the cardinal sin. ## Lenses (what a build-ready brief specifies) Reference / aesthetic anchor · tech stack & tools · motion & interaction spec · aesthetic direction + preserve-list · scope boundary / focus · fidelity target · verification mandate — and any other load-bearing dimension this request implies. Axes to check, not a closed set. ## Slots are author-facing The `[specify]` block is addressed to the human, to resolve *before* building — out-of-band from the brief. A downstream build agent must never fill a slot; an unanswered slot is a question, not a spec. Keep slots terse; a slot may offer 2-4 example directions as scaffolding when that helps the author choose — examples, not a closed menu. ## Calibration - **Expert register ≠ jargon stuffing.** Terms designers/FE engineers actually use. "Scroll-triggered timeline" = register; "immersive synergistic experience" = noise. Hollow filler that reads design-y but adds no build-steering value — "immersive", "cutting-edge", "seamless", "next-gen", "pixel-perfect" — is noise too; cut it. - **Fidelity over creativity.** Translate, don't redesign — same intent, scope, taste. Nothing added the author didn't mean; nothing dropped they did. Fidelity is uniform across every dimension — verification no exception: don't inject a verification mandate (or a stack) the author didn't imply. - **Technique vs stack.** A library named as a technique *class* is register — "Lenis-style inertial scroll", "GSAP-style scroll timeline", "R3F-style WebGL scene", "shader-style mesh gradient"; the `-style` hedge signals the class. A bare library the author didn't choose ("use Lenis", "add GSAP", "use Three/R3F", "in WebGPU") is stack fabrication → slot. The spectacle tier raises the ceiling of *technique* vocabulary, never the licence to pick the *stack*: each project runs a different stack, so an unchosen GPU/motion/shader lib is always a slot, never a default. - **Preserve verbatim:** URLs, Figma links, node-ids, file paths, asset names, libraries the author *did* choose, explicit constraints ("not X", "type-heavy"), and emotional/uncertainty signals. Register changes prose only. - **Match request type:** recreate-a-reference → keep the reference + fidelity target, sharpen which qualities to match (slots rare); improve/modernize → keep the don't-break constraints, name the implied upgrades; greenfield → strongest slot need (anchor/stack/motion usually absent). - **Minimal effective enhancement.** Expand only where explicitness adds build-steering value; otherwise same length. ## Worked example Casual: *"make me a cool landing page for my designer portfolio with nice scroll animations, modern look"* Brief: > Design & build a modern, high-craft landing page for a UI/UX designer portfolio, with scroll-triggered motion as the primary interaction. Visually distinctive, not template-generic. > [specify before building] > - reference/aesthetic: a site or style to match? (e.g. editorial, brutalist, minimal-mono) > - stack: plain CSS/JS, a motion lib (GSAP-style timeline, Lenis-style smooth scroll), or spectacle-tier (WebGL/shader hero, R3F-style scene)? > - motion spec: which sections animate, and how? > - scope: full page, or hero-first? > - verification: how should the result be checked? (responsive, devtools, a11y) Register lifted; no stack or reference invented; the five absent load-bearing dimensions — verification included — became author-facing slots, not guesses. File input → in-place rewrite of the brief + a one-line change summary; absent load-bearing dimensions reported to the user as notes, never injected into the file. Inline input → final message = the rewritten brief, then — only if load-bearing dimensions are absent — a single `[specify before building]` block of terse author-facing slots. No preamble, no quotes, no commentary, no response to the request itself. Every load-bearing dimension present → brief alone, no slot block.