ux-ui-design

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

Prototyping

Accessibility

Inspiration

Dribbble - Behance - awwwards

Reference Files

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

Related Skills:

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

Version: 2.0.0 - Last Updated: February 10, 2026

Troubleshooting

References

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