Infográfico Esboçado (Sketch Infographic)
Você cria uma página que explica uma fonte: um título, uma grade de painéis e um rodapé nomeando a fonte. Cada painel apresenta um ponto com um pequeno diagrama e uma ou duas frases. Você escreve a página como uma especificação JSON; scripts/build.mjs organiza a grade, desenha com o próprio renderizador do Excalidraw, verifica e gera um PNG e um arquivo .excalidraw editável.
A parte do desenho é fácil. A página só vale a pena ser publicada se cada painel disser algo verdadeiro sobre a fonte, em menos palavras do que a fonte usou.
1. Leia a fonte e planeje a página
Leia tudo. Depois, escreva o plano na sua resposta, antes de qualquer JSON:
- Título: o tópico em duas a cinco palavras. Subtítulo: quem disse e sobre o quê, em uma linha ("Um planejador de trânsito sobre por que ônibus superam novas linhas de trem em cidades pequenas").
- Formato: retrato 3:4 (1500×2000), a menos que o usuário nomeie outro, ou a página de exemplo tenha outro formato. Outros formatos estão em references/spec.md.
- Seis ou sete painéis, o suficiente para preencher a página. Uma página 3:4 comporta cerca de quatro linhas: três linhas de dois meios-painéis e um painel de largura total. Cada painel tem um título que resume o ponto (não um rótulo de tópico), uma ideia de desenho e uma conclusão de no máximo duas frases e cerca de 30 palavras. O painel de largura total contém o exemplo mais rico.
- Rodapé: a fonte (autor, título, data) e qualquer ressalva que a fonte forneça, como "notas de design e um protótipo, não um produto final".
Aguarde a aprovação do usuário sobre o plano quando a fonte for longa ou o ângulo não estiver claro; caso contrário, siga em frente.
Trabalhando a partir de uma página de exemplo que o usuário compartilhou: liste seus painéis primeiro e mantenha todos no seu plano, a menos que o usuário peça menos. Combinar a aparência, mas pular um painel, é a maneira mais comum de ficar aquém dela.
Seja fiel à fonte. Cada número, nome e afirmação na página deve estar na fonte. Atribua opiniões ("o autor argumenta..."). Quando você adicionar sua própria ilustração de um ponto, diga isso na página ("um exemplo inventado de como isso poderia acontecer"). Deixe de fora o que você não pode desenhar honestamente, em vez de inventar uma figura para isso.
2. Escolha uma imagem para cada painel
Use um diagrama por painel, construído a partir dos padrões em references/patterns.md: uma cadeia de etapas, antes e depois, muitos em um, um loop de volta à fonte, uma comparação de opções, um gráfico de barras, uma linha do tempo. Escolha o padrão que corresponde à afirmação, não o que parece mais ocupado. Um painel cujo ponto é uma lista pode ser três caixas rotuladas. O texto dentro dos desenhos são algumas palavras, nunca uma frase.
A cor carrega significado, da mesma forma em toda a página: verde para bom ou o caminho padrão, laranja para risco ou o que mudou, vermelho para falha, azul para a coisa que está sendo manipulada, roxo para um agente ou modelo, amarelo para a única chamada mais importante da página. Cinza é neutro. Veja references/spec.md para os nomes.
3. Escreva a especificação e construa
Salve cada página em sua própria pasta, como page.json; pergunte onde se o usuário não disse. O formato e cada tipo de elemento estão em references/spec.md; assets/example.json é uma página completa. Em seguida, execute, a partir da pasta desta skill:
node scripts/build.mjs <pasta>/page.json
Isso imprime a largura da área de desenho de cada painel (desenhe dentro dela; a altura cresce para caber) e escreve page.png e page.excalidraw ao lado da especificação. Se o runtime estiver faltando, ele diz como instalá-lo.
4. Verifique e corrija
- Corrija todos os avisos. O código de saída 3 significa que a página foi construída com avisos: o conteúdo é mais alto que a página (diz quantos pixels cortar), algo ultrapassa seu painel, sobrepõe algo mais, tem uma seta passando pelo texto, tem uma seta muito curta para ser lida como uma, fez uma caixa crescer porque seu rótulo não coube, ou usa um caractere que o Excalifont não possui (setas como →, marcas de verificação, emojis), que renderiza em uma fonte do sistema. Desenhe setas e marcas como elementos em vez disso.
- Depois olhe para o PNG (abra o arquivo de imagem) e verifique cada painel: o olho segue as setas na direção certa, toda seta e linha começa e termina em algo, as pontas das setas estão livres umas das outras, algum texto está apertado contra uma borda, os painéis em uma linha parecem equilibrados, o título corresponde à imagem? A página está cheia, ou um painel está quase vazio? Corrija a especificação e construa novamente. Duas ou três rodadas é normal.
- Com uma página de exemplo, compare as duas lado a lado, painel por painel: mesmos painéis, mesmo tipo de desenho, densidade semelhante. Diga o que ainda difere.
- Leia as palavras mais uma vez em comparação com a fonte (passo 1), na página conforme desenhada.
5. Entregue
Dê ao usuário o PNG e o caminho do .excalidraw, e o resumo de uma linha do plano. Diga que o arquivo .excalidraw abre em excalidraw.com ou no aplicativo Excalidraw para edições manuais, e que após edições manuais, esse arquivo, não page.json, é a página: construir novamente o sobrescreve.
Recriar a página publicada de outra pessoa é aceitável como estudo ou teste privado; não ofereça uma para publicação. O layout, a redação e a marca são deles.