design

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.