A Claude skill that generates a complete, production-ready Figma design system — Variables, Color Tokens, Typography, Spacing, Radius, and Grid Styles — in minutes, from just two hex colors.
✦ What This Skill Does
This skill turns Claude into a senior Figma design system engineer. Provide a Primary and Secondary hex color, and Claude will automatically build all of the following inside your Figma file:
- Primitives — 6 color groups × 15 steps each (Primary, Secondary, Neutral, Success, Error, Attention) + a 64-step number scale
- Typography Collection — Font size, line height, font family, and font weight variables
- Color Tokens — Semantic tokens fully aliased to Primitives (brand, text, background, border, state, disabled)
- Text Styles — 12 named styles across Display, Heading, Body, SecondarySubtext, and Caption — all bound to Typography variables
- Spacing — 64-step spacing scale aliased to number primitives
- Radius — General + role-based tokens (button, card, chip, tag, snackbar)
- Grid Styles — Desktop (12-col), Tablet (8-col), Mobile (4-col)
Everything is production-ready, named in camelCase, and structured for real-world scalability.
✦ What You Need
Before running the skill, make sure you have the following set up:
- ✅ **Claude.ai account** — any plan works
- ✅ Figma Desktop app installed on your machine
- ✅ figma-console MCP connected to Claude — this is the bridge that lets Claude execute plugin code directly inside Figma
- ✅ An open Figma file — the design system will be built inside the currently active file