Claude Code tokens skill for multi-format interface design tokens
Generate color, type, spacing, shadow, radius, and breakpoint tokens from supplied design settings, then render the four formats.
中文Install in Claude Code
A local Claude Code project. Make the Optik palette, semantic-color, type-scale, and spacing companion skills from the same pinned revision available in the project.
- Review `.claude/skills/tokens/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/tokens/` in your project and save the reviewed file as `.claude/skills/tokens/SKILL.md`.
- Start Claude Code from that project's root, then select `/tokens` in the slash menu.
Example task
With the named companion skills available, invoke /tokens and use these fictional project settings.
design `Route Cards` | brand color `#336699` | body base `16px` | typography ratio `1.250`
spacing base `4px` | use formats requested by the skillWhat to check
Use `#336699` for the supplied brand color, `16px` for body text, and `4px` as spacing base. Keep the medium radius at `8px`. Return `CSS custom properties`, `Tailwind config`, `SCSS variables`, and `W3C Design Tokens JSON`.
Original SKILL.md on GitHub · Updated
Frequently asked question
How do I check consistency for different frontend consumers?
Compare equivalent names and values between formats. Start with the base color, type, spacing, and radius, then check semantic states.