Gerador de Imagens de Cenário · v2 / v3

Dado um "título", produza uma imagem de cenário de 1760×1120. O estilo já está definido; não o redesenhe, apenas escolha o layout + preencha o conteúdo.

Duas abordagens, escolha uma:

	v2 · Cartões	v3 · Gráfico
Corpo	Nós retangulares arredondados + rótulos curtos	Ícones grandes / nós circulares / elementos gráficos
Área de conteúdo	Possui um cartão de conteúdo branco sólido	Não possui; os elementos gráficos flutuam diretamente sobre o painel azul claro
Quantidade de texto	5–7 locais com 2–4 caracteres	3–4 locais com 2–3 caracteres
Adequado para	Quando é necessário listar e explicar 5–6 conceitos lado a lado	Poucos pontos-chave, o gráfico deve falar por si
Template	`template-b/c-*`	`template-d/e-*`

Por padrão, use v3 — essas imagens geralmente são reduzidas para 240px de largura, e os gráficos suportam melhor a redução do que o texto. Use v2 apenas quando a informação for "5 itens em paralelo, cada um precisa ser lido".

Por que usar renderização HTML/CSS em vez de IA geradora de imagens: Estas imagens têm texto preciso e contornos de 1px. Modelos de difusão borram o texto e tremem os contornos, e o mesmo prompt produz resultados diferentes a cada vez. Renderização HTML → captura de tela: o texto é sempre nítido, facilmente editável, reproduzível e pode ser feito em lote.

Por que a estrutura deve ser simples: O tamanho final de visualização dessas imagens é geralmente 240px de largura (cartão de página web), não 1760px. Com uma redução de 1/7, "seis nós + mini gráficos + barras de esqueleto finas" se transformam em ruído cinza. O requisito mínimo para v2 é: reduzido a 240px, o título e a ideia geral de cada rótulo ainda devem ser legíveis.

Escala de Redução (Memorize Esta Tabela Primeiro)

Largura de Visualização	Redução	Tamanho real do texto de 48px	Conclusão
1760 (PPT em tela cheia)	1:1	48px	Grande, mas aceitável
480 (Imagem grande na web)	1/3.7	13px	Confortável
240 (Cartão da web)	1/7.3	6.6px	Tamanho de verificação de design
190 (Miniatura de lista)	1/9.3	5.2px	Já no limite

Portanto: qualquer texto menor que 40px não deve aparecer, e qualquer elemento com menos de 300px de largura não suporta detalhes.

Regras de Ferro (Violar qualquer uma delas fará com que o resultado não pareça correto)

Tela 1760×1120 (11:7), fundo branco puro, sem gradiente, sem vinheta, sem borda.
As coordenadas das duas camadas externas (casca + painel) devem ser fixas e não alteradas; esta é a única fonte de "profundidade". O cartão de conteúdo branco da terceira camada pertence apenas ao v2; o v3 não o usa, os elementos gráficos ficam diretamente sobre o painel.
A imagem inteira tem apenas 1 bloco de ícone gradiente, 170–200px de lado, e é o elemento visual principal.
Número total de elementos na área de conteúdo ≤ 7 (linhas de conexão e alças não contam). Mais de 7, e eles se transformarão em ruído quando reduzidos.
Texto: Título em 76px, Rótulos em 48–50px, Badge (flutuante) em 44px. Não existem palavras com tamanho 20px.
Matiz de cor bloqueado 200°–250°. A única cor quente #F58A8A só pode ser usada para "alerta".
Sem pessoas, sem perspectiva, sem 3D, sem fotos, sem fundo de ambiente. Todos os retângulos estritamente alinhados aos eixos.
Saída apenas no tamanho 1760×1120, não exporte imagens derivadas reduzidas como 660×420.
Todo texto deve ser texto real (HTML text), não imagem ou path.
Ambas as extremidades de cada linha de conexão devem tocar a borda de um elemento ou outra linha . Antes da entrega, a verificação de conexão do render.py deve ser aprovada (código de saída 0).

Geometria Fixa (Copie, não altere)

Camada	Elemento	left	top	w	h	r
L0	canvas	0	0	1760	1120	–
L1	shell (cartão externo branco)	110	66	1520	968	62
L2	panel (painel azul claro)	140	96	1460	908	50
L3	content (cartão de conteúdo branco)	180	240	1310	644	40
L4	badge (flutuante)	1312	personalizado	320	128	32
–	title (título)	190	132	–	–	76px / 600

Limites derivados (use para alinhar o conteúdo):

Borda direita do painel 1600, borda inferior 1004; borda direita do cartão de conteúdo 1490, borda inferior 884.
A borda inferior do cartão de conteúdo até a borda inferior do painel deixa uma faixa azul de 120px (1004 − 884).
Borda direita do badge 1632, ultrapassando o painel em 32px — isso é "quebrar a moldura", não o coloque de volta dentro do cartão.
Largura útil da área de conteúdo = 180→1490, menos 60px de padding interno em cada lado = 1190; os elementos devem ser colocados entre 240–1430.
O badge ocupa o espaço após 1312; a borda direita dos elementos de conteúdo não deve ultrapassar 1230, ou serão sobrepostos.

Gradiente do painel (deve terminar em #F5FAFF, não mais claro):

background:linear-gradient(180deg,#E4F1FF 0%,#E9F4FF 34%,#F2F9FF 74%,#F5FAFF 100%);

Tamanhos Mínimos de Elementos (v2)

Elemento	Tamanho	Descrição
Bloco de gradiente	170–200 de lado	Ocupa 10–11% da largura, a maior área de cor da imagem
Faixa larga	910×152	Use uma faixa para cada camada, coloque "ícone + nome da camada"
Nó regular	330×132	Três em uma linha, espaçamento de 35
Cartão de saída pequeno	360×120	Três em uma linha, espaçamento de 40
Badge	320×128	Ícone de 46 + texto de 44px
Ícone	50–54	`stroke-width 2.2`, muito fino e desaparece na redução
Linha de conexão	4px	`dasharray 12 10`, seta com triângulo isósceles
Alça de seleção	20×20	`border 3px`, centro alinhado com o canto do nó

Fluxo de Trabalho

Etapa 1 · Título Longo → Título Curto + Badge

Pegue o nome da funcionalidade, reduza para 4–6 caracteres chineses: "Visualização de Documentação Técnica e Base de Conhecimento-…" → "Geração de Imagem de Documentação".
Texto do badge 4 caracteres (320px só cabe 4 caracteres de 44px), deve transmitir uma "promessa": "Inserir com Um Clique", "Apenas Esta Parte", "Layout Não se Altera", "Parcialmente Editável".
Escreva uma frase de exemplo real, não escreva "texto de exemplo" .

Etapa 2 · Escolha o Layout

Características do Título	Layout	Template
Um núcleo → múltiplas saídas, irradiação de capacidade, um hub N cenários	D Ramificação Central (v3)	`assets/template-d-orbit.html`
A→B→C três etapas, Upload→Análise→Armazenamento, Construir→Testar→Publicar	E Pipeline Circular (v3)	`assets/template-e-pipeline.html`
Entrada → Geração → Múltiplas saídas, Transformação, Organização (precisa de rótulos de texto para explicar)	B Fluxo de cima para baixo (v2)	`assets/template-b-flow.html`
Explica tanto "gerar com uma frase" quanto "editar após geração" (precisa de sensação de interface)	C-1 Estado de edição na tela (v2)	`assets/template-c-ui.html`
Arquitetura em camadas (Interface/Serviço/Dados) explicada camada por camada	C-2 Estado de seleção de camada (v2)	`assets/template-c-arch.html`

Detalhes em references/layouts.md. Em dúvida: pontos-chave ≤ 4 use D ou E; a informação precisa ser exibida item por item para usar C-2 (é o mais claro na miniatura).

Etapa 3 · Modifique o Template

Copie um template, altere apenas estes locais, não mexa em nenhuma linha do CSS da casca:

Texto do .title;
Rótulos curtos (2–4 caracteres) em cada item/nó/cartão;
Texto do .badge (4 caracteres) + top (distância vertical entre dois badges ≥40px);
Frases de exemplo nas barras de entrada / balões;
Ao remover um elemento, remova também suas linhas de conexão e setas; caso contrário, deixará pontas soltas;
Ao modificar as linhas de conexão, deve seguir o método "hub + segmentos independentes" descrito posteriormente em "Como desenhar linhas para não quebrar"; não adicione curvas desnecessárias.

Etapa 4 · Renderização

python <SKILL_DIR>/scripts/render.py <input.html> <output.png>

<SKILL_DIR> é o diretório de instalação desta skill (onde o SKILL.md está localizado), não o diretório de trabalho atual — seu cwd geralmente é o projeto do usuário, e escrever scripts/render.py diretamente não encontrará o arquivo.

O script copia o HTML para um diretório temporário ASCII e então chama um navegador headless — caminhos com caracteres chineses fazem o headless falhar silenciosamente, resultando em saída em branco ou imagem antiga. Ele também valida se a saída é 1760×1120 e verifica automaticamente se as extremidades de cada linha de conexão estão soltas — código de saída 3 indica linhas quebradas; não entregue.

Etapa 5 · Autoinspeção em Miniatura (a mais importante)

python <SKILL_DIR>/scripts/preview.py <output.png> --width 240

É obrigatório olhar a miniatura gerada e verificar de acordo com references/checklist.md. O critério de julgamento é apenas uma frase:

Reduzido a 240px, ainda é possível ler o título, a ideia geral de cada rótulo e "qual parte é a mais importante"?

Se não conseguir, reduza elementos, aumente o tamanho da fonte; não tente resolver adicionando detalhes.

v3 · Gráfico (Orientado a Ícones e Elementos Gráficos)

Em uma frase: O que pode ser desenhado, não escreva.

No v2, cada elemento é "retângulo arredondado + ícone + texto", todos isomórficos, então a imagem inteira parece um monte de blocos de fluxo. O v3 muda apenas três coisas — remove o cartão de conteúdo branco, triplica o tamanho dos ícones e deixa os gráficos assumirem a semântica.

Três Regras Rígidas

Não use o cartão de conteúdo branco. Os elementos gráficos flutuam diretamente sobre o painel azul claro; o fundo branco é apenas para itens pequenos como emblemas e badges. Os limites são definidos por sombras, não por contornos.
Ícones ≥ 84px. Largura visual da linha = stroke × tamanho da exibição / 24, alvo de 7–9px (cerca de 1px quando reduzido a 240px).
Rótulos ≤ 4 locais, cada um com 2–3 caracteres. Mais de 4, significa que você ainda está usando texto para explicar — transforme essa informação em um gráfico.

Biblioteca de Ícones (50)

assets/icons.svg é um sprite. Cole todo o conteúdo inline na página para usá-lo:

<body>
  <!-- Cole todo o conteúdo de assets/icons.svg aqui -->
  <svg><use href="#i-database"/></svg>
</body>

Referências externas (<use href="icons.svg#i-database"/>) serão bloqueadas pelo navegador por violação de política de mesma origem em file://, e os ícones desaparecerão completamente na captura de tela headless sem aviso.

python <SKILL_DIR>/scripts/iconlib.py --list            # Lista todos os IDs por grupo
python <SKILL_DIR>/scripts/iconlib.py --preview p.png   # Gera um mural de ícones para seleção

Grupos: Gráficos / Diagramas 12 · Elementos Técnicos 15 · IA e Conteúdo 18 · Interação 5.

Não escreva stroke-width dentro do symbol; ajuste de acordo com o tamanho de exibição:

Tamanho de Exibição	stroke
84–108	1.9–2.0
130–140	1.5
170–190	1.3

Se não encontrar um adequado, troque por um similar; não desenhe temporariamente novas formas — a inconsistência no estilo das linhas estragará toda a imagem.

Peças de Elementos (15)

assets/parts.html é uma página com um mural de peças, cada uma com exemplo real + nome da classe + tamanho. Copie diretamente o HTML + CSS:

Bloco Gradiente · Emblema Circular Branco · Badge quebra-moldura · Cápsula de Rótulo · Moldura de Janela · Pilha de Camadas · Seta Gradiente · Linha Tracejada · Alça de Seleção · Balão de Comando · Progresso Circular · Micro Gráfico de Barras · Textura de Pontos · Estrela · Bloco Selecionado.

Dois Layouts

D Ramificação Central → Um núcleo → Múltiplas saídas. O centro são "três páginas sobrepostas desalinhadas + estrela", não um único ícone.
E Pipeline Circular → A→B→C três etapas. A parte do meio é o único corpo gradiente e é também o primeiro ponto de contato do leitor.

Ambos são montados a partir das peças acima. Para modificar a imagem, basta trocar os ícones e os rótulos de 2–3 caracteres.

Estrutura do Layout v2

B Fluxo de Cima para Baixo (template-b-flow.html) Cápsula de entrada 690×136 centralizada → linha vertical → bloco gradiente 200 → linha vertical até a linha principal → linha horizontal principal se divide em três ramificações → três cartões de saída 360×120. Badge no canto superior direito.

C-1 Estado de Edição na Tela (template-c-ui.html) Bloco gradiente no canto superior esquerdo 170 + barra de entrada 850×118 → placa de fundo azul claro 1160×352, contendo três nós 330×132, nó do meio selecionado → balão de comando abaixo 430×112, conectado ao nó selecionado por uma linha tracejada de 4px. Badge no canto superior direito.

C-2 Estado de Seleção de Camada (template-c-arch.html) Três faixas de camada 910×152 empilhadas verticalmente (espaçamento de 40, grupo inteiro centralizado verticalmente), faixa do meio selecionada com um pequeno bloco gradiente de 104px → dois badges à direita. Menor quantidade de informação, melhor legibilidade em miniatura.

Peças de Elementos v2 (6, suficientes)

Bloco de ícone gradiente — 170–200 / r44–52 / linear-gradient(135deg,#4A9DFC,#5E92F9 45%,#7C6BF5) + ícone linear branco (84–100px, stroke-width 1.6) + brilho suave na borda inferior 0 18 40 rgba(74,157,252,.42), 0 0 40 8 rgba(124,107,245,.14).
Badge — fundo branco 320×128 / r32 + 0 20 48 rgba(31,71,141,.16) + ícone azul de 46px + texto de 44px.
Faixa de camada / Nó — fundo branco + contorno 3px #C9DCF2 + bloco de ícone azul claro arredondado de 90px + rótulo 50px/500. Não coloque barras de esqueleto; escreva texto real diretamente.
Estado selecionado — 5px #4A9DFC + 0 0 0 12px rgba(74,157,252,.11) + alças de 20px nos quatro cantos (centro alinhado com os cantos) + opcionalmente um pequeno bloco gradiente embutido. Não desenhe uma caixa de seleção tracejada (as linhas de conexão a atravessariam).
Linha de conexão — 4px / #A9C7EC / dasharray 12 10, seta é um triângulo isósceles M827 716 h16 l-8 14 z. Não pode usar triângulo retângulo.
Placa de fundo da tela — #F8FBFF / 2px #DDEBFB / r36, agrupa "nós + balões" para evitar que a imagem se disperse.

Como Desenhar Linhas para Não Quebrar

As linhas de conexão são a única parte que requer coordenadas absolutas escritas à mão e são a parte mais sujeita a erros. Faltar algumas centenas de pixels em uma linha ainda faz a imagem parecer "ok"; na imagem original de 1760, não é perceptível sem ampliação, e reduzida a 240px é completamente invisível, até que a imagem já tenha sido entregue e alguém aponte o problema.

As Ramificações Devem ser Divididas em "Hub + Segmentos Independentes"

Errado — um único path que vira e ramifica no meio do caminho, com a linha principal cobrindo apenas a ramificação mais à esquerda:

<path d="M835 652 V690 H435 V716"/>   <!-- vertical → horizontal esquerda → vertical, para aqui -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>            <!-- ponto inicial flutuando no vazio -->

Correto — todos os pontos de intersecção coincidem no nível dos endpoints:

<path d="M835 652 V690"/>    <!-- linha vertical até o hub (835,690) -->
<path d="M835 690 H435"/>    <!-- metade esquerda da linha principal -->
<path d="M835 690 H1235"/>   <!-- metade direita da linha principal -->
<path d="M435 690 V716"/>    <!-- três ramificações, o y inicial é igual ao y da linha principal -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>

Três regras:

Um path faz apenas uma coisa: ou desce reto, ou atravessa horizontalmente. Não vire no meio do caminho e depois ramifique.
As extremidades da linha principal devem ser iguais aos x da ramificação mais à esquerda e mais à direita; esses três números devem ser literalmente iguais no código. Altere um lado e o outro deve ser alterado também.
O y do ponto final da ramificação = top do cartão − 14 (14 é a altura da seta), o y inicial da ramificação = y da linha principal.

A Verificação é Automática a Cada Renderização

Após a renderização, render.py chama automaticamente linklint.py: faz o navegador calcular as extremidades reais de cada linha, verifica se cada extremidade toca a borda de algum elemento (≤8px) ou intersecta outra linha (≤3px). Se não, está solta, e as coordenadas são impressas:

[x] 1 endpoint solto encontrado:
    Linha 6, início em (1235,690), distância do objeto mais próximo é 40px  d="M1235 690 V716"

Neste caso, o código de saída é 3. Não entregue. Você também pode verificar separadamente:

python <SKILL_DIR>/scripts/linklint.py scene.html -v

Formas preenchidas, como triângulos de seta e losangos de relação, não participam da verificação (suas bordas inferiores já estão tocando os endpoints das linhas), mas elas são tratadas como alvos conectáveis — portanto, conectar uma linha a uma seta é válido.

Esta verificação só reconhece geometria, não "parece ok". Ela pegou um acidente real: a ramificação direita de uma bifurcação de três vias estava sem um segmento horizontal de 800px, e a imagem inteira parecia completamente normal a olho nu.

Erros Comuns (Todos Já Aconteceram na Prática)

Fenômeno	Causa	Correção
Reduzido a 240px, vira uma massa cinzenta	Elementos muito pequenos, muitos	Reduza elementos para ≤7, aumente o tamanho da fonte para 48px, engrosse os contornos para 3–5px
Barras de esqueleto na miniatura parecem ruído cinza	Usou barras de esqueleto decorativas	Substitua por rótulos curtos reais (2–4 caracteres)
Faixa branca na parte inferior, o painel parece ter apenas uma borda	Gradiente desbotou para `#FBFCFE`	Pare em `#F5FAFF`
Badge sobrepõe o conteúdo	Elemento de conteúdo ultrapassou 1230	Controle a borda direita do conteúdo para estar dentro de 1230
Alça flutuando fora do canto	top escrito à mão não foi reduzido pela metade	`handle.left = x do canto − 10`, `top = y do canto − 10`
Linha tracejada invisível	Ofuscada pelo brilho do nó selecionado	Adicione `z-index:6` ao svg da linha de conexão
Seta torta, parece um triângulo retângulo	Caminho escrito errado	Use triângulo isósceles, veja peça 5
Linha principal horizontal pressionando o cartão	Ponto de bifurcação muito baixo	Fundo do bloco → linha principal ≥38px, linha principal → cartão ≥40px
Espaçamento desigual entre três cartões	left escrito à mão	Arranje equidistantemente e verifique se os centros estão alinhados com as setas
Renderização em branco/antiga	HTML em caminho com chinês	Use `scripts/render.py`
Três imagens com densidades inconsistentes	Tamanhos de elementos escritos cada um de um jeito	Use todos os valores da tabela "Tamanhos Mínimos de Elementos"
Linha quebrada no meio, ramificação solta	Um único path virou e cobriu apenas parte das ramificações	Divida em "hub + segmentos independentes", veja "Como Desenhar Linhas para Não Quebrar"
Linha tracejada do balão tem uma lacuna do nó	Ponto inicial não está na borda do elemento	y inicial = bottom do elemento, use `linklint` para verificar até 0px

Índice de Arquivos

Esta skill é autocontida: os caminhos abaixo são relativos ao diretório onde SKILL.md está localizado, sem necessidade de acessar outros repositórios ou documentação externa.

SKILL.md
├── references/
│   ├── style-tokens.md    Tabela completa de tokens de cores, tamanhos de fonte, bordas arredondadas e sombras (inclui tokens gráficos v3)
│   ├── layouts.md         Diagramas de esqueleto, cenários de aplicação e composição de elementos dos cinco layouts
│   └── checklist.md       Verificação item por item antes da entrega (inclui aceitação da miniatura de 240px e itens específicos do v3)
├── assets/
│   ├── icons.svg          Sprite de 50 ícones lineares (use <use href="#i-xxx"/> após colocar inline)
│   ├── parts.html         Mural de 15 peças gráficas, pode ser visualizado ou copiado
│   ├── template-d-orbit.html      D Ramificação Central (v3)
│   ├── template-e-pipeline.html   E Pipeline Circular (v3)
│   ├── _blank-shell.html          Apenas a casca, use para construir layouts do zero
│   ├── template-b-flow.html       B Fluxo de Cima para Baixo (v2)
│   ├── template-c-ui.html         C-1 Estado de Edição na Tela (v2)
│   └── template-c-arch.html       C-2 Estado de Seleção de Camada (v2)
├── scripts/
│   ├── render.py          HTML → PNG 1760×1120 (tratamento de caminho + detecção de navegador + verificação de conexão)
│   ├── linklint.py        Verifica se as extremidades de cada linha de conexão estão soltas (chamado automaticamente pelo render.py)
│   ├── preview.py         Gera miniatura de 240px para "autoinspeção em miniatura"
│   └── iconlib.py         Lista IDs de ícones / gera mural de ícones
└── examples/              5 imagens finais + arquivos fonte renderizáveis, apenas para referência, não participam da geração

Os textos e gráficos nos templates são exemplos reais funcionais; modificá-los diretamente é mais rápido do que escrever a partir de uma página em branco.

hwcloud-scene-image

O que é hwcloud-scene-image?

Perguntar na sua IA favorita

Documentação