Claude Code5 essential UI design skills for Claude Code
Generate design tokens, audit components, translate Figma to code, and apply brand consistency without losing visual integrity.
How to install
Install into Claude Code
Drop any .md from this page into the path below and restart. The skill is then available across every Claude Code session.
~/.claude/skills/[skill-name]/SKILL.mdSkill files
Install into Claude Code · Drop in your project rootFrontend Design
frontend-design.mdUI/UX standards: design tokens, component patterns, spacing systems, accessibility heuristics. Anthropic's official base layer.
Theme Factory
theme-factory.mdApply professional font and colour themes to artifacts (slides, docs, reports, landing pages). Ten pre-set themes plus custom.
Brand Guidelines
brand-guidelines.mdApply brand colours and typography consistently across every artifact your tools produce.
Figma Implement Design
figma-implement-design.mdTranslate Figma designs into production code with pixel-perfect accuracy via Figma MCP. The category-defining design-to-code skill.
Awesome Design MD
awesome-design-md.mdGenerate UI from real design system tokens of 55+ brands (Apple, Stripe, Vercel, Cursor, Spotify, Linear). Build me a page like Stripe works literally.
Codex
Cursor
Gemini CLI