mcpField
B
bmad-ux-design

bmad-ux-design

github.com/bacocoDesign & UI6735 installsUpdated 51w ago
Repository

About bmad-ux-design

A BMAD UX design skill for turning product requirements and technical constraints into documented user flows, wireframes, and design guidance. It is intended for projects with interface work and includes validation planning and handoff checks.

Key features

  1. 01User flows and state diagrams
  2. 02Wireframe and design-system templates
  3. 03Requirements-linked UX checklist
  4. 04Usability and experimentation validation plan
  5. 05Checklist-based design handoff

Use cases

  1. 01Planning interaction flows for a feature
  2. 02Documenting interface requirements from a PRD
  3. 03Preparing UX artifacts for architecture and delivery

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bacoco/bmad-skills --skill bmad-ux-design

After installing, type/bmad-ux-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

CHECKLIST.md
REFERENCE.md
WORKFLOW.md
assets/
README.md
scripts/
README.md

Details

From the project README

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.

Comments

Markdown supported