Design tokens
Connector-first Claude Code pack for graphic designers: Figma, Canva, Adobe Firefly, Nano Banana, Higgsfield, Unsplash, Brand.dev + skills, design guardrails (contrast/licensing/asset hygiene), loops & review agents.
npx -y skills add m-binimran/design-pack --skill design-tokensAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Define or extract a design token system (color, type, spacing, radius, shadow) and output it as JSON/CSS variables. Use when setting up a design system or converting a Figma/brand palette to tokens.
SKILL.md
1.3 KB, as published. Nobody here has run it
design-tokens
A single source of truth for visual values, so every asset and screen stays consistent.
Process
- Source the values from Figma variables (via the connector), a brand kit, or Brand.dev - not from memory.
- Structure the tokens:
- Colour: a base scale + semantic aliases (
--color-text,--color-bg,--color-brand, success/warn/danger). - Type: family pairing, a fluid scale, weights, line-heights.
- Spacing: a consistent step scale; radius; shadow set.
- Colour: a base scale + semantic aliases (
- Name semantically (by role, not by raw value) so components read by meaning.
- Check contrast of text/bg semantic pairs (the
contrast-guardhook checks CSS; aim >= 4.5:1). - Output as
tokens.jsonand/or CSS custom properties / Tailwind@theme.
Output
- The token file(s), the semantic aliases, and a note on which tokens are brand-specific vs. structural, plus any contrast warnings.
Guardrails
- No raw hex/px in components once tokens exist - reference the token.
- Values come from a real source; don't invent a palette and call it the brand's.