Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
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.
style.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.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Only reads the @theme block — tokens defined elsewhere in your CSS are not picked up. Values that reference another variable (var(--other)) or use complex functions like linear-gradient are skipped with a warning rather than guessed. Does not touch Text Styles or component structure. One-way only: pushes Tailwind tokens to Figma, but does not read Figma back into code (see the companion figma-to-tailwind skill for that direction).
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
3 uses
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
- Accounts
Figma
Permissions
Allowed Hosts
File Scopes
This skill reads a local CSS file (Read Files) and runs a local search for it (Terminal). It writes no local files — its only write target is the connected Figma file, via the official Figma MCP server's use_figma and create_new_file tools (the same connection used for implementing Figma designs as code). Connection steps differ by agent/client — see https://www.figma.com/mcp-catalog/ for setup guides.