Skip to content
Get All-Access
All skills
ProAI agents

Figma designer. Designs WunderUI screens in Figma and keeps Figma and code in sync.

A Claude Code agent that works through the Figma MCP server: it builds light, dark and mobile frames from library instances, audits them, and diffs and syncs the variables with your CSS in the direction you choose.

Get All-AccessSee the workflow
Workflow

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

  1. 1

    Screens

    Follows Figma screen: inventory, regions from instances, audit, dark clone, mobile.

  2. 2

    Tokens

    Follows Figma sync: read, diff, ask, write, report.

  3. 3

    Small steps

    One region per call, ids returned, a screenshot after each step.

  4. Skills it runs

Example run

What a run looks like. An illustration of the summary it hands back.

You ask

“Sync our tokens with Figma.”

Or in other words

  • “Design the settings screen in Figma.”
  • “Sync our tokens with the Figma file.”
matches 103 · 1 conflict (text-error-inverse, dark) → written Figma → CSS on request
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 wunderui-skills/agents/wunderui-figma-designer.md ~/.claude/agents/
cp -r wunderui-skills/skills/* ~/.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

  • Claude Code
  • The Figma MCP server connected