What design documentation does this skill generate?

The UI Designer skill generates comprehensive markdown files including UI specifications, design system guides, component libraries, and user flow diagrams saved directly to your project's output directory.

How do I trigger the UI design workflow in Claude Code?

You can trigger the skill by using keywords like 'UI design', 'page design', or 'interface design'. It will then lead you through a structured 5-step workflow from requirements to final specs.

Does it provide specific CSS values or color codes?

Absolutely. The 'Design Specification' phase includes detailed hex codes for color palettes, font weights, component dimensions, and spacing values to ensure easy implementation.

Can I use this for both mobile and web projects?

Yes, the skill is designed to handle different platform requirements, adjusting layout strategies and components whether you are building a responsive web app or a native mobile interface.

Can it visualize the user journey?

Yes, by using the /flowchart (or /流程图) command, the skill creates a visual representation of page relationships and user interaction paths using Mermaid or ASCII diagrams.

UI Designer

Name: UI Designer
Author: shining319

byshining319

•

デザインツール

Translates product requirements into professional UI/UX design solutions, component specifications, and user flow diagrams.

概要

The UI Designer skill transforms Claude Code into a senior product designer capable of guiding solo developers through the entire UI/UX lifecycle. It facilitates a structured workflow starting from requirement gathering and page architecture to detailed design specifications, including color schemes, typography, and interactive component libraries. Ideal for single-person development workflows, it ensures that technical implementation is supported by professional-grade design documentation and clear user journeys.

主な機能

Detailed design specifications including hex codes, spacing, and typography
Structured requirement gathering to define product goals and target audiences
Comprehensive page planning and information architecture mapping
Interactive user flow diagram generation using Mermaid syntax or ASCII
3 GitHub stars
Standardized output of design systems and component libraries to project directories

ユースケース

Rapidly prototyping the interface for a new web or mobile application
Creating a standardized design system and style guide for a growing project
Mapping out complex user navigation and decision logic through visual flowcharts

概要

主な機能

Detailed design specifications including hex codes, spacing, and typography
Structured requirement gathering to define product goals and target audiences
Comprehensive page planning and information architecture mapping
Interactive user flow diagram generation using Mermaid syntax or ASCII
3 GitHub stars
Standardized output of design systems and component libraries to project directories

ユースケース

Rapidly prototyping the interface for a new web or mobile application
Creating a standardized design system and style guide for a growing project
Mapping out complex user navigation and decision logic through visual flowcharts