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

Figma screen. Screens in Figma built like the library: instances, variables, text styles, auto layout — light, dark and mobile.

Builds a screen region by region from WunderUI component instances, binds every paint to a theme variable and every text to a style, audits the frame for unbound paints, unstyled or clipped text and detached charts, then clones the dark frame with the Dark mode and builds the 390 px mobile frame.

Get All-AccessSee the workflow
Workflow

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

  1. 1

    Brief and inventory

    Regions and data; the file's theme collection, text styles and available WunderUI components.

  2. 2

    Frame and shell

    1440 wide, height hug, sidebar and top bar instances, main column with padding 32 and gap 24.

  3. 3

    Regions

    One region per step from instances, cards with equal heights per row, a screenshot after each.

  4. 4

    Audit the light frame

    Unbound paints, texts without a style, fixed texts that clip, absolute children, detached charts — down to zero.

    use_figma ← references/audit.js
  5. 5

    Dark and mobile

    The dark frame is a clone with the Dark mode; mobile is built with the same components and cloned too.

  6. 6

    Report

    The frames with their ids and links, the components used and anything the library had no component for.

Example run

Real output. From a test run of this skill.

You ask

“Audit the Portfolio overview frame.”

Or in other words

  • “Design an analytics dashboard in Figma with WunderUI.”
  • “Turn our React billing page into a Figma frame.”
  • “Make the dark and mobile versions of this screen.”
unbound paints 0 · texts without style 0 · absolute children 0 · scaled instances 0
fixed texts 5 (y-axis labels 60K–140K) · detached charts 1 (Line chart)
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-screen ~/.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
  • The WunderUI Figma library in the file