home / skills / bacoco / bmad-skills / bmad-ux-design

bmad-ux-design skill

safe

This skill helps design user experiences and wireframes for features by translating PRD and constraints into flows and artifacts.

npx playbooks add skill bacoco/bmad-skills --skill bmad-ux-design

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

3.2 KB

---
name: bmad-ux-design
description: Designs UX and creates wireframes.
allowed-tools: ["Read", "Write", "Grep"]
metadata:
  auto-invoke: true
  triggers:
    patterns:
      - "what should UI look like"
      - "design the UX"
      - "user experience"
      - "wireframes"
      - "user flow"
    keywords:
      - UX
      - UI
      - design
      - wireframe
      - interface
      - usability
      - flow
  capabilities:
    - ux-design
    - wireframe-creation
    - user-flow-design
    - interface-design
  prerequisites:
    - product-requirements-document
  outputs:
    - user-flows
    - wireframes
    - design-system
---

# UX Blueprint Skill

## When to Invoke

**Automatically activate when user:**
- Says "What should the UI look like?", "Design the UX"
- Asks "How should users interact?", "User flow?"
- Mentions "wireframes", "user experience", "interface design"
- Has PRD with UI-heavy features (Level 2-4)
- Uses words like: UX, UI, design, wireframe, interface, usability

**Specific trigger phrases:**
- "What should the UI look like?"
- "Design the UX for [feature]"
- "Create wireframes"
- "User experience for [feature]"
- "Interface design"
- "User flow for [scenario]"

**Do NOT invoke when:**
- No UI/interface in project (backend-only)
- PRD not ready (use bmad-product-planning first)
- Already have UX specs (skip to architecture or stories)

## Mission
Design user experiences that align with BMAD requirements, documenting flows, interaction states, and validation plans that unblock architecture, delivery, and development.

## Inputs Required
- prd_sections: user journeys, functional requirements, constraints
- architecture_notes: technical or platform limits impacting UX
- brand_guidelines: accessibility, tone, device targets, or visual standards

## Outputs
- **User flows** (from `assets/user-flows-template.md.template`)
- **Wireframes** (from `assets/wireframes-template.md.template`)
- **Design system** (from `assets/design-system-template.md.template`)
- UX requirements checklist linked to PRD and stories
- Validation plan (usability or experimentation) for quality-assurance alignment

**Template locations:** `.claude/skills/bmad-ux-design/assets/*.template`

## Process
1. Confirm prerequisites via `CHECKLIST.md`.
2. Clarify personas, scenarios, and surfaces requiring design.
3. Produce information architecture, flows, and state diagrams.
4. Document component specifications and content rules tied to requirements.
5. Define validation approach (tests, instrumentation, success signals) and share with delivery-planning and quality-assurance skills.

**Note on automation:** This skill currently operates through collaborative design conversation using templates. No automation scripts are required—wireframes and design artifacts are created manually using templates from `assets/`. See `scripts/README.md` for future automation roadmap.

## Quality Gates
Ensure every UX decision traces back to requirements or constraints. Run `CHECKLIST.md` prior to handoff.

## Error Handling
- If requirements conflict or are missing, request clarification before designing.
- Flag technical limitations that impact user experience and loop architecture-design.
- Provide alternate recommendations when constraints prevent ideal UX outcomes.

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

FAQ

What input do you need to start?

Provide PRD sections covering user journeys and functional requirements, any architecture notes that affect the UI, and brand or accessibility guidelines.

What deliverables will I receive?

User flows, low-fidelity wireframes, a design system snapshot with component specs, a UX checklist linked to the PRD, and a validation plan for QA and experiments.