UX Designer

Create information architecture, user flows, wireframes, and prototypes for digital products.

34|7|Updated Oct 22, 2025
One-click install
npx skills add https://github.com/daffy0208/ai-dev-standards --skill ux-designer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UX Designer
Source: https://github.com/daffy0208/ai-dev-standards/tree/main/SKILLS/ux-designer
Command: npx skills add https://github.com/daffy0208/ai-dev-standards --skill ux-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves? This Skill addresses the challenge of creating user-centered digital products by guiding through a systematic design process, ensuring interfaces are intuitive, accessible, and meet user needs, reducing friction and improving satisfaction.

Core Features & Use Cases

  • Information Architecture: Organizes content and functionality logically through card sorting and site mapping for clear navigation.
  • User Flows & Wireframing: Maps user paths for core tasks and creates low-fidelity layouts to define structure and hierarchy.
  • Usability Testing & Accessibility: Conducts interactive prototype testing with real users and ensures designs meet WCAG 2.1 AA accessibility standards.

Quick Start

  1. Information Architecture - Card sorting, site mapping
  2. User Flows - Map task paths (onboarding, core tasks, errors)
  3. Wireframes - Low-fi layouts (Figma recommended)
  4. Usability Testing - Test with 5+ users (>70% task completion)
  5. UI Design - High-fi designs with design system

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 products?

User flows map the paths users take through core tasks like onboarding and error handling; wireframes are low-fidelity layouts that define structure and information hierarchy. Together they translate user research into tangible design artifacts before high-fidelity UI work begins.

What does information architecture mean and why does it matter in product design?

Information architecture organizes content and functionality logically through card sorting and site mapping, ensuring clear navigation. It reduces friction by making it obvious to users where to find features and information.

How do I test if my design meets WCAG 2.1 AA accessibility standards?

Conduct usability testing with 5+ real users targeting >70% task completion, then verify designs against WCAG 2.1 AA criteria for color contrast, keyboard navigation, and screen reader compatibility. Testing with users catches gaps automated checkers miss.

Can I use prototypes to validate design decisions before development?

Yes. Interactive prototypes enable usability testing with real users to validate core task flows, error handling, and edge cases. Testing prototypes reduces expensive rework during development by confirming the design solves actual user problems.

What's the relationship between design systems and wireframing?

Wireframes define structure and task flow independent of visual style; design systems provide reusable components, patterns, and specs for handoff to developers. Together they ensure consistency and faster implementation.