BeClaude

claude-design-stack

New
1GitHub TrendingGeneralby YunyueLi

One command installs a curated set of Claude Code design skills — plus a decision table for which skill to use when.

Summary

The claude-design-stack skill installs a curated set of Claude Code design skills with a single command, plus provides a decision table to help you choose the right skill for your task.

  • It streamlines your design workflow by bundling essential tools for UI generation, prototyping, and visual refinement.

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/claude-design-stack.md https://raw.githubusercontent.com/YunyueLi/claude-design-stack/main/SKILL.md
3
Invoke in Claude Code
/claude-design-stack

Use Cases

Quickly set up a complete design toolchain in Claude Code without manually installing individual skills.
Use the decision table to determine whether to use a UI generator, a prototyping skill, or a visual refinement skill for your current task.
Generate a full-page layout with responsive components using the bundled design skills.
Create interactive prototypes from wireframes by leveraging the installed skills.
Refine and polish existing designs with color palette and typography suggestions from the skill set.
Onboard new team members by providing a standardized design skill stack with clear usage guidance.

Usage Examples

1

/claude-design-stack install

2

Use the decision table to pick a skill for creating a landing page hero section.

3

Generate a mobile-first dashboard UI using the installed design skills.

View source on GitHub
design

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is claude-design-stack?

The claude-design-stack skill installs a curated set of Claude Code design skills with a single command, plus provides a decision table to help you choose the right skill for your task. It streamlines your design workflow by bundling essential tools for UI generation, prototyping, and visual refinement.

How to install claude-design-stack?

To install claude-design-stack: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/claude-design-stack.md https://raw.githubusercontent.com/YunyueLi/claude-design-stack/main/SKILL.md. Finally, /claude-design-stack in Claude Code.

What is claude-design-stack best for?

claude-design-stack is a skill categorized under General. It is designed for: design. Created by YunyueLi.

What can I use claude-design-stack for?

claude-design-stack is useful for: Quickly set up a complete design toolchain in Claude Code without manually installing individual skills.; Use the decision table to determine whether to use a UI generator, a prototyping skill, or a visual refinement skill for your current task.; Generate a full-page layout with responsive components using the bundled design skills.; Create interactive prototypes from wireframes by leveraging the installed skills.; Refine and polish existing designs with color palette and typography suggestions from the skill set.; Onboard new team members by providing a standardized design skill stack with clear usage guidance..