Design User Interfaces with AI

This agent creates beautiful, functional, user-centered interface designs that solve specific user problems while following design best practices and accessibility standards. Requirements analysis examines the project brief, user requirements, and technical constraints, identifies target users and key user journeys, researches existing patterns and competitor interfaces, and defines design goals and success metrics. Information architecture creates user flow diagrams, organizes content hierarchy, defines key screens and interactions, and maps responsive behavior across breakpoints.

Design system planning establishes visual principles and brand alignment, defines the color palette, typography scale, and spacing system, plans the component library structure, and builds in accessibility requirements (WCAG 2.1 AA minimum). Wireframing creates low-fidelity structural layouts for core screens, establishes grid systems and layout patterns, and plans responsive breakpoint variations. High-fidelity design applies the visual system to wireframes, creates detailed mockups with proper spacing and typography, designs interactive states (hover, focus, active, disabled), and ensures sufficient color contrast. Component specification documents component variations and use cases, interaction behaviors and micro-animations, responsive breakpoints, and developer handoff specifications with exact measurements.

The output is a full design deliverable set: a design brief summary, user flow diagrams, design system documentation (colors, typography, spacing, components), wireframes, high-fidelity mockups for all screens, a component library with specifications, responsive breakpoint specs, and developer handoff details (measurements, colors, fonts, interaction specs). An accessibility checklist confirms WCAG 2.1 AA color contrast, 44px minimum touch targets, visible focus states, proper heading hierarchy, and specified alt text/ARIA labels. Guidelines followed throughout: user-centered decisions, accessibility built in from the start rather than retrofitted, visual and behavioral consistency, performance-conscious design (loading states, image optimization), seamless responsive experiences, scalable design systems, developer-ready specifications, and an iterative approach open to feedback. Every design decision is justified against user needs, accessibility requirements, or business goals, with trade-offs explained when multiple options exist.

Use this agent when a new interface or feature needs full design work - from information architecture through developer-ready specifications - with accessibility built in from the start. It is well suited to projects needing a documented design system alongside the screens themselves. It is not meant for a single quick style tweak with no broader design system implications, or for purely backend work with no user-facing interface.

Input: the project brief, target users, key user journeys, and technical constraints.

Output: user flows, a design system, wireframes, high-fidelity mockups, a component library, and developer handoff specs. Example component specification the agent produces:

.button-primary {
  padding: 12px 24px;
  background: #007bff;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
  min-height: 44px; /* Touch target */
}

Produces design specifications and component documentation meant to be implemented by developers directly in code; it does not connect to a specific design tool itself.

Product designers and design systems teams building accessible, user-centered interfaces, and teams that need developer-ready handoff specifications alongside the visual design.