Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsFigma Variables → Tailwind v4 Sync
Pulls Figma Variables and Text Styles into your Tailwind v4 @theme — and catches the naming collisions that would otherwise silently override Tailwind's own defaults project-wide.
Free
Figma Variables → Tailwind v4 Sync
Example session with this skill installed
Pull the Variables from this Figma file into my Tailwind v4 theme:
https://www.figma.com/design/35KdeyTcmlktt13ECnNMIH/hey-polish-me
- Read your context and instructions
- Compiled the figma variables tailwind
- Generated the design tokens stylesheet
Source
Figma file: hey-polish-me — 2 collections, 21 variables (12 Spacing, 9 Color), 0 local text styles.
Reserved-namespace collision check (Step 3.5)
All 12 Spacing variables collided. This file names spacing tokens by their raw pixel value (spacing/4 = 4px, spacing/100 = 100px), but Tailwind v4 computes --spacing-<N> as N × your base unit (default 4px) — so a literal --spacing-4 would have silently meant 16px, and --spacing-100 would have meant 400px, project-wide, for every p-/m-/gap-/w- utility using those numbers. Every one was renamed to --spacing-fig-<N> instead.
5 of 9 Color variables collided. neutral/50, neutral/100, neutral/200, neutral/500, and neutral/800 all match Tailwind's default neutral palette family at a real step number — writing them as-is would have silently replaced Tailwind's built-in bg-neutral-500, text-neutral-800, etc. project-wide. Renamed to --color-neutral-fig-<step>. base/white, base/white-a12, brand/primary, and brand/accent did not collide (not a default family name) and kept their natural names.
Output written to src/style.css
@theme {
/* Color */
--color-neutral-fig-50: #f7f9f6;
--color-neutral-fig-100: #dce3db;
--color-neutral-fig-200: #e5eae4;
--color-neutral-fig-500: #626e6e;
--color-neutral-fig-800: #1e2525;
--color-base-white: #ffffff;
--color-base-white-a12: rgba(255, 255, 255, 0.12);
--color-brand-primary: #3d4f4f;
--color-brand-accent: #8fa98b;
/* Spacing */
--spacing-fig-4: 0.25rem;
--spacing-fig-8: 0.5rem;
--spacing-fig-14: 0.875rem;
--spacing-fig-16: 1rem;
--spacing-fig-24: 1.5rem;
--spacing-fig-28: 1.75rem;
--spacing-fig-32: 2rem;
--spacing-fig-40: 2.5rem;
--spacing-fig-48: 3rem;
--spacing-fig-64: 4rem;
--spacing-fig-80: 5rem;
--spacing-fig-100: 6.25rem;
}
Summary
- 2 collections, 21 variables imported
- 0 local text styles found
17 of 21 tokens renamed to avoid a reserved-namespace collision (12 Spacing + 5 Color) — see table above for old → new names
- 4 tokens kept their natural names (no collision)
- Single mode used (no light/dark variants in this file)
- Output: src/style.css
figma-variables-tailwind-v4-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
Handing a Tailwind project real design tokens usually means someone retyping hex codes and spacing values from Figma by hand. It is slow, and the numbers drift the moment either side changes. There is a sharper failure mode too: a generated token name that happens to match one of Tailwind's own reserved keys — a color family and step, or a bare spacing number — silently overrides that built-in value everywhere in the project, not just where you meant to use it.
What it does
- Reads every Variable across every collection in a Figma file, plus local Text Styles for weight, line-height, and letter-spacing that Variables alone cannot represent
- Converts colors, font sizes, spacing, radius, and border values to their correct Tailwind CSS custom property, with px-to-rem and RGB-to-hex conversion handled for you
- Checks every generated name against Tailwind v4's reserved namespaces before writing anything: a bare numeric spacing key and a default-palette color family plus step are both silent, project-wide override risks
- Renames only the tokens that actually collide, and reports exactly what was renamed and why — nothing is silently dropped or silently overridden
- Writes directly into your existing @theme block, or creates one if none exists yet
How it works
- Takes a Figma file URL and fetches every Variable and local Text Style in that file
- Converts each one to a Tailwind v4 custom property using the correct prefix and unit
- Runs the reserved-namespace collision check against Tailwind's default spacing scale and default color palette
- Finds your Tailwind CSS entry file and writes the tokens into its @theme block, renaming only what collided
- Reports collections and variable counts, text-style-derived tokens, and a full list of renamed versus kept-as-is tokens
Why the collision check matters
This is not a hypothetical edge case. A Figma spacing variable named by its raw pixel value (spacing/120 = 120px) looks harmless, but Tailwind v4 computes --spacing-120 as 120 times your base unit — 480px, not 120px — for every p-*, m-*, gap-*, and w-* utility that uses the number 120, anywhere in the project. A color variable named neutral/500 does the same thing to Tailwind's own gray scale. This skill catches both classes of collision before anything is written, not after something breaks in production.
What it is not
This is a one-way pull: Figma Variables and Text Styles into Tailwind CSS. It does not push Tailwind tokens back into Figma — for that direction, see the companion tailwind-to-figma skill. It also does not touch component structure, layout, or anything outside variables and text styles. For collections with several modes (light and dark, for example), only the default mode is written, and the report names the mode used.
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 tailwind-to-figma 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