Where are the design files saved?

By default, the skill saves all design documentation to the 'outputs/ /design/' directory, following a standardized folder structure for your project.

Can I use this for both mobile and web projects?

Yes, the UI Designer skill asks for your platform preference during the requirement phase and adjusts layout strategies and design specs accordingly.

What is the UI Designer Claude Code skill?

It is a specialized plugin for Claude Code that provides a structured workflow for creating UI/UX designs, including layouts, specifications, and user flows within your development environment.

Does this skill create image files like PNG or SVG?

No, it focuses on creating detailed markdown-based design specifications, ASCII/text-based layouts, and Mermaid diagrams that define how a UI should look and behave.

How do I trigger the UI design workflow?

You can trigger it by using keywords like 'UI design', 'page layout', or 'design specs'. You can also use specific commands like '/设计' for page design or '/下一步' for technical specs.

UI Designer

Name: UI Designer
Author: shining319

byshining319

•

Design Tools

Transforms product requirements into professional UI/UX design solutions and detailed technical specifications.

About

The UI Designer skill acts as a senior design partner within the Claude Code environment, specifically optimized for single-person product development workflows. It bridges the gap between raw product ideas and development-ready interfaces by guiding users through a structured process: requirement gathering, information architecture, visual layout design, and detailed technical documentation. By generating comprehensive design systems, component specs, and Mermaid-based user flows, it ensures solo developers can maintain professional design standards and consistency without needing external design software.

Key Features

Interactive user flow creation using Mermaid syntax for clear navigation logic.
Generation of detailed visual design specifications including typography and color systems.
Automated page planning and information architecture mapping.
Standardized documentation output for component libraries and interaction design.
Structured requirement gathering to define target audience and product goals.
3 GitHub stars

Use Cases

Mapping out complex mobile application user flows and screen transitions.
Generating technical design specifications for a frontend developer to implement.
Creating a professional design system and UI layout for a new SaaS dashboard.

About

Key Features

Interactive user flow creation using Mermaid syntax for clear navigation logic.
Generation of detailed visual design specifications including typography and color systems.
Automated page planning and information architecture mapping.
Standardized documentation output for component libraries and interaction design.
Structured requirement gathering to define target audience and product goals.
3 GitHub stars

Use Cases

Mapping out complex mobile application user flows and screen transitions.
Generating technical design specifications for a frontend developer to implement.
Creating a professional design system and UI layout for a new SaaS dashboard.