design-intelligence — Claude Code skill: design tokens and Tailwind

What design-intelligence does

This skill handles design system bootstrapping. You hand it project context — what you are building, who the users are, the personality you want, light or dark, any brand colors already picked — and it returns a token set you can use right away. It runs with Read, Write, Edit, Glob, Grep, Bash and WebSearch.

Generation moves through steps. First the context questions, then the palette, the type scale, spacing and radii. Palette choice follows personality: blue tones for a professional or corporate feel, purple or pink for bold and creative work, deep blue with gold for premium. The type scale starts from a 16px base, spacing from an 8px step.

Output lands in three places: a token reference doc at .planning/design/system/tokens.md, a snippet for tailwind.config.ts, and a CSS variables file. Alongside those, the skill lists components suited to the project type — sidebar navigation and data tables for a dashboard, product cards and filters for a marketplace. Values like --color-primary and --radius-card get pasted in by hand, so read them over before you commit.