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

Design System Builder — Figma MCP Skill

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

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

design-systemfigmaui-developmentcomponent-librarydesign-tokensfrontend-development
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdfigma-generate-library/workflow
1
Discovery: — Analyze codebase and Figma file to extract design tokens and components.
2
Foundations: — Create variable collections, modes, and primitive/semantic variables.
3
File Structure: — Create page skeleton for foundations, components, and utilities.
4
Components: — Build base components with auto-layout and variable bindings, one at a time.
5
Variants: — Create variant combinations and link properties to child nodes.
6
Integration & QA: — Finalize Code Connect mappings and conduct accessibility/naming audits.

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

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 ←Build / Update Screens from Design System
85%
Hebbian Synapse
Composite0.850
w = 0.3·α + 0.5·β + 0.2·γ
84
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 aWeb Artifacts Builder
40%
Hebbian Synapse
Composite0.400
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar aReact Composition Patterns
40%
Hebbian Synapse
Composite0.400
w = 0.3·α + 0.5·β + 0.2·γ
80
Co-executedImplement Design
49%
Hebbian Synapse
Composite0.485
w = 0.3·α + 0.5·β + 0.2·γ
84
Co-executeduse_figma — Figma Plugin API Skill
49%
Hebbian Synapse
Composite0.494
w = 0.3·α + 0.5·β + 0.2·γ
82
Co-executed ←Code Connect Components
49%
Hebbian Synapse
Composite0.488
w = 0.3·α + 0.5·β + 0.2·γ
83
Co-executed ←Create Design System Rules
51%
Hebbian Synapse
Composite0.506
w = 0.3·α + 0.5·β + 0.2·γ
84
Co-executed ←create_new_file — Create a New Figma File
49%
Hebbian Synapse
Composite0.494
w = 0.3·α + 0.5·β + 0.2·γ
79
Co-executed ←Build / Update Screens from Design System
51%
Hebbian Synapse
Composite0.506
w = 0.3·α + 0.5·β + 0.2·γ
84
Co-executed ←Figma MCP
49%
Hebbian Synapse
Composite0.485
w = 0.3·α + 0.5·β + 0.2·γ
80

Árvore do Skill

Design System Builder — Figma MCP Skill
figma-generate-library
Fases Cognitivas5
1.SENSE
2.CONTEXTUALIZE
3.ACT
4.EVALUATE
5.REFLECT
Triggers7
generate a design system in Figmabuild a component library in Figmacreate design tokens in Figmaupdate a design system in Figma from codesynchronize code and Figma designcreate variables for a Figma design systembuild a Figma library from a codebase

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

Links

GitHub Repository