Use your brand colors in CSS, Tailwind, and Figma
Get your brand colors, fonts, and spacing into your code and design tools, straight from your brand guide. You get CSS variables, a Tailwind theme (v3 and v4), and a design tokens file for Figma plugins, regenerated in a second when the brand changes, plus the exact line to wire it into your project.
SkillDesign and UIVersion: A saved state of a kit. When the author changes it, they share a new version with a higher number, and the old one stays exactly as it was. 1.0.2 (latest)Tested
- Activity
- New: be the first to try it
Will this work for me?
- Effort
- Needs about 10 minutes of setupOur guess from what the kit says it needs.
- Works in
- Claude Code, claude.ai and the desktop app
- You need
Figma account: setup steps
- What it is
- This kit works with your own Figma account.
- Where to get it
- Sign in to Figma, or make a free account if it offers one. Go to Figma
Safety label
- Who made it
How this works
- It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
- While it works, it reads and changes files in the places it lists, nowhere else.
- It runs these commands on your computer: node scripts/export-tokens.mjs.
- Nothing runs until you choose to use it, and you can remove it any time.
What it can access
What this kit says it will touch, the same list you see before you add it. These are its Permissions: What a kit is allowed to touch on your computer or accounts, such as reading a folder or using the internet. You see them before you add it.. In Claude Code they become rules, so Claude stops anything not on the list.
Command
Runs the command: node scripts/export-tokens.mjs (with any arguments, without asking)
Reads
Reads files in ./brand.md