Where does the skill save design documents?

It follows standard Claude Code conventions, saving files like design-system.md and ui-specification.md in the outputs/ /design/ directory.

How do I trigger the UI design workflow?

You can trigger the skill by mentioning keywords like 'UI design', 'page layout', or 'interaction design'. Use the /设计 command to start specific page designs.

What does the UI Designer skill do?

It acts as a senior UI/UX designer that helps you convert product ideas into structured design documents, including layouts, color schemes, and component specifications.

Can I use this for both web and mobile apps?

Yes, the UI Designer skill is cross-platform and adapts its design strategies and specifications based on whether you are building for web or mobile.

Does it support user flow diagrams?

Yes, the skill can generate user flow diagrams using ASCII or Mermaid syntax to visualize how users navigate through your product.

UI Designer

Name: UI Designer
Author: shining319

byshining319

•

Design Tools

Transforms product requirements into comprehensive UI/UX design solutions including page structures, visual specifications, and interaction flows.

About

The UI Designer skill serves as a senior product designer within Claude Code, bridging the gap between abstract ideas and concrete development blueprints. It guides users through a professional design workflow: starting with structured requirement gathering, moving into information architecture planning, and culminating in detailed visual specifications. By generating component-level documentation, typography rules, color schemes, and user flow diagrams, it provides solo developers and small teams with a professional design foundation that streamlines the entire frontend implementation process.

Key Features

Structured requirement gathering via targeted Q&A
Detailed visual design specs including HEX codes and typography
Mermaid-based user flow and interaction diagramming
Comprehensive page planning and information architecture
Automated component library and layout documentation
3 GitHub stars

Use Cases

Drafting production-ready UI specifications for new product features
Mapping out complex user journeys and navigation structures
Defining a consistent design system for a single-person development workflow

About

Key Features

Structured requirement gathering via targeted Q&A
Detailed visual design specs including HEX codes and typography
Mermaid-based user flow and interaction diagramming
Comprehensive page planning and information architecture
Automated component library and layout documentation
3 GitHub stars

Use Cases

Drafting production-ready UI specifications for new product features
Mapping out complex user journeys and navigation structures
Defining a consistent design system for a single-person development workflow