Get the FREE Ultimate OpenClaw Setup Guide →

bmad-ux-designer

Scanned
npx machina-cli add skill xmm/codex-bmad-skills/bmad-ux-designer --openclaw
Files (1)
SKILL.md
3.4 KB

BMAD UX Designer

Trigger Intents

  • bmad:ux-design
  • bmad:user-flow

Workflow Variants

  1. ux-design
  • Create UX specification with states, constraints, and accessibility requirements.
  1. user-flow
  • Create end-to-end user flow for primary tasks and edge states.

Inputs

  • planning artifacts (docs/bmad/prd.md or docs/bmad/tech-spec.md)
  • user roles, journeys, and platform constraints
  • accessibility target (WCAG level)

Language Guard (Mandatory)

Enforce language selection separately for chat responses and generated artifacts.

Chat language (communication_language) fallback order:

  1. language.communication_language from bmad/project.yaml
  2. English

Rules for chat responses:

  • Use the resolved chat language for all assistant responses (questions, status updates, summaries, and handoff notes).
  • Do not switch chat language unless the user explicitly requests a different language in the current thread.

Artifact language (document_output_language) fallback order:

  1. language.document_output_language from bmad/project.yaml
  2. English

Rules for generated artifacts:

  • Use the resolved artifact language for all generated BMAD documents and structured artifacts.
  • write prose and field values in the resolved document language
  • avoid mixed-language requirement clauses with English modal verbs (for example, System shall followed by non-English text)
  • allow English acronyms/abbreviations in non-English sentences (for example, API, SLA, KPI, OAuth, WCAG)
  • Keep code snippets, CLI commands, file paths, and identifiers in their original technical form.

Mandatory Reference Load

Before executing ux-design or user-flow, read REFERENCE.md first. Treat REFERENCE.md as required context for UX quality, accessibility, and handoff consistency.

Output Contract

  • UX spec -> docs/bmad/ux-design.md
  • flow definition -> docs/bmad/user-flow.md

Core Workflow

  1. Define user goals and key journeys.
  2. Map states, transitions, and interaction rules.
  3. Document responsive behavior and failure states.
  4. Validate accessibility and readability constraints.
  5. Provide implementation handoff constraints.

Script Selection

  • Accessibility checklist: 
    bash scripts/wcag-checklist.sh
  • Responsive breakpoint reference: 
    bash scripts/responsive-breakpoints.sh
  • Color contrast check: 
    python3 scripts/contrast-check.py '#000000' '#FFFFFF'

Template Map

  • templates/ux-design.template.md

  • Why: complete UX artifact for implementation handoff.

  • templates/user-flow.template.md

  • Why: structured user path and decision states.

Reference Map

  • REFERENCE.md

  • Must read first for UX workflow guidance and delivery quality.

  • resources/accessibility-guide.md

  • Use when validating accessibility and semantic behavior.

  • resources/design-patterns.md

  • Use for common interaction patterns and consistency.

  • resources/design-tokens.md

  • Use for spacing, typography, and component-level design constraints.

Quality Gates

  • key journeys and edge cases are captured
  • accessibility constraints are explicit and testable
  • responsive behavior is documented
  • design output is directly implementable

Source

git clone https://github.com/xmm/codex-bmad-skills/blob/main/skills/bmad-ux-designer/SKILL.mdView on GitHub

Overview

BMAD UX Designer defines interaction design and accessibility-ready UX artifacts for BMAD projects. It supports two workflow variants—ux-design and user-flow—and draws from planning docs, user roles, journeys, and platform constraints. The role ensures artifacts meet WCAG targets and language guard requirements for consistent delivery.

How This Skill Works

Triggered by bmad:ux-design or bmad:user-flow intents, it ingests planning artifacts, user roles, journeys, and platform constraints, then applies the mandatory REFERENCE.md guidance to ensure UX quality. It outputs either a UX design spec at docs/bmad/ux-design.md or a user-flow at docs/bmad/user-flow.md, with explicit states, transitions, accessibility constraints, and handoff requirements. It enforces language guard rules to keep chat and artifact languages consistent.

When to Use It

  • When drafting a UX specification with states, constraints, and accessibility requirements.
  • When creating an end-to-end user flow for primary tasks and edge states.
  • When aligning planning artifacts (prd.md, tech-spec.md) with user roles and WCAG targets.
  • When ensuring output artifacts follow BMAD language rules and reference materials.
  • When documenting responsive behavior and handoff constraints.

Quick Start

  1. Step 1: Identify intent (ux-design or user-flow) and load REFERENCE.md.
  2. Step 2: Provide inputs (planning artifacts, roles, journeys, constraints, WCAG target).
  3. Step 3: Generate the artifact (ux-design.md or user-flow.md) and run accessibility checks.

Best Practices

  • Anchor specs and flows to planning artifacts (prd.md, tech-spec.md) and reference materials.
  • Explicitly capture accessibility requirements (WCAG level) and edge cases.
  • Document responsive behavior and failure states for real-world use.
  • Validate outputs against language guard rules to avoid mixed languages.
  • Include implementation handoff constraints and token/design patterns.

Example Use Cases

  • Draft ux-design.md for a BMAD feature with states, constraints, and WCAG targets.
  • Create a complete user-flow.md mapping end-to-end tasks and edge states.
  • Validate design artifacts against REFERENCE.md and accessibility-guide.
  • Produce artifacts from planning docs (prd.md) and align with platform constraints.
  • Run wcag-checklist and include results in the UX output.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗