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 guideDon'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.