skills.rest
watchthelight
watchthelightCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bmad-ux

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

Updated Sep 3, 2026
Search Tags:#accessibility#validation#design tokens#ux design#information architecture#wireframes#design.md
One-click install
npx skills add https://github.com/watchthelight/shatterfish --skill bmad-ux-watchthelight
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-ux
Source: https://github.com/watchthelight/shatterfish/tree/main/.claude/skills/bmad-ux
Command: npx skills add https://github.com/watchthelight/shatterfish --skill bmad-ux-watchthelight

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning vague product ideas into consistent, developer-ready UX specifications is slow and error-prone. This Skill facilitates a structured UX discovery process and distills decisions into two canonical contract documents: DESIGN.md (visual identity tokens per the Google Labs spec) and EXPERIENCE.md (information architecture, behavior, states, and accessibility). ## Core Features & Use Cases - Guided UX Discovery: Elicits the user's vision through probing questions, named-protagonist journey mapping, and concern scans covering accessibility, platforms, dark mode, and i18n. - Dual Specification Output: Produces DESIGN.md with YAML frontmatter tokens (colors, typography, rounded, spacing, components) and EXPERIENCE.md with IA tables, state patterns, interaction primitives, and key flows. - Creative Rendering Tools: Generates HTML color themes, design directions, Excalidraw wireframes, and key-screen mockups so users can see options before deciding. - Validation & Reviewer Gate: Runs rubric-based and lens-selectable parallel reviewer passes that check flow coverage, token completeness, and component coverage, producing consolidated HTML/Markdown validation reports. - Use Case: A product manager says "let's create UX design" for a new mobile app; the Skill walks discovery, 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 to receive finalized DESIGN.md and EXPERIENCE.md files.

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 something like "let's create UX design" or "help me plan the UX" to trigger Create mode. The Skill runs a discovery phase capturing your decisions in a memlog, then distills them 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, and shape tokens following the Google Labs design.md spec. EXPERIENCE.md owns how it works: information architecture, component behavior, state patterns, interaction primitives, accessibility, and key flows.

Does it support design systems like shadcn or MUI?▼

Yes. When a UI system is named in the Foundation section, both spines inherit from it. DESIGN.md tokens reference or extend the system's defaults, and EXPERIENCE.md specifies only the behavioral delta rather than restating inherited specs.

Can it run headless without interactive prompts?▼

Yes. Headless mode activates when invoked by another skill or automation with a structured payload specifying intent and inputs. It completes the run without questions and ends with a JSON status payload following the schemas in assets/headless-schemas.md.

How does UX validation work on existing specifications?▼

Validate intent runs a rubric walker checking flow coverage, token completeness, component coverage, state coverage, and shape fit, plus optional reviewer lenses dispatched as parallel subagents. Findings are synthesized into validation-report.html and a Markdown twin.

What are the limitations of the design handoff mode?▼

Design handoff assembles captured discovery into a prompt for an external producer like Google Stitch, but the user must run that tool themselves and save outputs to the workspace. The Skill does not call external design tools directly.

Related Skills

Explore More Design & Creative Skills→
geekdesign27geekdesign27

bmad-create-prd

Guide users through a structured workflow to create Product Requirements Documents.

Community
Advanced
bmad-code-orgbmad-code-org
212

gds-ux

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

Official
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend scaffolds from brand guidelines and design systems.

Community
Advanced
AlejandroFiginiAlejandroFigini

stitch-design-taste

Generate DESIGN.md files encoding design tokens and rules for Google Stitch.

Community
Advanced