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

User Research & Analysis
Information Architecture
Wireframing
User Flows
High-Fidelity Mockups
Interactive Prototypes
HTML/CSS Prototypes
Design Systems
Accessibility (A11y)
Responsive Design
Usability Testing
Best Practices
Tools & Resources

Core Rules

[PASS] DO

Research & Wireframing:

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
Build production-ready HTML/CSS prototypes (mandatory)
Use semantic HTML5 + ARIA attributes from the start
Use CSS custom properties for all design tokens
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:

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

ux-ui-design