DevelopmentMédio

Figma MCP

poropenai·openai· v1.0.0 · atualizado em 2026-04-10

Score

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

figmadesign-to-codeui-developmentreacttailwindfrontend-developmentdesign-system

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdfigma/workflow

Get Design Context: — Use `get_design_context` to fetch the structured representation of the Figma node.

Handle Large Responses: — If the response is too large, use `get_metadata` to get a high-level node map and then re-fetch specific nodes.

Get Screenshot: — Use `get_screenshot` for a visual reference of the node variant.

Download Assets: — Download any necessary image or SVG assets from the Figma MCP server.

Translate to Code: — Translate the Figma output (React + Tailwind) into the project's conventions, styles, and framework, reusing existing components and tokens.

Validate Against Figma: — Ensure 1:1 visual parity and behavior by comparing the implemented UI with the Figma design.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Compõe comCode Connect Components

85%

Compõe comCreate Design System Rules

85%

Compõe comcreate_new_file — Create a New Figma File

85%

Compõe comBuild / Update Screens from Design System

85%

Compõe comDesign System Builder — Figma MCP Skill

85%

Compõe comImplement Design

85%

Compõe comuse_figma — Figma Plugin API Skill

85%

Similar aMarkdown to Docs

60%

Similar aImage Optimizer

60%

Similar aReact Component Generator

60%

Co-executedCode Connect Components

48%

Co-executedCreate Design System Rules

50%

Co-executedcreate_new_file — Create a New Figma File

50%

Co-executedBuild / Update Screens from Design System

48%

Co-executedDesign System Builder — Figma MCP Skill

49%

Co-executedImplement Design

47%

Co-executeduse_figma — Figma Plugin API Skill

49%

Árvore do Skill

Figma MCP

figma

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.ACT

4.EVALUATE

5.REFLECT

Triggers8

implement a design from Figmatranslate Figma design into codegenerate code from Figma URLfetch design context from Figmaget screenshot from Figmawork with Figma node IDsimplement UI based on Figma designconvert Figma design to React components

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança49%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download figma

$ synaptic skills detail figma

$ synaptic skills live figma

Links

GitHub Repository