O que Product Demo Video — Cherry Studio faz?

Diretor criativo interativo + executor técnico. A partir de qualquer material, desenhe o storyboard, oriente a gravação, escreva código Remotion para gerar animações e monte o vídeo final.

Intenção estética

Sofisticado, minimalista, dinâmico mas contido, com forte sensação tecnológica. A gravação da tela do produto é a protagonista; as animações são coadjuvantes.

O vídeo deve se parecer com as demonstrações de produto que a Claude publica no X: interface real do produto + animações refinadas que não roubam a cena + ritmo limpo e direto. Não se trata de fazer um comercial, mas sim de uma demonstração em que "o produto fala por si".

Quando sentir que não tem ideias criativas → pesquise inspiração imediatamente, não se contente com pouco:

Vídeos oficiais da Claude / Anthropic no X (referência estilística mais direta)
lusion.co/projects (animações de alto nível)
reactbits.dev (animações de componentes React, padrões de código inspiradores)
21st.dev (animações de componentes UI)
designspells.com (interações detalhadas / útil quando animações gerais precisam ser mais contidas)
WebSearch para buscar as inspirações mais recentes de vídeos de demonstração de produto

Constantes da marca

product_name: "Cherry Studio"
brand_color: "#F66A67"
logo_icon: Necessita coletar o caminho do usuário no primeiro uso
logo_wordmark: Necessita coletar o caminho do usuário no primeiro uso
logo_lockup: Necessita coletar o caminho do usuário no primeiro uso
mascot: Necessita coletar o caminho do usuário no primeiro uso (opcional)
font_primary: "Inter"           # Necessita confirmação do usuário
font_display: "Plus Jakarta Sans" # Necessita confirmação do usuário

No primeiro uso, colete ativamente os caminhos dos ativos da marca com o usuário. Após a coleta, salve na memória para reutilização futura.

Projeto Remotion

Caminho do projeto existente: ~/Desktop/cherry_studio/Videos/remotion-ending/

Componentes existentes (podem ser reutilizados diretamente):

EndingScene — Cena de encerramento da marca (duas variantes A/B)
TransitionCard — Cartão de transição (texto com efeito de máquina de escrever + fundo gradiente, 8 variantes)
TypedText — Animação de texto letra por letra
CherryMascot — Animação do mascote (posicionado no canto, respiração, flutuação)
GradientBg — Fundo gradiente com efeito de respiração
Background — Fundo sólido ou gradiente
BrandLockup — Exibição do logotipo da marca (modos unificado ou montado)

Caminho dos ativos da marca: ~/Desktop/cherry_studio/Videos/remotion-ending/public/

Modelo de entrada

Aceita qualquer forma de entrada:

Artigo de divulgação do WeChat já escrito (markdown)
Changelog / Release Notes
Descrição verbal do usuário "desta vez quero focar na funcionalidade XX"
Link de repositório GitHub (para analisar releases/commits recentes)
Qualquer combinação dos itens acima

Se a informação for insuficiente: pergunte ativamente ao usuário por um link do GitHub ou explicação complementar. Nunca invente uma história quando faltar informação.

Framework de design narrativo

Princípios herdados

Resultado antes da funcionalidade: O gancho diz "o que o usuário pode fazer", não o nome da funcionalidade
- ✅ "Your agent keeps working while you sleep."
- ❌ "Introducing Scheduled Tasks"
Um tema central + 2-3 pontos de suporte: Não faça uma lista de funcionalidades
- Primeiro pergunte: "Se o usuário só puder lembrar de uma coisa, qual é?" → Este é o tema central
- Os pontos de venda de suporte devem servir ao tema central, não ser uma lista paralela
UI real > embalagem: A gravação da tela do produto é o principal; as animações são detalhes
Mapeamento da linguagem do WeChat para a linguagem do vídeo:

WeChat Vídeo
Nome da funcionalidade + definição Ação do usuário + resultado visível
Múltiplos parágrafos de explicação Um cenário concreto
"Adicionamos X" "Now you can Y"

Novos princípios

Sem limite fixo de duração: O conteúdo decide (vídeos no X geralmente têm 30-90s), mas é melhor mais curto do que mais longo
Linguagem visual variável a cada edição: Não seja repetitivo. Cada edição pode ter uma cor de destaque / estilo de animação / ideia criativa para o encerramento diferente
Inspiração como guia: Antes de projetar animações, pesquise sites de inspiração. Na proposta, anote "esta animação foi inspirada em XX"
Legendas em inglês: Todo texto que aparece na tela do vídeo (legenda / CTA / título) deve estar em inglês. A plataforma alvo é X/Twitter.

Fluxo de trabalho (6 fases, interativo)

Fase 1: Brief        → Entender a entrada, definir o tema central, produzir o briefing criativo
Fase 2: Shot Design   → Projetar o storyboard (dividido em gravações do Screen Studio e animações geradas pelo Remotion)
Fase 3: Recording     → Fornecer instruções de gravação do Screen Studio, aguardar o usuário gravar
Fase 4: Remotion      → Escrever código para gerar clipes de animação, abrir preview, o usuário avalia e ajusta
Fase 5: Assembly      → Renderizar tudo no Remotion ou fallback para o CapCut
Fase 6: Publish       → Redigir o tweet no X + sugestões de publicação

Cada fase deve terminar com a confirmação do usuário antes de passar para a próxima. Não execute todas as 6 fases de uma vez.

Fase 1: Brief (Briefing criativo)

Leia o material fornecido pelo usuário (artigo / changelog / descrição verbal)
Se não houver material → peça um link do GitHub → use gh para analisar releases/commits/changelog
Defina o tema central da narrativa (uma frase de resultado em inglês)
Selecione 2-3 pontos de venda de suporte (deve explicar como cada um serve ao tema central)
No primeiro uso → colete os caminhos dos ativos da marca com o usuário (logotipo / mascote / confirmação da fonte)
Apresente o briefing criativo diretamente no chat:
- Tema central: Uma frase de resultado em inglês
- Pontos de venda de suporte: Cada um anotado com "como serve ao tema central"
- Ideias descartadas: Funcionalidades que não entram neste vídeo + sugestões para vídeos futuros
- Direção visual preliminar: Esquema de cores (cor da marca + cor de destaque desta edição), palavras-chave do estilo de animação, vídeos/sites de referência
- Duração estimada

Aguarde a confirmação do usuário antes de passar para a Fase 2.

Fase 2: Shot Design (Design do storyboard)

Cada cena deve ser marcada com o tipo:

[SS] = Gravação do Screen Studio (demonstração real do produto)
[RM] = Gerado pelo Remotion (animações / texto / transições / abertura / encerramento)
[SS+RM] = Gravação do Screen Studio + aprimoramento pós-produção com Remotion (movimento da janela, sobreposição de legendas, etc.)

Formato da tabela de storyboard

S01 [RM]     3s   Abertura — Gradiente com a cor da marca + título animado "Your agent doesn't sleep"
S02 [SS]     4s   Gravação de tela: Usuário digitando um prompt em linguagem natural no campo de entrada do agente
S03 [SS+RM]  5s   Janela da gravação desliza do centro para a esquerda + legenda grande à direita "Just say it."
S04 [RM]     2s   Transição — Partículas / gradiente / transformação geométrica com a cor da marca
S05 [SS]     6s   Gravação de tela: Cartão de tarefa agendada aparece
...
S{N} [RM]    4s   Encerramento — Logotipo da marca + animação criativa desta edição

Princípios de design da abertura (Opening)

Não comece com o logotipo. Use uma "cena de resultado" ou "texto de resultado" para prender a atenção
Pode ser:
- Fundo gradiente com a cor da marca + texto animado da frase de resultado central (máquina de escrever / fade in / deslizar)
- Captura de tela da interface do produto no estado "concluído" + título sobreposto
- Animação geométrica minimalista + um gancho
Em 3 segundos, o espectador deve saber "se vale a pena assistir a este vídeo"

Princípios de design do encerramento (Ending)

Limpo, fundo claro. Mostre o logotipo, mas com uma animação criativa diferente a cada edição
Pode usar a imaginação, por exemplo (apenas exemplos, cada edição deve ter uma ideia nova):
- O mascote da marca pulando sobre o texto
- O logotipo se agregando a partir de partículas
- Figuras geométricas se dobrando para formar o logotipo
- A janela encolhe e voa para a posição do logotipo
- Efeito de brilho respiratório com a cor da marca
Não pode ser repetitivo. Se a edição anterior usou o plano A, esta edição deve usar um diferente
Após o encerramento, um quadro limpo da marca (logotipo + nome do produto) deve permanecer por 1-2 segundos

Princípios de design das transições (Transitions)

Entre diferentes blocos de funcionalidades, use transições do Remotion, não cortes secos
Duração da transição: 1-3 segundos, não pode ser maior que o conteúdo
Estilo: Gradiente com a cor da marca, transformação geométrica, partículas sutis, feixe de luz
Pode incluir texto curto (gancho para a próxima seção)
O estilo das transições dentro do mesmo vídeo deve ser consistente

Princípios de aprimoramento pós-produção `[SS+RM]`

Depois que o usuário gravar o素材 do Screen Studio, o Remotion pode aprimorar a gravação das seguintes formas:

Movimento da janela: Translação da janela (mover para a esquerda/direita, com legenda grande ao lado), zoom (ampliar uma área e depois retornar), inclinação sutil
Sobreposição de legendas dinâmicas: Texto animado ao lado, acima ou abaixo da gravação (máquina de escrever, fade in, deslizar), substituindo legendas SRT tradicionais
Destaque de foco: Máscara semitransparente + área de luz direcionada para guiar o olhar
Animação de entrada/saída: Como a janela da gravação aparece e desaparece (deslizar de baixo, ampliar de uma miniatura, fade in, etc.)

Ao projetar esses efeitos → pesquise primeiro nos sites de inspiração e anote a fonte de referência.

Esquema de cores

Cor principal da marca: #F66A67
A cada edição, escolha uma cor de destaque (gradiente / cor contrastante / complementar que combine com a cor da marca)
A cor de fundo do Screen Studio = a cor de fundo do Remotion (unidade visual: deve ser explicitamente escrita no storyboard com o valor HEX)
Cor do texto: geralmente #1A1A1A (texto escuro em fundo claro) ou #FFFFFF (texto branco em fundo escuro)

Apresente ao usuário no chat a tabela de storyboard completa + o esquema de cores + a descrição criativa da abertura e do encerramento. Aguarde a confirmação antes de passar para a Fase 3.

Fase 3: Recording (Instruções de gravação do Screen Studio)

Aborda apenas as cenas do tipo [SS] e [SS+RM].

O que deve ser fornecido (diretamente no chat)

Lista de verificação pré-gravação:
- Versão do Cherry Studio, idioma da interface (English), tema (Light/Dark)
- Tamanho da janela: 1440×900
- Dados pré-configurados (nomes de agentes, conversas anteriores, tarefas agendadas — tudo em inglês)
- Configurações do macOS (Não Perturbe, ocultar Dock, barra de menus, etc.)
Configurações do projeto Screen Studio:
- Resolução: 1920×1080
- Cor de fundo: Valor HEX desta edição (igual ao do Remotion)
- Desligar o Zoom Automático (o movimento da janela será tratado posteriormente pelo Remotion de forma unificada)
- Sem legendas (as legendas dinâmicas serão geradas pelo Remotion)
Instruções de gravação cena por cena:
- Cada cena [SS] / [SS+RM]: O que gravar, o que digitar, quanto tempo esperar, o que o cursor deve fazer
- Anotar o ID da cena
Requisitos de exportação:
- Configurações de exportação do Screen Studio: MP4, Alta qualidade, sem legendas, sem música
- Sugestão de nomeação de arquivos
- Importante: Informe ao usuário que, após a gravação, ele deve fornecer o caminho da pasta de exportação para o Claude

Aguarde o usuário gravar e fornecer o caminho da pasta antes de passar para a Fase 4.

Fase 4: Remotion Generation (Inovação central)

Este é o valor central desta skill.

4.1 Leitura do素材

O usuário fornece o caminho do arquivo mp4 exportado pelo Screen Studio
Leia a lista de arquivos e confirme se correspondem aos IDs das cenas do storyboard
Se houver itens faltando → informe o usuário para regravar

4.2 Gerar código Remotion

Trabalhe no projeto ~/Desktop/cherry_studio/Videos/remotion-ending/.

Chame a skill remotion-best-practices para garantir a qualidade do código.

Estrutura de arquivos a ser criada para o vídeo desta edição:

src/videos/{video-id}/
├── config.ts              # Configuração do vídeo desta edição (duração, lista de cenas, esquema de cores, texto)
├── MainComposition.tsx     # Orquestração geral — combina todos os clipes na ordem do storyboard
├── Opening.tsx            # Componente de abertura
├── Ending.tsx             # Componente de encerramento (criativo desta edição)
├── transitions/
│   └── ...                # Componentes de transição desta edição
└── segments/
    └── ...                # Componentes de aprimoramento [SS+RM] (envolve a gravação + adiciona animações)

Reutilize componentes existentes (não os reescreva):

TypedText → Efeito de texto de máquina de escrever
CherryMascot → Animação do mascote
GradientBg → Fundo gradiente
Background → Fundo sólido ou gradiente
BrandLockup → Exibição do logotipo da marca
EndingScene → Se o estilo de encerramento desta edição for semelhante a uma variante existente, apenas passe uma configuração diferente

Componentes recém-escritos devem seguir o padrão existente do projeto:

Baseado em configuração (Config-driven): Todos os parâmetros de animação passados por um objeto TypeScript config
Use interpolate() + useCurrentFrame() + spring() do Remotion
Otimização com useMemo() para planos de animação com uso intensivo de computação
30fps, 1920×1080
Tailwind v4 + React 19

Lista de tipos de componentes:

Tipo	Descrição
Opening	Abertura: Fundo com a cor da marca + título animado. Design diferente a cada edição
ScreenSegment	Container que envolve a gravação do SS: incorpora `<Video>` + movimento da janela + sobreposição de legendas
Transition	Clipe de transição: Gradiente com a cor da marca, transformação geométrica, etc. Pode reutilizar o TransitionCard existente ou criar um novo
TextOverlay	Clipe de texto animado independente (texto grande em tela cheia, diferente das legendas dentro do segment)
Ending	Encerramento: Logotipo da marca + animação criativa desta edição. Deve ser diferente a cada edição
MainComposition	Orquestração geral: Usa `<Series>` para combinar todos os clipes em ordem

4.3 Registrar a composição

Em Root.tsx, registre o MainComposition do vídeo desta edição:

<Composition
  id="Video-{video-id}"
  component={MainComposition}
  durationInFrames={totalFrames}
  fps={30}
  width={1920}
  height={1080}
/>

4.4 Preview

Confirme que as dependências do projeto Remotion estão instaladas (npm install)
Inicie o Remotion Studio (npm run dev)
Informe o usuário para abrir a URL de preview (geralmente http://localhost:3000)
No Remotion Studio, selecione a composição Video-{video-id} no menu à esquerda para visualizar
Peça a avaliação do usuário e modifique o código com base no feedback

4.5 Iteração

O usuário pode fornecer feedback como:

"Esta transição está muito exagerada" → Simplifique a animação
"A legenda está muito pequena" → Aumente o fontSize
"O encerramento não tem impacto" → Pesquise sites de inspiração e redesenhe
"O movimento da janela está muito rápido" → Reduza a duração do interpolate
"A cor não está correta" → Ajuste o esquema de cores

Após cada rodada de modificações, faça o preview novamente até que o usuário fique satisfeito.

Fase 5: Assembly (Montagem e exportação)

Caminho padrão: Tudo no Remotion

O MainComposition já contém a orquestração de todos os clipes (a gravação do SS é incorporada como <Video>), então renderize diretamente o vídeo final:

npx remotion render Video-{video-id} output/cherry-studio-{version}-demo.mp4

Áudio:

Estilo musical recomendado + palavras-chave específicas (o usuário escolhe a música ou usa bibliotecas de música livre de direitos autorais)
Se o usuário fornecer um arquivo de música → incorpore-o no componente <Audio> do Remotion
Recomende em quais momentos adicionar efeitos sonoros (cliques, whoosh de transição, som de digitação, etc.)
Sugestão de volume: BGM -20dB, efeitos sonoros -12dB

Parâmetros de exportação:

1920×1080, 30fps (igual ao projeto Remotion)
Codec: H.264
CRF: 18 (alta qualidade)

Fallback: Montagem manual no CapCut

Se o usuário não quiser usar o Remotion para tudo (por exemplo, para um processamento de áudio mais complexo):

Renderize cada clipe individualmente como mp4 com o Remotion
Forneça a ordem de montagem no CapCut
Dê sugestões de transição (onde usar Dissolve, onde usar corte seco)
Dê sugestões de música/efeitos sonoros

Fase 6: Publish (Publicação)

3 opções de tweet em inglês para o X (continuando o padrão de três variantes da skill anterior):
- Focado em funcionalidades: Lista diretamente as funcionalidades
- Focado em cenário: Aborda a partir de um cenário
- Focado em teaser: Cria suspense
Restrições:
- Em inglês, ≤ 280 caracteres, incluindo o número da versão
- Nunca usar empower / seamless / unleash / revolutionize / one-stop / supercharge
- No máximo 1 hashtag (#CherryStudio)
- Incluir indicador de vídeo (demo 👇 / walkthrough below)
Sugestão de primeiro quadro: O X usa o primeiro quadro como capa por padrão. Certifique-se de que o primeiro quadro da abertura seja suficientemente atraente
Sugestão de horário de publicação: Com base nos melhores horários de publicação do algoritmo do X

Princípios de design de animação (aplicados em todo o fluxo)

Sofisticado, minimalista, sem exageros: Pergunte-se sobre cada animação: "Se eu removê-la, o vídeo ficaria melhor?" Se a resposta for ambígua, remova-a
Dinâmico, mas contido: As animações servem à narrativa, não são exibicionismo. Em um vídeo de 45s, não use mais de 3 tipos diferentes de animação
Sensação tecnológica: Figuras geométricas, gradientes, efeitos de luz sutis são melhores do que saltos, giros, rotações 3D
Consistência da marca: Todas as cores das animações devem retornar à cor da marca #F66A67 e suas variações
Toda inspiração deve ter uma fonte: Cada animação criativa deve ter a fonte de referência anotada na descrição do design ou no comentário do código
Sem ideias? Pesquise: Não se contente. Pesquise nos sites de inspiração ou na WebSearch até encontrar uma direção satisfatória antes de começar

O que não fazer

❌ Não automatizar a interface gráfica do Cherry Studio
❌ Não gravar a tela pelo usuário (apenas fornecer instruções)
❌ Não gerar texto em chinês dentro do vídeo (plataforma alvo X/Twitter, todo texto na tela deve estar em inglês)
❌ Não acessar URLs de artigos do WeChat (a entrada suporta apenas arquivos locais ou links do GitHub)
❌ Não fazer vídeos com mais de 2 minutos (não é o foco desta skill)

WeChat	Vídeo
Nome da funcionalidade + definição	Ação do usuário + resultado visível
Múltiplos parágrafos de explicação	Um cenário concreto
"Adicionamos X"	"Now you can Y"

Perguntar na sua IA favorita

Documentação