| name | design |
| description | The user's design workflow for UI and product surfaces — brief, direction, build, motion, polish, audit, hand off. An ordered block list composing the skills they actually reach for (debate, design-taste-frontend, impeccable, apple-design, svg-animations, better-ui, make-interfaces-feel-better, emil-design-eng) plus Figma MCP. Use when the user asks to design a screen, component, or interface, explore UI directions, polish a surface, add motion, or run their design workflow. |
Design workflow
Ordered blocks. Run in order, skip by condition, report every skip.
Blocks come from measured usage. † marks a corrective — no usage history, kept because its absence is the gap.
| # | Block | Skill | When | Output |
|---|
| 1 | brief | debate | always, unless a spec or Figma link already fixes the scope | who, what job, one success criterion, hard constraints |
| 2 | direction | design-taste-frontend | greenfield surface, landing page, or redesign with no fixed direction | the design direction, chosen and named |
| 3 | source | figma MCP (get_design_context, get_variable_defs) | a Figma link or file exists | tokens, components, exact measurements |
| 4 | build | impeccable | always | the UI, on the design system |
| 5 | motion | apple-design, svg-animations, improve-animations | anything gesture-driven, animated, or transitioning | physical, interruptible motion |
| 6 | polish | better-ui, make-interfaces-feel-better, emil-design-eng | always | spacing, states, the invisible details |
| 7 | audit † | web-design-guidelines | always | keyboard, focus, contrast, roles, states |
| 8 | hand off | implementation | the design is going into the product | enter implementation at block 6 (verify) |
Add a block: append a row. Position = run order.
References
references/interface-craft.md — composition, grid, typographic rhythm, evidence and table rules, restraint, the review order, and the generated-design reflex list. Adapted from Vercel's design guidelines, brand system stripped. Load it in block 4 when the surface is evidence-bearing (report, dashboard, comparison, pricing or ROI calculator, benchmark), and in blocks 6 and 7 on any surface — its review order is the audit checklist.
Block notes
1 brief. Design without a named user job is decoration. One success criterion, not five. Name the constraint the user is dancing around.
2 direction. Skip when an existing surface already sets the direction — matching a shipped pattern beats inventing a fourth one.
3 source. Never eyeball values off a screenshot when the Figma file can give exact tokens. Pull variables before writing a class.
4 build. impeccable is the default builder for frontend, not a polish pass. Evidence-bearing surface → read references/interface-craft.md first: geometry before components, first viewport carries the argument, name the obvious layout for the category and reject it unless the material earns it. Inside it, still prefer existing component → uikit primitive → shadcn → hand-rolled, in that order. Hand-rolled needs a one-line reason. Never arbitrary Tailwind values where a token exists.
5 motion. apple-design for gesture and physical motion, svg-animations for icon and illustration work, improve-animations to fix motion that already exists. Respect prefers-reduced-motion.
6 polish. Every state, not just the happy one: empty, loading, error, long content, one item, a hundred items. Polish that only holds for the demo data is not polish. The three skills overlap — run better-ui first, reach for the others when it leaves something unresolved. Then the restraint pass from references/interface-craft.md: design in monochrome, earn every surface, diagnose busy separately from loud, and cut anything removable without losing meaning.
7 audit †. No usage history: the design stack you use is taste-heavy and accessibility-light. Run the 8-step review order in references/interface-craft.md — first read, language, composition, typography, evidence, restraint, themes and reflow, trust and access. Keyboard path end to end, visible focus, contrast, roles and names. Does not get skipped for "it is internal".
8 hand off. Blocks 1–5 of the implementation workflow are already done by the time this runs — enter at verify.
