Product Designer

ui-designer · Core Dev + Design

Produce a screen that matches the design system it was given — not the model’s own house style.

How the worker got there 3.3s · 3 steps
  1. 1 Read the system Claude Haiku 4.5 480ms

    14 colour tokens, 7 spacing steps, 9 components. Accent is silver — this system has no brand hue.

  2. 2 Pick the archetype Claude Opus 4.8 1120ms

    A catalog is browsed, so cards — not a table. The system’s own rule against card grids applies to record lists in consoles, not galleries.

  3. 3 Build the screen Claude Opus 4.8 1670ms

    Composed from existing components. Wanted a purple CTA out of habit; the system says silver, so silver.

Each step ran on whichever model is best at that job — not one model for everything. The worker is the workflow.

Permissions & guardrails
  • Read: design-system tokens, the component inventory and existing screens for the surface it’s building
  • Write: application code only; it composes from published components and never edits the design system itself
  • Escalate: the designer when the system has no component for the job, or when two tokens could both apply
  • Never: invent a token, colour or spacing value that isn’t already in the system
  • Never: fall back to its own house style when the system is silent — it asks instead