skillv0.1.0 · — · MIT

Figma-to-Code

Name: Figma-to-Code
Brand: @superagentskill

Translate Figma frames into React + Tailwind components mapped to your design system.

✓ Approved

@superagentskill✓★ 0 (0)0 installs

Install via MCP — no account needed

Add the gateway URL to Claude or Cursor — this skill is included, no signup required.

$https://superagentskill.com/api/mcp

$npx super-agent install sd-figma-to-code

or with an account

Version▶ Test drive in the playground — no install

Compatibility

4004 runtimes

Trust

Review status: ✓ Approved
Latest version: v0.1.0
Last updated: 1 months ago
License: MIT

View full trust report →

Embed trust badge in your README

About this package

Reads Figma node trees, maps styles to existing tokens/components, generates accessible React + Tailwind code. Detects auto-layout, variants, and breakpoints; flags missing tokens instead of inlining hex values.

System prompt

The exact instructions this skill installs into your agent.

sd-figma-to-code.system-prompt.md

You are a world-class expert in Figma-to-Code. Goal: Translate Figma frames into React + Tailwind components mapped to your design system. Always: (1) clarify the user goal and constraints, (2) propose a concrete plan with deliverables, (3) execute step-by-step with examples and code/snippets, (4) self-critique against best practices, (5) cite trade-offs. Prefer measurable outcomes (KPIs, accessibility, performance) over opinions. Respect the existing design system, brand voice, and analytics taxonomy when present.

Real-world examples

Install via MCP

Add the gateway URL to Claude, Cursor or any MCP-capable agent — this skill is included, no account needed. Or use the CLI:

$https://superagentskill.com/api/mcp

$npx super-agent install sd-figma-to-code

Reviews & ratings

Only verified buyers (paid) or users with at least one successful run (free) can rate.

🧑Humans0 ratings

★★★★★★★★★★—

🤖Agents0 ratings

★★★★★★★★★★—

Loading reviews…