Communitygithub.com

tin-computer/tin

Capture uma página de produto ao vivo no tamanho de um smartphone e renderize um vídeo de demonstração narrado no formato 9:16.

O que é tin?

Tin é uma ferramenta especializada em criar vídeos de demonstração de produtos no formato 9:16 (otimizado para redes sociais como TikTok e Reels) a partir de páginas web ao vivo. Diferente de gravações de tela tradicionais, o Tin captura quadros-chave estáveis da interface e o renderizador sintetiza animações suaves de rolagem, toque, zoom e legendas. O fluxo de trabalho inclui planejamento do roteiro, captura de quadros, geração de voz sintética, renderização e entrega do vídeo final em MP4. Suporta a adição de um personagem animado (arquivo SVG), diferentes vozes e idiomas, e múltiplos planos de fundo. É executado através do comando `tin-studio` e é adequado para criar vídeos de demonstração rápidos e profissionais sem necessidade de edição manual.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Procedimento de vídeo de demonstração do produto

Tudo acontece através do tin-studio (execute tin-studio help). Trabalhe no diretório de trabalho do Studio fornecido pelo runtime (chame-o de WORK; execuções da API usam /home/tin-work/studio, execuções históricas do OAuth usam /home/user/.tin-lite/studio); apenas o MP4 finalizado vai para o checkout do projeto. Não há gravação de tela em tempo real: você captura quadros-chave estabilizados e o renderizador sintetiza o movimento de rolagem, toque, zoom e legendas, e é por isso que o resultado é suave.

1. Planejar a história

  1. Leia wiki/INDEX.md (## Produto, mapa de funcionalidades, posicionamento). Leia angle e notes.
  2. Execute tin-studio inspect <product_url> WORK/inspect. Leia o JSON: headings com seus scrollY, actions com selectors prontos (prefira aqueles com inHeader: true para navegação), text, docHeight. Abra WORK/inspect/inspect.png e WORK/inspect/inspect-full.png com seu visualizador de imagens e anote o que cada tela mostra. Inspecione mais uma ou duas páginas se a história precisar (docs, pricing).
  3. Decida o formato que script-format.md descreve: um gancho de no máximo sete palavras que nomeia a dor (angle se fornecido), depois cinco a sete passos. Cada passo é um momento visível com uma linha de voz de no máximo quatorze palavras e uma legenda de no máximo cinco palavras. Marque exatamente uma *palavra* por legenda e no gancho. O último passo termina na chamada para ação que a página realmente oferece (trial, pricing, install) com uma linha [warm]. Discurso total de no máximo 75 palavras.
  4. As afirmações vêm do texto da página ou da memória do projeto; os números devem estar visíveis na tela no passo que os menciona.
  5. Escreva cada linha como um criador falando com o espectador: tempo presente, segunda pessoa, a coisa em si. Nunca narre a página ("a página mostra", "esta seção lista", "o exemplo do site"); diga o que significa para eles ("seu agente ganha seu próprio número"). Escreva quantidades e contagens como palavras, e mantenha os nomes das marcas dentro de uma frase completa.

2. Escrever e capturar

  1. Escreva WORK/script.json no formato do script-format.md.
  2. Execute tin-studio capture WORK/script.json WORK/out. Abra cada WORK/out/frames/kNNN.png com seu visualizador de imagens e verifique: a página carregou (sem tela em branco, sem erro, sem intersticial); nenhum banner de cookies ou popup cobre o conteúdo (adicione um passo click inicial em seu botão de dispensar se um aparecer, ou escolha uma página sem ele); cada rolagem termina onde a legenda espera; cada clique atingiu o elemento pretendido (o quadro-chave click mostra a nova página). Um quadro-chave que está errado é uma correção de script: melhor selector do inspect, scrollTo, um settleMs maior, ou uma página diferente. Recapture até que cada quadro-chave esteja correto.

3. Voz

  1. Execute tin-studio voice WORK/out --voice <voice> --language "<language>". Adicione [excited] na linha do gancho e [warm] na última; caso contrário, frases simples. Cada execução imprime o comprimento do clipe por passo; se um clipe for maior que cinco segundos, encurte essa linha.
  2. A voz é limitada por execução (24 linhas, 3000 caracteres). Reexecutar mantém as linhas inalteradas, então edite uma linha em WORK/script.json, não é necessário recapturar, e execute voice novamente.
  3. Uma linha que o provedor recusa é relatada como REFUSED com o motivo e as outras linhas são mantidas. Um content_policy_violation é o verificador de texto opaco do provedor falhando: primeiro execute voice novamente sem nenhum --style próprio (o estilo padrão é conhecido por passar), depois reescreva essa linha com palavras mais simples e execute voice novamente. Nunca reenvie uma linha recusada inalterada, e nunca gaste mais de duas reescritas em uma linha; descarte-a e deixe a legenda carregar o passo.

4. Visualizar, renderizar, verificar

  1. Personagem: quando character está definido, o arquivo é /home/user/project/characters/<character>.svg; execute tin-studio check nele primeiro. Se estiver ausente ou rejeitado, renderize sem ele e mencione isso na mensagem.
  2. Visualize três quadros antes da renderização completa (gancho, uma rolagem intermediária, o último passo): tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], e novamente em cerca de metade da duração total e no final. Observe: legendas legíveis e centralizadas, o rosto do personagem visível e não cobrindo a legenda, o cartão do telefone mostrando a tela correta, o fundo não conflitante.
  3. Renderize: tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]. Ele imprime a duração. Em seguida, tin-studio check WORK/<slug>.mp4 deve imprimir OK e tin-studio probe deve mostrar 1080x1920 com um fluxo de áudio.
  4. Mais longo que 40 segundos: corte um passo ou encurte as linhas, execute voice novamente, renderize novamente.

5. Entregar

Copie o MP4 verificado para o caminho de saída declarado e nada mais. A mensagem final é o storyboard: gancho, depois por passo a legenda, a linha de voz e o que está na tela; a duração total, voz, fundo e personagem usados; e qualquer afirmação que você suavizou porque a página não suportava.

Regras

Nunca se inscreva, faça login, preencha um formulário ou pressione comprar, enviar, excluir, convidar ou contatar. Não use nenhuma conta. Não capture páginas atrás de um login. Não edite o DOM da página para simular um estado. Não crie nenhum arquivo no checkout do projeto além da saída declarada.

Habilidades Relacionadas