skills.rest
aiunlocked1412
aiunlocked1412COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-designer

Design end-to-end user experiences with research, wireframes, and usability test plans.

14|6|Updated Apr 16, 2026
Search Tags:#figma#prototype#ux#wireframe#information-architecture#user-flow#usability-test
One-click install
npx skills add https://github.com/aiunlocked1412/claude-skill-unlock --skill ux-designer-aiunlocked1412
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/aiunlocked1412/claude-skill-unlock/tree/main/skills/04-design/ux-designer
Command: npx skills add https://github.com/aiunlocked1412/claude-skill-unlock --skill ux-designer-aiunlocked1412

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many product teams struggle to turn vague product ideas into testable user experiences because they lack structured research, clear information architecture, and rapid wireframing and testing artifacts; this Skill standardizes and accelerates that end-to-end process so teams can validate decisions faster.

Core Features & Use Cases

  • Discovery & Research: Generates persona cards, JTBD statements, interview guides, and hypotheses to ground design decisions.
  • Information Architecture & Flows: Produces sitemaps, navigation patterns, and Mermaid user flow diagrams including edge cases and decision points.
  • Wireframes & Prototype Spec: Outputs ASCII low-fi wireframes, spacing/token guidance (8-pt grid), component states, and Figma-ready interaction specs.
  • Usability Testing: Builds 5–7 task test plans, participant recommendations, success metrics, and post-test questions for rapid validation.
  • Use Cases: Designing onboarding for mobile apps, redesigning checkout for e-commerce, creating dashboard flows for SaaS, and preparing hand-off artifacts for developers.

Quick Start

Invoke the skill with /ux-designer followed by a concise product brief that states the product type, business goal, target user, and desired phase (e.g., discovery, wireframe, test).

Frequently Asked Questions about ux-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create user flow diagrams and information architecture for a new product feature?▼

To create user flows and information architecture, generate sitemaps, navigation patterns, and Mermaid flow diagrams that map edge cases and decision points. This structures product features like onboarding or checkout by aligning user goals with business metrics.

What is the best way to prepare Figma-ready wireframe specs for developer handoff?▼

The best way to prepare Figma-ready wireframe specs is to output ASCII low-fidelity wireframes alongside spacing token guidance using an 8-pt grid, component states, and detailed interaction specifications to ensure accurate developer handoff.

Can I generate a usability test plan with success metrics for a mobile app onboarding flow?▼

Yes, you can generate a usability test plan for mobile app onboarding that includes 5–7 task scenarios, participant recommendations, success metrics, and post-test questions to rapidly validate user experience decisions.

How do I structure UX research artifacts like personas and JTBD statements before wireframing?▼

To structure UX research before wireframing, generate persona cards, Jobs-To-Be-Done statements, interview guides, and hypotheses. This grounds your design decisions in solid discovery research and aligns user needs with product goals.

Does this approach to end-to-end UX design apply to SaaS dashboard redesigns?▼

Yes, this end-to-end UX design approach applies to SaaS dashboard redesigns by producing research, information architecture, user flows, wireframes, and usability test plans specifically tailored to complex data and navigation requirements.

What accessibility constraints should I apply when generating wireframes and interaction specs?▼

When generating wireframes and interaction specs, apply accessibility constraints and an 8-pt grid system to ensure component spacing, states, and overall design meet usability standards for all users.

Related Skills

Explore More Design & Creative Skills→
claudcherejiclaudchereji

ux-researcher

Conduct usability testing and translate findings into actionable product improvements.

Community
Advanced
bipinksbipinks
3

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

Community
Intermediate
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
modu-aimodu-ai
267

ux-researcher

Design interviews, create personas, and analyze customer feedback for UX research.

Official
Intermediate