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

•

Design Tools

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.

Key Features

011 GitHub stars

02Generation of information architecture, sitemaps, and user flows using Mermaid diagrams

03Mandatory bilingual documentation (English/Japanese) to support global development teams

04Structured 5-phase interactive dialogue for requirement gathering and design execution

05Creation of low and high-fidelity wireframes and mockups in Markdown format

06Development of comprehensive design systems including tokens, typography, and color scales

Use Cases

01Establishing a standardized design system and Tailwind CSS component library for a new project

02Defining user personas and journey maps for complex SaaS applications

03Rapidly prototyping responsive mobile and desktop interfaces using structured wireframes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nahisaho/codegraphmcpserver ui-ux-designer

For use in Claude.ai and ChatGPT

Download Skill