skills.rest
bacoco
bacocoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

67|11|Updated Oct 28, 2025
Search Tags:#accessibility#design system#UX design#user journeys#UI design#wireframes#interaction design
One-click install
npx skills add https://github.com/bacoco/BMad-Skills --skill bmad-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-ux
Source: https://github.com/bacoco/BMad-Skills/tree/main/.claude/skills/bmad-ux
Command: npx skills add https://github.com/bacoco/BMad-Skills --skill bmad-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between product requirements and user-facing design, ensuring that intuitive, accessible, and consistent user experiences are defined early in the development cycle. It reduces ambiguity and rework by providing clear design specifications.

Core Features & Use Cases

  • UX Specification Generation: Creates detailed UX specifications including design principles, screen inventories, interaction patterns, and responsive behaviors.
  • Wireframing & Flow Design: Outlines user journeys, information architecture, and conceptual wireframes to visualize user interactions.
  • Accessibility & Responsiveness: Defines requirements for WCAG compliance and adaptive layouts across various devices and platforms.
  • Use Case: After a Product Requirements Document (PRD) is drafted, this Skill designs the user interface for a new web application, detailing screen layouts, navigation flows, error states, and micro-interactions, ensuring a consistent and user-friendly experience for developers and stakeholders.

Quick Start

Create a UX design specification for the user registration flow described in the PRD.

Frequently Asked Questions about bmad-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate product requirements into UX design artifacts?▼

UX design artifact translation converts PRD requirements into detailed specifications including user flows, wireframes, and design systems. This Skill automates the process by generating screen layouts, interaction patterns, navigation flows, and responsive behavior definitions that bridge requirements to implementation.

What should a UX specification include for web and mobile applications?▼

A UX specification for web and mobile covers design principles, screen inventories, interaction patterns, responsive layouts, WCAG accessibility requirements, error states, and micro-interactions. This ensures developers and stakeholders have clear, consistent guidance for building user-friendly interfaces.

How do I create user flows and wireframes from a PRD?▼

User flows and wireframes are generated by mapping PRD functional requirements to information architecture, user journeys, and conceptual screen layouts. This Skill outlines navigation paths, screen interactions, and visual hierarchy to visualize how users move through the application before development begins.

Can I ensure WCAG compliance and responsive design in my UX specifications?▼

Yes. WCAG compliance and adaptive layouts are defined as requirements within UX specifications, detailing accessibility standards and responsive behaviors across devices and platforms. This ensures inclusive design from the specification phase onward.

What's the benefit of designing UX specifications before development?▼

Defining UX specifications early reduces ambiguity, rework, and miscommunication between product, design, and engineering teams. Clear design specifications provide traceability from requirements to deliverables and accelerate development cycles.

Does this approach work for both new features and complete application redesigns?▼

Yes. Template-based generation of user flows, wireframes, and design systems applies to UI/UX-heavy projects of any scope—from individual feature flows to full platform designs—as long as functional requirements and prerequisite alignment are documented.

Related Skills

Explore More Design & Creative Skills→
LawrenceHwangLawrenceHwang

prd

Generate structured PRDs with executive summaries, user stories, and risk analyses.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

contemporary

Generate design specifications for UI components using WCAG 2.2 AA tokens.

Community
Intermediate
inbharataiinbharatai
22

wireframe-builder

Generate low-fidelity wireframes and user-flow diagrams with interaction annotations.

Community
Basic