Skip to content
← All notes

Turning design tokens into Claude skill files

Design systems / 5 min read / Draft

Design tokens tell code which values to use. Skill files tell AI how to think about them.

Tokens are the what. Skill files are the why.

A token file says radius.lg is 14px. A skill file explains when to use it: cards and dialogs, but never buttons inside a table. That's the gap between a value and a decision.

I write one skill file per area: color, typography, layout and components. When Claude Code builds a screen, it reads them first. The result looks like our product, not like a generic AI demo.

Next articleLessons from designing a product from its first screen