Cindy Zhu.
← all free guides
Design with AI Claude skills

Claude skills for designers: 5 that ship beautiful work

Hey, it's Cindy 🌱 These are the 5 Claude skills that turn Claude from a wireframe toy into a real design partner: a rough brief goes in, a polished interface comes out. Every skill here is real, and I've included the exact install command (I checked them all on 2026-07-14, and fixed one the viral version got wrong).
Quick note: these use two different install systems. Some are Claude Code's native /plugin marketplace, and some use the third-party npx skills CLI. I've labelled each so you don't mix them up.
design judgement

1. ui-ux-pro-max: real design thinking 🎨

Gives Claude actual design judgement (visual hierarchy, colour, spacing, product context) before it builds anything. You hand it a rough brief, it hands back a full design system. repo (~105k stars)

🎨 install ui-ux-pro-max 
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
the official one

2. frontend-design: anti-slop polish (official Anthropic) ✨

Anthropic's own skill, and one of the most-installed there is (277k+ installs). Before it writes any UI, it commits to an aesthetic direction, type system, colour, and motion, so your work looks intentional instead of the usual AI defaults (Inter font, purple gradients, flat cards). repo

✨ install frontend-design 
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins
Heads up: the viral version of this carousel linked a repo that does not exist. This is the real one.
the craft

3. emil-design-eng: motion and interaction craft 🎬

Based on Emil Kowalski's writing on interface design (the designer behind Sonner and animations.dev). It teaches Claude the small things that make an app feel alive: animations under 300ms, custom easing over CSS defaults, what should and shouldn't animate. Paste a component, ask for a review, get exact fixes. repo

🎬 install emil's skill 
npx skills add emilkowalski/skill
ship it

4. app-store-screenshots: store-ready screens 📱

Makes production-ready App Store (and Play Store) marketing screenshots. Describe your app and it scaffolds a Next.js editor, designs the ad-style screens, and exports them at every store size with device frames. repo

📱 install app-store-screenshots 
npx skills add ParthJadhav/app-store-screenshots
get graded

5. gstack: a design critic that scores you (by Garry Tan, YC) 🔍

Built by Garry Tan, CEO of Y Combinator. Its /design-review rates each design dimension 0 to 10, explains what a 10 looks like, then iterates to get there. It catches AI slop and asks you one sharp question per design choice, so you stay in charge. repo

🔍 install gstack 
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack
./setup
the setup

How to add a skill (the two systems) ⚡

  • 🔌 /plugin marketplace (Claude Code native): run the two /plugin lines inside Claude Code. Used by ui-ux-pro-max and frontend-design.
  • 💻 npx skills (third-party CLI): run the npx skills add ... line in your terminal. Used by Emil's skill and app-store-screenshots.
  • 📁 git clone: gstack drops into ~/.claude/skills/ and runs its own setup.
On claude.ai (web) you can also add a skill by zipping its folder and uploading it via Customize, then Skills, then Add, then Upload a skill.
what to watch

The one honest caveat 🧠

These make Claude a far better design partner, but you are still the art director. Review the output, keep what's genuinely good, and use the critic skill (gstack) to pressure-test your own taste, not replace it.

Every link in one place 🔗

Want more like this? Follow @cindiezhu for daily AI you can actually use.