ContentAvançado

Sketch Implement Design

porsketch-hq·sketch-hq· v1.0.0 · atualizado em 2026-04-11

Score

This skill implements designs based on sketches. It can translate visual representations into functional code or specifications.

sketchui-designdesign-implementationmcpfront-end-developmentdesign-fidelityasset-export

Linguagens

multi-language

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdsketch-implement-design/workflow

Confirm Sketch MCP connectivity: — Verify Sketch is running, MCP is enabled, and the server URL is correct.

Identify the implementation target: — Use share links, layer identifiers, or user selection to pinpoint the target layer in Sketch.

Fetch design context: — Use `run_code` to collect design data (hierarchy, layout, typography, styling, etc.) for the selected layer.

Capture visual reference: — Call `get_selection_as_image` to get a screenshot of the selected layer.

Export required assets: — Use `run_code` to export icons, bitmaps, and other assets from Sketch.

Translate to project conventions: — Map Sketch data to project standards, reusing existing components and tokens.

Implement UI: — Create the UI with 1:1 visual parity to the Sketch design.

Validate implementation: — Compare the implemented UI against the Sketch screenshot and design context.

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

Sketch Implement Design

sketch-implement-design

Fases Cognitivas5

1.SENSE

2.CONTEXTUALIZE

3.ACT

4.EVALUATE

5.REFLECT

Triggers7

implement design from sketchgenerate ui from sketch filecreate code from sketch designconvert sketch design to codeimplement ui based on sketch mcpexport assets from sketchtranslate sketch design to project conventions

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 sketch-implement-design

$ synaptic skills detail sketch-implement-design

$ synaptic skills live sketch-implement-design

Dependências

sketch

Links

GitHub Repository