Skip to content
Get All-Access
All skills
ProFigma AI skills

Figma sync. Figma variables and styles.css, identical in both directions — every difference listed, written only where you say.

Reads the variable collections and text styles through the Figma MCP server, diffs them against the CSS custom properties per light and dark mode, lists every conflict with its measured difference, asks which side wins, writes in that direction — keeping aliases — and reports what changed.

Get All-AccessSee the workflow
Workflow

What it actually does. Step by step, in the order it runs.

  1. 1

    Read the Figma file

    A read-only script returns every variable with its alias and value per mode, in parts for big files.

    use_figma ← references/figma-read.js
  2. 2

    Diff against the CSS

    Figma tint-text/indigo ↔ --tint-text-indigo, light ↔ :root, dark ↔ .dark; colours as ΔE, numbers as px.

    figma-sync.mjs diff app/globals.css
  3. 3

    Ask for the direction

    The conflicts as a table, grouped by colour, spacing, radius, type and motion, with a recommendation — Figma → CSS, CSS → Figma or skip.

  4. 4

    Write

    Into the right theme block of the CSS, or as a generated use_figma script — aliases stay aliases.

    figma-sync.mjs write-css … --ids F-001 · figma-sync.mjs figma-plan --ids F-002
  5. 5

    Report

    Read and diff again: written conflicts are gone; every changed value is listed with its old and new value.

Example run

Real output. From a test run of this skill.

You ask

“Compare the WunderUI Figma file with styles.css.”

Or in other words

  • “Are Figma and our CSS tokens in sync?”
  • “Update styles.css from Figma.”
  • “Push our new brand colour into Figma.”
matches 103 · conflicts 1 · Figma-only 0 · text styles 30

F-001 text-error-inverse [Dark]  Figma #924756 (red/800)  ≠  CSS #D42A2D   ΔE 13.15

decision: CSS wins → Figma Dark set to neutral/error-base (#D42A2D)
re-read:  text-error-inverse Dark #D42A2D (neutral/error-base) — no conflicts left
Install

Comes with WunderUI Pro. One folder for your agent.

The WunderUI Pro skills zip comes with your order (confirmation e-mail and Polar customer portal). Unzip it and copy the folder:

# from the WunderUI Pro skills zip
cp -r wunderui-skills/skills/wunderui-figma-sync ~/.claude/skills/

Claude Code loads it by itself when your request fits. Cursor, Codex and other agents: point them at the skill's .

What it needs

  • The Figma MCP server connected
  • Node.js 20+