Claude Skills for UI Design
Claude skills for UI designers, product designers and design-curious PMs.
Download the free pack
Get 3 Claude skills in a zip file. Upload each folder as its own skill in Claude.
Download pack (.zip)Free. No email required. Install instructions
This pack helps Claude think through UI decisions: layout, hierarchy, interaction patterns and component design — with the rigour of a design review, not a vibe check.
What you can do with this pack
- Plan a screen layout before designing
- Critique a UI design with specific feedback
- Design component variants for a system
- Translate user stories into interface elements
- Review information hierarchy on a dense page
Skills in this pack
UI Layout Planner
Plan a screen layout before opening the design tool — hierarchy, information density, interaction points. Trigger on 'layout plan', 'screen layout', 'design this screen', 'information hierarchy', or when the user is designing a new UI screen.
UI Design Critique
Critique a UI design with specific, actionable feedback. Trigger on 'critique this design', 'design review', 'UI feedback', 'what's wrong with this UI', or when the user shares a screenshot or description and wants critical review.
Component Variant Designer
Design component variants for a design system — states, sizes, density. Trigger on 'component variants', 'component states', 'button variants', 'design system component', or when the user is designing or auditing component variants.
How to install the skills
- In Claude, turn on code execution under Settings → Capabilities.
- Download and unzip the pack above — you'll see one folder per skill.
- Go to Customize → Skills, click + Create skill, then Upload a skill.
- Zip each individual skill folder and upload it.
- Toggle the skill on. Claude will use it automatically when your request matches.
Full instructions: /download/claude-skills
FAQ
What is a Claude skill?
A Claude skill is a folder containing a SKILL.md file. It tells Claude when to trigger the skill and how to execute the task. Skills live inside your Claude account once uploaded.
Do these work on Free, Pro and Max plans?
Yes, as long as code execution is enabled. On Team and Enterprise plans, an admin needs to enable skills at the organisation level first.
Can I edit the skills?
Yes — the skills are plain markdown files. Open SKILL.md in any editor and change the description, steps, templates, or output format to match how you work.
Do I need all the skills in the pack?
No. Upload only the ones you'll use. Too many active skills makes Claude less precise about which one to pick.