bmad-ux-design_skill

Overview

This skill designs user experiences and produces wireframes that align with product requirements and technical constraints. It creates user flows, component specifications, and a validation plan to guide development and QA. Output focuses on actionable artifacts that unblock architecture and delivery.

How this skill works

The skill reviews PRD sections, architecture notes, and brand guidelines to identify personas, scenarios, and surfaces to design. It produces information architecture, user flows, interaction states, and low-fidelity wireframes using standardized templates. It also defines a design system snapshot and a validation plan tied to success signals and QA tests.

When to use it

• When stakeholders ask “What should the UI look like?” or request wireframes
• For PRDs with UI-heavy features (level 2–4) needing interaction detail
• When you need clear user flows and state diagrams to inform frontend work
• Before sprint planning or handoff to development and QA
• When accessibility, device targets, or brand constraints must shape the interface

Best practices

• Confirm prerequisites and resolve missing requirements before designing
• Define personas and primary scenarios up front to focus decisions
• Trace every UX decision back to a requirement or constraint
• Document component specs with content rules, validation, and edge states
• Share the validation plan with delivery-planning and QA early

Example use cases

• Design the onboarding flow and wireframes for a new mobile feature
• Translate a PRD’s functional requirements into interaction states and component specs
• Produce low-fidelity wireframes and user flows to estimate frontend effort
• Create a validation plan with usability tasks and success metrics for experimentation
• Flag technical constraints and propose alternative UX solutions to architecture