Slice Skill (Corte/VoxFlow)

Slice Skill

Transforme um artigo, nota, trabalho acadêmico ou tópico geral em um vídeo vertical (1080×1920) no formato de cartão — narrado, paginado no ritmo do TTS, com 13 temas visuais que cobrem 抖音 / 小红书 / 知乎 / X / 公众号 / 飞书 / TikTok / LinkedIn / 雪球 / 微博 / 即刻 / B 站 / 播客.

Renomeado de paper-slide para slice. O produto agora se chama Slice (voxflow.studio/apps/slice); o slug antigo não está mais registrado. paper-slide sobrevive apenas como um dos 13 IDs de tema.

Escolha a Rota

Contexto	Rota	Observações
Usuário quer apenas o JSON do deck (sem render) — rápido, roteirizável, encadeável	CLI: voxflow slice <artigo.md> --theme <id>	Acessa /api/slice/deck diretamente (cota de 200; renomeado de /api/paper-slide/slice no Deploy 2 #3307). Retorna o JSON canônico do deck de 5 a 8 cartões, validado pelo mesmo backend que o app web usa, todos os 13 temas aceitos. Sem MP4 — use --json para ferramentas personalizadas, a composição Remotion local (contribuidores) ou cole no app web para renderizar.
Usuário está iterando sobre um deck — múltiplas rodadas de edição de texto/estrutura antes de confirmar uma renderização	CLI: voxflow slice stage <deck.json>	Inicia uma página de prévia local (sem custo de cota) que recarrega automaticamente a cada salvamento do JSON do deck. Ciclo útil: voxflow slice ... -o deck.json → voxflow slice stage deck.json → ajuste o prompt → execute slice novamente → a prévia é atualizada instantaneamente. Veja Rota Stage abaixo.
Usuário quer um MP4 finalizado + capa (fluxo padrão do consumidor)	App Web: https://voxflow.studio/apps/slice	O único lugar que executa os exatos 6 temas Slice de ponta a ponta. O nível gratuito gera MP4 9:16 + capa multi-aspecto (9:16/3:4/1:1).
Usuário quer um vídeo de aparência semelhante offline via CLI, mas o voxflow slice apenas com deck não é suficiente	voxflow present ou voxflow picstory --style sketchnote	Aproximação apenas. Esquemas visuais diferentes; não consegue gerar os temas editorial-mag / notion-card / brutalist / glass-dark do Slice. Veja Aproximação via CLI abaixo.
O checkout local contém video-present/src/compositions/PaperSlide (apenas contribuidores do VoxFlow)	Script experimental Remotion local	Veja Rota Remotion Local. Nota: o script experimental só exercita a composição original paper-slide; os outros 12 temas são renderizados apenas via worker na nuvem.
Usuário quer apenas estratégia ou texto	Produza o JSON do deck via voxflow slice (ou manualmente seguindo o schema); informe qual renderizador usar.	O schema do deck é independente do renderizador; o mesmo JSON renderiza em qualquer tema.
Usuário pede para abrir o código-fonte / empacotar	Mantenha APIs privadas, tokens, áudio gerado e saídas MP4 fora do pacote da skill.

Fluxo de Trabalho

1. Escolha um tema que corresponda à plataforma. Leia references/themes.md uma vez — ele lista todos os 13 temas, sua assinatura visual e qual plataforma/tipo de conteúdo cada um se adequa. Não use paper-slide como padrão para tudo.
2. Escolha um cenário. Casos de uso concretos são melhores que preenchimentos genéricos: resumo de artigo, atualização de produto, encerramento de reunião, conselho de carreira, lição de fundador, comentário de mercado, revisão de incidente.
3. Escreva um deck conciso. 4 a 6 cartões: um título + 3 a 5 de corpo. Uma ideia por cartão de corpo. Legendas curtas o suficiente para caber em uma linha.
4. Escolha visuais a partir de palavras-chave controladas. Não pesquise na web nem gere imagens aleatórias no momento da renderização — escolha um figureKeyword canônico; o renderizador o mapeia para uma cena/pose/ícone local desenhada à mão. (Veja references/deck-schema.md.)
5. Renderize pela rota escolhida. App web para temas exatos; CLI para aproximação; script local para contribuidores.
6. Verifique o artefato. Verifique duração, dimensões (1080×1920) e pelo menos um quadro de título + um quadro de corpo antes de relatar a conclusão.
7. Relate caminhos. Caminhos absolutos para MP4 / pôsteres / props.

Leia references/deck-schema.md ao escrever JSON do deck, escolher palavras-chave ou depurar layout. Leia references/example-decks.md para decks iniciais. Leia references/themes.md ao escolher um tema ou explicar trade-offs entre temas.

Rota App Web (padrão — funciona para todos)

https://voxflow.studio/apps/slice

Fluxo de trabalho:

1. Cole o artigo / nota no compositor principal.
2. A IA o divide em 5 a 8 cartões.
3. Escolha um tema (13 opções — veja references/themes.md) + uma voz (6 vozes de produção: 男主播 / 霸总男声 / 闲聊男声 / 小美 / 小心 / 小徐).
4. Renderize → MP4 1080×1920 + capa multi-aspecto (9:16 / 3:4 / 1:1).

Informe ao usuário que esta é a única rota que produz a renderização exata do Slice para todos os 13 temas — são composições Remotion privadas, não incluídas na CLI.

Rota CLI do Deck (voxflow slice)

Para usuários que desejam o JSON estruturado do deck sem a renderização — rápido (uma ida e volta, cota de 200), encadeável, ciente do tema. Acessa o mesmo backend /api/slice/deck que o app web usa, portanto a forma do deck é canônica.

voxflow slice artigo.md                                  # tema padrão: paper-slide
voxflow slice artigo.md --theme editorial-mag -o deck.json
voxflow slice --text "artigo longo ..." --theme bold-poster --json | jq .deck

Quando usar esta rota:

• O usuário quer inspecionar / iterar sobre a qualidade da divisão da IA antes de confirmar uma renderização.
• O usuário quer colar o deck no fluxo "importar deck" do app web para renderizar com um tema diferente.
• O usuário é um contribuidor com a composição Remotion privada video-present/src/compositions/PaperSlide e quer renderizar o deck localmente — voxflow slice ... --json -o props.json e então alimente props.json no script experimental.
• O usuário está construindo automação que precisa de saída estruturada (ex.: publicar cartões de conhecimento como texto no Twitter / 即刻 a partir de deck.cards[*].caption + narração).

Limitações:

• Sem MP4. O renderizador em nuvem que produz o vídeo 1080×1920 vive no app web.
• Sem TTS. Combine voxflow slice com voxflow narrate se quiser áudio por cartão sem renderização.

Rota Stage — voxflow slice stage (prévia de iteração)

Para a fase de iteração com humano no loop antes de confirmar uma renderização em nuvem. O Stage inicia um servidor HTTP localhost com hot reload — cada salvamento do JSON do deck atualiza a página instantaneamente. Sem custo de cota, sem viagem de rede.

voxflow slice deck.md -o deck.json     # 1. produza um deck (cota de 200)
voxflow slice stage deck.json          # 2. abra a prévia localhost (gratuito)
                                       # 3. edite deck.json manualmente ou execute slice novamente
                                       # 4. a prévia recarrega automaticamente ao salvar

Quer um iniciador sem cota e sem login? Use a amostra incluída diretamente:

voxflow slice stage examples/11-slice-stage/sample-deck.json

Flags:

voxflow slice stage <deck.json> [--port <n>] [--theme <id>] [--no-open]
  --port      Padrão 5180. Pula automaticamente +1 até 5189 em caso de conflito.
  --theme     Trave a prévia em um tema (deve ser um dos 13 IDs válidos).
  --no-open   Não abra o navegador automaticamente (ambientes CI / SSH / agente).

Quando usar o Stage:

• O usuário está em um loop de edição com várias rodadas — ajustes de texto, reordenação de cartões, teste A/B de tema — e reabrir o MP4 a cada iteração é um atrito caro.
• O usuário quer publicar cartões individuais como texto simples em plataformas focadas em texto (X / Twitter / 即刻 / Threads / Mastodon / comentários de blog). O Stage fornece um botão "Copiar texto" para cada cartão (título + legenda + narração), e a barra de ferramentas do deck oferece "Copiar JSON / Baixar .json / Copiar como Markdown" para colar no Notion / blog / 飞书. Exportações de imagem / carrossel para 小红书 / 微博 / 公众号 头图 virão em uma fase futura quando imagens estáticas por cartão estiverem disponíveis.
• Loops orientados por IA onde o agente regenera deck.json e o humano revisa via navegador — a página é atualizada sem que o agente precise reimprimir caminhos.

Utilitários de exportação de texto (Fase 1.4 apenas texto)

A interface do Stage possui controles de exportação focados em texto para que os cartões possam ser reutilizados em plataformas apenas de texto sem pagar por uma renderização completa:

• "Copiar texto" por cartão — clique no pequeno botão em qualquer cartão → a área de transferência recebe {título}\n\n{legenda (se distinta)}\n\n{narração} (aparado). Cole em um tweet, post no 即刻, snippet de blog.
• Barra de ferramentas do deck — "Copiar JSON" — copia o JSON completo do deck para a área de transferência (para encadear em ferramentas personalizadas / compartilhar com outro agente / salvar um instantâneo).
• Barra de ferramentas do deck — "Baixar .json" — salva o deck como <seriesTitle>.json (nome do arquivo sanitizado automaticamente, limitado a 60 caracteres + .json).
• Barra de ferramentas do deck — "Copiar como Markdown" — formata todo o deck como Markdown (H1 = seriesTitle, H2 por cartão, narração como blockquote). Cole no Notion / editor de blog / docs do 飞书.

Os formatadores residem em lib/stage-core/deck-format.js (formatCardAsText, formatDeckAsMarkdown, suggestDeckFilename) e são testados por unidade em tests/deck-format.test.js. Seu código-fonte é transformado em string no HTML servido via Function.prototype.toString() para que o navegador execute o mesmo código que os testes cobrem — fonte única de verdade, sem manutenção dupla.

Exportações de carrossel de imagem / MP4 para 小红书 / 微博 / 公众号 头图 NÃO estão na Fase 1.4 apenas texto. Essas virão em uma fase futura quando miniaturas renderStill por cartão estiverem disponíveis (exigem um endpoint Remotion de backend que ainda não existe).

O que o Stage NÃO é:

• Não é uma prévia completa do Remotion ainda. O MVP mostra a estrutura do deck (cartões + JSON); miniaturas de tema renderizadas em nuvem chegam na Fase 1.3 via renderStill.
• Não substitui os pixels da renderização completa — os temas são composições do lado do servidor. O Stage pré-visualiza o texto do deck, não os quadros finais do vídeo.

Loop de edição com IA (o fluxo de iteração real)

O Stage não tenta ser o Cursor — é um fechador de feedback visual que entrega prompts para qualquer ferramenta de IA que o usuário já tenha aberta (Claude Code, Cursor, ChatGPT, qualquer uma). Duas facilidades cobrem todo o loop de edição:

Intenção	UX	Saída
Reescrever cartão inteiro ("regere este cartão, mantenha o resto")	Passe o mouse sobre o cartão → botão de canto Editar com IA	Modal com um prompt: caminho do arquivo + trecho JSON cards[N] + espaço para <sua instrução>
Reescrever frase local ("apenas esta frase está errada")	Selecione o texto dentro de um cartão → aparece botão flutuante Editar seleção com IA	Modal com um prompt: caminho do arquivo + a substring exata selecionada entre aspas + JSON completo do cartão para contexto

O usuário digita a instrução (ex.: "encurte para 12 caracteres, mais visceral"), clica em Copiar prompt, cola em sua IA. A IA usa suas ferramentas nativas de edição de arquivo (Edit do Claude Code, Apply do Cursor, etc.) para reescrever o arquivo. O observador SSE do Stage recarrega a prévia em cerca de 150 ms. Repita até ficar satisfeito.

Por que este design e não um chat embutido / servidor MCP: veja #3330 para a justificativa completa do design (copiar-colar universal vs. MCP exclusivo do Claude Code, trade-off custo vs. cobertura, caminho de atualização MCP futuro condicionado à telemetria de uso).

Rota de Aproximação via CLI (fallback de MP4 completo)

Se o usuário precisar de um MP4 apenas da CLI (sem app web, sem acesso Remotion de contribuidor), use voxflow present ou voxflow picstory como fallback — eles cobrem o mesmo formato de artigo-para-vídeo, mas com seus próprios esquemas visuais, não os 13 temas exatos do Slice.

voxflow present --text "cole o artigo ou resumo" --style editorial --output slice-aproximacao.mp4
voxflow picstory --topic "tópico" --style sketchnote --scenes 4 --output slice-esboco.mp4

Esquema CLI mais próximo por tema Slice:

Tema Slice	Rota CLI mais próxima
paper-slide	voxflow picstory --style sketchnote
editorial-mag	voxflow present --style editorial
bold-poster	voxflow present --style brutalist (peso mais próximo)
notion-card	voxflow present --style minimal
brutalist	voxflow present --style brutalist
glass-dark	voxflow present --style noir ou --style aurora
editorial-stencil	voxflow present --style editorial (sem equivalente letterbox / dual-tone)
broadsheet	voxflow present --style editorial (sem paleta salmon do FT)
blueprint	voxflow picstory --style chalkboard (sensação de grade/diagrama mais próxima)
daisy-pastel	voxflow picstory --style sketchnote (sem equivalente de ilustração pastel)
showa-catalog	voxflow picstory --style vintage_newspaper (sem equivalente city-pop)
photo-feature	voxflow picstory --style photo (photo-feature precisa de imageUrl por cartão — veja deck-schema)
atmospheric	voxflow present --style noir

Sempre informe ao usuário: "Este é um rascunho adjacente ao Slice. O renderizador exato de 13 temas está em voxflow.studio/apps/slice."

Rota Remotion Local (apenas contribuidores)

Pule se video-present/src/compositions/PaperSlide não estiver em seu checkout — é código privado; usuários de npm / skills não o possuem.

A partir da raiz do checkout do contribuidor:

cd video-present
node scripts/paper-slide-experiments.mjs

Rendereize um subconjunto:

cd video-present
PAPER_SLIDE_EXPERIMENT_FILTER=research-reading node scripts/paper-slide-experiments.mjs

Verifique as saídas:

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration \
  -of default=nw=1 out/paper-slide-experiments/research-reading.mp4

ffmpeg -y -hide_banner -loglevel error -ss 9 \
  -i out/paper-slide-experiments/research-reading.mp4 \
  -frames:v 1 -q:v 2 out/paper-slide-experiments/research-reading-body.jpg

Esperado: 1080×1920, 20-35 segundos, sem flashes pretos, sem estouro de legenda, figura não cortada.

Regras de Escrita do Deck (aplicam-se a todos os 13 temas)

• Cartão de título: gancho, contraste ou promessa. Evite rótulos abstratos como "Introdução".
• Cartão de corpo: apenas uma ideia. Legenda geralmente abaixo de 16 caracteres chineses ou 7 palavras em inglês.
• Narração: conversacional, 25-60 caracteres chineses por cartão de corpo.
• Palavras-chave de cena (prefira quando couberem): problem-framing, evidence-board, customer-pain, timeline-review, owner-deadline, risk-guardrail, cashflow-ledger, team-alignment, before-after, learning-loop, decision-fork, growth-system.
• Palavras-chave de figura / ícone (acentos visuais): thinking, running, climbing, stuck, celebrating, briefcase, users, target, clock, lightbulb, chart-up, globe, handshake, rocket, shield, book, callout, warning, checkmark, magnifying-glass, presentation, network, gear, chat-bubble, pin, calendar, flag, coin, thumbs-up, heart, megaphone, trophy, lamp, archway, staircase, compass, binoculars, microscope, camera, headphones.