UX Design Skill

A comprehensive UX design methodology for creating user-centered products. Use this skill when designing user experiences, creating flows, evaluating usability, or getting external UX feedback.

Core UX Principles

1. Jobs-to-be-Done (JTBD)

Focus on what users are trying to accomplish, not features.

Template: When [situation], I want to [motivation], so I can [expected outcome].

Example: When I have a character I love, I want to generate comic panels with them, so I can tell stories without learning to draw.

2. Progressive Disclosure

Show only what's needed at each step. Complexity emerges as users need it.

Level 1: Core action (upload, generate) Level 2: Basic options (style, description) Level 3: Advanced controls (parameters, fine-tuning) Level 4: Expert features (custom LoRAs, composition)

3. Recognition Over Recall

Users should recognize options, not remember commands.

Bad: "Enter LoRA weight (0.0-1.0)" Good: [Slider with preview] "Style strength: Subtle ←→ Strong"

4. Error Prevention > Error Recovery

Design to prevent errors, not just handle them gracefully.

Example: Disable "Generate" until character is locked, not "Error: No character"

5. Immediate Feedback

Every action should have visible response within 100ms.

• Button press → visual state change
• Upload → progress indicator
• Generation → status updates ("Analyzing face...", "Applying style...")

UX Design Process

Phase 1: Research & Discovery

1. User Interviews

   • Who are the target users?
   • What are they trying to accomplish?
   • What do they currently use? What's frustrating?
   • What would "magic" look like?

2. Competitive Analysis

   • What do competitors do well?
   • Where do they fail?
   • What's the table stakes?
   • What's the differentiation opportunity?

3. Jobs-to-be-Done Mapping

   • List all user jobs
   • Prioritize by frequency × importance
   • Identify underserved jobs

4. User Personas

   • 2-3 primary personas
   • Goals, frustrations, context
   • Technical proficiency level

Phase 2: Information Architecture

1. Content Inventory

   • What content/features exist?
   • How do they relate?

2. Site/App Map

   • Hierarchy of screens/pages
   • Navigation structure

3. User Flows

   • Primary task flows (happy path)
   • Error/edge case flows
   • Entry and exit points

Phase 3: Interaction Design

1. Wireframes

   • Low-fidelity layouts
   • Component placement
   • Information hierarchy

2. Interaction Patterns

   • How does each element behave?
   • State transitions
   • Micro-interactions

3. Responsive Considerations

   • Desktop, tablet, mobile breakpoints
   • Touch vs mouse interactions

Phase 4: Visual Design

1. Design System

   • Typography
   • Color palette
   • Spacing/grid
   • Component library

2. High-Fidelity Mockups

   • Pixel-perfect designs
   • All states (empty, loading, error, success)
   • Dark/light mode if applicable

3. Prototypes

   • Interactive clickable prototypes
   • Animation/transition specs

Phase 5: Validation

1. Usability Testing

   • Task completion rates
   • Time on task
   • Error rates
   • User satisfaction

2. A/B Testing

   • Hypothesis-driven experiments
   • Statistical significance

3. Analytics

   • Funnel analysis
   • Drop-off points
   • Feature usage

UX Deliverables

User Flow Diagram Format

[Entry Point] → (Decision) → [Screen/State] → [Exit/Success] ↓ [Alternative Path]

Legend: [ ] = Screen or state ( ) = Decision point → = Flow direction --- = Optional path

Wireframe Annotation Format

┌─────────────────────────────────────────┐ │ [Component Name] │ │ ┌─────────────────────────────────────┐│ │ │ ││ │ │ ① Element description ││ │ │ ② Interaction behavior ││ │ │ ││ │ └─────────────────────────────────────┘│ │ │ │ Notes: │ │ - Accessibility considerations │ │ - Edge cases │ │ - Mobile behavior │ └─────────────────────────────────────────┘

① Numbered annotations reference specific elements ② Describe behavior, not just appearance

State Diagram Format

State Machine: [Component Name]

States:

• idle: Default state
• loading: Async operation in progress
• success: Operation completed
• error: Operation failed

Transitions: idle → loading: [trigger: user action] loading → success: [trigger: operation complete] loading → error: [trigger: operation failed] error → idle: [trigger: dismiss/retry]

Running UX Reviews

Use the agent-review skill with UX-focused prompts:

Get UX feedback on a flow

node .claude/skills/agent-review/query.mjs -m opus
-s "You are a senior UX designer with 15 years of experience in consumer products. Focus on usability, accessibility, and emotional design."
-f docs/ux-flow.md
"Review this user flow for usability issues and opportunities"

Evaluate information architecture

node .claude/skills/agent-review/query.mjs -m opus
-s "You are an information architect specializing in complex creative tools. Prioritize discoverability and progressive complexity."
-f docs/site-map.md
"Evaluate this information architecture for a comic creation tool"

Get feedback on wireframes

node .claude/skills/agent-review/query.mjs -m opus
-s "You are a UX designer who specializes in creative tools like Figma, Canva, and Adobe products. Focus on efficiency for power users while maintaining approachability."
-f docs/wireframes.md
"Critique these wireframes for a comic panel generator"

UX Heuristics Checklist

Use this checklist to evaluate designs:

Nielsen's 10 Usability Heuristics

• Visibility of system status: User always knows what's happening

• Match with real world: Uses familiar language and concepts

• User control and freedom: Easy to undo, escape, go back

• Consistency and standards: Same actions work the same way

• Error prevention: Design prevents errors before they occur

• Recognition over recall: Options visible, not memorized

• Flexibility and efficiency: Shortcuts for experts, simplicity for novices

• Aesthetic and minimal: No irrelevant information

• Help users with errors: Clear error messages with solutions

• Help and documentation: Available when needed

Accessibility (WCAG)

• Perceivable: Content available to all senses

• Operable: All functionality via keyboard

• Understandable: Clear language, predictable behavior

• Robust: Works with assistive technologies

Emotional Design

• Visceral: First impression is positive

• Behavioral: Feels good to use, efficient

• Reflective: Users feel proud/satisfied after use

UX Writing Guidelines

Microcopy Principles

1. Be concise: "Upload" not "Click here to upload your files"
2. Be specific: "3 images required" not "Upload images"
3. Be helpful: "Try a front-facing photo" not "Invalid image"
4. Be human: "Almost there!" not "Processing: 80%"

Button Labels

Good: [Create Comic] [Save Draft] [Generate Panel] Bad: [Submit] [OK] [Go]

Action verbs that describe what happens

Error Messages

Format: What happened + Why + How to fix

Example: "Character not recognized. We couldn't detect a face in your images. Try uploading photos with a clear, front-facing view."

Loading States

Informative progress, not just spinners:

"Analyzing your character..." (0-30%) "Learning facial features..." (30-50%) "Creating style profile..." (50-70%) "Almost ready..." (70-100%)

Output Templates

When creating UX documentation, use these templates:

User Story Template

User Story: [Title]

As a [user type] I want to [action] So that [benefit]

Acceptance Criteria

• Criterion 1
• Criterion 2

UX Notes

• Key interaction details
• Edge cases to handle
• Accessibility considerations

Screen Specification Template

Screen: [Name]

Purpose: What this screen accomplishes Entry Points: How users arrive here Exit Points: Where users can go from here

Layout

[ASCII wireframe or description]

Components

Interactions

1. When user does X, Y happens
2. ...

Edge Cases

• Empty state: What shows when no data?
• Error state: What shows on failure?
• Loading state: What shows during async?

Accessibility

• Keyboard navigation
• Screen reader considerations
• Color contrast

User Flow Template

Flow: [Name]

Goal: What the user accomplishes Trigger: What initiates this flow Actors: Who is involved

Happy Path

1. Step 1 → [Screen/State]
2. Step 2 → [Screen/State]
3. Success!

Alternative Paths

• If [condition], then [alternative flow]

Error Paths

• If [error], show [error state], user can [recovery action]

Flow Diagram

[ASCII or mermaid diagram]

When to Use This Skill

• New Feature Design: Before writing code, design the experience

• UX Review: Evaluate existing designs for usability issues

• User Flow Mapping: Document how users accomplish tasks

• Wireframing: Create low-fidelity layouts

• Interaction Design: Define how elements behave

• Usability Evaluation: Heuristic analysis of designs

• UX Writing: Craft microcopy, error messages, onboarding text