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:

code

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

Best Practices

✅ 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

❌ 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

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