When should I activate this skill?

Invoke this skill when you are asking 'What should the UI look like?', need to map out a user journey, or are ready to define the visual components of a feature.

Does this skill require a PRD?

Yes, it is designed to work as a secondary step once product requirements are defined, ensuring that the interface design matches the project's functional goals.

What does the BMad UX Design skill do?

It helps designers and developers create comprehensive UX blueprints, including wireframes, user flows, and design systems, using standardized templates within Claude Code.

Can it automate the creation of graphic files?

Currently, this skill operates through collaborative text-based design conversations and structured Markdown templates to define visual logic and layout.

BMad UX Design & Wireframing

Name: BMad UX Design & Wireframing
Author: bacoco

bybacoco

•

デザインツール

Designs comprehensive user experiences, wireframes, and interface flows aligned with product requirements.

概要

The BMad UX Design skill streamlines the interface design process within Claude Code by generating structured user flows, wireframes, and design system specifications. It transforms abstract product requirements into actionable visual blueprints, ensuring every interaction state and validation plan is documented to unblock architecture and development teams. Ideal for moving from a PRD to a concrete interface strategy, it helps teams visualize the user journey before writing code.

主な機能

Creates wireframe blueprints for UI-heavy features
Generates detailed user flow diagrams and state transitions
Produces UX requirements checklists linked to PRDs
Develops consistent design system templates and component rules
38 GitHub stars
Defines usability validation plans for quality assurance alignment

ユースケース

Mapping complex user journeys and state diagrams for new app features
Translating a Product Requirements Document (PRD) into a visual interface strategy
Standardizing design components and accessibility standards across a project

概要

主な機能

Creates wireframe blueprints for UI-heavy features
Generates detailed user flow diagrams and state transitions
Produces UX requirements checklists linked to PRDs
Develops consistent design system templates and component rules
38 GitHub stars
Defines usability validation plans for quality assurance alignment

ユースケース

Mapping complex user journeys and state diagrams for new app features
Translating a Product Requirements Document (PRD) into a visual interface strategy
Standardizing design components and accessibility standards across a project