Sketch MCP para Design

Construa ou refine um design no Sketch para corresponder a uma referência. Este skill é para trabalho de design no Sketch; o fluxo inverso é sketch-design-to-code.

Fidelidade em primeiro lugar

O objetivo é a paridade visual com a referência — não uma página plausível com seções semelhantes. Semelhante não é suficiente. Não pare quando o conteúdo existir; pare quando a comparação lado a lado das capturas de tela passar nos critérios de conclusão em references/validation.md.

Guias obrigatórios do Sketch

get_guide com topic: "mcp" — sempre; pré-requisitos do MCP, regras do run_code, tratamento de falhas e verificação visual.
get_guide com topic: "use" — edição no Sketch, pilhas, símbolos, estilos, substituições, ativos e prototipagem.
get_guide com topic: "layout" — antes de criar ou reestruturar Frames, Grupos, pilhas, posicionamento de página, dimensionamento, pinos ou tipos de contêiner.

Busque subtópicos dos guias sob demanda quando a tarefa precisar deles: troubleshooting, layout, styling, symbols, assets e prototyping.

Pré-requisitos

Sketch em execução com MCP habilitado (Configurações → Geral → Permitir que ferramentas de IA interajam com documentos abertos).
Um documento de destino está aberto, ou o usuário espera que você crie/use um novo documento.
Uma referência está disponível como URL, captura de tela ou código-fonte.
O escopo é claro o suficiente para agir: página completa vs. frame único, largura alvo, modo claro/escuro e página/frame alvo quando o documento tem vários candidatos.

Se o MCP estiver indisponível, pare e chame get_guide com topic: "troubleshooting". Não adivinhe o layout de memória enquanto o MCP estiver inacessível.

Etapas

Siga estas etapas em ordem. O fluxo principal deve ser suficiente para o trabalho comum; carregue um arquivo de referência apenas quando a etapa precisar de mais detalhes ou exemplos.

Etapa 1 — Confirmar contexto e referência

Busque os guias obrigatórios.
Resolva o documento de destino com get_document_info.
Classifique o tipo de referência:
- URL — colete título da página, largura da viewport, estrutura do DOM, HTML fonte, JavaScript/CSS vinculado ou embutido quando disponível, cores/fontes calculadas, texto e URLs de ativos.
- Captura de tela — colete dimensões, regiões, conteúdo de texto, alinhamento e cores principais.
- Código — colete tokens de tema, pilha de fontes, escala de espaçamento, nomes de componentes, SVGs inline e importações de ativos.
Extraia uma especificação de fidelidade e capture uma captura de tela de referência na largura alvo antes de quaisquer mutações de layout. A especificação deve incluir regiões (de cima para baixo), texto literal, cores, tipografia, larguras de layout e fontes de ativos — veja references/reference-extraction.md.

Para extração específica de referência, leia references/reference-extraction.md. Para comparação e portões de conclusão, leia references/validation.md antes da Etapa 5.

Etapa 2 — Descobrir conteúdo reutilizável do Sketch

Inspecione antes de modificar. Comece com ferramentas MCP somente leitura:

Chame get_document_info para páginas, Frames/Graphics de nível superior, contagens de camadas e candidatos de layout existentes.
Chame get_layer_tree_summary em frames candidatos ou páginas relevantes para hierarquia, IDs, nomes, dimensões, trechos de texto, contagens de substituição de instâncias de símbolo e dicas de pilha.
Chame get_design_assets e get_libraries para componentes/símbolos reutilizáveis e ativos de biblioteca.
Use run_code direcionado apenas quando os resumos não expuserem o detalhe necessário.

Prefira editar um frame existente apenas quando tiver certeza de que ele corresponde ao design solicitado. Caso contrário, crie um novo frame.

Etapa 3 — Planejar a estrutura antes dos pixels

Defina o plano de camadas antes de desenhar:

Regiões de nível superior e sua ordem.
Relações pai/filho e grupos irmãos.
Larguras das regiões, larguras máximas de conteúdo e seções de sangria total vs. em coluna.
Áreas fixas/presas vs. conteúdo rolável.
Candidatos a símbolo, candidatos a pilha, candidatos a ativo e padrões de pilha reutilizáveis.

Não imponha um modelo de página padrão. Corresponda à arquitetura de informação da referência.

Para cada região estruturada, decida o modelo de pilha do Sketch antes de desenhar: direção, espaçamento, preenchimento, alinhamento, dimensionamento, quebra e ordem visual pretendida. Use pilhas para linhas, colunas, barras de navegação, barras de ferramentas, cartões, listas, formulários, grupos de botões e conteúdo repetido, a menos que haja um motivo específico para a região ser de forma livre. Use coordenadas manuais para posicionamento em nível de página, cromos fixos, sobreposições, máscaras ou arte genuinamente de forma livre.

Etapa 4 — Estabelecer tokens e frame base

Crie ou corresponda amostras/estilos compartilhados do documento para fundo, borda, texto, marca, texto suave e superfícies importantes. Defina o fundo da página/frame intencionalmente e limpe preenchimentos acidentais de grupos estruturais. Para detalhes de símbolo, chame get_guide com topic: "symbols".

Use valores da referência: CSS calculado, cores amostradas da captura de tela ou tokens de código. Para detalhes de estilo, chame get_guide com topic: "styling".

Etapa 5 — Construir layout incrementalmente

Aplique edições pequenas e reversíveis com run_code. Um script deve realizar uma pequena ação.

Nunca construa uma página inteira, região de nível superior ou layout de várias seções em um único script. Não combine sondagem, criação, estilo e reordenação na mesma execução. Mantenha os scripts simples: inicialize, encontre o destino pelo ID, execute uma mutação, registre JSON. Evite funções auxiliares profundas, IIFEs aninhados e longas árvores de fluxo de controle.

Construa de fora para dentro:

Frame da página e fundo.
Contêineres de região de nível superior a partir do plano de camadas.
Configurações de pilha para cada região antes dos filhos detalhados.
Texto, formas e instâncias de símbolo dentro de cada região em pequenos lotes irmãos.
Regiões fixas/prensadas após a estrutura pai estar correta.

Construa uma região de nível superior de cada vez. Após cada lote de conteúdo da região:

Tire get_screenshot do frame na largura de referência.
Compare essa faixa de região com a referência — liste deltas usando a taxonomia em references/validation.md.
Corrija grandes incompatibilidades antes de começar a próxima região.

Após edições estruturais, consulte novamente com get_layer_tree_summary ou tire uma captura de tela do frame. Para padrões seguros de reordenação/reparentação, leia references/editing-patterns.md.

Etapa 6 — Símbolos, ativos e substituições

Use símbolos existentes do documento/biblioteca antes de desenhar grupos de camadas únicas repetidas. UI repetida deve normalmente se tornar um símbolo mestre com instâncias e substituições.

Antes de desenhar formas detalhadas, classifique cada visual não textual. Exporte/importe fotos, capturas de tela, ilustrações, SVGs complexos, imagens de produto, marcas, ícones detalhados, gradientes e ruído como ativos SVG/PNG/imagem. Recrie apenas primitivos de UI simples, vetores editáveis simples, divisores, pílulas e formas básicas no Sketch.

Para ícones/logos/imagens, estabeleça o layout com espaços reservados simples primeiro, depois importe/atribua ativos de imagem reais quando a geometria e a ordem da pilha estiverem estáveis. Prefira substituições de imagem de símbolo em camadas dedicadas para ativos repetidos.

Para padrões de substituição de símbolo, leia references/symbols.md. Para detalhes de importação/exportação, chame get_guide com topic: "assets".

Etapa 7 — Correções direcionadas apenas

Quando o usuário relatar um problema ou a comparação de captura de tela mostrar uma incompatibilidade:

Inspecione a camada atual com get_layer_tree_summary ou uma sonda direcionada antes de modificar.
Altere apenas a propriedade relatada: um valor de frame, estilo de texto, cor, ordem de camada, propriedade de pilha ou substituição.
Tire outra captura de tela e confirme que as contagens de filhos não foram alteradas, a menos que a exclusão fosse intencional.

Se o layout quebrar ou camadas forem perdidas, informe imediatamente e diga ao usuário para Desfazer/Reverter antes de continuar.

Etapa 8 — Validação final e entrega

Não afirme que está concluído até que os critérios de conclusão sejam aprovados — veja references/validation.md → Critérios de conclusão.

Capture uma get_screenshot de quadro completo na largura de referência.
Execute o portão de região para cada faixa na especificação de fidelidade contra a captura de tela de referência.
Se algum delta maior permanecer, volte à Etapa 7 e itere. Não entregue com layouts "quase lá".
Resuma os símbolos usados, tokens/estilos criados, nome e ID do artboard/frame alvo, regiões verificadas e quaisquer deltas menores restantes.
Não execute zoomToFitCanvas até que a tarefa esteja concluída.

Regras

Regras específicas de direção para Sketch → design. Regras genéricas de MCP/script vêm de get_guide com topic: "mcp" e regras de conteúdo do Sketch vêm de get_guide com topic: "use".

Corrija, não reconstrua. Se o conteúdo existir, corrija frames, estilos, substituições ou ordem em vez de excluir e recriar grandes regiões.
Faça contagens de filhos antes e depois de operações de reordenação, reparentação, adição ou remoção.
Nunca atribua parent.layers = [...]; use layer.index para reordenar e child.parent = newParent para reparentar.
Corresponda à estrutura de região da referência; o mesmo conteúdo visual deve ter a mesma relação pai/irmão, a menos que haja um motivo deliberado para divergir.
Tire captura de tela após cada lote significativo e use os deltas da captura de tela para escolher a próxima edição.
Layout estruturado usa pilhas por padrão. Se os irmãos se comportarem como conteúdo flex, grid, lista, formulário, nav ou cartão na referência, crie ou preserve uma pilha do Sketch em vez de posicionar manualmente cada filho.
Ativos são ativos. Não redesenhe arte complexa, fotos, capturas de tela ou marcas como aproximações vetoriais de baixa fidelidade; exporte/importe ou atribua ativos de imagem/SVG.
Sem suposições. Não invente layout, texto, cores, espaçamento ou ativos de memória ou padrões genéricos de UI. Extraia da referência; se um valor estiver faltando, busque novamente ou pergunte ao usuário.
Referência sempre. Compare a saída do Sketch com a captura de tela de referência capturada — não com sua memória da página.
Portão de conclusão. Não pare porque as seções existem ou a página "parece semelhante." Pare quando os critérios de conclusão de references/validation.md forem aprovados.

Armadilhas

Recriar a página para corrigir uma pequena incompatibilidade desperdiça trabalho ajustado e introduz novos bugs. Faça edições cirúrgicas a partir dos deltas da captura de tela.
Colocar imagens diretamente em instâncias de símbolo pode quebrar a hierarquia ou falhar na API. Coloque camadas de imagem no mestre e conduza substituições de imagem por instância.
Pular capturas de tela esconde erros de layout, ordenação e cor. Tire captura de tela a cada lote.
Reordenar com parent.layers = [...] pode excluir filhos ou duplicar IDs de objeto. Use padrões seguros de reordenação.
A ordem da pilha pode parecer invertida se o índice e a direção de empacotamento forem mal compreendidos. Use get_guide com topic: "layout" e verifique com captura de tela.
Scripts de página ou região inteira são difíceis de validar, depurar e recuperar. Divida por região, configuração de pilha e pequenos lotes irmãos.
Layout estruturado construído com frames manuais deriva quando o espaçamento ou a ordem muda. Use pilhas do Sketch para linhas, colunas, listas, formulários, navs, cartões e regiões repetidas.
Arte complexa reconstruída como formas primitivas produz aproximações de baixa qualidade. Exporte/importe SVG/PNG ou use substituições de imagem; reserve formas para primitivos de UI simples.
Capturas de tela de página apenas na primeira pintura podem perder imagens lentas e estados de UI acionados por rolagem. Use ferramentas de navegador ou agente, role para acionar o conteúdo e capture a viewport alvo.
Conclusão prematura: o agente adiciona cabeçalho/corpo/rodapé com estilo genérico e para. Execute o portão de região e os critérios de conclusão; continue corrigindo até que grandes deltas desapareçam.
Texto e cores improvisados: títulos parafraseados, preenchimento estilo lorem ou cinzas/azuis padrão em vez de valores extraídos. Use a especificação de fidelidade literalmente; reamostre cores da referência.
Permanência de espaço reservado: caixas cinzas deixadas como "logos" ou "imagens de herói." Exporte/importe ativos reais antes da entrega, a menos que o usuário tenha solicitado espaços reservados.

Solução de problemas

Para falhas de bridge/chamada de ferramenta, erros de analisador, problemas de conexão MCP ou falhas de captura de tela, chame get_guide com topic: "troubleshooting" antes de tentar novamente.

Para falhas de operação de documento:

Problemas de layout/pilha/ordem → get_guide com topic: "layout".
Problemas de substituição de símbolo → get_guide com topic: "symbols".
Problemas de exportação/importação/imagem → get_guide com topic: "assets".

Sintomas de construção de design

Contagem de filhos caiu após um script: diga ao usuário para Desfazer, depois inspecione a operação. Não repita uma atribuição de lote de camadas.
get_screenshot está vazio ou errado: resolva novamente o ID do frame/camada, depois tire uma captura de tela da página ou frame pai, se necessário.
Substituição de símbolo não tem efeito: busque novamente get_symbol_overrides, reconstrua o ID de substituição a partir de commonOverrideIDPrefix + '_' + property, depois tire uma captura de tela.
Texto sobreposto em uma pilha de linha: inspecione a ordem dos filhos e o espaçamento; corrija uma propriedade de pilha ou índice filho de cada vez.

Referências

get_guide com topic: "mcp" — Ferramentas MCP, run_code, solução de problemas, verificação visual e regras de conclusão
get_guide com topic: "use" — Edição do Sketch, pilhas, símbolos, estilos, substituições, ativos e verificação de conteúdo
get_guide com topic: "layout" — Pilhas, posicionamento de página, dimensionamento, pinos, tipos de contêiner, reordenação/reparentação e deriva de layout
Extração de referência
Padrões seguros de edição
Padrões de substituição de símbolo
Loop de validação
API JavaScript do Sketch
StackLayout
Substituições de símbolo (confirme via get_symbol_overrides no MCP)

madsouris/sketch-design-from-reference

O que é sketch-design-from-reference?

Perguntar na sua IA favorita

Documentação