DemoCraft
Uma ferramenta open source para criar demos de produto polidas e reproduzíveis a partir de fluxos reais da aplicação.
- TypeScript
- Playwright
- Remotion
- React
Desafio
Demos de produto geralmente são gravações frágeis e difíceis de reproduzir quando a aplicação muda.
Abordagem
Descrever um fluxo real do navegador em TypeScript, executá-lo com Playwright e renderizar a sequência capturada de forma determinística com Remotion. Uma etapa de discovery transforma a página ao vivo em um mapa semântico, para que agentes e pessoas escrevam a demo a partir da estrutura real da página em vez de adivinhar seletores, e perfis de autenticação gravam aplicações privadas sem colocar credenciais, cookies ou tokens na demo.
Resultado
Um fluxo open source que torna demos de produto polidas reproduzíveis, revisáveis e versionáveis, com um harness de confiabilidade que roda o fluxo completo para demos criadas por agentes.
Demo
MP4 originalArquitetura
Decisões e trade-offs
TypeScript é a única fonte de autoria; o JSON é um formato interno
Uma segunda API pública em JSON obrigaria o usuário a manter duas fontes da verdade sincronizadas.
Editores visuais futuros precisam alterar o código TypeScript em vez de editar um JSON próprio.
A captura é a verdade e o render só a encena
O Playwright registra o que de fato aconteceu, e cada passo dura o maior entre o tempo planejado e o real, então depois da captura o renderizador nunca mais precisa perguntar nada ao navegador.
O preview do studio roda o mesmo player Remotion do render final
O que o studio mostra é o que o MP4 vai conter, sem divergência entre preview e render.
Credenciais ficam fora de toda superfície que a interface enxerga
Essas superfícies ficam visíveis para a interface e potencialmente para um LLM, então a primeira versão aceita só perfis de login interativo.
Importar uma sessão de navegador salva ficou para depois, até existir um jeito seguro de mostrar a quem ela pertence.