skills.rest
tuanpa-nhg-eng
tuanpa-nhg-engCOMMUNITY
Explore all skills by this author →
GitHub

bmad-ux

Plan UX patterns and produce DESIGN.md and EXPERIENCE.md design specification documents.

Updated Jul 2, 2026
Search Tags:#accessibility#specification#design system#design tokens#ux design#information architecture#wireframes
One-click install
npx skills add https://github.com/tuanpa-nhg-eng/nhg-ipms --skill bmad-ux-tuanpa-nhg-eng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-ux
Source: https://github.com/tuanpa-nhg-eng/nhg-ipms/tree/main/.claude/skills/bmad-ux
Command: npx skills add https://github.com/tuanpa-nhg-eng/nhg-ipms --skill bmad-ux-tuanpa-nhg-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Turning a product idea into a coherent UX specification requires capturing visual identity, information architecture, interaction behavior, and accessibility rules in a form downstream developers and AI agents can consume. This Skill facilitates that elicitation and distills decisions into two canonical contract documents. ## Core Features & Use Cases - Dual specification spines: Produces DESIGN.md (visual identity tokens per the Google Labs design.md spec) and EXPERIENCE.md (IA, states, interactions, accessibility, key flows) that cross-reference each other. - Three operating modes: Create new UX specs through guided discovery, Update existing spines with conflict detection, and Validate spine pairs with multi-lens reviewer subagents. - Creative tooling: Renders HTML color themes, design directions, Excalidraw wireframes, and key-screen mockups so users can pick visual directions by seeing them. - Use Case: A founder says "help me plan the UX" for a journaling app; the Skill elicits decisions through named-protagonist journeys, renders theme options, and finalizes DESIGN.md and EXPERIENCE.md ready for architecture and story breakdown. ## Quick Start Ask the assistant to create UX specifications for your product idea and answer its discovery questions about users, platforms, and brand direction.

Frequently Asked Questions about bmad-ux

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

FAQPage Schema
How do I create a UX design specification with this Skill?▼

Say "lets create UX design" or "help me plan the UX" to trigger Create mode. The Skill runs a discovery phase capturing decisions into a memlog, offers creative tools like color themes and wireframes, then distills everything into DESIGN.md and EXPERIENCE.md at Finalize.

What is the difference between DESIGN.md and EXPERIENCE.md?▼

DESIGN.md owns how the product looks: color, typography, spacing, shape, and component visual tokens per the Google Labs design.md spec. EXPERIENCE.md owns how it works: information architecture, state patterns, interaction primitives, accessibility behavior, and key flows.

Does it support design systems like shadcn or MUI?▼

Yes. When the Foundation names a UI system such as shadcn, MUI, UIKit, or Compose, both spines inherit from it. DESIGN.md specifies only brand-layer token deltas and EXPERIENCE.md specifies only the behavioral delta.

Can it validate an existing UX specification?▼

Yes, Validate mode critiques an existing DESIGN.md and EXPERIENCE.md pair without changing it. It runs a rubric walker covering flow, token, component, and state coverage, plus optional reviewer lenses, and writes HTML and Markdown validation reports.

Can I use it headless from another automation?▼

Yes. Headless mode accepts a structured payload with intent (create, update, or validate) and inputs, runs without interaction, and ends with a JSON result following the schemas in assets/headless-schemas.md.

What happens to wireframes and mockups it generates?▼

Creative artifacts land in the workspace .working/ directory during discovery. At Finalize, artifacts with lasting reference value are promoted to mockups/ (HTML) or wireframes/ (Excalidraw) and linked inline from the relevant spine sections.

Related Skills

Explore More Design & Creative Skills→
co-cddoco-cddo
4

bmad-create-prd

Draft a structured PRD with Success Criteria and User Journeys from discovery materials.

Official
Advanced
bmad-code-orgbmad-code-org
212

gds-ux

Generate DESIGN.md and EXPERIENCE.md UX spines for game development projects.

Official
Advanced
encero-systemsencero-systems
92

review-rust-prose

Review Rust prose comments and rustdoc accuracy with slice reports.

Official
Intermediate
Generous-CorpGenerous-Corp
13

import-design

Import external design files into the Pulp framework with automated layout parity validation.

Official
Advanced