Gerador de imagem de capa de artigo dev.to｜Capa pronta em segundos com título e tag

Esta ferramenta cria a imagem de capa de um artigo dev.to na proporção oficial 1000×420 a partir de três campos de texto (título, tag, autor) e uma cor de destaque, e exporta um PNG retina de 2000×840 com Canvas 2D — sem abrir o Canva nem o Figma.

💡 Sobre esta ferramenta

Para quem publica no dev.to com frequência, a imagem de capa costuma ser o ponto que mais consome tempo no fluxo de publicação: abrir o Canva, duplicar o modelo do artigo anterior, trocar o título, ajustar a tipografia, exportar, enviar. São cinco minutos repetidos a cada post — tempo que poderia ser gasto melhorando o próprio conteúdo.

Esta ferramenta reduz esse fluxo a uma única tela: escreva o título, a tag principal e o nome do autor, escolha uma cor de destaque entre quatro (rosa, ciano, menta ou âmbar) e baixe o resultado. O Canvas 2D desenha em proporção interna 1000×420 — a oficial do dev.to — uma barra vertical de destaque de 16 px à esquerda, a tag em pequena legenda no topo, o título quebrado em duas linhas e o nome do autor logo abaixo. O PNG final é exportado em 2000×840 píxeis (quatro vezes a resolução nativa), o suficiente para se manter nítido mesmo em telas retina. O botão Redefinir devolve os campos ao exemplo inicial em português, então você nunca começa de uma tela em branco.

🧐 Perguntas frequentes

P. Qual é o tamanho do PNG gerado? R. O arquivo final tem 2000×840 píxeis, ou seja, quatro vezes a proporção oficial do dev.to (1000×420). O dev.to reduz a imagem na hora de exibir, então o resultado se mantém nítido em qualquer tela.

P. Por que a proporção é 1000×420 e não 1200×630 como no Twitter? R. Cada plataforma usa uma proporção própria para o cartão de pré-visualização. O dev.to renderiza a capa no feed em proporção próxima de 1000×420, e este gerador respeita essa medida exatamente para que a capa apareça inteira sem cortes.

P. O que acontece se o título for muito longo? R. O título é quebrado automaticamente em duas linhas e, se ainda assim não couber, o final é truncado com «...». A tag e o nome do autor ficam limitados a uma única linha. Não há como quebrar o layout pelo campo de entrada.

P. Posso usar uma cor HEX personalizada? R. Não. A ferramenta oferece apenas quatro cores: rosa, ciano, menta e âmbar. A paleta foi propositalmente reduzida porque, em miniaturas pequenas, cores com bom contraste sobre fundo branco funcionam melhor — e ter menos opções faz você decidir mais rápido.

P. Como adiciono o PNG ao meu artigo no dev.to? R. Hospede o arquivo (GitHub raw, um serviço de imagens, seu próprio servidor) e adicione cover_image: com a URL no front matter Markdown do artigo. Também é possível subir pelo controle «Cover image» do editor do dev.to.

P. Para que serve o botão Redefinir? R. Volta todos os campos ao exemplo inicial em português. Útil quando você quer começar outra capa do zero sem precisar apagar manualmente cada campo.

📚 Por que capas tipográficas vencem as geradas por IA, por enquanto

O editor do dev.to agora oferece uma opção de geração de capa por IA. O detalhe é uma limitação bem documentada dos geradores de imagem atuais: renderizar texto preciso dentro da imagem ainda é difícil. As letras saem deformadas, as palavras vêm mal escritas, e a tipografia raramente combina com o tema técnico do artigo.

Um fluxo que a comunidade do dev.to costuma compartilhar é usar a IA para o fundo e depois sobrepor o título com outra ferramenta — HTML, SVG, Figma ou um gerador de capa dedicado. Esta ferramenta leva essa ideia ao extremo: pula completamente o fundo gerado por IA, mantém apenas a tipografia e uma cor de destaque, e produz uma capa na proporção nativa 1000×420 do dev.to com um clique.

As restrições são justamente o ponto: três campos de texto, quatro cores, um clique. A capa fica consistente entre artigos, está pronta em segundos, e o texto exibido é o texto que você escreveu — não o texto que um modelo adivinhou.