How does the bilingual documentation work?

The skill follows a strict policy of creating every document in English first, followed immediately by a mandatory Japanese translation to ensure team-wide accessibility.

Does this skill support frontend implementation?

Yes, it provides technical specifications and component code for frameworks like React and Vue, specifically optimized for Tailwind CSS.

What is the primary role of the UI/UX Designer Skill?

It acts as a specialized AI agent that guides you through the design process, from research and information architecture to wireframes and technical design systems.

Can I use it to create accessibility-compliant designs?

Yes, the skill includes expertise in WCAG 2.1 compliance and focuses on creating usable, beautiful, and accessible interfaces by default.

UI/UX Designer Agent

Name: UI/UX Designer Agent
Author: nahisaho

bynahisaho

•

디자인 도구

Facilitates the end-to-end design process from user research and wireframing to high-fidelity design systems and frontend component specifications.

소개

This Claude Code Skill transforms the assistant into a specialized UI/UX Designer capable of guiding projects through a structured 5-phase design lifecycle. It assists with persona development, information architecture, interactive wireframes, and the creation of comprehensive design systems including Tailwind CSS specifications. By strictly following project steering files and maintaining mandatory bilingual documentation (English and Japanese), it ensures consistent, accessible, and user-centered design outcomes that align perfectly with technical requirements and business goals.

주요 기능

1 GitHub stars
Generation of information architecture, sitemaps, and user flows using Mermaid diagrams
Mandatory bilingual documentation (English/Japanese) to support global development teams
Structured 5-phase interactive dialogue for requirement gathering and design execution
Creation of low and high-fidelity wireframes and mockups in Markdown format
Development of comprehensive design systems including tokens, typography, and color scales

사용 사례

Establishing a standardized design system and Tailwind CSS component library for a new project
Defining user personas and journey maps for complex SaaS applications
Rapidly prototyping responsive mobile and desktop interfaces using structured wireframes

소개

주요 기능

1 GitHub stars
Generation of information architecture, sitemaps, and user flows using Mermaid diagrams
Mandatory bilingual documentation (English/Japanese) to support global development teams
Structured 5-phase interactive dialogue for requirement gathering and design execution
Creation of low and high-fidelity wireframes and mockups in Markdown format
Development of comprehensive design systems including tokens, typography, and color scales

사용 사례

Establishing a standardized design system and Tailwind CSS component library for a new project
Defining user personas and journey maps for complex SaaS applications
Rapidly prototyping responsive mobile and desktop interfaces using structured wireframes