Sirius-Auror

Figma Design System Builder — Design skill for Claude Code

Design community

Agent Skill that turns Claude into a principal design systems designer, building a complete production-grade design system (tokens, atoms, molecules, page templates, WCAG 2.2 AA) inside a Figma file o.

How to install Figma Design System Builder

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Sirius-Auror/figma-design-system-builder and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figma Design System Builder does

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★
Designer Skills — Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, i 2.3k ★

README

Figma Design System Builder

An [Agent Skill](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) that turns Claude into a principal design systems designer and has it build a complete, production-grade design system inside a Figma file over the Figma MCP connection.

Not a component dump. It builds the foundation first — colour and typography tokens with Light and Dark modes, spacing, sizing, elevation and motion — then atoms, then molecules, then page templates, validating structure and contrast at every step.

What it produces

Layer 1  Foundations   5 variable collections, text styles, elevation styles
Layer 2  Atoms         Button, Input, Dropdown, Checkbox, Radio, Toggle,
                       Avatar, Badge/Tag, Tabs, Breadcrumbs, Slider,
                       Progress, Tooltip, Divider, Search field
Layer 3  Molecules     Alert, Table, Modal, Drawer, Header Nav, Sidebar Nav,
                       Pagination, Date/Time Picker
Layer 4  Templates     Login/Sign-up, Contact, 404, 500, User profile

Variable collections:

Collection	Modes	Holds
`01_Primitives`	1	Raw colour ramps (24 steps) plus alpha values
`02_ColorTokens`	2	Semantic roles for Light and Dark, every value an alias
`03_Dimensions`	1	Radius, spacing, control sizes, targets, layout, z-index
`04_Typography`	1	Family, weight, size, line height, letter spacing
`05_Motion`	1	Durations and easing curves

Why this one

Most design system prompts produce a folder of components that look right in a screenshot and fall apart in use. This skill enforces the things that actually decide whether a system survives a real team:

Tokens before components. No component is built before the tokens it needs exist. No raw hex, spacing value, radius or font size is ever typed into a component.
Primitives never touch a screen. Primitives feed semantic tokens, semantic tokens feed everything else. Mode