skills.rest
imudak
imudakCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Guide multi-phase UI/UX design processes with wireframes, prototypes, and WCAG 2.1 AA documentation.

Updated Aug 23, 2026
Search Tags:#accessibility#responsive design#design system#prototyping#wireframing#ux design#ui design
One-click install
npx skills add https://github.com/imudak/claudemd-gen --skill ui-ux-designer-imudak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/imudak/claudemd-gen/tree/main/.claude/skills/ui-ux-designer
Command: npx skills add https://github.com/imudak/claudemd-gen --skill ui-ux-designer-imudak

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of user interfaces and experiences, ensuring designs are user-centered, accessible, and align with project goals.

Core Features & Use Cases

  • Design Process Guidance: Guides users through UX research, wireframing, prototyping, and design system creation.
  • Accessibility & Responsiveness: Ensures designs meet WCAG standards and adapt to various screen sizes.
  • Use Case: A startup needs to design a new mobile app. This Skill can help them define user personas, create wireframes for key screens, establish a design system, and ensure the final design is accessible and responsive.

Quick Start

Begin designing the user interface for the new e-commerce mobile app by defining the target user personas.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create a mobile app design system that meets accessibility standards?▼

To create an accessible mobile app design system, this Skill guides you through establishing UI components and patterns that adhere to WCAG 2.1 AA standards, ensuring your interfaces are both responsive and user-centered.

What is the best way to structure a UX design process for a new product?▼

The best way to structure a UX design process involves a multi-phase approach: defining user personas, creating wireframes, building interactive prototypes, and conducting usability testing to ensure the final design aligns with project goals.

Can I generate design documentation in both English and Japanese?▼

Yes, you can generate detailed UX and UI design documentation in both English and Japanese, allowing teams to effectively communicate design system specifications and usability testing results across multilingual stakeholders.

How does wireframing and prototyping work within a structured design workflow?▼

Wireframing and prototyping work by guiding users sequentially through UX research to visual layouts, enabling the creation of interactive Figma prototypes that validate user flows before finalizing the responsive design.

Do I need to define user personas before starting UI design?▼

Yes, defining user personas before starting UI design is required as it establishes the target audience context, ensuring the subsequent wireframes and prototypes effectively address specific user needs and accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
sevenbelowllcsevenbelowllc

ux-researcher-designer

Generate data-driven personas from user data and interview transcripts.

Official
Intermediate
matteotittamatteotitta
29

figma-to-prototype

Convert Figma design mockups into HTML or React prototypes.

Community
Advanced
FoundationForgeFoundationForge

design-critique

Critique UI designs from Figma links, screenshots, or descriptions.

Official
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate