ux-ui-design

name	ux-ui-design
description	Design user experiences with wireframing, prototyping, user flows, accessibility, and production-ready HTML prototypes. Use when creating wireframes, building interactive prototypes, designing user flows, implementing accessibility standards, or producing HTML/CSS design deliverables.
metadata	{"author":"AgentX","version":"2.0.0","created":"2025-01-15","updated":"2025-01-15"}
compatibility	{"agents":["ux-designer","agent-x"],"frameworks":["html-css","figma","tailwind","bootstrap"],"output-formats":["html","css","markdown","mermaid"]}

UX/UI Design & Prototyping

Purpose: Create user-centered designs, wireframes, prototypes, and production-ready HTML/CSS interfaces.

---

When to Use This Skill

• Creating wireframes or high-fidelity mockups
• Building interactive HTML/CSS prototypes
• Designing user flows and information architecture
• Implementing accessibility (WCAG) standards
• Setting up design systems or component libraries

Prerequisites

• Basic HTML/CSS knowledge for prototyping
• Design tool access

Decision Tree

Use this to pick the right UX approach for your task:

Start: What is the deliverable?
|
+- New feature / epic?
| - 1. User Research -> 2. IA -> 3. Wireframes -> 4. User Flows
| -> 5. Hi-Fi Mockups -> 6. HTML Prototype -> 7. Usability Test
|
+- Bug fix / small change?
| - Skip to step 5 (Hi-Fi) or 6 (HTML Prototype)
|
+- Design system update?
| - Jump to Design Systems - update tokens + components
|
+- Accessibility audit?
| - Jump to Accessibility - run checklist + fix
|
- Responsive issue?
 - Jump to Responsive Design - breakpoint check + fix

---

Table of Contents

1. User Research & Analysis
2. Information Architecture
3. Wireframing
4. User Flows
5. High-Fidelity Mockups
6. Interactive Prototypes
7. HTML/CSS Prototypes
8. Design Systems
9. Accessibility (A11y)
10. Responsive Design
11. Usability Testing
12. Best Practices
13. Tools & Resources

---

Core Rules

[PASS] DO

Research & Wireframing:

• Define Product Posture & Archetype BEFORE sketching any screens
• Start with lo-fi sketches; iterate on paper first
• Use real content, never lorem ipsum in final designs
• Annotate interactions on every wireframe
• Test with diverse user demographics

Design & Prototyping:

• Follow the 8px spacing grid
• Design for ALL states: empty, loading, error, success, partial
• Build production-ready HTML/CSS prototypes (mandatory)
• Use semantic HTML5 + ARIA attributes from the start
• Use CSS custom properties for all design tokens (see prototype-craft asset)
• Validate HTML & CSS

Collaboration:

• Document every design decision
• Share prototypes early and gather developer feedback
• Version-control design files
• Hand off with detailed specifications

[FAIL] DON'T

• Skip user research or design in isolation
• Leave placeholder content in final deliverables
• Ignore edge cases and error states
• Forget mobile/tablet breakpoints
• Neglect accessibility until the end
• Hardcode values instead of using design tokens
• Use large unoptimized images
• Inline all styles (use external stylesheets)
• Block rendering with synchronous scripts

Anti-Patterns

• Skipping user research: Designing based on assumptions -> conduct interviews or surveys with 5+ users before wireframing
• Lorem ipsum in deliverables: Placeholder text hides content layout problems -> use realistic content from the actual domain
• Desktop-first design: Retrofitting mobile after desktop -> design mobile breakpoints first, then enhance upward
• Ignoring error states: Only designing the happy path -> design empty, loading, error, partial, and success states for every screen
• Pixel-perfect handoff without tokens: Hardcoded colors and sizes -> define a design token system (CSS custom properties) and reference tokens in specs
• Accessibility as afterthought: Running audits only at the end -> integrate WCAG checks from wireframe stage, not after prototyping
• Overly complex user flows: 10+ step flows without progress indicators -> limit critical paths to 3-5 steps with clear progress feedback
• No version control on designs: Overwriting files with no history -> use Git for HTML prototypes and Figma version history for mockups

---

Tools & Resources

Design & Wireframing

Tool	Use Case	Link
Figma	Collaborative design	figma.com
Sketch	Mac design	sketch.com
Penpot	Open-source design	penpot.app
Balsamiq	Quick wireframes	balsamiq.com
Whimsical	Flowcharts + wireframes	whimsical.com
Excalidraw	Hand-drawn diagrams	excalidraw.com

Prototyping

Tool	Use Case	Link
CodePen	Quick HTML/CSS/JS	codepen.io
Tailwind CSS	Utility-first CSS	tailwindcss.com
Bootstrap	Component framework	getbootstrap.com

Accessibility

Tool	Use Case	Link
WAVE	Accessibility checker	wave.webaim.org
axe DevTools	Browser extension	deque.com/axe
WCAG Quick Ref	Guidelines	w3.org/WAI

Inspiration

Dribbble - Behance - awwwards

---

Reference Files

Detailed code blocks and templates are extracted into dedicated reference files:

Reference	Contents
html-prototype-code.md	Full HTML/CSS/JS prototype code (dashboard, modals, forms, tokens)
research-templates.md	Persona template, user journey map template
accessibility-patterns.md	Screen reader markup, keyboard navigation JS, ARIA patterns
responsive-patterns.md	Breakpoint CSS, responsive grid, mobile-first examples
usability-testing-template.md	Full usability test plan, script, and results template

---

Related Skills:

• Frontend/UI Development
• React Framework
• E2E Testing (A11y validation)

---

Version: 2.0.0 - Last Updated: February 10, 2026

Troubleshooting

Issue	Solution
Prototype not accessible	Run WAVE or axe-core audit, ensure ARIA labels and keyboard navigation
Inconsistent design across pages	Create a design token system with shared colors, spacing, typography
User flow too complex	Reduce steps to 3-5 maximum, add progress indicators

References

• Prototype Tokens Asset - Production-ready CSS variables
• Design System Reasoning - Posture and archetype framework
• Research Ia Wireframing
• Flows Mockups Prototypes
• Design Systems A11y