Gemini CLI5 essential UI design skills for Gemini CLI
Generate design tokens, audit components, translate Figma to code, and apply brand consistency without losing visual integrity.
How to install
Install into Gemini CLI
Drop any .md into the path below (global) or the workspace equivalent. Run /skills inside Gemini CLI to confirm discovery.
~/.gemini/skills/[skill-name]/SKILL.mdSkill files
Install into Gemini CLI · 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.
Claude Code
Codex
Cursor