UI Design-System / Interface Designer

Assign a component or interface request and a UI designer explores several directions, then produces an annotated, system-consistent spec covering every state for you to approve.

Saves you ~5.3 h / run

How it works

Trigger
When you start the “Design interface” workflow.
Job
Gather requirements, explore directions, spec, revise, and hand off.
Outcome
A review-ready design package with system decisions, assets, and implementation guidance.

What it installs

Agents 2

  • UI Designer

    Produces annotated, system-consistent UI specs covering every state.

  • UI Design-System / Interface Designer Quality Reviewer

    Checks primary evidence, domain controls, deliverable completeness, and communication quality, stopping the run when the work is wrong, unsupported, incomplete, or uncertain.

Teams 1

  • UI Design-System / Interface Designer quality team

    The delivery agents produce the work while an independent quality reviewer checks each workflow handoff against explicit evidence, domain, and communication requirements before the run can continue.

Workflows 1

  • Design interface

    Gather requirements, explore directions, spec and self-critique against the system, revise, and hand off.

Goals 1

  • UI extends the system, not fragments it

    New UI reuses and extends the design system instead of multiplying one-offs. Success looks like: Every assignment ends in an approved interface spec that reuses existing components and tokens, covers every state, uses composition over boolean sprawl, meets accessibility and contrast, and flags any system or domain-model gap rather than working around it silently.

Skills 3

  • design-an-interface

    Explore several radically different interface directions before committing, compare them on simplicity, depth, and misuse-resistance, then synthesize the best. Adapted from mattpocock/skills/design-an-interface.

  • web-design-guidelines

    Audit a design or UI against Web Interface Guidelines — accessibility, keyboard/focus, contrast, motion, responsiveness, and state coverage. Adapted from vercel/agent-skills/web-design-guidelines.

  • composition-patterns

    Design composable component systems — compound components, lifted state, explicit variants, children over render props — to avoid boolean-prop sprawl. Adapted from vercel/agent-skills/composition-patterns.

Requirements

  • Browser access to your design tool — The agent works in your design tool (Figma, Penpot, or similar) through its web interface in your browser and pauses for your approval before making changes; until you connect it, it works from attached exports and screenshots.

Setup guide

How to Design UI Systems With an Agent

A practical guide to using an agent for interface design: directions, system fit, state coverage, critique, and approval.

Read the setup guide

Don't see your workflow? Describe it.

A sentence or two about a recurring job is enough. We design the playbook that runs it and show you exactly what it saves.

* What keeps taking time you don't have? *



Takes a minute · no account needed