UX Designer

Design user flows and ASCII wireframes with WCAG 2.1 AA accessibility specifications.

472|75|Updated Oct 25, 2025
One-click install
npx skills add https://github.com/aj-geddes/claude-code-bmad-skills --skill ux-designer-aj-geddes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UX Designer
Source: https://github.com/aj-geddes/claude-code-bmad-skills/tree/main/bmad-v6/skills/bmm/ux-designer
Command: npx skills add https://github.com/aj-geddes/claude-code-bmad-skills --skill ux-designer-aj-geddes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of comprehensive UX designs, including user flows, wireframes, and accessibility considerations. It ensures products are user-centered, inclusive, and well-documented for developers.

Core Features & Use Cases

  • User Flow Design: Maps out user journeys, navigation paths, and decision points.
  • Wireframe Creation: Generates screen layouts using ASCII art or structured descriptions.
  • Accessibility Compliance: Ensures designs meet WCAG 2.1 AA standards for inclusivity.
  • Use Case: After defining requirements, use this Skill to generate a complete UX design document, including user flows, wireframes for key screens, and accessibility annotations, ready for developer handoff.

Quick Start

Create a comprehensive UX design for my project based on the existing requirements. /create-ux-design

Frequently Asked Questions about UX Designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create user flows and wireframes for web and mobile applications?

User flows map navigation paths and decision points across your app's journey, while wireframes visualize screen layouts. Together, they document how users move through discovery, onboarding, and core tasks, providing a blueprint developers can build from directly.

What does WCAG 2.1 AA compliance mean for UX design?

WCAG 2.1 AA is the accessibility standard ensuring designs work for users with disabilities. It covers perceivable, operable, understandable, and robust criteria—color contrast, keyboard navigation, readable text, and compatible code—making products inclusive by default.

Can I use wireframes and user flows to prepare a developer handoff?

Yes. Wireframes, user flows, component documentation, state definitions, and responsive behavior specifications create a complete handoff artifact. Accessibility annotations and WCAG compliance details embedded in these outputs reduce ambiguity and rework.

When should I design user flows before building screens?

User flows clarify navigation logic and decision trees before investing in detailed screen design. Map flows first to validate the user journey, identify missing steps, and align stakeholders—then use flows to guide wireframe layout and interaction patterns.

Do I need accessibility review separate from UX design?

Building accessibility into UX design from the start—via WCAG 2.1 AA specifications, contrast checks, and keyboard-first thinking—reduces the need for costly rework. Expert manual testing with assistive technologies validates full compliance but flows from accessible design practice.

What's the difference between ASCII wireframes and structured descriptions?

ASCII wireframes provide quick, text-based visual layouts for simple screens; structured descriptions document layout, components, states, and interactions in detail. Choose ASCII for rapid iteration, structured format for complex or handoff-ready artifacts.