Como Estou Criando Conteúdo de Games nas Redes Sociais na Base do Prompt

Há alguns meses venho experimentando uma ideia que mudou completamente a forma como produzo conteúdo para redes sociais: em vez de abrir um editor de design, eu escrevo um prompt. Digito algo como /games-noticia e, minutos depois, tenho um PNG pronto para o Instagram ou um vídeo vertical para o TikTok — sem tocar no Photoshop, no After Effects ou no CapCut.

Neste artigo eu abro o capô e mostro como esse fluxo funciona por dentro: a arquitetura, as tecnologias e por que tratar "design como código" virou meu jeito favorito de publicar.

A ideia central: comando vira fluxo de trabalho

A mecânica toda gira em torno de skills via prompt. Uma skill é um fluxo de trabalho automatizado: eu dou um comando direto e o assistente (Claude Code) executa, de ponta a ponta, todas as etapas que antes eu faria na mão.

O que torna isso possível é a união de duas coisas:

A capacidade de interpretação do agente de IA, que entende o que eu quero a partir do prompt.
Uma arquitetura baseada em arquivos de configuração (JSON) e motores de renderização programática, que transforma dados em mídia.

O assistente roda scripts no backend, busca informações, popula templates e gera a mídia final — sem nenhuma intervenção manual no design. Eu defino a intenção; a máquina cuida da execução.

As skills que uso

Eu separo o trabalho em duas linhas editoriais, com filosofias opostas:

Linha	Skills	Filosofia
Games (engessada)	`/games-noticia`, `/games-curiosidade`, `/games-carrossel`	Template rígido. O assistente preenche dados e renderiza, sem inventar layout.
Profissional (flexível)	`/motion-profissional`	Peças em motion graphics, com liberdade para criar composições do zero.

A linha de games é propositalmente engessada: padrão visual fixo, consistência garantida, velocidade máxima. Já a linha profissional é instrutiva e flexível — serve quando a ideia pede um layout ou animação que os moldes prontos não entregam.

Há ainda uma skill utilitária, a /screenshot-url, que abre uma URL externa (um gráfico, um app) e captura a tela em PNG para reaproveitar em outras composições.

Passo a passo do funcionamento

Quando eu invoco uma skill, o fluxo é mais ou menos este:

1. Invocação e definição (o prompt)

Eu chamo a skill e defino três coisas: a rede social (Instagram, TikTok ou LinkedIn), o tema ou jogo, e o ângulo da publicação ("saiu agora", "você sabia que…", "5 jogos pra quem gosta de X").

2. Busca de dados e assets

O sistema roda scripts utilitários em Python para consumir dados e baixar automaticamente as imagens — capas, artworks, screenshots. O shared/lib/fetch_images.py cuida disso. Quando o conteúdo pede um fundo em movimento, o clip_trailer.py baixa e corta um trecho de trailer do YouTube para servir de plano de fundo.

3. Preenchimento dos dados

O assistente traduz tudo que coletou (mais o texto do post) em um arquivo de dados estruturado. Dependendo da linha editorial, ele edita:

um data.json — para os templates rígidos de HTML/CSS;
um .props.json — para os vídeos em motion graphics.

4. Renderização automatizada

Aqui o formato de saída muda conforme a rede e a skill:

Imagens estáticas (PNG): o script shared/lib/render.js lê o template (HTML/CSS) e os dados (data.json), e usa um navegador automatizado para tirar um "screenshot" da página montada — esse screenshot é a imagem final.
Vídeos (MP4): para TikTok e peças dinâmicas, o sistema usa compositions dirigidas pelo .props.json. O motor renderiza quadros animados com efeitos como Ken Burns e crossfade, gerando o vídeo de forma totalmente programática.

5. Finalização e legendas

Por fim, o assistente escreve a legenda otimizada para a rede escolhida — copy, hashtags e CTA — e salva tudo em um arquivo .md.

O infográfico acima resume a "fábrica de conteúdo": à esquerda, a Linha Games, otimizada para escala e automação; à direita, a Linha Profissional, voltada a autoridade e motion. Tudo converge para o mesmo motor de "design como código".

Como o Playwright transforma HTML em imagem PNG

Essa é a parte que mais me encanta. A linha de games inteira se apoia num truque simples e poderoso: HTML/CSS → Playwright → screenshot PNG.

O Playwright é um navegador automatizado (roda o Chromium em segundo plano). O fluxo é:

Leitura dos arquivos: o shared/lib/render.js lê o template do criativo — construído com HTML e CSS convencionais — junto com os dados do data.json.
Renderização: o Playwright processa o HTML/CSS e injeta os dados (textos e imagens), montando o layout visual completo do post.
Captura da tela: com o visual pronto, o Playwright tira uma "foto" daquela página e salva o resultado como PNG na pasta output/.

Tecnicamente, o render.js injeta o data.json em window.__DATA__, chama window.render(data) e o index.html do template preenche o DOM. Simples assim.

A grande vantagem desse approach: o criativo é versionável, o texto sai sempre perfeito (nada de rasterização borrada), e o mesmo molde serve para infinitos posts. É design tratado como código.

Como o Remotion usa React para criar vídeos

Para vídeo, a história é parecida — mas em vez de Playwright, entra o Remotion (rodando Remotion 4 + React 19). A sacada do Remotion é tratar motion graphics como código React versionável, unindo a lógica de componentes web a uma linha do tempo de vídeo.

Funciona assim:

Compositions são os templates de vídeo, escritos como componentes React em src/compositions/ e registrados em src/Root.tsx.
Props parametrizam cada vídeo. Assim como um componente React recebe propriedades, cada peça é dirigida por um .props.json. Um mesmo molde gera vídeos diferentes só trocando as props.
Primitivos de animação: em vez de HTML cru, uso os primitivos do Remotion — AbsoluteFill para posicionamento, Sequence para sequenciar blocos na timeline, e o hook useCurrentFrame com spring e interpolate para transições matematicamente precisas (entradas com slide + fade, números contando).
Mídia nativa: Img + staticFile(...) para imagens, Audio para som e OffthreadVideo para trechos de vídeo de fundo.
Consistência de marca: toda a estilização consulta um src/theme.ts central — nada de cores hardcoded. Isso garante as fontes e cores certas e respeita a safe zone (a zona segura para o texto não ficar atrás dos botões do TikTok).

Na prática, eu uso o React para programar a entrada, a permanência e a saída de cada elemento na tela, e depois exporto esse código como um MP4 final. Composições como a GameReel9x16 cuidam das notícias de jogos em formato vertical.

O stack completo

Reunindo as peças, o ecossistema fica assim:

Camada	Tecnologia
Agente e orquestração	Claude Code (interpreta os prompts e executa as skills)
Fontes de dados	APIs externas: IGDB (capas, sinopses, gêneros), Steam (jogadores ativos, preço), Twitch e Wikidata
Imagens (PNG)	HTML + CSS clássicos, renderizados no servidor via Node.js com Playwright (Chromium headless)
Vídeo / motion	Estúdio Remotion (React 19 + Remotion 4)
Scripts de apoio	Python (`fetch_images.py`, `clip_trailer.py`)
Configuração e legendas	JSON para as props dos componentes; Markdown para legendas e documentação editorial

Como complemento manual, o ecossistema ainda flerta com After Effects, Rive, Jitter e CapCut para animações pontuais — mas o coração do fluxo é 100% programático.

Engessado vs. flexível: por que ter os dois

A diferença entre as skills engessadas (games) e as flexíveis (/motion-profissional) não é capricho — é estratégia editorial:

Engessadas garantem cadência e identidade visual. Quando preciso publicar três notícias de games por semana, não quero decidir layout toda vez. O template decide; eu só dou o conteúdo.
Flexíveis abrem espaço para criar. Quando a ideia foge do padrão, o /motion-profissional me deixa criar uma composition nova do zero, respeitando a marca, mas sem amarras de molde.

É o mesmo motor de "design como código" servindo a dois propósitos opostos: velocidade de um lado, liberdade criativa do outro.

O que aprendi com isso

Tirar o design manual do caminho mudou minha relação com a produção de conteúdo. Eu paro de gastar energia no como (alinhar pixel, exportar, redimensionar) e foco no o quê (qual notícia, qual ângulo, qual jogo).

Mais do que automação, é uma forma de pensar: se o criativo é código, ele é versionável, reaproveitável e infinitamente escalável. Um template bem feito hoje vira centenas de posts amanhã — todos com texto perfeito e identidade consistente.

E o melhor: tudo começa com uma única linha digitada num prompt.