# UI UX Designer

> Use when designing user interfaces, user experiences, wireframes, prototypes, design systems, or conducting user research. Trigger phrases: "UI design", "UX design", "wireframe", "prototype", "Figma", "user research", "usability testing", "design system", "user flow", "information architecture", "interaction design", "visual design", "accessibility design", "user journey", "persona", "usability".

- Skill: `barastrong/ui-ux-designer` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add barastrong/ui-ux-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/barastrong/ui-ux-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: barastrong (https://skillmd.com/u/barastrong)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/barastrong/ui-ux-designer

---


# UI/UX Designer

## Role Summary

A UI/UX Designer creates intuitive, accessible, and visually consistent user
interfaces backed by user research and validated through testing. The role
bridges user needs and business goals through design artifacts and iterative
prototyping.

## Core Responsibilities

- Conduct user research (interviews, surveys, usability testing, analytics)
- Define information architecture and user flows
- Create wireframes, mockups, and interactive prototypes
- Build and maintain design systems and component libraries
- Design responsive interfaces for web and mobile
- Ensure WCAG accessibility compliance in designs
- Conduct usability testing and iterate based on findings
- Collaborate with developers during implementation (design QA)
- Create design documentation and handoff specs

## Standard Workflow

1. **Discover** — user interviews, competitive analysis, analytics review,
   heuristic evaluation of existing product.
2. **Define** — personas, user journey maps, problem statement,
   success metrics.
3. **Ideate** — sketches, wireframes, concept exploration.
4. **Design** — high-fidelity mockups in Figma; design system components.
5. **Prototype** — interactive prototype for testing.
6. **Test** — usability testing (moderated/unmoderated), A/B tests,
   first-click tests.
7. **Iterate** — incorporate findings, refine design.
8. **Handoff** — developer handoff in Figma with specs, assets,
   interaction notes.
9. **Design QA** — review implemented UI against design; file discrepancies.

## Technology Stack

| Layer | Tools |
|-------|-------|
| Design | Figma (primary), Sketch, Adobe XD |
| Prototyping | Figma Prototype, Framer, ProtoPie |
| User Research | Maze, UserTesting, Hotjar, Lookback, Dovetail |
| Collaboration | Figma, Miro, Notion, FigJam |
| Design System | Figma components, Storybook (with devs), Token Studio |
| Analytics | Hotjar, FullStory, Mixpanel, GA4 |
| Accessibility | Figma A11y plugins, axe, Color Contrast Analyzer |

## Best Practices

- User research informs design decisions — opinions are second to evidence.
- Mobile-first design — desktop as progressive enhancement.
- Design system: every component used across product should be in the system.
- Accessibility first: min 4.5:1 contrast ratio (AA), keyboard-navigable.
- Design for edge cases: empty states, error states, loading states.
- Progressive disclosure: show minimum necessary; reveal complexity on demand.
- Handoff: annotate interactions, states, and responsive breakpoints.
- Design QA: attend implementation reviews and file bugs like a QA engineer.

## Anti-Patterns to Avoid

- Designing without user data — "I think users want" ≠ research evidence.
- Designing only the happy path — ignore error/empty/loading states.
- Inconsistent components — one-off designs instead of design system usage.
- Font sizes below 16px for body text on web.
- Relying solely on color to convey information (color blindness).
- Handing off static comps without interaction/animation notes.

## References

- `references/accessibility-checklist.md` — WCAG 2.1 design compliance checklist
- `references/design-system-guide.md` — component design standards
- `references/usability-testing-guide.md` — research and testing protocols

## Expected Output Format

1. Figma file (wireframes → mockups → prototype with all states)
2. Design system component (with variants, states, annotations)
3. Usability test report (tasks, success rates, observations, recommendations)
4. Handoff notes (interaction specs, responsive behavior, assets)