Texto para Imagem Elegante
- Versão: 1.2.1
- Licença: MIT
- Autor: Evan Song · github.com/Songhonglei
- Repositório: https://github.com/Songhonglei/text-to-elegant-image
Transforma conteúdo Markdown ou texto simples em imagens longas de alta resolução com layout elegante. Funciona gerando um arquivo HTML e capturando a tela com o navegador headless Puppeteer.
Estrutura de Arquivos de Recursos
resources/
├── styles/ # 18 estilos, um arquivo por estilo (contém CSS + exemplo HTML + mapeamento de variáveis de componentes + decoração)
│ ├── 01_cyberpunk.md … 18_vivid.md
│ └── _BASE.md # Estrutura HTML genérica + normas de layout + referência de bibliotecas CSS de código aberto
└── components.css # Biblioteca de componentes visuais genéricos (cartão KPI/barra de progresso/barra de comparação/donut/fluxo/linha do tempo, etc.)
Disciplina de leitura: leia apenas os arquivos necessários. Após determinar o estilo, leia apenas os dois arquivos styles/NN_key.md + styles/_BASE.md. Não leia outros arquivos de estilo. Leia components.css apenas quando o conteúdo contiver dados/fluxos/comparações.
Seleção de Estilo
Total de 18 estilos:
| # | Arquivo | Estilo | Palavras-chave Visuais | Mais Adequado para |
|---|---|---|---|---|
| 1 | 01_cyberpunk.md | Cyberpunk (padrão) | Escuro/Neon/Grade hexagonal SVG | Análise de IA, relatórios de tecnologia, pôsteres modernos |
| 2 | 02_minimal.md | Minimalista Elegante | Fundo branco/serifa/espaço em branco/papel de arroz texturizado | Ensaios literários, diários, conhecimento humanístico |
| 3 | 03_apple.md | Estilo Apple | Cinza claro/vidro fosco/janelas coloridas | Ferramentas de produtividade, resumos, metodologias |
| 4 | 04_cowork.md | Cowork Leve Tecnológico | Branco Apple/azul tecnológico/Hero vidro fosco | Compartilhamento interno, introdução a ferramentas de IA, manuais de produtos |
| 5 | 05_newspaper.md | Jornal/Revista | Bege/granulado de chumbo/impressão preto e branco | Eventos históricos, linhas do tempo, narrativa profunda |
| 6 | 06_bloomberg.md | Terminal Bloomberg | Preto puro/textura CRT/texto laranja brilhante | Relatórios de dados, comparação de indicadores, fintech |
| 7 | 07_ink.md | Rolo de Tinta Chinês | Papel de arroz tingido/vermelho zarcão/linha de pincel horizontal | História chinesa, arte e cultura, estética oriental |
| 8 | 08_steampunk.md | Steampunk | Marrom escuro/engrenagens de cobre/rebitagem celular/manômetro | História industrial, saltos tecnológicos, estética mecânica |
| 9 | 09_xhs.md | Estilo Xiaohongshu | Fundo branco/vermelho oficial/cartão de canto arredondado | Notas de conhecimento, guias de vida, compartilhamento de conteúdo útil |
| 10 | 10_morandi.md | Cinza Nobre Morandi | Base bege quente/cinza esverdeado/barra de cores/espaço contido | Metodologia de marca, resumos, ensaios humanísticos |
| 11 | 11_glass.md | Vidro Fosco | Fundo gradiente colorido/esfera de luz/cartão fosco | Site SaaS, página de evento, introdução de função |
| 12 | 12_palace.md | Estilo Palácio (Gugong) | Base de madeira marrom escuro/vermelho zarcão/dourado/selo meandrinho | História chinesa, festivais chineses, exposições culturais |
| 13 | 13_fresh.md | Verde Natural Fresco | Base menta claro/verde floresta/elementos de folha | Saúde e meio ambiente, estilo de vida, guias científicos |
| 14 | 14_earthy.md | Terra e Madeira Natural | Textura de linho/terracota laranja/cartão de costura artesanal | Café artesanal, estética da vida, história da marca |
| 15 | 15_dreamy.md | Roxo Sonhador Elegante | Base lavanda/gradiente púrpura/estrelas | Beleza e moda, emocional, pôster de evento |
| 16 | 16_macaron.md | Pastel Macaron | Fundo rosa creme/bolinhas/números estilo granulados | Doces e infantil, compartilhamento de vida, votos de feriado |
| 17 | 17_carbon.md | Escuro Minimalista | Fundo cinza carvão/azul esverdeado/números de linha de terminal | Documentação técnica, conteúdo para desenvolvedores, relatórios de dados |
| 18 | 18_vivid.md | Gradiente Vibrante | Gradiente rosa-laranja/blocos fluidos/borda gradiente | Promoção de eventos, marcas jovens, música e entretenimento |
Dois Modos do Estilo Xiaohongshu (Estilo 9)
O estilo 9 possui dois submodos internos, especificados pelo usuário; quando não especificado, o modo A é o padrão:
| Modo | Palavra de Ativação | Estilo |
|---|---|---|
| A — Simples Formal | "simples"/"formal"/"limpo"/"sensação de conhecimento" | Moldura fina de canto pequeno arredondado, números sublinhados, bastante espaço para respirar |
| B — Rico e Animado | "animado"/"rico"/"fofo"/"vida"/"interessante" | Rosa claro de canto grande arredondado, números em círculo sólido, linha decorativa ondulada, rodapé com texto de orientação |
Após a geração, informe ao usuário o modo atual e sugira a possibilidade de alternar:
"Gerado no modo simples. Se quiser o estilo animado, diga 'faça uma versão animada'."
Guia de Seleção de Estilo
Quando o usuário não especificar um estilo, recomende automaticamente com base no tipo de conteúdo e informe as opções disponíveis:
Tendência do Conteúdo → Estilo Recomendado
──────────────────────────────────────
Tecnologia/IA/Análise de Dados → Cyberpunk ou Terminal Bloomberg
História/Linha do Tempo/Narrativa → Jornal/Revista ou Rolo de Tinta Chinês (História Chinesa)
Indústria/Mecânica/Salto Tecnológico → Steampunk
Produtividade/Metodologia/Resumo → Estilo Apple ou Cowork Leve Tecnológico
Literatura/Diário/Humanidades → Minimalista Elegante ou Rolo de Tinta Chinês
Compartilhamento Interno Empresarial → Cowork Leve Tecnológico
Notas de Conhecimento/Guia de Vida → Estilo Xiaohongshu
Metodologia de Marca/Resumo/Alto Nível→ Cinza Nobre Morandi
Site SaaS/Página de Produto/Evento → Vidro Fosco ou Gradiente Vibrante
História Chinesa/Estilo Chinês/Museu → Estilo Palácio ou Rolo de Tinta Chinês
Saúde/Meio Ambiente/Estilo de Vida → Verde Natural Fresco
Café Artesanal/Estética da Vida → Terra e Madeira Natural
Beleza/Moda/Emocional/Romântico → Roxo Sonhador Elegante
Doces/Infantil/Fofo/Recomendações → Pastel Macaron
Documentação Técnica/Desenvolvedor → Escuro Minimalista
Evento/Promoção/Tendência/Jovem → Gradiente Vibrante
Exemplo de texto de recomendação:
"Com base no conteúdo, recomendo o 'Estilo Xiaohongshu' (sensação de nota, bom para compartilhamento) ou 'Estilo Apple' (mais ferramenta). Há 18 estilos disponíveis. Você também pode dizer diretamente qual deseja (ex.: 'Estilo Palácio', 'Morandi', 'Vidro Fosco')."
Correspondência de palavras-chave da preferência do usuário:
- "Sensaçao tecnologia"/"moderno"/"escuro"/"neon" → Cyberpunk
- "Simples"/"branco"/"limpo"/"artístico" → Minimalista Elegante
- "Estilo Apple"/"moderno"/"sensação de produto" → Estilo Apple
- "Leve tecnologia"/"interno"/"azul"/"azul Apple"/"azul tecnologia" → Cowork Leve Tecnológico
- "Jornal"/"revista"/"histórico"/"impressão vintage" → Jornal/Revista
- "Dados"/"finanças"/"terminal"/"Bloomberg" → Terminal Bloomberg
- "Tinta"/"chinês"/"oriental"/"rolo"/"estilo antigo" → Rolo de Tinta Chinês
- "Vapor"/"punk"/"mecânico"/"cobre"/"engrenagem"/"industrial vintage" → Steampunk
- "Xiaohongshu"/"nota"/"recomendação"/"guia"/"compartilhamento"/"vermelho" → Estilo Xiaohongshu (vermelho oficial #FF2442)
- "Morandi"/"cinza nobre"/"baixa saturação"/"quieto"/"alto nível" → Cinza Nobre Morandi
- "Vidro"/"vidro fosco"/"fosco"/"transparente"/"translúcido"/"SaaS" → Vidro Fosco
- "Palácio"/"corte"/"muralha vermelha"/"dourado"/"zarcão"/"estilo chinês" → Estilo Palácio
- "Fresco"/"verde"/"natural"/"hortelã"/"ambiental"/"floresta" → Verde Natural Fresco
- "Terra"/"madeira"/"terracota"/"linho"/"artesanal"/"aconchegante rústico" → Terra e Madeira Natural
- "Roxo"/"sonhador"/"lavanda"/"romântico"/"roxo elegante" → Roxo Sonhador Elegante
- "Macaron"/"rosa"/"pastel"/"doce"/"fofo"/"menina" → Pastel Macaron
- "Escuro"/"preto minimalista"/"conforto visual"/"sensação técnica"/"desenvolvedor" → Escuro Minimalista
- "Gradiente"/"vibrante"/"tendência"/"jovem"/"colorido"/"dinâmico" → Gradiente Vibrante
Modos de Layout (Imagem Longa / Pôster)
Por padrão, gera uma imagem longa (560px de largura, múltiplos blocos verticais). Quando o usuário disser "pôster"/"pôster de citação"/"capa"/"imagem principal", alterne o layout:
| Layout | Palavra de Ativação | Especificações | Pontos-chave de Layout |
|---|---|---|---|
| Imagem Longa (padrão) | "imagem longa"/"imagem grande"/não especificado | Largura 560px, altura adaptável | Área de título + múltiplos blocos de conteúdo, suporta conteúdo completo |
| Pôster de Citação | "pôster"/"citação"/"imagem para compartilhar" | Largura 600px, altura 800px fixa (3:4) | Uma citação central ampliada + bastante espaço em branco + fonte pequena para atribuição, conteúdo restrito a 30 caracteres |
| Cartão de Capa | "capa"/"imagem principal" | Largura 600px, altura 800px fixa (3:4) | Título grande + subtítulo + 2-3 frases curtas de destaque, ritmo de imagem principal do Xiaohongshu |
Modo Pôster/Capa: Escolha qualquer um dos 18 estilos para usar suas cores e atmosfera. Altere .container para width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; com altura fixa e layout centralizado; o comando de captura de tela deve passar --fixed-height 800 para ignorar a autoadaptação de altura, largura deve ser 600, ou seja:
node scripts/export_image.js <html> <output.png> 600 --fixed-height 800
Modo imagem longa (padrão) não passa
--fixed-height; o script mede automaticamente a altura real do.containere corta o espaço em branco extra na parte inferior. Margem da moldura: O modo imagem longa adiciona por padrão uma moldura uniforme de 32 px nos quatro lados da tela (esquerda/direita geradas pelo canvas mais largo +margin:auto, superior/inferior forçadas por padding do body), com os quatro lados equidistantes, sem encostar nas bordas — nenhum parâmetro manual necessário. Quando desejado, use--frame <px>para personalizar a margem (ex.:--frame 48), ou--frame 0para desligar a moldura e voltar ao conteúdo encostado nas bordas. Layouts fixos (--fixed-height) têm o contêiner ocupando toda a tela com espaçamento interno próprio e ignoram automaticamente--frame. Fundo do cartão: Os 18 estilos de.containervêm por padrão com visual de cartão (cor de fundo + borda + cantos arredondados/sombra, cada estilo com suas cores e atmosfera, como borda neon cyberpunk, moldura de papel no estilo tinta, bloco de cor sólida Morandi), combinando com a margem da moldura para criar um efeito de "cartão flutuando na tela" — nenhum parâmetro manual necessário, ativo por padrão. Para a versão antiga de layout plano (conteúdo diretamente integrado ao fundo, sem borda de cartão), use--flatpara desligar:node scripts/export_image.js <html> <output.png> 560 --flat. ⚠️ O fundo do cartão do estilo Vidro Fosco (11_glass) é a própria textura do vidro fosco;--flatfará com que seu efeito visual principal desapareça, não recomendado para este estilo. Para o cartão de capa, é recomendável adicionar esferas decorativas suaves no canto superior direito/inferior (radial-gradient+ posicionamento absoluto) para equilibrar o espaço em branco alinhado à esquerda, evitando grandes áreas vazias no lado direito.
Fluxo de Execução
Etapa 1: Analisar Estrutura do Conteúdo
Leia o conteúdo do usuário e extraia:
- Título principal, subtítulo
- Citação principal (para exibição ampliada)
- Blocos estruturados (comparação, lista, linha do tempo, etc.)
Varredura de Oportunidades de Visualização (Importante): Examine o conteúdo em busca de números-chave, porcentagens, classificações, tendências, fluxos, comparações, linhas do tempo — estes devem ser convertidos em componentes visuais (cartão KPI, barra de progresso, barra de comparação, donut, etapas de fluxo, linha do tempo, consulte os comentários em resources/components.css), em vez de serem dispostos como texto puro. Se houver 2-3 números-chave, já deve usar um cartão KPI; se houver classificação/comparação, use barras de comparação. Texto com imagens é a chave para a qualidade da imagem longa.
Etapa 2: Ler Recursos de Estilo e Gerar HTML
- Após determinar o estilo, leia
resources/styles/<NN_key>.md(contém CSS do estilo, exemplo de estrutura HTML, mapeamento de variáveis de componentes, injeção de fontes, decoração de destaque) eresources/styles/_BASE.md(estrutura genérica + normas de layout) - Se a Etapa 1 identificar oportunidades de visualização, leia
resources/components.css, copie os trechos de CSS de componentes necessários para dentro de<style>, e copie também o bloco:rootdo "mapeamento de variáveis de componentes" do arquivo de estilo (os componentes usam variáveis--t2e-*para cores) - Se o arquivo de estilo contiver uma seção "injeção de fontes", adicione o
<link>da fonte em<head> - Se o arquivo de estilo contiver uma seção "decoração de destaque", priorize o uso desses elementos decorativos para aumentar o reconhecimento
- Injete o conteúdo na estrutura, gere o HTML completo e salve em
/tmp/elegant_image_<timestamp>.htmlusando a ferramentawrite(o nome da ferramenta éwrite, nãowrite_to_file)
Regras de Tratamento do Rodapé (Importante):
- Quando o usuário não especificar informações do autor: escreva no elemento
.footerdo HTML o valor padrão:<nome da skill> @ <nome do modelo atual>- Ex.:
text-to-elegant-image @ claude-4.6-sonnet
- Ex.:
- Quando o usuário especificar informações do autor (ex.: "autor escreva João"): escreva o texto especificado pelo usuário
- Quando o usuário disser explicitamente para não ter rodapé: não gere o elemento
.footerno HTML, e ao capturar a tela adicione--no-footer
Não escreva no rodapé "Gerado por " ou qualquer identificador de IA.
Etapa 3: Verificação de Dependências e Inicialização (Antes de Cada Uso)
Execute o script de configuração para verificar o ambiente:
bash <diretório_da_skill>/scripts/setup.sh
- Verifica três dependências: Node.js (>= v18), Chrome/Chromium, puppeteer-core
- Se tudo estiver pronto, passa diretamente e imprime
✔ Todas as dependências estão prontas - Se Node.js / Chrome estiver faltando: o script sairá com erro (
exit 1), solicitando a instalação das dependências ausentes (Node.js >= v18 / Chrome ou Chromium) - Se puppeteer-core estiver faltando: o script exibirá "Instalando..." e executará
npm install(a saída da instalação será visível; apenas a dependência de renderização puppeteer-core será instalada)
Quando já estiver pronto, o script retorna rapidamente, sem ônus de desempenho. Recomenda-se executar antes de cada chamada.
Etapa 4: Verificação de Emoji (Obrigatório Antes da Captura de Tela)
É estritamente proibido usar emoji ao gerar HTML — ambientes headless não possuem fontes de emoji coloridas, o que resulta em quadrados pretos ilegíveis. Alternativas:
| Uso original do emoji | Escrita alternativa |
|---|---|
| Ícones de seção (gráfico/esfera de cristal/mapa) | Título em texto puro, usando faixa border-left para diferenciar |
| Marcadores de status (check/cruz/aviso) | Use badges de bloco de cor: <span class="badge-green">Totalmente Automático</span> |
| Símbolos decorativos | Remova ou use elementos decorativos do estilo (folhas/estrelas/selos, etc.) |
| Progresso/seta | Use pseudo-elementos CSS ::before ou texto puro ->, · |
Após gerar, execute a verificação obrigatória:
python3 <diretório_da_skill>/scripts/check_emoji.py <caminho_do_arquivo_HTML>
FALHA (exit 1) → Substitua seguindo os números das linhas de saída → Execute novamente até PASSAR, para então prosseguir para a captura de tela.
Etapa 5: Executar Exportação de Captura de Tela
node <diretório_da_skill>/scripts/export_image.js \
<caminho_absoluto_do_arquivo_HTML> \
<diretório_de_saída>/<nome_do_arquivo>.png \
[largura] [--author "Informações do Autor" | --no-footer]
Configuração do Diretório de Saída (oriente o usuário na primeira utilização):
O diretório de saída é resolvido na seguinte ordem de prioridade (maior → menor):
- Caminho de saída explicitamente passado no comando
- Variável de ambiente
T2EI_OUTPUT_DIR - Valor padrão:
./output(diretóriooutput/no diretório de trabalho atual)
💡 Orientação para primeira utilização: Antes de gerar a imagem longa pela primeira vez, pergunte ao usuário "Em qual diretório você deseja salvar a imagem?"
- Se o usuário não especificar → use o padrão
./output- Se o usuário especificar um diretório fixo → sugira escrever na variável de ambiente para persistência:
echo 'export T2EI_OUTPUT_DIR="$HOME/minhas-imagens"' >> ~/.bashrcDepois disso, não pergunte novamente.
Parâmetros do Rodapé:
| Parâmetro | Efeito |
|---|---|
| Não passar (padrão) | Usa o rodapé já escrito no HTML (consulte Etapa 2) |
--author "Texto personalizado" | Substitui o rodapé pelo texto especificado |
--no-footer | Remove completamente o rodapé |
O script detecta automaticamente o caminho do Chrome/Chromium (Linux/macOS/WSL), aguarda automaticamente o carregamento de webfonts (máx. 8s, CDN inacessível não bloqueia), mede automaticamente a altura do conteúdo para corte preciso, e cria o diretório de saída se não existir. Largura padrão de 600px, saída em alta resolução com 2x de deviceScaleFactor.
Etapa 6: Retornar Resultado e Entregar Imagem
Após a captura bem-sucedida, retorne ao usuário apenas o caminho local do PNG:
Imagem gerada 🎉
Caminho local: <diretório_de_saída>/<nome_do_arquivo>.png
O usuário pode visualizar o PNG diretamente no sistema de arquivos / editor, ou distribuí-lo por conta própria.
📌 Sobre Distribuição Automática (placeholder, não incluso por enquanto) Esta versão de código aberto é responsável apenas pela geração "Texto → Imagem Elegante", não incluindo nenhuma capacidade de envio automático de imagem para canais de mensagens. Para enviar automaticamente a imagem gerada para canais como WeChat / Telegram / Slack, você pode integrar seu próprio Bot / API nesta etapa (versões futuras podem fornecer adaptadores opcionais). Atualmente, solicite ao usuário que baixe manualmente o PNG local e distribua.
Regenerar com Estilo Diferente (Caminho de Baixo Custo)
Quando o usuário disser "mude para o estilo XX" para uma imagem longa já gerada: não reescreva todo o HTML. Leia o novo arquivo de estilo, substitua apenas o bloco de CSS de estilo no <style> e o mapeamento de variáveis de componentes (bloco --t2e-* :root), e substitua em lote os nomes de classe com prefixo do estilo antigo (ex.: mo-*) pelos novos (ex.: fr-*) — os componentes de estrutura dos estilos são isomórficos (header/title/subtitle/section-title/card/item/num/quote/tag/divider/footer), e a substituição é um para um. Em seguida, execute novamente as Etapas 4-6.
Mecanismo de Fallback
Se a captura de tela falhar (por exemplo, navegador não instalado), o script exibirá o caminho do arquivo HTML, orientando o usuário a abri-lo no navegador e imprimir manualmente como PDF/imagem.
Observações Importantes
- O terceiro parâmetro do
export_image.jspode especificar a largura (padrão 600px), saída em alta resolução com 2x de deviceScaleFactor - Não referencie imagens externas; use formas CSS puras ou inline SVG data URI como ícones para evitar falhas de carregamento de rede; o único recurso externo permitido é a CDN de fontes (fonts.googleapis.com, serviço público; com fallback para fontes do sistema, sem bloqueio)
- Caminho de saída:
<diretório_de_saída>/<nome_do_arquivo>.png(diretório de saída padrão./output, configurável com a variável de ambienteT2EI_OUTPUT_DIR, consulte Etapa 5)
Lista de Scripts
| Script | Função |
|---|---|
scripts/setup.sh | Verificação de dependências (Node/Chrome/puppeteer-core), se faltar puppeteer-core, avisa e instala (saída visível) |
scripts/check_emoji.py | Verificação de emoji antes da captura de tela; em caso de FALHA, exibe o caractere e o número da linha |
scripts/export_image.js | Exportação por captura de tela com Puppeteer: espera de fontes + corte preciso por altura + moldura nos quatro lados + controle de fundo do cartão (--flat) + injeção/remoção de rodapé |