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.

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

01Structured requirement gathering via targeted Q&A

02Detailed visual design specs including HEX codes and typography

03Mermaid-based user flow and interaction diagramming

04Comprehensive page planning and information architecture

05Automated component library and layout documentation

063 GitHub stars

Use Cases

01Drafting production-ready UI specifications for new product features

02Mapping out complex user journeys and navigation structures

03Defining a consistent design system for a single-person development workflow

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shining319/claude-code-single-person-workflow ui-designer

For use in Claude.ai and ChatGPT

Download Skill