ContentMédio

Pencil To Code

porphrazzld·phrazzld· v1.0.0 · atualizado em 2026-04-11

Score

This skill translates hand-drawn sketches or diagrams into functional code. It supports various programming languages and frameworks, enabling rapid prototyping and code generation from visual representations.

design-to-codereacttailwind-csscomponent-generationui-developmentfrontend-development

Linguagens

JavaScriptCSSHTML

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdpencil-to-code/workflow

Read Design Structure: — Parse the .pen file to extract the design tree and variables.

Extract Design Tokens: — Transform .pen variables into Tailwind theme variables.

Map Nodes to Components: — Determine the appropriate React component for each .pen node type.

Generate Code: — Create React components with Tailwind classes based on the design.

Validate (Optional): — Compare a screenshot of the .pen design with the rendered React component.

Output: — Generate React components and Tailwind theme configuration.

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

Similar aFramer Code Development

60%

Similar aUI Design Brain

60%

Similar aSync Figma Token

60%

Árvore do Skill

Pencil To Code

pencil-to-code

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.ACT

4.EVALUATE

5.REFLECT

Triggers6

convert pencil design to react codeexport pencil file to react componentsgenerate react code from pencil designcreate tailwind components from penciltransform pencil design to codeexport .pen file to react

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-to-code

$ synaptic skills detail pencil-to-code

$ synaptic skills live pencil-to-code

Dependências

react tailwindcss typescript

Links

GitHub Repository