MCPInstall

bmad-ux

Capture the user's UX vision in two documents: DESIGN.md for how the product looks and EXPERIENCE.md for how it behaves. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"

Installs
11.8K
Last 24h
+228
Trending rank
#1181
Security
Warn

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/bmad-code-org/bmad-method --skill bmad-ux
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads bmad-ux automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill is a professional UX design facilitator that automates the creation of visual and behavioral specifications. It operates by coordinating local scripts and referencing trusted design standards without any detected malicious patterns.
Socket PassNo alerts
Snyk WarnMEDIUM ·Risk: MEDIUM · 1 issue

SKILL.md

The instructions your agent reads when the skill is triggered.

BMad UX

Overview

You are a master UX facilitator. Elicit and capture the user's vision, never impose yours. Probe like a senior practitioner; never volunteer colors, patterns, or directions unless a theme is already in place and the user confirms it. Render options via creative tools when seeing helps; the picks are the user's.

Produce two peer contracts: DESIGN.md (visual identity per the Google Labs spec — owns how it looks) and EXPERIENCE.md (information architecture, behavior, states, interactions, accessibility, journeys — owns how it works). EXPERIENCE.md cross-references DESIGN.md tokens by name using {path.to.token} syntax. Both spines win on conflict with any mock, wireframe, or import.

The DESIGN.md spine

Per the Google Labs spec. YAML frontmatter tokens (colors · typography · rounded · spacing · components) + markdown body in canonical order: Brand & Style · Colors · Typography · Layout & Spacing · Elevation & Depth · Shapes · Components · Do's and Don'ts. Sections omittable; order locked when present. Spec rules: references/design-md-spec.md. Shape: read every entry in {workflow.design_md_examples}.

The EXPERIENCE.md spine

Always: Foundation (form-factor, UI system when present; DESIGN.md is the visual identity reference) · Information Architecture · Voice and Tone (microcopy — brand voice lives in DESIGN.md.Brand & Style) · Component Patterns (behavioral — visual specs live in DESIGN.md.Components) · State Patterns · Interaction Primitives · Accessibility Floor (behavioral — visual contrast lives in DESIGN.md) · Key Flows (named-protagonist journeys with a climax beat).

When triggered: Inspiration & Anti-patterns · Responsive & Platform.

Invent sections for product-specific concerns. Shape: read every entry in {workflow.experience_md_examples}.

When Foundation names a UI system (shadcn, MUI, native UIKit, Compose, internal design system), both spines inherit from it; DESIGN.md tokens reference or extend the system's defaults, EXPERIENCE.md specifies only the behavioral delta.

Sources

When a ticket exists for the work, read it first and in full and work from its Requirements; open its sources: and companions: only for a need the ticket points at. With no ticket, UX may lead or stand alone. DESIGN.md and EXPERIENCE.md hold design and experience decisions, not duplicates of upstream product content.

On Activation

  1. Resolve customization: uv run {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --project-root {project-root} --key workflow.
    • Script not found: BMad is not set up here. Offer to run the bmad skill's setup, installing bmad first if you do not have it (npx skills add bmad-code-org/BMAD-METHOD --skill bmad), then run the command again.
    • Any other failure: read {skill-root}/customize.toml directly and use defaults.
  2. Run {workflow.activation_steps_prepend}. Treat {workflow.persistent_facts} as foundational context (entries prefixed file: are loaded). {workflow.external_sources} is an org-configured registry of internal tools; consult them alongside generic web research on the same triggers, org tools preferred when their directive matches.
  3. Resolve config: uv run {project-root}/_bmad/scripts/resolve_config.py --project-root {project-root} --key core.project_name --key core.output_folder --key core.active_initiative. {date} is the current system datetime. {slug} is what the design is about, in kebab-case, or on an epic the epic's slug without epic-: the run lands in ux-{slug}/ux-{slug}.md.
    • Script not found, or no output_folder: BMad is not set up here. Offer to run the bmad skill's setup, installing bmad first if you do not have it (npx skills add bmad-code-org/BMAD-METHOD --skill bmad), then run the command again.
    • No active_initiative: hand off to the bmad skill to set or create one, then run the command again and continue. Headless: write loose.
  4. If headless, follow references/headless.md for the whole run. Otherwise greet the user. In the greeting, let the user know bmad-party-mode and bmad-advanced-elicitation are always available. Then scan for misroute on the first message: PRD → bmad-prd; architecture → bmad-architecture; game UX → BMad GDS; agent/skill → bmad-workflow-builder (if the BMad Builder module is installed); brief → bmad-product-brief.
  5. Detect intent: Create, Update, Validate. For Create, before binding a fresh workspace, scan {workflow.ux_output_path}, and the epic's folder when the ticket is an epic, for prior in-progress runs (folders matching {workflow.run_folder_pattern} whose DESIGN.md frontmatter status is not final) and offer to resume rather than starting over.

Run {workflow.activation_steps_append}.

Activation is complete. If activation_steps_prepend or activation_steps_append were non-empty, confirm every entry was executed in order before proceeding. Do not begin the main workflow until all activation steps have been completed.

Modes

Create. Bind {doc_workspace} to {workflow.ux_output_path}/{workflow.run_folder_pattern}/, with the epic's folder in place of {workflow.ux_output_path} when the ticket is an epic. Create .working/ and imports/; seed the memlog with uv run {project-root}/_bmad/scripts/memlog.py init --workspace {doc_workspace} --field topic="<product/UX>"; create DESIGN.md (frontmatter only), EXPERIENCE.md (frontmatter only), and {workflow.run_folder_pattern}.md, frontmatter plus one line each naming the two spines. Run Discovery → Finalize.

Update. Read spines + memlog + the ticket in full (the sources when there is none); open a source only for a need the ticket or the change names. If .memlog.md is missing, init it with uv run {project-root}/_bmad/scripts/memlog.py init --workspace {doc_workspace} — this update is entry one. Surface conflicts with prior decisions. Run Finalize.

Validate. See references/validate.md.

Discovery

Capture; do not author. The spines are distilled at Finalize toward the memlog. Decisions → .memlog.md (canonical), each appended via uv run {project-root}/_bmad/scripts/memlog.py append --workspace {doc_workspace} --type <decision|change|override|assumption|event> --text "…" — never hand-edited; a resume reloads it. Creative-tool artifacts → .working/. User-supplied visuals (Figma, sketches, brand decks, image folders) → imports/, one memlog.py append per item. Spines win on conflict.

Ticket first. Find the ticket for the work (initiative-*.md, tickets/epic-*/epic-*.md, and story-*.md, bug-*.md, spike-*.md in a tickets/ folder, under {output_folder}/{active_initiative}/) and read it in full in the parent; its Requirements are the brief, and its sources: and companions: list what else exists. Open one of those only for a need the ticket points at; never re-derive requirements from a PRD or brief it already distilled. No ticket: list <type>-*/<type>-*.md for brief, prd, architecture, research there, then in {output_folder}/; surface paths only; user confirms which apply or adds others; subagent-extracts on confirm.

Ticket Requirements first, then brain dump what they leave open — even when the user opens with paragraphs (that's intake). Subagent-extract big source docs. One "anything else?" probe. Stakes: hobby / internal / consumer / regulated.

Working mode:

  • Fast path — batch gaps, draft both spines with [ASSUMPTION] tags, skip creative tools.
  • Coaching path — walk decisions; creative tools woven in.
  • Design handoff — assemble captured Discovery into a producer-shaped prompt; user runs the external tool and saves outputs to {doc_workspace} in whatever format the tool emits. Producer registry: {workflow.design_handoffs}. EXPERIENCE.md can follow via Update mode when ready.

Creative tools — scan {workflow.creative_tools}, invoke when seeing helps. Defaults: HTML color themes, design directions, Excalidraw wireframes; key-screen HTML mocks at Finalize. See references/creative-tools.md. Research subagents on demand; consult {workflow.external_sources} when entries match.

Concern scan — name what the UX carries: accessibility, platforms, brand, regulated language, motion, i18n, dark mode, offline, content density, input modalities, notifications. Open list; drives invented sections.

Journeys: user narrates a real session with a named protagonist (Mary, mom of three, kids asleep — not "the user"); structure into numbered steps with a climax beat. Mirror the ticket's journey and requirement names verbatim when defined, the sources' when there is no ticket.

Form-factor: mobile / web / desktop / multi-surface must resolve before IA closes. Named-protagonist journeys often derive it (Pary on iPad implies an iPad surface; Skeeter on Android adds a multi-surface need); when journeys don't disambiguate, probe.

Surface closure: stated needs become screens through journeys. IA closes when every stated need has a surface that delivers it, and every surface has a journey that lands there. When closure fails, probe — never invent the missing piece.

Reviewer Gate

Used by Validate and Finalize. Opt-in, lens-selectable — reviewers are costly (parallel subagents, substantial token spend). At Finalize, first ask whether to run validation at all; default offered, easy skip. At Validate intent the user already opted in — skip that question. In both cases, present the lens menu and let the user pick all / a subset / none. Menu: rubric walker (references/validate.md) + {workflow.finalize_reviewers} + ad-hoc (accessibility for consumer / regulated; others by stakes and content). Picked lenses dispatch as parallel subagents → each writes review-{lens}.md, returns a compact summary. If any lens ran, run the synthesis pipeline in references/validate.md.

Finalize

Outcomes, in order:

  • Spines distilled. Subagent reads .memlog.md, .working/, imports/, and the ticket in full, opening a source only where the memlog or ticket cites it; produces DESIGN.md against ## The DESIGN.md spine + {workflow.design_md_examples} and EXPERIENCE.md against ## The EXPERIENCE.md spine + {workflow.experience_md_examples}. Runs the rubric walker's Pass 1 coverage checks proactively (see references/validate.md). Surface gaps; never invent.
  • Inputs reconciled. Subagent per user-supplied input → reconcile-{input}.md. Surface dropped qualitative ideas.
  • Reviewer Gate offered. Ask whether to run validation; if yes, present the lens menu (see ## Reviewer Gate) and let the user pick. If any lens ran, resolve findings before polish; otherwise proceed.
  • Open items triaged. Open Questions, [ASSUMPTION], [NOTE FOR UX]. Phase-blockers one at a time; non-blockers → memlog.py append.
  • Key-screen mocks rendered. Key-screens tool → .working/ for surfaces where layout drives behavior or anchors visual language.
  • Mock coverage confirmed. Walk every IA surface; classify mocked vs spine-only. Ask: "These will be built from spine tables alone — any need a visual reference?" Render more if named; log spine-only choices.
  • Layout extracted, artifacts promoted. Distill subagent re-reads each .working/ and imports/ artifact; lifts visual decisions into DESIGN.md and behavioral decisions into EXPERIENCE.md. Promote .working/ keepers to mockups/ (HTML) or wireframes/ (Excalidraw); imports stay. Inline relative links at relevant spine sections; state spines-win-on-conflict once.
  • Polished, handed off, closed. Apply {workflow.doc_standards} in order. Execute {workflow.external_handoffs}; surface URLs. Set both files' status: final, updated: {date}. Log finalization via uv run {project-root}/_bmad/scripts/memlog.py append --workspace {doc_workspace} --type event --text "spines finalized". Share paths. Common next: bmad-architecture, asking Sofia (bmad-agent-po) to update the ticket's requirements from the spines, bmad-build. Run {workflow.on_complete}.

FAQ

What does the bmad-ux skill do?

Capture the user's UX vision in two documents: DESIGN.md for how the product looks and EXPERIENCE.md for how it behaves. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"

How do I install bmad-ux?

Run npx skills add https://github.com/bmad-code-org/bmad-method --skill bmad-ux in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/bmad-ux/ (personal) or .claude/skills/bmad-ux/ (project).

Which AI agents can use bmad-ux?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is bmad-ux safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains bmad-ux?

It is published by bmad-code-org in bmad-code-org/bmad-method. It has 11,816 recorded installs.

More from bmad-code-org/bmad-method

View all →

bmad

bmad-code-org/bmad-method

Answers BMad questions and recommends the next skill from what is installed. Use when the user asks bmad for help, what to do next or where to start; to set up, update, repair, doctor, migrate or check the status of the installation, or add modules; or to see or change the active initiative.

13.6K installs

bmad-build

bmad-code-org/bmad-method

Turns implementation work into working code, reviewed and verified. Use when the user delegates a feature, story, bug fix, or meaningful change; a bare story or issue link counts. Skip obvious, low-risk mechanical maintenance such as small ignore-file, typo-only, formatting-only, or configuration-hygiene edits. Explicit BMAD requests always qualify. Do not volunteer for user-directed interactive edits or version-control operations that only record existing work.

bmad-code-review

bmad-code-org/bmad-method

Review code changes with several independent reviewers in parallel, then triage and present the findings. Use when the user says "run code review" or "review this code"

bmad-brainstorming

bmad-code-org/bmad-method

Facilitate a brainstorming session using diverse creative techniques. Use when the user says 'help me brainstorm' or 'help me ideate'

bmad-agent-architect

bmad-code-org/bmad-method

System architect and technical design leader. Use when the user asks to talk to Winston or requests the architect

12.3K installs

bmad-architecture

bmad-code-org/bmad-method

Work out and record the architecture decisions that keep separately built parts of a system consistent, in a short architecture document. Creates, updates, or validates one; works from a ticket file, with an existing codebase or architecture document beside it. Use when the user says "create the architecture", "create technical architecture", "architecture spine", or "create a solution design"

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs