Se você já gravou o painel do WordPress na mão, conhece o desgaste: um update no admin ou no plugin muda botões e menus, o IDE entra no quadro se a captura for da tela inteira, e repetir o mesmo fluxo vira outro take. Eu passei a pedir o vídeo no chat: o agente sobe o WordPress local, instala o que falta, fecha a trilha e o texto de fala; o Playwright percorre o procedimento no navegador; a voz e o ffmpeg fecham o mp4. Sem filmar o desktop e sem você precisar operar o terminal.
O tutorial em vídeo nasce de um fluxo conversacional com o agente: ele monta a pilha e a trilha; o Playwright executa o procedimento; o render determina o mp4, sem OBS e sem gravar o desktop.
O texto serve a quem já usa um agente no IDE (Cursor ou equivalente) e precisa de prova visual repetível: onboarding, checagem de layout, capítulo de manutenção. O WordPress local pode ser Studio, Local by Flywheel ou outro ambiente descartável. Alinhado ao pilar IA e WordPress: a combinação estratégica de 2026.
Três ideias que sustentam o resto: a trilha é o contrato versionável (passos, pausas, fala); o laboratório é um site WordPress local para ensaiar com segurança; o render é determinístico (TTS + ffmpeg a partir dos arquivos, sem reinventar o roteiro na hora).
O que você precisa
Para acompanhar o raciocínio: WordPress com editor de blocos, noção de agente no IDE, e a diferença entre gravar a tela e gerar um vídeo a partir de contratos.
Para repetir o laboratório (pilha que eu usei em setembro/2026):
- Ambiente WordPress local (Studio, Local ou equivalente) com páginas reais, não Lorem
- Cursor (ou outro agente) para instalar a pilha, fechar a trilha e o texto de fala
- Python 3 e Node (Chromium do Playwright), provisionados pelo agente
- Playwright 1.48, ffmpeg, TTS (voz neural pt-BR ou Piper local)
A barreira não é “saber terminal”. É ter um agente que receba o objetivo (“monte o lab Oficina Norte e grave o procedimento”) e execute a receita. Vale a pena partir de um arquivo de instruções pronto para colar no chat: escopo, pilha, ordem das etapas e limites. Ponto de partida: instruções de partida no GitHub (Gist).
Do chat ao mp4
Na prática, a sessão parece isto:
- Você descreve o objetivo no chat (procedimento no painel, marca sintética, ritmo humano) ou parte das instruções de partida.
- O agente sobe o laboratório local, tema de blocos, páginas de verdade.
- O agente instala dependências (Playwright, ffmpeg, voz), grava a trilha e os scripts.
- O agente dispara a gravação no navegador e devolve o mp4 para revisão.
- Você pede ajustes (“mais calmo no clique Editar”, “narração em português amigável”) e o agente itera.
O valor não é “automatizar um clique”. É passar a operação para o diálogo, com contratos que dá para auditar depois.
A pilha e o contrato
| Camada | Papel |
|---|---|
| Agente | Sobe o lab, instala a pilha e escreve a trilha e o texto de fala |
| Trilha (YAML) | Contrato: passos, superfície, pausas, texto de narração |
| Superfícies | Card 16:9 · terminal sintético · navegador (Playwright) |
| Lab WP | Site WordPress local; login de operador |
| TTS | Voz a partir do contrato de tempo (pt-BR amigável) |
| ffmpeg | Une clipes, áudio e canvas 16:9 |
Fluxo de arquivos: trilha → eventos → narracao → timing → timeline → mp4. Você troca TTS ou card sem reescrever o navegador.
Trecho sanitizado (alinhado ao lab):
passos:
- id: lista-paginas
superficie: browser
admin: true
url_path: "/wp-admin/edit.php?post_type=page"
- id: editor-home
superficie: browser
admin: true
url_path: "/wp-admin/post.php?post=6&action=edit"
- id: pagina-inicial
superficie: browser
url_path: "/"O passo de navegador não é “abrir URL e esperar”. No lab eu forcei fidelidade de procedimento: hover na linha da Home até aparecer Editar, clique, foco no primeiro parágrafo do canvas (iframe do Gutenberg), edição, Salvar, Ver página, e conferência na versão pública. Cursor visível no vídeo (overlay): o modo headless não grava o ponteiro do sistema.
O laboratório Oficina Norte
Neste teste usei WordPress Studio com a marca sintética Oficina Norte (tema Twenty Twenty-Five 1.5, WordPress 7.1.1): Home, Sobre, Serviços, Casos, Contato. O mesmo método vale em Local ou outro site local equivalente.
O procedimento filmado cobre o ciclo de edição de ponta a ponta (lista → editor → salvar → ver página). A narração entra depois, alinhada à trilha ou a janelas do vídeo. O clipe deste post segue esse método.
Para ops em produção via SSH (outro problema, outro artigo): Cursor no WordPress em produção: SSH, WP-CLI e MCP (sem plugin no site). Outros padrões de agente no ecossistema WP: WordPress e WebMCP: formulários como tools para agentes.
Cinco usos além do tutorial longo
- Procedimento de painel — lista de páginas → Editar → salvar → Ver página → versão pública
- Prova de layout — página pública em desktop e viewport estreita com letterbox 16:9
- Onboarding ou demo comercial — capítulos curtos, cada um uma trilha
- Checagem visual — home, páginas-chave, hover das ações da lista
- Relatório ou care plan — cartões HTML 16:9 narrados, sem planilha
Checklist de repetição
- Pedir ao agente um lab local com páginas que valham filmar (ou colar as instruções de partida)
- Fechar a trilha no chat (passos + superfícies + pausas + fala)
- Deixar o agente provisionar Playwright / ffmpeg / voz e gravar com checagens (login, edição, front)
- Revisar o take (ritmo, cursor, Salvar → versão pública)
- Só então publicar o clipe
Limite honesto: o orquestrador desta prova ainda é privado. O que importa para o leitor, agora, é o contrato (YAML + superfícies + render determinístico) e o fato de a operação caber no chat.
Perguntas frequentes
Preciso de OBS para gravar tutoriais de WordPress?
Não. Para tutoriais WordPress em vídeo você não precisa de OBS: o Playwright executa o procedimento no navegador; cartões e terminal sintético cobrem abertura e fecho; o ffmpeg monta o mp4.
Preciso saber usar o terminal?
Não como pré-requisito. O fluxo que eu validei é conversacional: o agente instala a pilha, sobe o lab e dispara a gravação. O terminal existe por baixo; você não precisa operá-lo se o agente estiver no circuito.
Qual a diferença entre trilha e prompt solto?
A trilha é contrato versionável (passos, alvos, pausas, fala). Prompt solto não sobrevive quando a interface do painel muda.
O Playwright substitui o agente?
Não. O agente fecha a trilha, o texto e a operação do lab. O Playwright executa o passo de navegador de forma determinística, inclusive hover e edição no canvas.
A narração precisa nascer no mesmo take do navegador?
Não. Você pode validar o procedimento em silêncio e, no render final, casar a voz com o timing da trilha ou com janelas do vídeo. O produto editorial é o mp4 narrado; a fidelidade nasce do navegador.
Posso usar voz na nuvem?
Sim, se o adaptador de TTS plugar no mesmo contrato de timing. Neste lab usei voz neural pt-BR (e Piper como fallback local).
Dá para apontar o fluxo a um site em produção?
Tecnicamente sim, mas a receita sensata é ensaiar no laboratório local, com estresse e regras claras (o que o agente pode ler, o que exige OK humano, o que nunca roda sozinho). Produção entra com guardrails, não como atalho para pular o ensaio.
Só funciona com WordPress Studio?
Não. Studio foi o ambiente deste teste. Local by Flywheel ou outro WordPress local serve ao mesmo papel: um site descartável (ou de ensaio) onde o Playwright possa gravar com previsibilidade.
Por onde começar
Cole as instruções de partida no agente, peça um site limpo com páginas de verdade, uma trilha de 5 a 8 passos (lista → editor → página pública) e o render a partir dos arquivos intermediários. Se o mp4 só “funciona” com você no chat e sem contratos gravados, ainda não há método.
Para acompanhar o eixo IA + agentes: lista VIP do IA+WP.