Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsTailwind v4 → Figma Variables Sync
Reads your Tailwind v4 @theme tokens and writes them into Figma as properly typed, categorized Variables — colors, type scale, spacing, radius, and border, all in one pass.
Free
Tailwind v4 → Figma Variables Sync
Example session with this skill installed
Push my Tailwind v4 design tokens to a new Figma file called "Design Tokens Demo".
- Read your context and instructions
- Compiled the tailwind v4 figma
- Generated the design tokens stylesheet
Source file
src/style.css — Tailwind v4 entry file found via @import "tailwindcss" search.
Figma file
Created new file: Design Tokens Demo (C4DPv6TlLWTfMYNv3KwhNn)
Created variables (18 total across 5 collections)
| Collection | Variable | Type | Value | From |
|---|---|---|---|---|
| Colors | brand/50 | COLOR | #FFF2EA | --color-brand-50 |
| Colors | brand/500 | COLOR | #886A59 | --color-brand-500 |
| Colors | ink | COLOR | #1A1A1A | --color-ink |
| Colors | surface | COLOR | #FFFFFF | --color-surface |
| Typography | sans | STRING | "Inter" | --font-sans |
| Typography | heading | STRING | "Fraunces" | --font-heading |
| Typography | size/xs | FLOAT | 12 | --text-xs (0.75rem) |
| Typography | size/sm | FLOAT | 14 | --text-sm (0.875rem) |
| Typography | size/base | FLOAT | 16 | --text-base (1rem) |
| Typography | size/lg | FLOAT | 18 | --text-lg (1.125rem) |
| Typography | size/xl | FLOAT | 24 | --text-xl (1.5rem) |
| Typography | weight/regular | FLOAT | 400 | --font-weight-regular |
| Typography | weight/bold | FLOAT | 700 | --font-weight-bold |
| Spacing | 4 | FLOAT | 16 | --spacing-4 (1rem) |
| Spacing | 8 | FLOAT | 32 | --spacing-8 (2rem) |
| Radius | md | FLOAT | 6 | --radius-md (0.375rem) |
| Radius | full | FLOAT | 9999 | --radius-full |
| Border | 2 | FLOAT | 2 | --border-2 |
Skipped collections: none — every category in this project had at least one token.
Open the file to see the Variables panel: 5 collections (Colors, Typography, Spacing, Radius, Border), each holding only the tokens that exist in your CSS — no empty placeholder collections.
tailwind-v4-figma-variables-sync-tokens.css
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Design tokens usually live in one place: the codebase. When a designer wants to work with the same colors, type scale, and spacing your Tailwind config already defines, someone ends up retyping them into Figma by hand — and the two drift apart the next time either side changes.
What it does
- Finds your Tailwind v4 entry file automatically by searching for @import "tailwindcss"
- Reads every custom property inside the @theme block and classifies it by prefix — colors, font sizes, font families, font weights, spacing, radius, and border width
- Converts each value to the correct Figma type: COLOR for colors, STRING for font families, FLOAT for everything else — with rem-to-px and hex-to-RGB conversion handled for you
- Organizes variables into properly named collections (Colors, Typography, Spacing, Radius, Border) using Figma's slash notation for nested names
- Skips any collection that has no matching tokens, so you never end up with empty placeholder collections
How it works
- Locates and reads your Tailwind CSS entry file
- Extracts and classifies every @theme custom property by its prefix
- Converts each value to the Figma-native type and unit
- Either appends to a Figma file URL you provide, or creates a new file for you
- Creates the variable collections and variables in one batch, then reports exactly what was created
What it is not
This is a one-way push: Tailwind CSS to Figma Variables. It does not read Figma back into code — for that direction, see the companion figma-to-tailwind skill. It also does not touch Text Styles, component structure, or anything outside the @theme block.
Requirements
Runs inside an agent connected to the official Figma MCP server — the same connection used for implementing Figma designs as code. Connection steps differ by agent and client — see https://www.figma.com/mcp-catalog/ for setup guides. Requires a Tailwind CSS v4 project (the @theme directive); v3 projects using tailwind.config.js are not supported.
More from KMRVID
The full Claude Code skill bundle for web design workflows, including the companion figma-to-tailwind skill, is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
1 install
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 5 days ago
- Free to download with an account