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

Pencil Design Skill

porchiroro-jr·chiroro-jr· v1.0.0 · atualizado em 2026-04-10
82
Score

Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.

ui-designdesign-to-codepencil-mcpdesign-systemfrontend-developmenttailwind-css
0Stars
0Forks
0Usos
Fork

Documento do Skill

SKILL.mdpencil-design/workflow
1. Load the `frontend-design` skill to establish aesthetic direction.
2. Use `pencil_get_editor_state` to understand the file state and schema.
3. Use `pencil_batch_get` to discover reusable design system components.
4. Use `pencil_get_variables` to read design tokens.
5. Build the design section by section using `pencil_batch_design`.
6. Verify each section visually with `pencil_get_screenshot` and `pencil_snapshot_layout`.
7. Generate code using semantic Tailwind classes and following `frontend-design` guidelines.

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

Similar aImplement Design
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
79
Similar aApp Store Screenshots Generator
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
78
Similar aMarp Slide Creator
60%
Hebbian Synapse
Composite0.600
w = 0.3·α + 0.5·β + 0.2·γ
77

Árvore do Skill

Pencil Design Skill
pencil-design
Fases Cognitivas6
1.SENSE
2.CONTEXTUALIZE
3.HYPOTHESIZE
4.ACT
5.EVALUATE
6.REFLECT
Triggers7
design a UI in Pencilgenerate code from a Pencil designwork with a .pen fileuse Pencil MCP toolsimplement a design system in Pencilsync design tokens between Pencil and codeimport code into a Pencil design

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%
🤖Sucesso de Agentes0%
🕐Atualidade100%
🔗Saúde de Dependências100%
🕸️Centralidade no Grafo0%
🛡️Segurança50%
CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download pencil-design
$ synaptic skills detail pencil-design
$ synaptic skills live pencil-design

Dependências

shadcn/ui

Links

GitHub Repository