skills.rest
Joao-Victor-Medeiros
Joao-Victor-MedeirosCOMMUNITY
Explore all skills by this author →
GitHub

bmad-ux

Elicit UX decisions and produce DESIGN.md and EXPERIENCE.md specification documents.

Updated Sep 4, 2026
Search Tags:#accessibility#specification#design system#design tokens#ux design#information architecture#wireframes
One-click install
npx skills add https://github.com/Joao-Victor-Medeiros/save-sc --skill bmad-ux-joao-victor-medeiros
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmad-ux
Source: https://github.com/Joao-Victor-Medeiros/save-sc/tree/main/.agents/skills/bmad-ux
Command: npx skills add https://github.com/Joao-Victor-Medeiros/save-sc --skill bmad-ux-joao-victor-medeiros

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning a vague product vision into concrete, developer-ready UX specifications is slow and inconsistent. This Skill facilitates a structured discovery conversation and distills the results into two contract documents: DESIGN.md (visual identity per the Google Labs spec) and EXPERIENCE.md (information architecture, behavior, states, and flows). ## Core Features & Use Cases - Facilitated UX Discovery: Captures the user's vision through probing questions without imposing design opinions, logging every decision to a persistent memlog. - Dual Specification Output: Generates DESIGN.md (colors, typography, spacing, components) and EXPERIENCE.md (IA, state patterns, interaction primitives, accessibility floor, key flows) with cross-referenced tokens. - Creative Rendering Tools: Produces 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 reviews of the spine pair, producing consolidated HTML and Markdown validation reports. - Use Case: A founder says "lets create UX design" for a journaling app; the Skill walks them through brand, IA, and flows, then delivers final DESIGN.md and EXPERIENCE.md files 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 brand, platforms, and user journeys.

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 an AI assistant?▼

Invoke the skill with a phrase like "lets create UX design" and it runs a discovery conversation covering brand, platforms, and user journeys. It then distills decisions into DESIGN.md for visual identity and EXPERIENCE.md for behavior and flows.

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

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

Does it work with design systems like shadcn or Material UI?▼

Yes. When a UI system such as shadcn, MUI, UIKit, or Compose is named in the Foundation section, both documents inherit from it. DESIGN.md specifies only brand-layer token overrides and EXPERIENCE.md specifies only the behavioral delta.

Can it run without interactive conversation?▼

Yes, a headless mode accepts a structured payload with intent (create, update, or validate) plus source materials, then completes the run without questions and returns a JSON result with artifact paths, assumptions, and open questions.

How does UX validation work on existing specifications?▼

The validate mode dispatches a rubric walker that checks flow coverage, token completeness, component and state coverage, and shape fit, plus optional reviewer lenses. Findings are synthesized into HTML and Markdown validation reports with severity-ranked fixes.

What are the limitations of the design handoff mode?▼

Design handoff assembles a prompt for an external producer such as Google Stitch rather than generating visuals itself. The user runs the external tool and saves outputs to the workspace, so fidelity depends on the external tool's capabilities.

Related Skills

Explore More Design & Creative Skills→
samura-devsamura-dev

product-manager

Structure product ideas into PRDs, architecture documents, and roadmaps.

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

gds-ux

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

Official
Advanced
bmad-code-orgbmad-code-org
52.5k

bmad-editorial-review

Forwards legacy editorial review requests to the bmad-review structure and prose lenses.

Official
Intermediate
Generous-CorpGenerous-Corp
13

import-design

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

Official
Advanced