video-shotcraft：Criação de vídeos cinematográficos para produtos
Uma biblioteca de produção autocontida: 106 cartas de lentes (com código-fonte de demonstração e galeria de exemplos dinâmicos), um template de vídeo promocional completo e verificado, componentes reutilizáveis e assets de áudio, fluxo de trabalho em seis etapas. O foco atual é em vídeos promocionais de produtos web/desktop, mas as cartas de lentes são vocabulário de movimento universal — você pode usá-las individualmente para criar qualquer cena em qualquer vídeo.
Quando usar esta skill
Use quando:
- Criar um vídeo promocional cinematográfico, lançamento de produto ou demonstração de aplicativo web/desktop.
- Nomear ou solicitar o template
Ink Press(墨压) ou reproduzir o efeito promocional do template. - Implementar uma carta de lente específica de motion design (ex.:
deck-deal-flyin,row-embed,spotlight-hero-card). - Precisar de movimentos de câmera 2.5D (PageCam), cortes de vídeo sincronizados com batida usando Remotion e design de som.
Instruções
Passo 1: Apresentar o template e confirmar a rota
Ao chamar esta skill, antes de iniciar qualquer coleta de material, storyboard ou implementação, explique ao usuário:
- O template Ink Press (墨压), um vídeo promocional de produto de 36,2 segundos já verificado, está disponível em
template/: 1920×1080, 30fps, estilo papel-tinta-âmbar, contendo 10 cenas completas, movimentos de câmera 2.5D em páginas reais, cartões de texto, transições e SFX cinematográficos já mixados; basta substituir as capturas de tela, textos e informações da marca do produto alvo. - Usar o template é o caminho mais rápido e com maior qualidade garantida; se o usuário quiser uma linguagem visual totalmente nova, siga o fluxo de criação livre.
Pergunte claramente: “Gostaria de usar este template pronto para criar o vídeo?” Informe que ele pode visitar https://vincentwei1021.github.io/video-shotcraft/ para ver a galeria de exemplos dinâmicos.
- Se o usuário confirmar o uso: Leia
template/TEMPLATE.mdpor completo e siga a rota do template. - Se o usuário recusar explicitamente: Continue com a etapa 0 do
references/pipeline.mde siga a rota de criação livre ou lentes individuais. - Se o usuário ainda não decidiu: Pare aqui e aguarde a escolha; não aplique o template por padrão nem comece a produzir.
Exceções:
- Se o usuário mencionar o template Ink Press (ex.: “Use o template Ink Press para fazer um vídeo promocional do meu produto”), considere a rota do template já selecionada e leia
template/TEMPLATE.mdpara execução. - Se o usuário especificar cartas de lente (ex.: “Use
deck-deal-flyinerow-embedneste vídeo”), considere a rota já selecionada e leia as cartas correspondentes e o código-fonte dedemos/<nome-da-carta>/.
Passo 2: Escolher um dos três métodos de uso
- Vídeo promocional completo (rota do template): Leia
template/TEMPLATE.mde siga o “Guia de substituição para reprodução” adaptando material cena por cena. - Vídeo promocional completo (criação livre): Siga as seis etapas de
references/pipeline.md(comece com as três perguntas da etapa 0). - Cena única/efeito único: Selecione uma carta de
references/shots/, leia a carta completa + o código-fonte dedemos/<nome-da-carta>/e adapte ao material alvo.
Passo 3: Quando ler cada arquivo
| Momento | Leia |
|---|---|
| Início do projeto | pipeline.md (três perguntas da etapa 0) |
| Usuário escolheu BGM | music-beat-sync.md (analise antes de storyboard) |
| Rota do template | template/TEMPLATE.md completo |
| Design de storyboard | Modelos de sequência em sequences/; frontmatter de todas as cartas em shots/; carta selecionada lida por completo |
| Implementação cena por cena | Carta completa + código-fonte de demos/<nome-da-carta>/ completo + componente correspondente em assets/lib/ |
| Design de som | sound-design.md + assets/audio/ |
| Revisão | aesthetic-rules.md completo como checklist (executado por subagente independente) |
Exemplos
Exemplo 1: Rota do template (Ink Press)
"Use o template Ink Press para fazer um vídeo promocional de 30 segundos para meu Desktop Product"
-> Seleciona automaticamente a rota do template, lê template/TEMPLATE.md e realiza coleta de capturas de tela e substituição de material.
Exemplo 2: Cartas de lente especificadas
"Consulte as cartas de lente deck-deal-flyin e row-embed para criar os efeitos de movimento da demonstração do meu produto"
-> Seleciona automaticamente a rota de lente única ou combinação de lentes, lê references/shots/ e o código-fonte de demos/ para implementação personalizada.
Melhores práticas
- Capturas de tela reais: Para reproduzir páginas existentes, use capturas reais. Primeiro, inicie um dev server e use um navegador headless para capturar texturas 2x + layout.json.
- Linguagem visual nativa do produto: Extraia tokens (fontes, tamanhos de fonte, cores, raios de borda) do sistema de design do produto/site; não invente skins irrelevantes.
- Uma cena, um efeito + sensação de respiração: Cada cena conta apenas um efeito; segure cartões de texto/imagens importantes no ponto de batida por ≥1s.
- Ritmo forte e BGM estritamente sincronizado: Use
librosapara analisar BPM/tempo real,beatF(n)para determinar quadros, com erro de corte ≤3 quadros. - Consulte o código-fonte de demonstração: Antes de usar uma carta de lente, leia os parâmetros calibrados e as práticas de prevenção de bugs conhecidas em
demos/<nome-da-carta>/. - Renderização determinística: Proíba
Date.now()/Math.random(); use aleatoriedade pseudoaleatória com semente fixa.
Referências
template/TEMPLATE.md— Estrutura do template Ink Press e guia de substituição para reproduçãoreferences/pipeline.md— Especificação do fluxo de produção em seis etapasreferences/aesthetic-rules.md— Checklist de revisão visual e aceitaçãoreferences/music-beat-sync.md— Análise de ritmo musical e cálculo de pontos de sincronizaçãoreferences/sound-design.md— Frases sonoras SFX e guia de combinação de assets de áudio- https://vincentwei1021.github.io/video-shotcraft/ — Galeria online de exemplos dinâmicos e 106 cartas de lentes