Claude Code + Playwright + ChatGPT

Gere um entregável completo
em um único prompt

O mesmo comando que usei pra produzir 100 páginas visuais do zero — planejamento, geração de imagens no ChatGPT, controle de qualidade, PDF e app. Só preencher o seu nicho e a sua oferta.

Copiar o prompt ↓

O que o prompt faz

Ele transforma o Claude Code num operador de produção. Você dá os dados da oferta, ele executa do início ao fim sem ficar te perguntando.

1
Planeja o produto

Divide o total em blocos de 10 itens, cria título, instrução e conteúdo de cada página e define um estilo visual único.

2
Gera no ChatGPT

Abre o chatgpt.com via Playwright, manda 1 prompt por bloco (10 imagens cada) e baixa tudo em resolução cheia.

3
Faz o QC

Confere texto, ortografia, numeração e consistência. Imagem ruim é regerada sozinha.

4
Monta a entrega

PDF por bloco + livro completo, e um app web com galeria pra você hospedar na área de membros.

Antes de rodar

Três coisas que precisam estar prontas na sua máquina.

A
Claude Code instalado

Terminal aberto na pasta onde o entregável vai ser salvo.

B
Playwright MCP ativo

Adicione com claude mcp add playwright npx @playwright/mcp@latest e reinicie o Claude Code.

C
ChatGPT logado no navegador

Conta Plus ou superior (geração de imagem). Faça login uma vez no navegador do Playwright; ele mantém a sessão.

Campos pra preencher

Tudo que está entre colchetes no prompt é seu. Troque pelo seu contexto antes de enviar.

[SEU NICHO]Pra quem é o produto. Ex: cuidadores de idosos, professores de inglês, crocheteiras.
[NOME DO PRODUTO]Vai no rodapé de toda página. Ex: 100 Brain Activities.
[PÚBLICO]Quem usa o material no dia a dia e onde. Ex: famílias nos EUA.
[PROMESSA]O que a oferta entrega em uma frase.
[IDIOMA]Idioma do texto dentro das imagens. Ex: inglês americano, português BR.
[FORMATO]O tipo de página. Ex: folha de atividade, receita, card, slide, template.
[TOTAL]Quantidade de páginas. Múltiplo de 10 (cada prompt gera 10).
[PALETA]Cores e clima. Ex: lavanda clara + roxo #6A4CE6, limpo, moderno.
[REFERÊNCIA]Caminho de uma imagem de referência de estilo, ou "nenhuma".
[PASTA]Onde salvar tudo. Ex: C:\Ofertas\meu-produto\entregavel

O prompt

Copie, preencha os colchetes e cole no Claude Code. Não precisa mudar mais nada.

prompt-entregavel.md
Você é meu operador de produção de entregáveis. Vou te passar um nicho e uma oferta e você vai produzir o entregável completo, do zero até o PDF final, gerando as imagens no ChatGPT através do Playwright MCP que já está instalado. Não me pergunte nada que dê pra decidir sozinho. Execute do início ao fim e só me chame quando terminar ou se travar de verdade (login, limite de geração).

## DADOS DA OFERTA
- Nicho: [SEU NICHO]
- Nome do produto: [NOME DO PRODUTO]
- Público final (quem usa o material e onde): [PÚBLICO]
- Promessa da oferta: [PROMESSA]
- Idioma do texto dentro das imagens: [IDIOMA]
- Formato de cada página: [FORMATO]
- Quantidade total: [TOTAL] páginas, em blocos de 10 (1 prompt = 10 imagens)
- Paleta / clima visual: [PALETA]
- Referência visual de estilo: [REFERÊNCIA]
- Pasta de saída: [PASTA]

## ETAPA 1 — PLANEJAMENTO (sem me perguntar)
1. Divida o total em blocos temáticos de 10 páginas (ex: 100 páginas = 10 blocos). Cada bloco tem um nome. Cada página tem: número global (01, 02…), título curto, uma linha de instrução, descrição detalhada do conteúdo visual (o que aparece na página, com objetos, quantidades e posições) e uma dica extra curta pro usuário final. Tudo no idioma do material, com variedade real entre as páginas — nada repetido.
2. Salve o planejamento em `prompts/batchXX_nome.json`, um arquivo por bloco, com o campo `style` (estilo compartilhado) e o array `items`.
3. Escreva UM parágrafo de estilo visual compartilhado que vai idêntico em todos os prompts. Ele precisa fixar: proporção e resolução (ex: paisagem 3:2, 1536x1024), cor de fundo, card branco arredondado com sombra ocupando quase toda a página, header com o título dentro de um pill colorido + uma tag pequena à direita, linha de instrução logo abaixo, área principal com ~65% da página, tipografia arredondada grande e legível, caixa de dica no canto inferior esquerdo, e no canto inferior direito o texto "Page XX · [NOME DO PRODUTO]". Sem marca d'água, sem logo, nada fora do descrito. Esse parágrafo é o que faz as páginas parecerem um único produto.

## ETAPA 2 — GERAÇÃO NO CHATGPT VIA PLAYWRIGHT
Para cada bloco, nesta ordem:
1. `browser_navigate` para https://chatgpt.com. Já estou logado. Se cair na tela de login, PARE e me avise — nunca preencha senha.
2. Abra um chat novo e envie UM único prompt (no idioma do material) neste formato:

"Generate 10 SEPARATE images, one for each page listed below, in this exact order. Do not stop until all 10 images are created. Do not ask questions, do not describe them, just generate them one after another.

SHARED STYLE FOR ALL IMAGES (follow exactly, identical on every image):
<parágrafo de estilo da Etapa 1>

IMAGE 1 — Page 01
- Title pill: "…"   Tag: "…"
- Instruction line: "…"
- Main area: <descrição detalhada do conteúdo>
- Tip box: "…"
- Bottom-right text: "Page 01 · [NOME DO PRODUTO]"

IMAGE 2 — Page 02
…até IMAGE 10"

   Salve o prompt enviado em `prompts/batchXX.prompt.json`.
3. Espere as 10 imagens ficarem prontas. Faça `browser_snapshot` a cada ~60 segundos até contar 10 imagens no chat; não interrompa a geração. Se o ChatGPT parar antes de 10, envie "Continue with image N" até completar.
4. Baixe cada imagem em resolução cheia para `imagens/NN.png`, com numeração global (bloco 1 = 01 a 10, bloco 2 = 11 a 20, e assim por diante). Confira que as 10 existem no disco antes de ir para o próximo bloco.
5. Atualize `progresso.json` (bloco atual, páginas geradas, páginas faltando) a cada bloco, para retomar de onde parou se algo cair.

## ETAPA 3 — CONTROLE DE QUALIDADE
- Abra cada imagem gerada e verifique: texto legível, ortografia correta, numeração certa no rodapé, mesmo estilo das outras, sem elemento fora do padrão.
- Página ruim: regere só ela no mesmo chat ("Regenerate image N with the following fix: …") e substitua o arquivo.
- Nenhuma página repetida.

## ETAPA 4 — MONTAGEM DO ENTREGÁVEL
1. PDFs: um por bloco em `pdf/NN-Nome.pdf` e um completo em `pdf/00-Full-Book.pdf`, uma imagem por página, com uma capa simples no início (nome do produto, promessa, quantidade de páginas).
2. App web em `app/index.html`: galeria com thumbs (`app/thumbs/NN.jpg`, ~400px de largura), filtro por bloco, clique abre a imagem grande, botão para baixar o PDF completo. Visual moderno, mobile-first, mesma paleta do material. Sem dependência externa — abre direto no navegador e está pronto pra subir na Vercel.
3. Estrutura final da pasta: `imagens/`, `pdf/`, `app/`, `prompts/`, `progresso.json`.

## REGRAS
- Não pare para pedir confirmação entre os blocos. Só me chame no final ou se travar (login, limite do ChatGPT, erro que você não consegue resolver).
- Sempre `browser_snapshot` antes de clicar ou digitar; clique pela ref do snapshot, nunca por texto adivinhado.
- Se o ChatGPT der limite de geração, salve o progresso, me avise o que falta e como retomar.
- Ao terminar, me mande: total de páginas geradas, caminho dos PDFs, caminho do app e o que precisou ser regerado.

Dicas de quem já rodou

Ir pro prompt