pj1433139082-hue/video-design-skills

remotion-consult — Requisito de Vídeo → Sistema de Design de Vídeo

Transforme "como fazer este vídeo" de uma inspiração em uma especificação de engenharia executável: através de esclarecimento, pesquisa e proposta, o resultado final é um DESIGN.md (documento do sistema de design de vídeo, incluindo o contrato tokens.ts) para ser usado diretamente pelo remotion-build.

Classificação de Entrada (ao encontrar "fazer vídeo", primeiro defina o fluxo, não pergunte diretamente)

Quando o usuário disser "fazer um vídeo/criar um vídeo" mas não especificar a categoria, primeiro faça uma pergunta para definir a qual fluxo pertence (consult/build/video-shotcraft — todos os três podem ser acionados por "fazer vídeo", é necessário um desvio explícito):

Intenção do Usuário	Fluxo a Seguir
Criar/alterar qualquer vídeo (voz sobreposta, dados, demonstração de produto, animação de marca,科普, carrossel de imagens/texto)	Seguir este fluxo uniformemente (consult → build); as animações são selecionadas de duas fontes: a biblioteca geral de animações + os cartões de câmera do shotcraft
Mencionar explicitamente o uso do template video-shotcraft (Ink Press) / criação livre / cocriação	Acionar video-shotcraft conforme seu próprio fluxo de Skill (o usuário escolhe explicitamente, não é roteamento automático)
Já possui DESIGN.md / vídeo de referência / reformulação clara	Este fluxo, Fase 0 de pré-verificação entra diretamente

Pergunta de classificação: "O usuário mencionou explicitamente template video-shotcraft/criação livre/cocriação? Não → seguir consult→build uniformemente, os cartões de câmera do shotcraft são usados como biblioteca de animações de referência (não é obrigatório selecionar um cartão para cada frase)."

Quando Usar

• Criar/alterar um vídeo (voz sobreposta, visualização de dados, demonstração de produto, animação de marca).
• Definir a direção do design do vídeo: proporção de tela, estilo de legenda, paleta de cores, fontes, ritmo, transições, animações.
• Necessidade de "sistema de design de vídeo", "video design tokens", "DESIGN.md".
• Requisito vago ("me ajuda a fazer um vídeo"), que precisa ser esclarecido antes de agir.

Mentalidade Central

1. Primeiro a direção, depois os detalhes: Primeiro determine a estética/legenda/sistema de ritmo, depois fale sobre a implementação visual.
2. Não usar templates prontos: O objetivo é produzir uma "impressão digital de ritmo única para este vídeo", não escolher um de uma biblioteca de templates.
3. Priorize a executabilidade: O DESIGN.md deve ser específico o suficiente para escrever diretamente tokens.ts e o blueprint das cenas, não pode parar em "um pouco mais avançado".
4. Honestidade: O texto da legenda não pode inventar dados/fatos.

Fluxo (Executar em Ordem)

Fase 0 — Pré-verificação

• Verificar se workbench/video/{slug}/ já possui DESIGN.md / roteiro de voz / captions.srt; se sim, usar como linha de base, não derrubar e recomeçar.
• Verificar ativos de design entre marcas (fluxo de trabalho "primeiro site, depois vídeo" do usuário): workbench/design-test/{marca}/DESIGN.md (versão web) ou library/AI-tools/design-system-library/{marca}-DESIGN.md → se existir, sua paleta de cores/fontes/emoção são a linha de base do DNA da marca, a versão em vídeo herda e evolui sem recriar (também entrada para a verificação de consistência do sistema de design na Fase 3).
• Verificar restrições da marca (README do projeto, ativos visuais existentes, vídeos de referência).

Fase 1 — Esclarecimento (Obrigatório, Não Pular)

Use AskUserQuestion para esclarecer de uma vez, cobrindo no mínimo 9 itens (não mais de 6 perguntas por vez, pode ser em lote). Os dois primeiros itens são fontes de estilo, é obrigatório perguntar, não pode pular (o usuário pode "escolher automaticamente" para passar rápido, mas é necessário confirmar):

1. Fonte de Estilo (primeira pergunta obrigatória): Design livre / Escolher de sites de referência (mostrar candidatos da video-real-library.md para o usuário selecionar) / Seleção automática de sites de referência (o usuário dá o tema e escolhe automaticamente) / Usuário fornece referência (URL/captura de tela, a mais prioritária).
2. Seleção de Referência (três dimensões complementares, quando usar qual):
   • DESIGN.md da marca (biblioteca de design library/AI-tools/design-system-library/{marca}-DESIGN.md ou DESIGN.md do próprio projeto) → linha de base de tokens de design (paleta de cores/fontes/espaçamento), usado para continuidade/reformulação da marca, não recria o sistema.
   • HTML da Web (site de referência video-real-library / real-design-library) → exemplos de layout/visuais (estrutura/hierarquia/composição), usado quando se deseja uma certa estrutura visual.
   • Vídeos (fonte de animação video-real-library / vídeos fornecidos pelo usuário) → animação/ritmo/estilo de legenda, usado quando se deseja uma certa linguagem de movimento.
   • Complementaridade: DESIGN.md define o sistema → HTML dá exemplos → Vídeo dá animação, os três juntos formam uma direção completa. A referência fornecida pelo usuário tem a maior prioridade. Ao selecionar uma referência, use opencli (mantendo o estado logado) para capturar fontes/valores de cores/ritmo reais, e herde fielmente na Fase 4.
3. O que é o vídeo: Localização em uma frase + para quem é + plataforma de publicação (Douyin/Bilibili/Academia/Interno — decide a linha de base de proporção e ritmo).
4. Âncora de Categoria: Uma das quatro categorias em remotion-shared/categories/ (voiceover-caption/data-viz/product-demo/brand-motion), ou personalizada.
5. Proporção e Duração: 9:16 vertical / 16:9 horizontal / 1:1; duração alvo; se é uma série (série = ritmo deve ser reutilizável).
6. Emoção/Estilo: Profissional contido / Dados nítidos / Narrativa calorosa / Ritmo criativo / Retrô… fornecer 2-3 palavras de direção comparáveis.
7. Forma do Conteúdo (chave para legenda): Já tem roteiro de voz / Já tem .srt/.vtt / Tem imagem e dados / Começar do zero — decide a rota da fonte da legenda.
8. Preferências/Tabus: Coisas que odeia, estilo de legenda (frase por frase/destaque de palavra/sem legenda), linha de base de legibilidade.
9. Verificação de Consistência: A pré-verificação da Fase 0 já possui DNA da marca (DESIGN.md/ativos visuais/vídeos de referência) → se sim, a direção subsequente não pode desviar (evolução contida); se não, design livre.

Se houver video-taste-profile (workbench/video/*/.taste-profile.json ou perfil global), leia-o primeiro. Quando a fonte de estilo = site de referência, a Fase 2 deve capturar os valores reais da referência (chrome-devtools/vision), e a Fase 4 deve herdar fielmente — não abstrair a referência em palavras-chave e improvisar.

Fase 2 — Pesquisa (Só Fazer com Consentimento do Usuário, Pode Ser Paralelo)

Método de pesquisa em três camadas, prioridade da mais baixa para a mais alta:

• Camada 1 Práticas do Setor: Como vídeos similares são geralmente feitos (linha de base segura).
• Camada 2 Novas Tendências: Em contraste com remotion-shared/video-anti-slop.md, pegar 1-2 referências de vídeo reais (remotion-shared/video-real-library.md fontes de referência + referência fornecida pelo usuário tem a maior prioridade), extrair pontos de inspiração de estilo de legenda/transição/ritmo.
• Camada 3 Primeiros Princípios: Mente do espectador, legibilidade da legenda, conteúdo lidera o ritmo — a mais prioritária. Em caso de conflito, registrar explicitamente "por que desviou da prática comum".

A "descrição da referência visual" na proposta deve ser capaz de ser ancorada com exemplos da biblioteca de referências reais (como "estilo de legenda com destaque de palavra similar ao xxx"), não vaga.

Fase 3 — Proposta Completa (Entrega Principal)

De acordo com references/video-proposal-format.md, produzir:

• Direção SAFE (2-3): Linha de base da categoria, segura.
• Direção RISK (2-3): Desvio deliberado, cada uma deve explicar "por que vale a pena + o que se perde".
• memorable-thing: Uma frase de âncora — "um momento visual/de ritmo que quer que o espectador lembre" (ex: "aquela transição de zoom no 3º segundo").
• Cada direção: Palavras-chave estéticas, fonte da legenda, paleta de cores, ritmo da linha do tempo (palavras/segundo, frequência de transição), composição, estilo de transição, descrição da referência visual.

Auto-verificação: Se duas direções são apenas mudar a cor e a fonte, significa que não se diferenciaram o suficiente, refaça.

Verificação de Consistência do Sistema de Design: Se a pré-verificação da Fase 0 detectou um sistema de design de marca existente (DESIGN.md / DNA da marca, como um site ou vídeo já feito), as direções SAFE/RISK não podem desviar do DNA da marca estabelecido (linha de base de paleta de cores/fontes/emoção) — a direção RISK só pode conter desvios contidos dentro do DNA estabelecido (como trocar o matiz da cor de destaque, alterar a estrutura de claro/escuro, trocar o sistema de fontes), não pode derrubar e recomeçar ou pular para um estilo não relacionado. A liberdade criativa só é permitida quando não há sistema existente. Antes de produzir o DESIGN.md, verifique item por item se "paleta de cores/fontes/emoção" são consistentes com a linha de base ou evoluem de forma razoável.

Fase 4 — Sistema de Design (DESIGN.md)

Após o usuário selecionar a direção, escreva o DESIGN.md de acordo com references/video-design-system-template.md, sete seções:

1. Direção Estética: Uma frase de localização + palavras-chave + tabus.
2. Fonte da Legenda: Três níveis caption/title/body + tamanho de fonte de referência da proporção + modo de destaque (word/line/none).
3. Paleta de Cores: Paleta semântica (incluindo captionActive/captionInactive) + limite mínimo de contraste.
4. Ritmo da Linha do Tempo: fps/proporção/duração total + ritmo da legenda + frequência de transição.
5. Composição da Tela: Zona segura + zona de legenda + zona de título.
6. Transições e Animações: Seleção de transição + duração + animação de entrada + easing.
7. Video Design Tokens (tokens.ts contrato, veja remotion-shared/video-tokens-spec.md) + Esboço de Coreografia de Animação (atualizado a partir do blueprint de cena, veja video-design-system-template.md §8): Lista hierárquica de materiais (bg/mid/fg, pode ser montada) + animação de entrada/saída de cada material por frase legenda + animação de fonte + sincronização com voz (combinação audiovisual).

E gerar o contrato tokens.ts (objeto constante TS, nomenclatura semântica) — esta é a única interface para remotion-build. As animações são selecionadas da biblioteca geral e escritas no DESIGN.md (remotion-shared/categories/{categoria}/motion-list.md).

§8ª Seção: Anotação do Núcleo de Renderização (Opcional, Padrão Remotion): O DESIGN.md anota o backend de renderização — padrão núcleo Remotion; quando o usuário menciona explicitamente / o estilo precisa de sensação de página web, anota núcleo HyperFrames (HeyGen open-source HTML→MP4, veja remotion-build/references/hyperframes-guide.md). Decisão: Cartões de câmera complexos / já possui projeto Remotion → Remotion; animações puramente HTML/GSAP, precisa de lint integrado → HyperFrames. O núcleo de renderização só afeta a escrita da renderização do build, todos os materiais/BGM/legendas/aceitação/§8 esboço são reutilizados.

Fase 5 — Pré-visualização + Portão de Aprovação de Amostra de Estilo (Opcional, Padrão Ligado)

Não renderizar o vídeo inteiro. Produzir:

• 3-5 quadros-chave extraídos (npx remotion still <id> --frame=N, cobrindo início/fim/quadro de transição) — para o usuário confirmar a composição e posição das legendas;
• ou 3-5 segundos de amostra de baixa resolução (--scale=0.25) — para o usuário ver o ritmo de movimento real.
• Portão de Aprovação de Amostra de Estilo (inspirado no paper-collage-video style-proof): Após definir a direção, renderize 1-2 frases-chave com amostra real de 3-5s (baixa resolução) para o usuário confirmar — se o estilo/paleta de cores/sensação de animação estão corretos, só após a confirmação entrar na produção do vídeo completo no remotion-build (evita descobrir que a direção do estilo está errada depois de terminar o vídeo inteiro).

Os artefatos de pré-visualização são salvos em workbench/video/{slug}/preview/. O objetivo da pré-visualização é permitir que o usuário tome decisões com base no visual real, não mostrar "eu consigo renderizar".

Linhas Vermelhas

• Proibido Padrões Padrão: Não oferecer ativamente gradiente roxo-índigo, mesmo ritmo de legenda do início ao fim, mesma composição central em todas as cenas.
• Proibido Copiar: Não clonar o vídeo de outros em nível de pixel (pode se inspirar em estilo de legenda/ritmo, não copiar o vídeo inteiro).
• Proibido Inventar: Não fabricar dados, fatos de marca.
• Limite Mínimo de Contraste: Legenda ≥3:1 (incluindo sobre fundo de filmagem real/imagem).
• Limite Mínimo de Tamanho da Fonte na Tela (texto na tela é palavra-chave): Legenda caption ≥64px/800, dados mono ≥44px/700, título ≥88px/900 — proibido texto pequeno em itálico para notas. A única fonte de verdade para os números da regra de ferro = remotion-build/references/video-quality-metrics.md §limiar rígido de legenda (linha "regra de ferro do vídeo"), aqui não copie os números, mude o limiar primeiro alterando a métrica.
• Primeiro Esclarecer, Depois Projetar: Sem completar a Fase 1, não pode pular para a solução.

Arquivos de Referência

📍 Ordem de busca da biblioteca compartilhada remotion-shared: .claude/skills/remotion-shared/ do projeto → Codex global → Claude Code global. Pegue o primeiro que encontrar.

Arquivo	Quando Ler
.claude/skills/remotion-shared/video-anti-slop.md	Ao fazer julgamentos de direção em qualquer fase (evitar homogeneização)
.claude/skills/remotion-shared/video-real-library.md	Fase 2 Pesquisa, capturar referências de vídeo real
library/AI-tools/video-shotcraft/	Biblioteca de cartões de receita de câmera (202 cartões 12 categorias: movimento de câmera/ritmo/transição/fonte/efeito), demos/{categoria}/{cartão} podem ser copiados diretamente, veja video-shots-spec

Posicionamento do video-shotcraft (Segunda Biblioteca de Animações / Biblioteca de Templates, Não Rota de Desvio):

• shotcraft = biblioteca de componentes/animações completas e inspiradoras (demos/{categoria}/{cartão}/{componente}.tsx animações de cena de nível de cartão de câmera + template/ projetos de modelo + assets/ componentes e efeitos sonoros). Todos os vídeos seguem este consult→build uniformemente, não há desvio por vídeo de produto/vídeo de voz.
• §8 Seleção de Cartões: A lista de cartões de câmera do DESIGN §8.2 é opcional, os valores carregam marca de intenção [copy] / [inspirar-se]. A única fonte de verdade para as etapas de integração = remotion-shared/video-shots-spec.md "Etapas de Integração do Cartão de Câmera" (o build executa conforme).
• Somente quando o usuário menciona explicitamente que deseja usar o template shotcraft (Ink Press) / criação livre / cocriação, a Skill aciona video-shotcraft para seguir seu próprio fluxo (escolha explícita do usuário, não roteamento automático). | .claude/skills/remotion-shared/video-shots-spec.md | Sistema de cartão de câmera + técnicas autoritativas (direção/edição/design/som, pesquisa + destilação de plataforma) | | .claude/skills/remotion-shared/video-design-presets.md | Fase 4 para selecionar sistema de design predefinido (6 conjuntos de marcas verificadas) | | .claude/skills/remotion-shared/video-tokens-spec.md | Ao escrever tokens na Fase 4 | | .claude/skills/remotion-shared/categories/{categoria}/DESIGN.template.md | Fase 4 para rascunhar com base no modelo da categoria | | .claude/skills/remotion-shared/categories/{categoria}/motion-list.md | Fase 4 para selecionar combinações de animação | | .claude/skills/remotion-shared/motion-library/ | Lista de componentes da biblioteca geral de animações (50, usados pelo build) | | library/AI-tools/design-system-library/ | Fase 2 Pesquisa / Fase 3 Proposta: âncora estética do DESIGN.md da marca | | library/AI-tools/aesthetic-reference-library/aesthetic-reference-overview.md | Fase 2 Tendências de front-end/fotografia/edição + Fase 4 Design de ritmo | | .claude/skills/remotion-shared/aesthetic-judgment/ | Fase 4 ao definir direção: Julgamento de seis eixos de fotografia/edição/layout de front-end (estilo de material/ritmo/layout) | | .claude/skills/ui-ux-pro-max/SKILL.md | Mecanismo de regras de design: consultar ao definir estilo visual do vídeo (Fase 4) | | .claude/skills/hallmark/SKILL.md | Revisão anti-AI slop (57 portarias): se a direção é profissional/contra template (Fase 2/3) | | .claude/skills/taste-skill/SKILL.md | Verificação de bom gosto (40+ itens Pré-Voo): se a direção é boa o suficiente (auto-verificação Fase 3) | | library/AI-tools/design-skills/open-design/craft/anti-ai-slop.md | Regras anti-template ("sete pecados capitais") + 151 alternativas de sistema de design (Fase 2/4) | | .claude/skills/design-shared/review-panel.md | Painel de revisão: Perspectiva de agências + critérios da biblioteca de sistema de design/biblioteca de referência estética (auto-verificação de direção Fase 4 + verificação de consistência) | | .claude/skills/design-shared/wcag-basics.md | Ao definir paleta de cores/legibilidade de legenda (restrição rígida) | | references/video-proposal-format.md | Ao gerar proposta na Fase 3 | | references/video-design-system-template.md | Ao escrever DESIGN.md na Fase 4 | | references/video-taste-profile.md | Ao precisar registrar/atualizar o gosto de vídeo do usuário |

Saída e Finalização

Termine com o resumo de entrega unificado:

STATUS: PASS | FAIL | BLOCKED
Saídas: Caminho do DESIGN.md + caminho dos quadros-chave/amostra de pré-visualização
Decisão Chave: Direção selecionada (SAFE/RISK qual + memorable-thing + categoria a que pertence)
PRÓXIMO_RESPONSÁVEL: remotion-build (gerar vídeo) | usuário (aguardando confirmação da direção)
Pendente: Itens não resolvidos

Pergunta final: A direção está definida? Quer gerar o vídeo? (Recomendado entregar ao remotion-build)