DevelopmentAvançado

Implement Design

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

Score

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

figmaui-developmentcode-generationdesign-implementationdesign-systemcomponent-developmentpixel-perfect

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdfigma-implement-design/workflow

Get Node ID: — Extract the file key and node ID from the Figma URL or use the currently selected node in the Figma desktop app.

Fetch Design Context: — Run `get_design_context` with the file key and node ID to retrieve structured design data.

Capture Visual Reference: — Run `get_screenshot` with the file key and node ID to capture a visual reference of the design.

Download Required Assets: — Download any assets (images, icons, SVGs) returned by the Figma MCP server.

Translate to Project Conventions: — Translate the Figma output into the project's framework, styles, and conventions.

Achieve 1:1 Visual Parity: — Strive for pixel-perfect visual parity with the Figma design, using design tokens and existing components.

Validate Against Figma: — Validate the final UI against the Figma screenshot, ensuring layout, typography, colors, and interactive states match.

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

Depende de ←Build / Update Screens from Design System

90%

Compõe comCode Connect Components

70%

Compõe comCreate Design System Rules

70%

Compõe comBuild / Update Screens from Design System

70%

Compõe comuse_figma — Figma Plugin API Skill

85%

Compõe comFrontend Skill

75%

Compõe com ←Code Connect Components

85%

Compõe com ←Create Design System Rules

85%

Compõe com ←create_new_file — Create a New Figma File

85%

Compõe com ←Build / Update Screens from Design System

85%

Compõe com ←Design System Builder — Figma MCP Skill

85%

Compõe com ←Figma MCP

85%

Similar aMarkdown to Docs

60%

Similar aImage Optimizer

60%

Similar aReact Component Generator

60%

Co-executeduse_figma — Figma Plugin API Skill

51%

Co-executedFrontend Skill

47%

Co-executed ←Code Connect Components

48%

Co-executed ←Create Design System Rules

47%

Co-executed ←create_new_file — Create a New Figma File

51%

Co-executed ←Build / Update Screens from Design System

51%

Co-executed ←Design System Builder — Figma MCP Skill

49%

Co-executed ←Figma MCP

47%

Árvore do Skill

Implement Design

figma-implement-design

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.ACT

5.EVALUATE

6.REFLECT

Triggers9

implement design from Figmagenerate code from Figmaimplement component from Figmabuild UI from Figma specscreate code based on Figmatranslate Figma design to codeimplement UI based on Figma URLconvert Figma to Reactbuild component matching Figma specs

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança48%

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

Instalação

$ synaptic mcp download figma-implement-design

$ synaptic skills detail figma-implement-design

$ synaptic skills live figma-implement-design

Dependências

React

Links

GitHub Repository