Viva Video
A partir de um documento de produto, faça um vídeo preciso, claro, onde cada quadro é gerado por código.
Diferença de cinematic-product-video: aquele usa SeedDance para gerar material cinematográfico, voltado para marca. Este não usa nenhum material gerado, tudo é renderizado por código, voltado para informação. As duas habilidades são independentes, não misture.
Entrega-se o vídeo final, não um storyboard. Quando apenas a alteração de especificações ou prompts for solicitada, limite-se à revisão e validação de arquivos, sem iniciar a geração paga ou renderização completa.
Primeira coisa: Entender o documento. Se isso falhar, todo o resto estará errado
A principal razão para um vídeo não ser claro não é a renderização, é não ter compreendido o documento antes de começar a diagramação. A seção
comprehensiondofilm-rules.yamlé bloqueante, ocompose_spec.pyvai interceptar.
Produzir três artefatos
| Arquivo | Conteúdo | Função |
|---|---|---|
UNDERSTANDING.md | O que é, que problema resolve de quem, cadeia causal do mecanismo, números-chave e suas condições de medição, três perguntas que o espectador deve responder após assistir, o que o documento não afirma, pontos não compreendidos marcados como unknown | Evita que o vídeo diga algo errado ou exagerado |
CLAIMS.md | Cada conclusão em uma linha: claim / origem no documento / mecanismo / benefício / condições limitantes / evidência visual / redação de risco | Cada frase no vídeo deve poder ser rastreada até esta tabela |
CONCEPT_MAP.md | Seções do documento → claim → mecanismo e benefício → sujeito e ação visuais → interpretações errôneas proibidas → evidência necessária para o julgamento | Traduz "o que dizer" em "o que desenhar" |
Ao mesmo tempo, preencha as conclusões em content.yaml em content.understanding, o compose_spec.py as valida.
Feche o documento e responda a estas cinco perguntas
Se não conseguir responder, volte e leia novamente, não prossiga com dúvidas.
- Qual problema esta coisa resolve, como o usuário fazia antes, qual a dor?
- Explique o mecanismo como uma cadeia causal, sem pular etapas.
- Qual número melhor prova a conclusão, sob que condições foi medido, ainda é válido se as condições mudarem?
- O que o espectador pode interpretar erroneamente, como a imagem deve prevenir isso?
- Quais frases no documento são apenas marketing, não podem ser ditas como fatos?
Depois de entender, reorganize, não copie o índice
A ordem deve seguir: Problema → Custo da abordagem antiga → Novo mecanismo → Evidência → Limites de aplicação → Próximos passos. Cada cena fala apenas uma conclusão; conclusão primeiro, depois mecanismo, depois evidência. Quando um termo aparecer pela primeira vez, explique-o em uma frase.
Proibido: usar "grande melhoria", "atualização abrangente", "otimização significativa" no lugar de números específicos já fornecidos no documento; inventar números que o documento não forneceu; apresentar roadmap como já entregue; reescrever código de exemplo de forma mais bonita, mas que não funciona; adivinhar o conteúdo de uma seção pelo título.
O compose_spec.py vai detectar esses clichês e gerar erro.
Ponto de verificação
Antes de escrever content.yaml, apresente ao usuário o UNDERSTANDING.md, o esboço dos capítulos, uma conclusão por capítulo e o protótipo visual pretendido para cada capítulo.
Se a camada factual não for aprovada, não prossiga para a camada visual. Refazer nesta etapa é mais barato, refazer o vídeo final é o mais caro.
Fonte do método: Tabela de decisão de transição, Três ferramentas de foco, Estrutura de energia, Teste dos três metros, Tipografia chinesa — estas seções foram emprestadas de huashu-design (Tio Hua). O que foi copiado, o que foi visto mas não copiado, e por que não foi copiado, está registrado em
references/borrowed-from-huashu-design.md.
Estrutura em três camadas, apenas a camada do meio muda a cada vídeo
| Camada | Arquivo | Ao fazer um vídeo |
|---|---|---|
| Camada de regras | references/film-rules.yaml | Não alterar. O que deve ser feito: entender o documento, uma coisa por quadro, correspondência um a um entre narração e unidade de informação, iluminar quem está sendo falado, zero cortes secos, limite inferior de densidade, invariantes de renderização R01–R30, portas de aceitação Q01–Q38, métodos de medição e limites |
| Pacote de tema | themes/<name>/theme.yaml | Alterar apenas para mudar a aparência. Aparência: derivação de paleta de cores, tamanhos de fonte, coordenadas, desenho de cartões e navegação, curvas de easing, seleção de transições, quantidade de tinta do foco, BPM e instrumentação da trilha sonora |
| Conteúdo do produto | Seu content.yaml | Escreva apenas isso. Compreensão, fatos, capítulos, claims, métricas, recursos da marca, tabela de pronúncia, método de explicação e unidades de informação de cada capítulo |
| Produto sintetizado | video-spec.resolved.yaml | Não editar manualmente, gerado por script |
A linha divisória entre a camada de regras e o pacote de tema é apenas uma: Mudar a aparência não deve poder mudar 'a narração deve corresponder à imagem'.
Os critérios permanecem na camada de regras, a aparência é entregue ao pacote de tema; o theme_contract escreve ambos como listas verificáveis por máquina.
Se o pacote faltar chaves, ultrapassar limites, ou tentar modificar os critérios, o validate_spec.py rejeita imediatamente.
O pacote padrão é daylight (fundo quase branco + cartão branco + gradiente triplo da cor da marca), é a aparência padrão da habilidade.
Como escrever um novo pacote, veja themes/README.md.
SKILL=~/.agents/skills/viva-video
cp $SKILL/templates/content.example.yaml ./content.yaml
# Primeiro entenda o documento, preencha understanding; depois preencha o restante dos TODOs
python3 $SKILL/scripts/compose_spec.py ./content.yaml -o ./video-spec.resolved.yaml # Adicione --theme <nome do pacote> para mudar a aparência
python3 $SKILL/scripts/validate_spec.py ./video-spec.resolved.yaml --self-test
examples/content.viva-video.yaml é um exemplo preenchido (o próprio vídeo de lançamento do viva-video 1.0, 7 capítulos).
Modelos de fala e vídeo: o usuário fornece o que tiver, senão, use apenas suas próprias capacidades
A habilidade não vem com endereços ou chaves de nenhum modelo de fala ou vídeo.
- Se o usuário explicou como chamar seu próprio sintetizador de fala, reconhecimento de fala ou modelo de vídeo (comandos, documentação de API, scripts existentes contam): empacote-o em um comando e escreva em
providers.json. Depois disso,tts.mjs,pron_calibrate.mjs,asr_check.mjs --backend commandusarão esse comando. As chaves ficam apenas em variáveis de ambiente ou na configuração do usuário, não escreva em arquivos de projeto, logs ou mensagens. - Se o usuário não disse: use apenas as capacidades que o agente já possui. Se houver ferramentas de fala disponíveis no ambiente, use-as; senão, produza um vídeo apenas com legendas, sem narração, e marque a verificação de pronúncia como
not_tested. Não adivinhe ou procure endereços e chaves de serviços.
Formato, ordem de busca e tabela de fallback, veja references/providers.md.
As três primeiras coisas ao mudar de produto, a ordem não pode ser invertida
Um: Definir a pronúncia
TTS chinês lê Rspack como uma palavra inglesa inteira, o s no meio é engolido — medido, a transcrição reversa escreve Spac.
A solução é fazer o TTS ler letra por letra, não transliterar o nome para caracteres chineses. Escrita: RS + espaço + o restante da palavra inglesa.
| Exibido | Enviado ao TTS | Lido como |
|---|---|---|
| Rspack | RS pack | R-S-pack |
| Rsbuild | RS build | R-S-build |
| Rstest | RS test | R-S-test |
| Rsdoctor | RS doctor | R-S-doctor |
Medido em 2026-11-04 (voz feminina chinesa, velocidade 1.24, após síntese, transcrição reversa com faster-whisper local):
| Escrita | Transcrição reversa | Julgamento |
|---|---|---|
Rspack | Spac | Não, s perdido |
RS pack | RSPAC | Adotado, total para 4 nomes 7.78s |
R S pack | RS Pack | Usável, um pouco mais longo |
R 斯 pack | OSPAC | Não, o caractere chinês "斯" desvia o R anterior |
R-S-pack | RS Pack | Não, o hífen insere uma pausa, frase inteira 1.5s mais longa |
而斯派克 | 而斯派克 | Não, totalmente sinizado, a palavra inglesa desaparece |
Unidades devem ser expandidas: medido, 915.8 ms foi lido como "915.8 metros". Escreva como "915.8 毫秒".
pronounce.py faz isso automaticamente (só substitui unidades após números).
Abreviaturas em letras (SSR / BFF / SWC / CLI), decimais, porcentagens, números de versão como 3.0 foram medidos e lidos corretamente, não os reescreva desnecessariamente.
python3 scripts/pronounce.py --self-test # 8 testes
python3 scripts/pronounce.py "Análise reduzida de 915.8 ms para 51.6 ms."
node scripts/pron_calibrate.mjs --terms terms.json # Ao mudar de produto/timbre, meça para escolher a escrita
node scripts/asr_check.mjs --spec video-spec.resolved.yaml --voice voice/
Ao mudar de timbre, velocidade ou introduzir um novo nome próprio, sempre execute pron_calibrate.mjs para medir, não copie cegamente as conclusões acima. Diferentes timbres podem ler letras de forma diferente.
Sem uma medição de retorno, não marque a pronúncia como aprovada; passar no ASR não significa que soa natural, sem audição marque como not_tested.
Dois: Definir a cor do tema e o gradiente
python3 scripts/theme_resolve.py --svg brand/logo.svg --out qa/theme-resolution.json
python3 scripts/theme_resolve.py --hex '#F93920'
Seguindo design.theme.resolution_order: especificado pelo usuário → SVG da marca → variáveis CSS do site oficial → cor decorativa do documento → fallback.
A cor bruta obtida é primeiro convertida para OKLCH, luminância limitada a 0.45–0.62, saturação limitada a 0.12–0.22, preservando o matiz original. Quando estiver fora do sRGB, reduza a saturação para mapear, é proibido cortar por canal individualmente — cortar altera o matiz, anulando a normalização.
As três cores de ancoragem do gradiente devem se mover na mesma direção ao longo do círculo cromático, em direção ao ponto de ancoragem magenta (H=350°), com amplitude limitada a 55°–86°, secundária em 40%. Mover em direções opostas faz o gradiente reverter no meio do caminho, parecendo um bug. Alimentando com a cor principal do vídeo de referência, reproduz-se seu próprio #376CFF → #8E33F2 → #E3429B.
Duas rampas: títulos usam a rampa de saturação total, números grandes ≥96px usam uma rampa mais clara (L +0.13, C −0.06) — números grandes ocupam mais área, saturação total sobrepujaria o título.
Escala de contraste: tinta do corpo do texto 4.5, letras grandes na cor da marca 3.0, valores principais ≥96px 2.3 (medido no vídeo de referência entre 2.37–2.86, mais rigoroso embaçaria todo o gradiente).
Vermelho, verde e laranja são cores semânticas, não participam da derivação. Proibido usar vermelho de erro como borda de contêiner ou decoração comum.
Três: Escolher um protótipo visual e um método de explicação para cada capítulo
Prototípo visual é escolhido entre os oito de scene_language.archetypes: grafo de dependências, código mais relações, requisição-resposta, primeiro descobrir depois requisitar, métricas antes e depois, matriz de capacidades, máquina de estados, arquitetura em camadas. Dois capítulos consecutivos não podem repetir o protótipo.
Método de explicação (explanation_mode) é escolhido de explanation_modes.vocabulary, determina se a página se move ou não e como. Primeiro veja o tipo de informação, depois consulte a tabela de seleção (veja a seção "Como explicar informações abstratas" abaixo).
Unidade de informação cada capítulo escreve 3–5 rótulos curtos, que são tanto o limite inferior de densidade quanto o limite superior de "muito conteúdo em uma imagem".
Os três itens são validados pelo compose_spec.py.
Layout: Cheio ou disperso?
O título é sempre em duas partes: "preparação, conclusão"
A primeira parte em tinta, a segunda parte inteira em gradiente. A divisão só pode cair em pontuação. A parte da conclusão deve ocupar 35%–70%.
Simples, linear, | cada passo faz sentido por si só
Declarado uma vez, | verificação em tempo de execução e manual estão prontos automaticamente
Medido na mesma máquina, | roda mais, mais rápido, mais econômico
Em content.yaml, escreva como headline_lead + headline_emphasis, o compose_spec.py valida a proporção e a divisão.
Note que é diferente de title (nome do capítulo): o nome do capítulo vai na página do capítulo e na navegação; headline é o título grande da página de conteúdo.
Orçamento de gradiente: no máximo 1 título + 1 valor principal + 2 palavras-chave por página. Mais do que isso, o gradiente deixa de ser um sinal de ênfase. Gradiente não pode ser usado em fontes <32px (medido, causa faixas de ruptura), não pode receber contorno, sombra, brilho, nem fluir.
Preencha os slots primeiro, o conteúdo-chave vem depois
No primeiro quadro da cena, desenhe todos os slots — bordas do contêiner, título do slot (chip + título + linha separadora), esqueleto do conteúdo, depois altere apenas o conteúdo e a transparência, a caixa delimitadora permanece fixa. O conteúdo-chave (valores, código, rótulos) só é preenchido quando a narração o menciona.
Esta regra resolve três coisas ao mesmo tempo: o layout está cheio desde o primeiro quadro, o espectador não vê uma página vazia "ainda não crescida"; durante o preenchimento não há tremor de re-layout; o primeiro olhar capta a estrutura da página, sabendo quantas coisas serão explicadas.
O esqueleto deve ter título ou estrutura de espaço reservado, não pode ser um retângulo arredondado branco vazio.
O cabeçalho do slot não pode esperar junto com o conteúdo. Um bug medido em 2026-11-05: slots feature e stage
prendiam o título ao evento de revelação do conteúdo, resultando em dois cartões como retângulos brancos no início da página. O cabeçalho pertence ao contêiner, o conteúdo pertence ao ritmo.
Esta regra tem uma medição em nível de pixel (metade prática do R18): O maior retângulo vazio na área de texto do quadro de abertura da cena (no momento em que a transição termina) ≤ 0.26. Apenas medir o quadro de espera não mostra o problema — no quadro de espera a página está obviamente cheia, não se vê o estado semi-vazio dos primeiros oito segundos.
Slots ainda sem conteúdo não devem ser escurecidos. Veja a seção "Foco" abaixo: rebaixar slots vazios para o nível de desfoco faz a página parecer "ainda não crescida", que é exatamente o problema que a pré-alocação de slots visa resolver. Medido, após aumentar os slots vazios de 0.38 para 0.80, o maior retângulo vazio nos quadros de abertura de sete cenas caiu de 0.29–0.62 para 0.058–0.199.
Conteúdo sem moldura deve ser contido
Feedback de usuários: "Sem cartões, fica muito disperso." A regra foi endurecida:
- Cada unidade de informação na área de texto deve pertencer a um contêiner ou grupo com rótulo.
- Apenas três tipos podem ficar sem moldura: lista de pontos-chave logo abaixo do contêiner, uma conclusão no final da página, o kicker e o título no topo.
- Pontos-chave sem moldura devem compartilhar a borda esquerda e a largura com o contêiner adjacente, no máximo 7 colunas de largura, no máximo 4 itens, formato é "número de círculo + título curto em negrito + dois pontos + texto do corpo" na mesma linha.
- Todos os blocos de texto sem moldura na mesma página devem ter apenas uma borda esquerda.
- Se a área ocupada por conteúdo sem moldura exceder 40% da área de texto, deve ser colocado em um contêiner.
Proibido: três ou quatro parágrafos de texto centralizados com espaço branco entre si; usar linhas em branco para "preencher" a distância; mais de dois tipos de borda esquerda em uma página.
Limite inferior de densidade (área de texto [120, 280, 1680, 610])
| Métrica | Limite inferior | Método de medição |
|---|---|---|
| Ocupação do contêiner occupancy | ≥ 0.55 | Caixa delimitadora de objetos da cena |
| Extensão vertical | ≥ 0.72 | Caixa delimitadora de objetos da cena |
| Extensão horizontal | ≥ 0.86 | Caixa delimitadora de objetos da cena |
| Maior retângulo vazio | ≤ 0.14 | Caixa delimitadora de objetos da cena |
| Maior faixa vazia | ≤ 150 px de design | Caixa delimitadora de objetos da cena |
| Unidades de informação independentes | ≥ 3 | Lista de objetos da cena |
| Maior retângulo vazio em quadro estável | ≤ 0.20 | Mapa de borda do quadro estável |
O último item é em nível de pixel. Páginas de capítulo/capa/fim são isentas. Não usar "proporção de pixels não-fundo": este visual é cartão branco sobre fundo quase branco, o preenchimento do cartão se tornaria a cor modal, a métrica inverteria (medido: referência 0.144, versão julgada esteticamente inferior 0.419, direção completamente errada). O mapa de borda não é afetado.
Quando o conteúdo for insuficiente, complemente seguindo density.escalation. Passo 0: verifique se os slots não foram pré-alocados ou o conteúdo não foi colocado em contêineres — a maioria dos casos "vazios" é isso, não falta de conteúdo.
Proibido deixar vazio. Proibido aumentar o tamanho da fonte para preencher o layout. Proibido usar partículas, halos, formas geométricas para fingir unidades de informação.
Use molduras de janela com base na quantidade de informação, não na preferência
Deve usar: quando o conteúdo pertence naturalmente a uma interface (arquivo, configuração, terminal, editor, painel, relatório); quando unidades de informação ≤3 parecem esparsas e precisam de contorno para conter; para expressar a relação de subordinação "nome do arquivo + conteúdo".
Não deve usar: quando há uma forma de representação mais precisa que pode preencher a área de texto; quando os dois quadros anteriores já usaram continuamente; quando o conteúdo é um mecanismo abstrato em vez de uma interface específica.
Se usar, deve preencher: taxa de preenchimento de conteúdo ≥ 78%. Título da janela usa o nome real do arquivo, não "exemplo" ou "demo". Cenas com janela ≤ 50% de todo o vídeo, não mais que três quadros consecutivos com a mesma composição.
Diagramas de relação e fluxogramas
Pelo menos 4 nós e 3 arestas. Nós devem ter título mais uma linha de explicação. Cada aresta direcionada deve ter um rótulo de ação e uma seta, ambas as extremidades ancoradas em pontos de borda de ids de objetos reais, extremidades soltas são um defeito. Deve ter um painel de explicação, ocupando 30%–42% da largura da área de texto: pseudocódigo, fragmento de configuração, tabela de estados, exemplo de mensagem, barra de métricas, sequência de passos (qualquer um). Pseudocódigo com 5–12 linhas, cada linha correspondendo a um nó ou aresta no diagrama, realce síncrono durante a renderização.
Páginas de métricas
Além do valor principal, pelo menos 2 itens de suporte: gráfico de antes/depois, decomposição de componentes, bloco de condições de teste, uma segunda métrica do mesmo mecanismo, a configuração real que gerou a métrica, definição de linha de base. Os gráficos compartilham a linha de base, marcam escalas e valores. Unidades diferentes (qps e ms) devem ser em gráficos ou eixos separados. Ordem: primeiro mostre o valor original e as condições de teste → mude para o novo valor → a melhoria se estabiliza → mantenha estável. Os números devem ser mono-espaçados, unidades fixas, enfatizar apenas uma vez.
Tipografia chinesa: a abordagem ocidental não pode ser copiada
| Regra | Por quê | |
|---|---|---|
| Altura da linha | display 1.15, título 1.35, corpo 1.65 | Caracteres chineses são quadrados de grade cheia, sem o espaço natural entre letras minúsculas ocidentais. Espaçamento insuficiente os torna uma massa confusa. Chinês é cerca de 0.2 mais alto que o ocidental em geral |
| Espaçamento entre caracteres | display (>60px) −0.02em, título 0, corpo 0 | O espaçamento entre caracteres chineses é naturalmente uniforme. Adicionar espaçamento positivo em títulos os torna frouxos, negativo em display pode fazer os traços colidirem. Apenas rótulos ocidentais em maiúsculas precisam de 0.08–0.15em |
| Largura da linha | 22–38 caracteres por linha, ideal 28–32 | Alta densidade de caracteres chineses, a mesma largura carrega mais informação que o ocidental. Linhas muito longas fazem o leitor se perder ao retornar |
| Pilha de fontes | Ocidental primeiro, chinês depois | Correspondência caractere por caractere: fontes ocidentais não contêm pontos de código CJK, os caracteres chineses passam naturalmente para a fonte chinesa. Na ordem inversa, os caracteres ocidentais são todos absorvidos pelos feios caracteres ocidentais das fontes chinesas |
| Ênfase | Mudar o peso da fonte ou adicionar cor de fundo | Chinês não tem itálico, o itálico sintético de navegadores/ renderizadores distorce os caracteres chineses. O negrito sintético também é proibido |
| Aspas | Aspas angulares 「」『』 | Aspas curvas em fontes chinesas são de largura total em espaço, forma ocidental, visualmente flutuam |
| Números | Use a fonte ocidental + tabular-nums | Caso contrário, 1 e 8 não terão a mesma largura e as colunas de dados tremerão para a esquerda/direita |
Fontes mono-espaçadas devem ser verificadas para glifos CJK. JetBrains Mono não tem CJK, os comentários em chinês em janelas de código se tornarão blocos de tofu. A família mono deve adicionar explicitamente um fallback chinês.
Teste dos três metros
Pause em qualquer quadro, a maior palavra na imagem deve ser legível a três metros de distância; reduza o quadro chave ao tamanho de uma tela de celular e ainda deve ser legível. O espectador dá menos atenção a cada quadro de um vídeo do que a uma imagem estática, o tamanho da fonte só pode ser maior, nunca menor. Esta regra e o limite inferior de densidade agem como limites inferior e superior: o limite inferior de densidade evita o vazio, o teste dos três metros evita "encolher a fonte para caber mais".
Um quadro fala apenas uma coisa
Feedback do usuário: Conteúdo, efeitos e narração devem expressar a informação claramente, sem ambiguidade, sem muito conteúdo em uma imagem. Cada regra desta seção pode ser julgada por
motion_audit.py, não são sugestões estéticas.
Orçamento de informação: além do limite inferior, há um limite superior
| Valor | Explicação | |
|---|---|---|
| Limite inferior de unidades de informação | 3 | Abaixo disso, a página está vazia |
| Limite superior de unidades de informação | 5 | Acima disso, o teste de quadro estático de 2 segundos falha |
| Total de texto na área de texto | ≤ 120 unidades de contagem | Caractere chinês conta como um, palavra inglesa conta como um |
| Nova informação por batida | 1 local | Um grupo stagger conta como um |
A contagem é feita pelo contêiner mais externo ou grupo com rótulo, subitens dentro do grupo não contam separadamente. Na página de referência em 01:32, por este critério, eram 3 unidades (janela de código de configuração + grupo de cartões de dispositivo em nuvem + barra de fluxo), mesmo com 5 cartões, ainda conta como 1.
Se exceder, não encolha o tamanho da fonte. Tente, em ordem: dividir em duas cenas → agrupar itens semelhantes em um grupo com título → mover detalhes para o painel de explicação.
O caminho de leitura segue o padrão F, e é mensurável
Em pesquisas de rastreamento ocular, a atenção na área de conteúdo se concentra em três pontos: a faixa superior (kicker e título), a segunda faixa horizontal (primeira fileira do conteúdo principal), a faixa vertical esquerda (a borda esquerda compartilhada). Aplicado a este vídeo:
- Ponto de partida: a primeira unidade de informação revelada na cena deve ter seu centro na parte superior esquerda da área de texto (x normalizado ≤ 0.50, y ≤ 0.45)
- Ordem: o centroide vertical da sequência de revelação nunca diminui monotonicamente, permitindo no máximo um salto de retorno para cima
- Faixa vertical: blocos de texto sem moldura compartilham uma borda esquerda (R14), contêineres se alinham à grade de colunas à esquerda (R13)
- Informação prévia: título, título do slot, as duas primeiras palavras do título do ponto-chave devem carregar informação por si mesmas. Títulos que começam com "Sobre", "Nosso", "Melhor", "Como" são rejeitados diretamente pelo
compose_spec.py.
Medido (dentro de content_box, 12fps, centroide da mudança 1.5 segundos após cada corte):
| Ponto de partida x | Ponto de partida y | Proporção de cortes que se espalham para baixo | |
|---|---|---|---|
| Vídeo de referência | 0.393 ± 0.121 | 0.336 ± 0.126 | 67% |
| Versão anterior julgada esteticamente inferior | 0.660 ± 0.175 | 0.498 ± 0.152 | 48% |
O vídeo de referência começa no canto superior esquerdo e se espalha para baixo; aquela versão começava no centro, um pouco à direita, e se espalhava para fora — essa é uma das causas diretas de "parecer disperso", não relacionada à densidade.
Imagem e narração devem falar sobre a mesma coisa
Cada unidade de informação deve especificar a que frase da narração corresponde, com o tempo de revelação caindo dentro de [início da frase −0.4, fim da frase +0.8] segundos. Se não houver frase correspondente, significa que esta unidade não é mencionada na narração e deve ser removida ou ter a narração complementada.
O texto na imagem são frases de conclusão, nomes próprios, valores, rótulos, não é uma transcrição palavra por palavra da narração — ouvir e ler a mesma frase simultaneamente compete. As legendas são uma faixa independente, não contam para o orçamento de texto.
A narração também deve ter uma coisa por frase
- Uma frase, um fato. Dois fatos, duas frases, não use "ao mesmo tempo" ou "e" para ligá-los. Frase individual ≤ 32 unidades de contagem.
- A primeira frase de cada cena é a conclusão, só depois vêm o mecanismo e a evidência.
- Não use "ele", "isto" para se referir a algo mencionado há mais de uma frase; repita o nome.
- Quando um termo aparecer pela primeira vez, explique-o na mesma frase, não deixe para a próxima.
- Ao dizer um número, na mesma frase ou na imediatamente seguinte, inclua a condição de medição.
- Proibido: leitura de lista de palavras-chave ("mais rápido, mais forte, mais estável"), paralelismo de tom publicitário, três nomes próprios em uma frase, repetir o que já está claramente escrito na imagem.
Copie a narração frase por frase em CLAIMS.md para mapeamento. Frases não mapeadas devem ser removidas ou complementadas com uma conclusão com origem.
Teste de quadro estático de 2 segundos
Pegue o quadro de espera de uma cena, cubra a narração e as legendas, peça a alguém que não conhece o produto para dizer a conclusão da página e o número. Se não conseguir, a página não explicou claramente. Registre por cena: passed / failed / not_tested. Se não fizer, é not_tested.
Como dividir o tempo: primeiro aloque o orçamento de espera, depois organize os efeitos
A duração de um vídeo com múltiplos takes não é dividida igualmente. Esqueleto de quatro partes, a proporção é um requisito rígido:
| Parte | Proporção | Energia | Conteúdo | Requisito rígido |
|---|---|---|---|---|
| Abertura | 8–12% | Baixa | Marca aparece + frase que explica o que o vídeo vai falar | Logotipo fixo, espera ≥1 segundo; quadro 0 é a capa completa |
| Estabelecimento | 10–16% | Baixa a média, a mais lenta do vídeo | Primeiro capítulo, a parte de maior qualidade visual | — |
| Subida | 52–64% | Média alta e baixa alternadas | Uma capacidade por take | Inserir uma página de capítulo a cada 1–2 takes de conteúdo para reduzir a energia |
| Encerramento | 10–16% | Pico do vídeo inteiro | Revisão + número-chave + chamada para ação | Não desaparecer gradualmente, manter a leitura até o último quadro |
Ordem: ① Liste as capacidades e conte o número de takes → ② Primeiro, separe o tempo de espera inviolável (espera do logotipo, pausa para leitura, página de capítulo mantida por 1.1 segundos, final mantido por 2 segundos) → ③ O tempo restante é distribuído para os efeitos → ④ Selecione a transição para cada junção, o tempo da transição é descontado do orçamento dos dois takes adjacentes, não é adicionado ao tempo total.
É proibido ter dois takes consecutivos de alta energia. A página de capítulo é um "cartão de respiração" para reduzir a energia — é de baixa densidade, grande espaço em branco, 2–6 caracteres, não a transforme em mais um take de informação, senão é como se não tivesse inserido.
Lista negra de decorações de template
Estas não são "feias", são "obviamente de um template". Se aparecerem, remova:
Rótulo curto em inglês maiúsculo acima de cada título · strings de pontos conectados como "A · B · C" · setas decorativas no final de botões ou rótulos · mudar a cor de apenas uma palavra em um título · numeração 01/02/03 para conteúdo não sequencial · ícones emoji não relacionados ao mecanismo · cartão arredondado com faixa colorida à esquerda · partículas brilhantes, fluxo de dados, HUD holográfico, neon · fundo escuro com halo neon fingindo tecnologia.
O critério é "ele nasceu do conteúdo?", não "ele parece um template?" Numeração é válida quando é realmente uma sequência (capítulos, etapas de derivação); gradiente é válido quando derivado da cor da marca.
Junções: zero cortes secos em todo o vídeo
Feedback do usuário (2026-11-05): "A transição entre cada capítulo e o próximo deve ser muito natural, não apenas aparecer diretamente, o que parece muito abrupto." Vídeos de lançamento universalmente reconhecidos como excelentes não têm um único corte seco. Para obter o efeito de "corte", use um corte projetado.
Cada junção de cena deve declarar um tipo de transição, cujo tempo é descontado pela metade do orçamento de cada um dos dois takes adjacentes —
a transição não é adicionada ao tempo do vídeo, é emprestada dos dois takes. A janela é [limite − duração/2, limite + duração/2],
durante este período, as duas cenas estão na tela simultaneamente.
| Takes adjacentes | Usar | Duração | Como fazer |
|---|---|---|---|
| Capa → Página de capítulo | Crossfade | 0.62s | Capa desaparece e gradualmente desfoca, o número do capítulo simultaneamente se resolve a partir do desfoque |
| Texto principal → Página de capítulo | Crossfade | 0.58s | Enquanto a página anterior desaparece, o número do capítulo entra desfocado, duas coisas na mesma janela |
| Página de capítulo → Texto principal | Varredura prisma | 0.92s | Número amplia e desfoca → faixa de luz arco-íris varre em diagonal → a próxima página já está formada atrás da faixa de luz, conteúdo-chave ainda não exibido |
| Texto principal → Final | Crossfade | 0.62s | Igual acima |
| Texto principal → Texto principal (mudança de take dentro do mesmo capítulo) | Revezamento de desfoque | 0.50s | Apenas mude o desfoque, sem deslocamento horizontal |
Varredura prisma: cobrir a tela inteira com um véu fino de surface_tint (pico 0.62), uma faixa de luz de 1420 de largura varrendo a 17°,
as cores de parada são cor principal 0.34 → cor de ênfase secundária 0.30 → accent 0.26. Proibido flash branco, apagamento de tela inteira, virar página, girar.
Junções grudadas nas pausas da narração (move on pause): apenas antecipe, não atrase, limite de 0.8 segundos. O custo para o espectador mover o olhar durante uma pausa auditiva é o mais baixo.
Julgamento (R27): Amostre a janela da junção a 12fps, calcule a mudança quadro a quadro da tela inteira; a mudança de um único quadro não pode exceder 0.55 da mudança total da janela. Um corte seco concentraria mais de 90% da mudança em um quadro. Medido, as sete junções desta versão caíram entre 0.155–0.35.
A capa deve ser o quadro 0. O player usa t=0 como pôster; se o quadro 0 estiver em branco, a capa não existe. Portanto, a capa não cria movimento com a entrada de elementos — os elementos estão todos lá desde o início, o movimento vem de três coisas que não alteram a caixa delimitadora: um círculo concêntrico estático, duas varreduras de luz, e quando a narração menciona uma direção, o rótulo correspondente acende. O julgamento é: a taxa de cobertura de borda da área de texto no quadro 0 ≥ 0.90 vezes a do quadro de espera da capa. Até as decorações devem estar no lugar no quadro 0 — medido, ao fazer o círculo aparecer gradualmente de 0→1, essa proporção foi de apenas 0.673.
Foco: ilumine quem está sendo falado, mas o que já foi dito ainda deve ser legível
Feedback do usuário (segunda rodada): "Quando fala de um conteúdo, os outros conteúdos ficam acinzentados, destacando o que está sendo falado." Feedback do usuário (terceira rodada): "Depois de falar, fica imediatamente acinzentado, nem deu tempo de ver direito." "Não embace demais, apenas escureça, mas ainda dê para ver o conteúdo." "Se o conteúdo já falado está relacionado com o próximo, pode não escurecer por enquanto."
Quatro níveis de estado, apenas comprimem a quantidade de tinta, não a nitidez
| Estado | Quantidade de tinta | Desfoque | Cartão | Quando |
|---|---|---|---|---|
| active | 1.0 | 0 | Com sombra, borda da cor principal | A narração está falando dele. Ele é reconhecido por "flutuar", não porque os outros estão borrados |
| read | 0.70 | 0 | Sem sombra, borda normal | Já foi dito. A tinta comprimida visualmente para ~#5A6070, contraste ainda 6:1, legível a três metros |
| waiting | 0.88 | 0 | Normal | Ainda não chegou a vez. Apenas ligeira redução, a página deve parecer cheia |
| settled | 1.0 | 0 | Normal | Narração terminou, página inteira volta ao opaco |
Não use desfoque. Esta regra conflita com "O pacote de desfoco deve incluir blur" do huashu-design; aqui, resolve-se conforme a necessidade de um vídeo informativo: a função do desfoque é fazer o elemento parar de competir pela atenção, mas o espectador de um vídeo informativo ainda precisa relê-lo. O desfoque é reservado apenas para dois lugares — transições entre cenas e a entrada/saída do número da página de capítulo.
Quando começar a escurecer
Início da frase Fim da frase +1.0s +0.8s
|-----------------------|---------------|------------|
active =======================================>
Escurecer [===gradiente===] read
- Uma unidade não pode começar a escurecer antes do final da frase de narração que a menciona (metade da declaração do R30).
- Depois de falar, deixe 1.0 segundo para o espectador terminar de ler, depois use 0.8 segundos para escurecer lentamente.
- A prática antiga era "assim que a próxima frase começa, o foco muda". O espectador ainda está lendo o bloco anterior, a imagem já o removeu.
Blocos relacionados acendem e escurecem juntos
Configuração e seu limite de aplicação, valor e sua condição de medição — pares de conteúdo como esses declaram o mesmo focus_group:
enquanto qualquer um do grupo estiver sendo falado, o grupo inteiro mantém-se active; depois que o último do grupo terminar de ser falado + 1.0 segundo, o grupo inteiro escurece junto.
Julgamento (R28)
Pegue um quadro no momento em que uma unidade perde o foco e o mesmo quadro do quadro de espera, compare a magnitude média do gradiente dentro da caixa delimitadora da mesma unidade. O estado de desfoco deve ser ≤ 0.85 do estado de espera.
Use magnitude média em vez do número de bordas limiarizadas: quando apenas o contraste é reduzido sem adicionar desfoque, o limiar passa ou falha em tudo, a métrica se descola do processamento. A magnitude média varia linearmente com o contraste, com tinta 0.70 mede cerca de 0.70.
Revelação: o conteúdo de suporte está presente desde o início, apenas os itens-chave esperam a narração
Feedback do usuário (terceira rodada): "A caixa do meio está sem conteúdo, a caixa de baixo está sem conteúdo mas ainda tem estilo, parece estranho à primeira vista." "Na verdade, você pode primeiro mostrar o conteúdo sem importância. O importante, revele com efeito de máquina de escrever quando estiver sendo explicado." "Geralmente, só é necessário usar a máquina de escrever para imprimir o conteúdo. Se já foi impresso e depois a linha é mencionada novamente, destaque o fundo."
Esta regra restringe a da segunda rodada ("conteúdo-chave espera a narração para ser preenchido"), não a invalida: Apenas o item-chave de cada unidade espera, não o cartão inteiro.
O que deve ser desenhado desde o início
Cartão, chip, título, linha separadora, rótulo da linha, linhas secundárias, estrutura. Uma unidade deixa apenas um item-chave para esperar a narração — aquele valor, aquele trecho de código, aquele grupo de rótulos.
Use apenas um efeito por linha
| Momento | Usar | Não sobrepor |
|---|---|---|
| Primeira aparição | Máquina de escrever, da esquerda para a direita, caractere por caractere, 0.4–1.0 segundos | Não adicione varredura de luz, nem faixa de cor de fundo, nem faixa colorida à esquerda |
| Quando mencionado novamente | Faixa de destaque de fundo #FFF4D6 + faixa colorida à esquerda de 3px, 0.42 segundos | — |
Destaque é a linguagem de 'mencionar novamente'. Se destacar na primeira aparição, essa linguagem desaparece e o espectador não consegue distinguir o que é novo.
A versão anterior dava a cada linha uma varredura de luz, para atingir "proporção de quadros com mudança ≥ 0.45" — o usuário disse: "muitos efeitos de movimento no texto". Acumular efeitos de movimento decorativos para atingir a cota de movimento agora é rejeitado diretamente.
Quando a tela esqueleto pode ser usada?
Pode ser usada quando o conteúdo realmente precisa esperar para ser explicado e o esqueleto em si é projetado, mas deve atender: ter título e estrutura (não um retângulo arredondado branco vazio), barras de placeholder de larguras diferentes (parecendo o contorno de um conteúdo real), esqueleto não exceder 60% da altura do cartão, os esqueletos de cada cartão não podem ser idênticos.
Narração e imagem devem falar a mesma coisa, esta é a linha de base
Feedback do usuário (terceira rodada): "Certifique-se de que a narração e o conteúdo e os efeitos da imagem são consistentes!!! Esta é a linha de base."
O fracasso da segunda versão foi que a própria declaração estava errada: R22 só verifica se o tempo de revelação cai dentro da janela de tempo da frase declarada, mas nunca verifica se esta frase está realmente falando sobre esta unidade. Assim, o cartão "2.8x" foi vinculado à frase "outro tempo caiu de 12.6s para 4.0s" — aquela frase falava sobre a segunda linha de outro cartão — a janela de tempo, obviamente, coincidia, e o teste passou todo verde.
R29: Correspondência um a um, e o texto deve coincidir
- Cada unidade de informação declara exatamente uma frase de narração.
- Duas unidades não podem compartilhar uma frase, a menos que sejam do mesmo grupo stagger e entrem juntas na mesma batida.
- Cada frase de narração na cena deve ser declarada por alguma unidade, não são permitidas frases órfãs.
- O texto desta frase deve conter a palavra-chave daquela unidade: título do cartão, rótulo da linha, valor, texto do rótulo, nome do arquivo (qualquer um).
Portanto, cada unidade de informação em
content.yamldeve terkeywords.
R30: A imagem segue a narração
Na prática, durante a reprodução de cada frase de narração, deve haver uma mudança visível dentro da caixa da unidade correspondente.
Validação do tempo de renderização (render clock)
O tempo total de renderização de todo o vídeo não deve exceder o tempo real do vídeo multiplicado por um fator de 1.2. Se exceder, emita um aviso e pare.
Como fazer uma versão menor (snippet) para um par de métricas
Quando o usuário tem apenas 2–3 métricas e quer um clipe de 15 segundos, não siga o fluxo completo acima. Use snippet-video:
SKILL=~/.agents/skills/viva-video
python3 $SKILL/scripts/snippet.py --metric "taxa de transferência: 1200 qps" --metric "latência: 12ms" -o ./snippet
O script gera um único take: barra comparativa antes/depois + condições de teste + resultado, sem capa, sem página de capítulo, sem transição complexa.
Como escrever um novo pacote de tema
Veja themes/README.md e themes/example/theme.yaml. As regras são:
- Não repita nem modifique as invariantes da camada de regras (R01–R30, Q01–Q38).
- Forneça todos os tokens visuais: paleta de cores, tamanhos de fonte, regras de layout, curva de easing, tipo de transição, instrumentação da trilha sonora.
- Passe no
validate_spec.py --self-test.
Um novo pacote de tema não precisa modificar film-rules.yaml.