name: marker-sketch description: Desenhe qualquer ideia, descrição, fluxo, arquitetura, organização, wireframe ou cena como um esboço de marcador em papel pontilhado (SVG preto, branco, cinza, sombras projetadas, um acento raro), de forma rápida e sempre com a mesma construção. Quatro modos: Esboço (resposta direta), Ao Vivo (reunião, workshop, troca oral), Workshop (diagrama denso, layout automático), Interativo (evolução agora, depois, mais tarde, elementos arrastáveis, formas que mudam). Use sempre que for solicitado um esquema, diagrama, fluxo, esboço, ilustração, wireframe, maquete rápida, mapa mental, visão geral desenhada, "mostre-me", "desenhe", "visualize", "esquematize" ou uma ilustração animada ou interativa de uma evolução. Use mesmo que o usuário não mencione estilo: este é o estilo padrão.
O que marker-sketch faz?
Transformar uma ideia em esboço de marcador: traço preto grosso levemente trêmulo, preenchimento cinza deslocado com estrias de marcador, sombra projetada cinza, texto manuscrito curto, papel pontilhado. O resultado é o mesmo todas as vezes porque o estilo vive em um núcleo fixo (assets/template.svg, assets/glyphes.svg) e a reflexão segue sempre o mesmo protocolo. Nada é redesenhado de memória: montamos.
Caminhos e dependências
Nos comandos, ${CLAUDE_SKILL_DIR} é a pasta desta skill (Claude Code substitui automaticamente). No claude.ai, se a variável aparecer como está, usar o caminho relativo a partir da pasta da skill copiada no ambiente de execução (scripts/compose.py). Os arquivos de trabalho (draft.svg, croquis.svg) são escritos no diretório de trabalho, nunca na skill.
Dependências: Python 3 é suficiente para compose.py (o texto permanece em <text> com a fonte incorporada). fonttools converte o texto em curvas (--outline, renderização idêntica em qualquer lugar), playwright com Chromium produz os PNGs de controle (render.py). Instalação: pip install fonttools playwright && playwright install chromium. Se uma dependência estiver faltando e não puder ser instalada, entregue o SVG e avise que o controle visual não foi feito.
1. Escolher o modo em dez segundos
| Situação | Modo | Saída | Tempo estimado |
|---|---|---|---|
| Pergunta ou solicitação de esquema, resposta ilustrada | Esboço (padrão) | um SVG | uma única geração |
| Reunião, workshop, troca oral, "mostre o que acabamos de dizer" | Ao Vivo | um SVG 16:9 muito legível, retocado a cada troca | alguns segundos por retoque |
| Esquema denso (mais de 10 objetos), muitos links, renderização a ser controlada | Workshop | SVG construído por script, PNG de controle | um minuto |
| "Agora, depois, mais tarde", "atualmente, amanhã", evolução, tendência, elementos para mover | Interativo | uma página HTML autônoma | uma configuração JSON |
Em caso de dúvida, comece com Esboço. Nunca usar three.js por padrão: ele só é usado no Workshop, para fabricar um símbolo em perspectiva que esteja faltando (ver references/glyphes.md, seção 3D).
2. Protocolo mental, sempre o mesmo (antes de desenhar)
Responder mentalmente a estas seis perguntas, na ordem. É isso que garante a consistência, não o talento.
- Mensagem em uma frase. O que o leitor deve entender em três segundos? Esta frase se torna o título ou a anotação azul.
- Família de diagrama. Escolher em
references/familles-diagrammes.md(quinze famílias: fluxo, ciclo, árvore, conjuntos, camadas, hub, roda, curva, matriz, rede, cena, maquete, antes/depois, linha do tempo, funil). - Metáfora eventual. Se a ideia for abstrata (tensão, crescimento, dívida, atrito), procurar um objeto físico que carregue a tensão e que se desenhe em cerca de dez traços (
references/metaphores.md). Caso contrário, ficar na família. - Orçamento. 5 a 9 objetos, 40% de branco, textos de uma a três palavras (no máximo uma legenda de uma frase). No Ao Vivo: 7 objetos no máximo.
- Hierarquia de tinta. Preto = o coração da mensagem (no máximo um objeto totalmente preto). Cinza = o contexto. Azul caneta = anotações, setas de comentário, números. Um único acento de preenchimento por desenho (amarelo marcador, laranja, vermelho, azul céu ou areia), menos de 10% da área, nunca para decorar.
- Composição. Leitura da esquerda para a direita e de cima para baixo, um ponto focal, alinhamentos em uma grade solta, espaço reservado para anotações.
Depois escrever. Depois verificar (seção 8).
3. Regras de estilo não negociáveis
- Nunca degradê, nunca contorno fino e regular, nunca sombra borrada. Sombra = cópia cinza deslocada de (-7, 10).
- Três cinzas + preto + papel:
f1claro,f2médio,f3escuro,f4preto sólido. - Setas abertas em V (classes
arr,arrb,arrg), curvas em S em vez de cotovelos em ângulo reto. - Fluxo cinza pontilhado largo (
flow), perímetros pretos em pontos pequenos (dotk), traços (dash). - Texto: fonte Patrick Hand, classes
t(36),tl(52, títulos),ts(27, mini),tb(azul),tg(cinza),tw(branco sobre preto). Português cuidado: acentos em maiúsculas, cedilha, aspas curvas, sem travessão longo, apóstrofo curvo. - As palavras são as do leitor. Sem jargão inventado, sem frases.
- Sem emoji, sem logotipo de marca, sem personagem protegido.
Valores numéricos exatos, cores e casos particulares: references/grammaire-visuelle.md.
4. Modo Esboço: escrever diretamente
O desenho bruto contém apenas o conteúdo. O núcleo de estilo é adicionado por compose.py.
Padrão de um objeto (quatro camadas, mesmo id compartilhado):
<use href="#a1" x="-7" y="10" class="sh"/> <!-- sombra -->
<use href="#a1" class="pp"/> <!-- papel opaco -->
<use href="#a1" x="-2.5" y="2.5" class="f1"/> <!-- preenchimento deslocado -->
<g class="ink"><path id="a1" d="M300 300 L560 296 L556 420 L296 424 L302 296"/></g>
<text class="t" x="430" y="372">Ideia</text>
Os ângulos ultrapassam ligeiramente (o traçado não se fecha exatamente), os lados nunca são paralelos ao pixel. Para símbolos (pessoa, janela, banco de dados, nuvem, lupa...), usar a biblioteca:
<use href="#g-person" x="540" y="260" class="cb"/> <!-- classes de tonalidade: cb co cr cs ch c1 c3 c4 -->
Catálogo: python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py --catalog ou references/glyphes.md. Painel visual: references/planche-symboles.png.
Montagem e controle:
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg -o croquis.svg --outline # papel, pontos, filtros, texto em curvas
python3 ${CLAUDE_SKILL_DIR}/scripts/check.py draft.svg # orçamento, acentos, símbolos, acentos de cor
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py croquis.svg # PNG de controle (Chromium)
Opções de compose.py: --paper cream|white|kraft|yellow|blue, --no-dots, --transparent (para colocar em um slide), --size 1200x1200, --embed-font (mantém o texto editável), --title.
Sem execução de código (conversa simples no claude.ai): copiar o bloco <defs> de assets/template.svg como está, colar apenas os símbolos usados de assets/glyphes.svg, depois o conteúdo em <g id="drawing" filter="url(#wob)">. Diga explicitamente que o controle visual não pôde ser feito.
5. Modo Ao Vivo: reunião, workshop, oral
Leia references/mode-live.md antes do primeiro retoque. O essencial:
- Ouvir, não redigir. Extrair da troca 3 a 7 elementos: os nomes viram objetos, os verbos viram setas, "mas" e "senão" viram ramificações, "antes/depois" duas colunas, "primeiro, depois" um fluxo.
- Formato 16:9, texto mínimo 36 px (
t), títulos 52 px (tl), nuncats. Legível a quatro metros. - Posições estáveis. A cada retoque, mover apenas o que muda. Reutilizar os mesmos identificadores e coordenadas. A equipe não deve perder seus pontos de referência.
- Retoques orais: "adicione", "ligue", "risque", "destaque" (preto sólido ou marcador), "versão limpa" (realinhar, uma única vez no final).
- Projeção:
python3 ${CLAUDE_SKILL_DIR}/scripts/live.py draft.svgabre uma página que se atualiza sozinha a cada reescrita do arquivo (tela cheia com a tecla f). No claude.ai: republicar o mesmo artefato ou renderizar o SVG em PNG a cada retoque. - Maquetes e fluxos ao vivo: receitas em
references/wireframes-flows.md.
6. Modo Workshop: esquemas densos construídos por script
Para mais de dez objetos ou muitos links, escrever algumas linhas com scripts/sketch.py: os links são calculados nas bordas dos objetos, incluindo curvas em S e setas abertas.
import sys; sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from sketch import Sketch
s = Sketch()
s.box("a", 260, 420, "Explorar", fill="f1") # (id, centro x, centro y, texto)
s.box("b", 800, 420, "Definir", fill="fh")
s.glyph("c", "g-flag", 1340, 400, "Entregar")
s.link("a", "b"); s.link("b", "c", label="validar")
s.perimeter(["a", "b"], "Descoberta")
s.note(1330, 640, "medimos aqui", target="c")
s.save("draft.svg")
Objetos: box (formas box, pill, oval, opção solid=False para conjuntos que se sobrepõem), glyph, text, label, wf (elementos de maquete), badge (número azul). Links: link(kind="ink|gray|flow|dash|blue|line"), arrow, perimeter, note, highlight, raw (SVG livre). Exemplos completos em examples/build_examples.py.
Para layout automático de um grafo volumoso, calcular as posições com ELK ou dagre (npm) e depois passar as coordenadas para sketch.py.
7. Modo Interativo: evolução no tempo
Quando a solicitação falar de evolução, estados sucessivos, "agora, depois, mais tarde", mudança de tendência, organização que se transforma, peças para mover: produzir uma página HTML autônoma. Leia references/interactif.md (seis padrões, esquema da configuração, armadilhas).
Princípio: um desenho bruto (os elementos têm um id) + uma configuração JSON (estados, quadros-chave por elemento: x y s r o d draw txt, camadas, notas):
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg --interactive scenes.json -o page.html
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py page.html --state 1 # verificar cada estado
A página oferece: botões de estados, controle deslizante de tempo, reprodução, camadas para exibir ou ocultar, arrastar e soltar de elementos marcados com drag, clique duplo para renomear texto, links que seguem os elementos, exportação do estado em SVG, cópia da disposição (JSON), teclado (setas, espaço, f). Nenhuma dependência, funciona offline. Exemplos: examples/migration-organisation.html, examples/tendance-adoption.html.
8. Controle antes de responder
check.pysem erro (símbolos conhecidos, travessões longos ausentes, um único acento de cor).- Renderização PNG verificada: texto legível, nada se sobrepõe, sombras visíveis, ponto focal evidente, branco suficiente.
- A mensagem se sustenta em uma frase ao olhar o desenho sem ler o texto.
- Se um controle visual for impossível, diga.
9. Entregar de acordo com o ambiente
- Claude Code: escrever
croquis.svg(e o PNG) no diretório de trabalho, fornecer o caminho. No Ao Vivo, executarlive.py. - claude.ai com execução de código: gerar, verificar, enviar o SVG e o PNG. Para uma página interativa ou um desenho para guardar e compartilhar, publicar como artefato (carregar primeiro a skill
artifact-design, título de duas a quatro palavras); o HTML produzido porcompose.py --interactivejá é autônomo. - Sem execução: SVG completo escrito à mão de acordo com a seção 4, anunciado como não verificado.
- Respostas em português: aplicar
português-perfeitoaos rótulos do desenho e ao texto ao redor.
10. Índice das referências
| Arquivo | Quando ler |
|---|---|
references/grammaire-visuelle.md | valores exatos do estilo, classes, papéis, casos limite |
references/familles-diagrammes.md | escolher e compor uma das quinze famílias |
references/metaphores.md | ideia abstrata para tornar visível |
references/glyphes.md | catálogo dos 47 símbolos, adicionar um símbolo, 3D opcional |
references/mode-live.md | reunião, workshop, oral |
references/wireframes-flows.md | maquetes, percursos, estados de tela |
references/interactif.md | páginas animadas, estados, elementos arrastáveis |
references/planche-symboles.png | visão geral de todos os símbolos |
examples/ | seis esboços (SVG e PNG), duas páginas interativas, brut/ (desenhos fonte e configurações), build_examples.py |