Agent skill · design visual · daffy0208
UX Designer
Design user experiences and interfaces. Use when creating user journeys, wireframes, prototypes, or improving usability. Covers user flows, information architecture, interaction design, and accessibility.
Why this skill is useful
Provides a structured UX design process with specific methodologies and validation techniques that enhance the AI's understanding of user-centered design.
What it needs
About 4k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
UX Designer Design intuitive, accessible user experiences grounded in research. Core Principle Design for users, not yourself. Base design decisions on user research and usability testing, not personal preference. 5-Phase UX Design Process Phase 1: Information Architecture Goal: Organize content and functionality logically Activities: Card sorting: Let users organize content into categories Site mapping: Create hierarchy of pages and features Navigation design: Primary, secondary, utility navigation Labeling: Clear, user-friendly terminology Validation: [ ] IA tested with 5+ users (tree testing) [ ] Navigation paths clear and logical [ ] Labels match user mental models --- Phase 2: User Flows Goal: Map paths users take to complete tasks Key Flows to Design: Onboarding: First-time user experience Core tasks: Primary use cases (80% of usage) Error states: Recovery from mistakes Edge cases: Less common but important scenarios Flow Diagram Elements: Validation: [ ] Happy path documented [ ] Error states designed [ ] Exit points identified [ ] Flows match user research --- Phase 3: Wireframing Goal: Create low-fidelity layouts focusing on structure Fidelity Levels: Low-fi: Sketches, boxes, placeholder text (fastest) Mid-fi: Grayscale, realistic content, basic interactions High-fi: Styled, branded, detailed interactions Key Screens to Wireframe: Homepage/Dashboard Core task screens (CRUD operations) Navigation (header, sidebar, footer) Forms and input validation Empty states, loading states, error states Wireframe Checklist: [ ] Clear visual hierarchy [ ] Consistent layout patterns [ ] Accessible contrast and sizing [ ] Touch targets ≥44x44px (mobile) [ ] Forms grouped logically --- Phase 4: Prototyping & Testing Goal: Create interactive prototypes for usability testing Prototyping Tools: Figma (recommended): Collaborative, browser-based Adobe XD: Design system friendly Framer: Code-based prototyping InVision: Simple click-through prototypes Usability Testing: Validation: …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/ux-designer