Faz Seis Meses Que Eu Não Abro o Canva

O Canva é bom. Não vim aqui falar mal. Mas lá por setembro do ano passado eu parei de abrir ele — e meu conteúdo no Instagram melhorou.

Não contratei designer. Não descobri nenhum pack secreto de templates. Comecei a criar posts pro Instagram em HTML.

Isso mesmo. Tags <div>. Gradientes CSS. width: 1080px; height: 1080px. As mesmas ferramentas que uso pra construir sites. E o que acontece quando sua ferramenta de design é também seu editor de código? Tudo muda — velocidade, consistência, iteração, e aquela fricção criativa estranha que faz a maioria dos devs evitar redes sociais completamente.

Aqui vai o pipeline inteiro. Sem teoria. Só o workflow que eu uso toda semana.

As Ferramentas

Ferramenta	Papel
Claude Code	Planejamento de conteúdo, geração de HTML, manipulação de imagens
HTML + CSS	A "ferramenta de design" — um arquivo `.html` renderizado no browser
Playwright	Automação de screenshot — renderiza HTML em PNGs de 1080x1080
Figma MCP	Ponte entre código e Figma pra polimento e ajustes

Quatro ferramentas. Zero assinaturas de plataforma de design. O custo total desse pipeline é o que o Claude Code já te custa — que você já paga se tá lendo meu blog.

Passo 1: Planejar o Conteúdo Com Claude

Todo carrossel começa numa conversa.

Eu não abro um HTML em branco e saio digitando <div>. Eu abro o Claude Code e descrevo o que quero fazer. Tema, audiência, número de slides, tom visual, até o arco emocional do carrossel. O Claude não tá só gerando código aqui — ele é um parceiro editorial.

Um exemplo real:

"Quero fazer um carrossel de 5 slides sobre por que eu uso HTML em vez do Canva pra design de Instagram. Tema escuro, audiência de devs. O hook tem que ser ousado e levemente provocativo. O último slide precisa de um CTA claro. Usa meu verde #10B981 como accent."

O Claude volta com uma estrutura de conteúdo — slide por slide, sugestões de títulos, fluxo narrativo. A gente vai e volta. Posso dizer "o slide 3 precisa de um exemplo de código do lado de um preview" ou "suaviza o CTA, mais energia de 'salva isso pra depois'."

Essa é a parte que a maioria das pessoas pula. Vão direto pro design. Mas um carrossel com estrutura ruim fica ruim não importa quão bonito os slides sejam. Acerta o conteúdo primeiro.

Conversa com Claude planejando a estrutura do carrossel — tema, slides, tom e cores da marca definidos antes de qualquer trabalho de design

Passo 2: Mandar Imagens Pro Claude

Às vezes um carrossel precisa de mais que texto e formas. Screenshots de produto, capturas do editor, renders do browser, logos.

O workflow é simples: eu tiro o screenshot (ou pego o asset) e incluo direto na conversa. O Claude enxerga imagens — entende o que tem no screenshot, onde tá a ênfase visual, e como incorporar no design.

Pro carrossel de exemplo desse post, não precisei de imagens externas. Mas quando tô fazendo conteúdo sobre um projeto específico — tipo uma feature nova no DropVox ou um dashboard que construí — eu faço screenshot da UI real e digo:

"Usa esse screenshot como imagem principal do slide 3. Bota um overlay escuro com o título por cima. Mantém o screenshot visível mas não dominante."

O Claude escreve o HTML com a imagem posicionada exatamente onde precisa. object-fit: cover, border-radius, gradientes de overlay — tudo resolvido em CSS.

O insight principal: você não tá fazendo upload de assets pra um gerenciador de uma ferramenta de design. Tá só referenciando arquivos de imagem em HTML. O que significa que seu workflow continua no filesystem, no git, no terminal. Onde devs já vivem.

Passo 3: Claude Escreve HTML — E Isso É o Design

Essa é a parte que surpreende as pessoas.

O Claude não gera um arquivo do Figma. Não cospe um PDF ou um documento do Sketch. Ele escreve um arquivo HTML. Uma página HTML autocontida, com estilos inline, exatamente 1080x1080 pixels, que parece um post de Instagram quando você abre no browser.

Código na esquerda, preview ao vivo na direita — o HTML É o design, sem etapa de conversão

O HTML de um slide individual é algo assim:

<body style="
  width: 1080px;
  height: 1080px;
  background: #0a0a0a;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px;
">
  <div class="accent-line"></div>
  <span class="tag">Developer Workflow</span>
  <h1>I Use <span class="gradient">HTML</span>
      to Design Instagram Posts</h1>
  <p class="subtitle">
    No Canva. No Photoshop. Just code.
  </p>
</body>

Isso. CSS cuida dos gradientes, da escala tipográfica, do espaçamento, do tema escuro. Não é wireframe — é o design final. Quando você abre esse arquivo no Chrome, o que vê é o que vai ser exportado.

Por Que Isso Funciona Melhor Do Que Parece

Controle de versão. Cada slide é um arquivo. Cada mudança é um git diff. Posso voltar pra versão de terça do slide 3 sem pensar duas vezes.

Geração em lote. "Gera 5 slides seguindo essa estrutura" é um único prompt. O Claude produz todos os cinco HTMLs numa resposta. Tenta fazer isso no Canva.

Consistência. Mesmas variáveis CSS, mesma stack de fontes, mesma paleta, mesma escala de espaçamento — em todo post, toda semana, pra sempre. Nada de "qual template eu usei da última vez?" O stylesheet é o template.

Velocidade. Um carrossel completo de 5 slides leva uns 10 minutos de "tive uma ideia" até "tenho 5 PNGs na pasta de export." A maior parte desse tempo é a conversa de planejamento, não o design.

O Passo do Screenshot

A conversão de HTML pra PNG é uma linha de automação. O Playwright (o framework de testes de browser) renderiza o HTML em exatamente 1080x1080 e exporta um PNG:

const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1080, height: 1080 });
await page.goto('file:///slides/slide-1.html');
await page.screenshot({ path: 'export/slide-1.png' });

Cinco slides, cinco screenshots, feito. A saída é pixel-perfect porque é um render real do browser — não a interpretação de uma ferramenta de design de como o browser faria. As fontes são reais. Os gradientes são reais. O anti-aliasing é real.

Passo 4: Manda Pro Figma via MCP

Aqui fica interessante.

Na maioria das vezes, o output do HTML é bom o suficiente pra postar direto. Mas às vezes eu quero ajustar algo que é mais rápido visualmente — empurrar um bloco de texto, testar um peso de fonte diferente, ver como o slide fica do lado dos posts existentes no meu grid.

Aí entra o Figma MCP.

O pipeline: HTML + CSS no seu editor, passando pelo Figma MCP pro polimento, até PNGs prontos pro Instagram

O servidor MCP do Figma permite que o Claude Code empurre designs diretamente pro Figma. Uma chamada de ferramenta captura o HTML renderizado e cria como um frame no Figma. A partir daí, posso:

Ajustar tipografia — testar pesos, tamanhos, alturas de linha visualmente
Refinar espaçamento — às vezes 80px de padding parece certo no código mas fica estranho no celular
Checar o grid — ver como esse post fica do lado dos últimos três no perfil do Instagram
Exportar variações — cortes diferentes, versões pra stories, quadrado vs. retrato

A palavra-chave é "refinar." Não tô redesenhando no Figma. Tô polindo. O trabalho criativo aconteceu na conversa com o Claude e na geração do HTML. O Figma são os últimos 5%.

Passo 5: Trazer de Volta do Figma Pro Código

O loop fecha. Se eu fiz mudanças significativas no Figma — tipo descobrir que um heading de 48px funciona melhor que 44px, ou que o gradiente fica melhor num ângulo diferente — eu puxo esse contexto de volta pro Claude Code usando a ferramenta get_design_context do Figma.

O Claude lê o frame do Figma, vê o que mudou, e atualiza o template HTML pra bater. O código continua sendo a fonte de verdade, mas aprende com os ajustes visuais.

Isso importa pra consistência nos posts futuros. Se eu aumento o heading no Figma porque ficou pequeno demais no celular, essa mudança se propaga pro template HTML. O carrossel da semana que vem já herda a melhoria automaticamente.

O Carrossel Completo

Aqui tá o que saiu desse exato workflow — os slides que usei como exemplo ao longo do post:

Slide de abertura — hook ousado com texto gradiente em fundo escuro

Slide de CTA — pills de recapitulação, título gradiente, call to action claro

Uma conversa. Cinco arquivos HTML. Cinco PNGs. Zero ferramentas de design abertas durante a criação.

Por Que Esse Pipeline Existe

Vou ser honesto sobre a origem.

Não construí esse workflow porque sou otimista de produtividade ou "cara de hack seu workflow." Construí porque sou um dev que precisa postar no Instagram e as ferramentas existentes me faziam não querer.

O Canva exige troca de contexto. Você sai do editor, abre uma aba, navega numa GUI, arrasta coisas com o mouse. Pra alguém que pensa em código, isso é fricção. Não fricção impossível — mas fricção suficiente pra que "devia postar algo hoje" virasse "faço amanhã" que virava três semanas de silêncio.

HTML não tem essa fricção. Já tô no terminal. Já tô conversando com o Claude. "Faz um carrossel de Instagram sobre isso também" é uma continuação natural do meu workflow, não uma interrupção.

A parte do Figma MCP foi a peça final. Antes disso, o pipeline HTML-pra-PNG funcionava mas parecia desconectado do mundo de design. O MCP conectou os dois. Agora transito entre código e design tão fluidamente quanto transito entre frontend e backend.

Dicas Se Quiser Tentar

Começa com um template

Não design do zero toda vez. Monta um template dark com suas cores de marca, stack de fontes e escala de espaçamento. O Claude gera variações dessa base eternamente.

Usa 1080x1080 pra quadrado, 1080x1350 pra retrato

Os dois formatos mais confiáveis do Instagram. Seta o width e height do body de acordo. Retrato ganha mais espaço na tela do feed.

Mantém o CSS simples

Você não tá construindo um web app. Sem media queries, sem breakpoints responsivos, sem JavaScript. Só design visual estático num viewport fixo. CSS Grid e Flexbox são suas ferramentas de layout. Pronto.

Exporta em 2x se quiser texto nítido

A opção scale: 'device' do Playwright renderiza em resolução 2x. O arquivo fica maior mas o texto fica visivelmente mais nítido nas telas de celular com alta resolução.

Versiona seus templates

Bota seus templates de slides num repo git. Acompanha o que funciona. Quando um post vai bem, você sabe exatamente qual template, esquema de cores e estrutura reusar.

A Virada

Criação de conteúdo costumava ser uma disciplina separada do desenvolvimento. Ferramentas diferentes, habilidades diferentes, modo mental diferente. Você passava o dia escrevendo código e depois trocava pro "modo criativo" pra fazer um post de rede social.

Esse pipeline dissolve essa fronteira. O trabalho criativo — o planejamento de conteúdo, o design visual, a consistência de marca — acontece dentro do ambiente de desenvolvimento. Com as mesmas ferramentas. No mesmo flow.

Isso não é hack de produtividade. É a remoção de uma barreira artificial entre duas coisas que sempre foram a mesma habilidade: fazer coisas que comunicam com clareza.

Seu IDE é sua ferramenta de design. Você só não tinha usado ele assim ainda.