skills.rest
ncptuan
ncptuanCOMMUNITY
Explore all skills by this author →
GitHub

bmad-create-ux-design

Creates comprehensive UX design specifications from PRDs, briefs, and project context documents.

Updated Apr 23, 2026
Search Tags:#workflow#accessibility#design system#user journeys#ux design#design specification#product discovery
One-click install
npx skills add https://github.com/ncptuan/stock_backtest_project --skill bmad-create-ux-design-ncptuan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-create-ux-design
Source: https://github.com/ncptuan/stock_backtest_project/tree/main/.claude/skills/bmad-create-ux-design
Command: npx skills add https://github.com/ncptuan/stock_backtest_project --skill bmad-create-ux-design-ncptuan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams turn vague product ideas, briefs, and PRDs into a structured UX design specification through a guided, collaborative workflow. It reduces the risk of jumping into screens too early by clarifying users, core interactions, emotional goals, design patterns, and implementation direction first.

Core Features & Use Cases

  • Guided UX planning workflow: Walks step by step from project understanding through design system choice, user journeys, component strategy, and accessibility.
  • Collaborative design facilitation: Prompts the stakeholder for decisions instead of making unsupported assumptions, with continuation support for interrupted sessions.
  • Structured artifact generation: Builds a persistent UX design specification document and references supporting outputs like color theme and design direction visualizers.
  • Use Case: A product manager with a PRD wants to align designers and developers before UI work begins. This Skill helps synthesize the product context into a comprehensive UX specification with user flows, visual foundations, and implementation guidance.

Quick Start

Ask the assistant to create UX specifications for your project and provide any available brief, PRD, or project context documents to begin the guided workflow.

Frequently Asked Questions about bmad-create-ux-design

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

FAQPage Schema
How do I turn a PRD into a UX design specification?▼

A guided UX planning workflow synthesizes product context, briefs, and PRDs into a structured UX design specification, reducing the risk of jumping into screens early by establishing user journeys and design patterns first.

What is the best way to align designers and developers before UI work begins?▼

Generating a comprehensive UX design specification clarifies core interactions, emotional goals, and implementation direction, aligning designers and developers before UI work begins.

Can I use this workflow to create user journeys from a project brief?▼

Yes, the collaborative design facilitation workflow processes project briefs to establish design system choices, user journeys, and component strategy while prompting stakeholders for decisions.

Does the UX planning process support interrupted sessions?▼

Yes, the UX planning process supports interrupted sessions through frontmatter-based continuation and document state tracking, allowing collaborative design facilitation to resume seamlessly.

What do I need to start building a UX design specification?▼

You need available product context, stakeholder input, and existing planning documents like PRDs or briefs to provide the foundational inputs required for the sequential workflow execution.

How does the workflow handle responsive accessibility guidance?▼

The workflow integrates responsive accessibility guidance directly into the structured UX design specification, ensuring component strategy and implementation direction address accessible design patterns.

Related Skills

Explore More Design & Creative Skills→
LumenWipeLumenWipe
3

create-ux-design

Transform product context and stakeholder input into a comprehensive UX design specification.

Official
Advanced
AbsolutelySkilledAbsolutelySkilled
207

figma-to-code

Convert Figma design frames into HTML, CSS, and React components.

Official
Advanced
deltatreedeltatree

bmad-create-ux-design

Create detailed UX design specifications through a guided collaborative workflow.

Community
Advanced
MadAppGangMadAppGang
278

ui-implementer

Generate UI components from Figma URLs and validate against design fidelity.

Official
Advanced