Agent skill · design visual · aj-geddes
bmad-ux
Solutioning-phase UX planning skill (optional; activate when the project has a UI). Produces TWO planning documents: DESIGN.md (the visual system — design tokens, color palette, typography, spacing, component specs, WCAG 2.1 AA contract) and EXPERIENCE.md (user journeys, flow diagrams, screen states, error/empty/loading handling). Use when the user says "design the UX", "create UX planning docs", "define the design system", "map the user flows", "UX for this feature", "wireframe the flows", "what are the user journeys", "accessibility design", "WCAG compliance", "design tokens", "responsive design plan", "mobile-first design", or "create DESIGN.md / EXPERIENCE.md". Runs after architecture is drafted and before stories are created. Supports Create / Update / Validate intents.
Why this skill is useful
Generates detailed UX planning documents that include design tokens and accessibility compliance, which the AI wouldn't reliably create on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-06-20. 471 stars on the source repository.
What this skill does
BMAD UX — Visual System & Experience Planning Produces the two-document UX contract that downstream story authors and the external dev tool rely on. This is a planning skill. It produces specifications, not code. What it produces Under bmad-output/ (or the folder in config.yaml): Both documents are locked planning artifacts. The external dev tool may read them but must not edit them. All design decisions should be recorded in decision-log.md. Three intents Create — generate both documents from scratch (most common). Update — revise specific sections when requirements change; append a dated entry to decision-log.md explaining what changed and why. Validate — audit existing documents for completeness and WCAG 2.1 AA gaps. Run the WCAG checklist; report findings but do not alter the project's code. Pre-flight reads Before drafting, read (in order): 1. bmad-output/config.yaml — project name, track, output folder. 2. bmad-output/project-context.md — user personas, platform targets, constraints. 3. bmad-output/prd.md (if present) — feature list, user stories, acceptance criteria. 4. bmad-output/architecture.md (if present) — component boundaries, API contracts. If any of these are missing, ask the user for the key inputs before proceeding. DESIGN.md — Visual System Use ${CLAUDEPLUGINROOT}/skills/bmad-ux/templates/design.template.md. The document covers: 1. Design Tokens Commit to concrete values. Placeholders are not acceptable for tokens. Color palette: primary, secondary, semantic (success / warning / error / info), neutral scale. All color pairs used for text must be WCAG 2.1 AA verified. Typography: font families, size scale (mobile → desktop), weight, line-height. Minimum 16px body on mobile (prevents iOS zoom). Base unit: 8px. Spacing scale (8px grid), border-radius set, shadow/elevation set. Breakpoints: 320px (mobile), 768px (tablet), 1024px (desktop), 1440px (desktop XL). 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/bmad-ux