Synaptic SkillsSynapticSkills
MarketplaceSkill GraphCriar SkillMCP ServerPlataformaEnterprise
v0.1.0-beta
Voltar ao Marketplace
DevelopmentAvançado

Build / Update Screens from Design System

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

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

figmadesign-systemui-designcomponent-librarydesign-automationscreen-generation
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdfigma-generate-design/workflow
1
Understand the Screen: — Analyze the source code or description to identify the screen's structure, sections, and components.
2
Discover Design System Components: — Search for relevant components in the Figma file or design system using `search_design_system` or by inspecting existing screens.
3
Discover Design System Variables and Styles: — Identify relevant color, spacing, and text/effect styles within the design system.
4
Assemble the Screen: — Use `use_figma` to create the screen section by section, placing component instances and applying design system tokens.
5
(Optional) Parallel Workflow for Web Apps: — Run `generate_figma_design` to capture a screenshot of the running web app for pixel-perfect reference.
6
(Optional) Update Layout: — Adjust the `use_figma` output to match the layout from the `generate_figma_design` capture.
7
Final Review: — Ensure the generated screen matches the desired design and utilizes design system components correctly.

Telemetria de Agentes

Execuções
0
total
Taxa de Sucesso
0%
últimos 30d
Latência Média
0.0s
p50
Alucinação
0.0%
detecção
Tokens Entrada
0
avg 0/exec
Tokens Saída
0
avg 0/exec

Uso por Plataforma

Skills Relacionados

Depende deImplement Design
90%
Hebbian Synapse
Composite0.900
w = 0.3·α + 0.5·β + 0.2·γ
84
Compõe comCode Connect Components
70%
Hebbian Synapse
Composite0.700
w = 0.3·α + 0.5·β + 0.2·γ
83
Compõe comDesign System Builder — Figma MCP Skill
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
79
Compõe comImplement Design
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
84
Compõe comuse_figma — Figma Plugin API Skill
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
82
Compõe com ←Code Connect Components
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
83
Compõe com ←Create Design System Rules
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
84
Compõe com ←create_new_file — Create a New Figma File
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
79
Compõe com ←Implement Design
70%
Hebbian Synapse
Composite0.700
w = 0.3·α + 0.5·β + 0.2·γ
84
Compõe com ←use_figma — Figma Plugin API Skill
70%
Hebbian Synapse
Composite0.700
w = 0.3·α + 0.5·β + 0.2·γ
82
Compõe com ←Figma MCP
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
80
Similar aPPTX Skill
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
84
Similar aCreate Design System Rules
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
84
Similar acreate_new_file — Create a New Figma File
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Co-executedDesign System Builder — Figma MCP Skill
51%
Hebbian Synapse
Composite0.506
w = 0.3·α + 0.5·β + 0.2·γ
79
Co-executedImplement Design
51%
Hebbian Synapse
Composite0.508
w = 0.3·α + 0.5·β + 0.2·γ
84
Co-executeduse_figma — Figma Plugin API Skill
50%
Hebbian Synapse
Composite0.496
w = 0.3·α + 0.5·β + 0.2·γ
82
Co-executed ←Code Connect Components
48%
Hebbian Synapse
Composite0.482
w = 0.3·α + 0.5·β + 0.2·γ
83
Co-executed ←Create Design System Rules
50%
Hebbian Synapse
Composite0.496
w = 0.3·α + 0.5·β + 0.2·γ
84
Co-executed ←create_new_file — Create a New Figma File
51%
Hebbian Synapse
Composite0.506
w = 0.3·α + 0.5·β + 0.2·γ
79
Co-executed ←Figma MCP
48%
Hebbian Synapse
Composite0.478
w = 0.3·α + 0.5·β + 0.2·γ
80

Árvore do Skill

Build / Update Screens from Design System
figma-generate-design
Fases Cognitivas6
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.EVALUATE
6.REFLECT
Triggers9
write to Figmacreate in Figma from codepush page to Figmatake this app/page and build it in Figmacreate a screenbuild a landing page in Figmaupdate the Figma screen to match codegenerate a UI in Figmarecreate the design in Figma

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-generate-design
$ synaptic skills detail figma-generate-design
$ synaptic skills live figma-generate-design

Links

GitHub Repository