Communitygithub.com

Slice Skill

Transformez un long article, une note ou un rapport en une vidéo verticale de cartes 1080×1920 — VoxFlow Slice. 13 thèmes visuels.

Qu'est-ce que Slice Skill ?

Slice Skill est un outil puissant pour convertir du contenu textuel long (articles, notes, rapports) en vidéos verticales de type « cartes » au format 1080×1920, idéales pour les réseaux sociaux comme TikTok, Instagram, YouTube Shorts, LinkedIn, etc. Il propose 13 thèmes visuels distincts (paper-slide, editorial-mag, bold-poster, notion-card, brutalist, glass-dark, editorial-stencil, broadsheet, blueprint, daisy-pastel, showa-catalog, photo-feature, atmospheric) qui s’adaptent à différents styles et plateformes. Le skill s’utilise via plusieurs routes : une interface web complète pour un rendu final MP4 + couverture multi-aspect, une CLI pour générer un JSON structuré de cartes (sans rendu vidéo), un mode « stage » pour une prévisualisation locale avec rechargement à chaud lors de l’itération, ou une approximation via d’autres commandes CLI pour un MP4 de démonstration. Il est optimisé pour un flux de travail itératif : génération du deck, édition multi-tour, prévisualisation locale, puis rendu final. Les decks sont indépendants du moteur de rendu, permettant de changer de thème sans modifier les cartes.

Compatible avec✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/VoxFlowStudio/skills/tree/HEAD/skills/slice

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Compétence Slice

Transformez un article, une note, un article universitaire ou un sujet brut en une vidéo verticale de cartes 1080×1920 — narrée, paginée au rythme de la TTS, avec 13 thèmes visuels couvrant 抖音 / 小红书 / 知乎 / X / 公众号 / 飞书 / TikTok / LinkedIn / 雪球 / 微博 / 即刻 / B 站 / 播客.

Renommé de paper-slide → slice. Le produit s'appelle désormais Slice (voxflow.studio/apps/slice) ; l'ancien identifiant n'est plus enregistré. paper-slide ne subsiste que comme l'un des 13 identifiants de thème.

Choisir la Route

ContexteRouteNotes
L'utilisateur souhaite le JSON du deck (sans rendu) — rapide, scriptable, pilotable par pipelineCLI : voxflow slice <fichier.md> --theme <id>Appelle /api/slice/deck directement (quota de 200 ; renommé depuis /api/paper-slide/slice dans #3307 Déploiement 2). Renvoie le jeu de 5 à 8 cartes au format JSON canonique validé par le même backend que l'application web, tous les 13 thèmes sont acceptés. Pas de MP4 — pipez --json vers des outils personnalisés, la composition Remotion locale (contributeurs), ou collez-le dans l'application web pour le rendu.
L'utilisateur itère sur un deck — modifications multi-tours du texte / de la structure avant de s'engager dans un renduCLI : voxflow slice stage <deck.json>Démarre une page de prévisualisation locale (sans coût de quota) qui se recharge à chaud à chaque sauvegarde du JSON du deck. Boucle utile : voxflow slice ... -o deck.json → voxflow slice stage deck.json → modifier la consigne → relancer slice → la prévisualisation se met à jour instantanément. Voir Route Stage ci-dessous.
L'utilisateur souhaite un MP4 final + couverture (flux consommateur par défaut)Application web : https://voxflow.studio/apps/sliceLe seul endroit qui exécute les exacts 6 thèmes Slice de bout en bout. Le niveau gratuit produit un MP4 9:16 + couverture multi-aspect (9:16/3:4/1:1).
L'utilisateur souhaite une vidéo d'apparence similaire hors ligne via CLI mais le voxflow slice (deck uniquement) ne suffit pasvoxflow present ou voxflow picstory --style sketchnoteApproximation uniquement. Schémas visuels différents ; impossible de produire les thèmes editorial-mag / notion-card / brutalist / glass-dark de Slice. Voir Approximation CLI ci-dessous.
Le dépôt local contient video-present/src/compositions/PaperSlide (contributeurs VoxFlow uniquement)Script d'expérimentation Remotion localVoir Route Remotion Locale. Remarque : le script d'expérimentation n'exerce que la composition paper-slide d'origine ; les 12 autres thèmes sont rendus uniquement via le worker cloud.
L'utilisateur ne souhaite que la stratégie ou le texteProduire le JSON du deck via voxflow slice (ou à la main en suivant le schéma) ; leur indiquer quel moteur de rendu utiliser.Le schéma du deck est indépendant du moteur de rendu ; le même JSON se rend dans n'importe quel thème.
L'utilisateur demande d'ouvrir le code source / de le distribuerGardez les API privées, les jetons, l'audio généré et les sorties MP4 en dehors du package de compétence.

Flux de Travail

  1. Choisissez un thème qui correspond à la plateforme. Lisez references/themes.md une fois — il liste les 13 thèmes, leur signature visuelle, et la plateforme / type de contenu auquel chacun correspond. Ne vous rabattez pas sur paper-slide pour tout.
  2. Choisissez un scénario. Un cas d'usage concret vaut mieux qu'un contenu générique : résumé d'article, mise à jour produit, compte-rendu de réunion, conseil de carrière, leçon de fondateur, commentaire de marché, revue d'incident.
  3. Rédigez un deck serré. 4 à 6 cartes : un titre + 3 à 5 corps. Une idée par carte de corps. Légendes suffisamment courtes pour tenir sur une ligne.
  4. Choisissez les visuels parmi des mots-clés contrôlés. Ne cherchez pas sur le web et ne générez pas d'images aléatoires au moment du rendu — choisissez un figureKeyword canonique ; le moteur de rendu le mappe sur une scène / pose / icône dessinée à la main locale. (Voir references/deck-schema.md.)
  5. Effectuez le rendu via la route choisie. Application web pour les thèmes exacts ; CLI pour l'approximation ; script local pour les contributeurs.
  6. Vérifiez l'artefact. Vérifiez la durée, les dimensions (1080×1920), et au moins une image titre + une image corps avant de signaler la fin.
  7. Rapportez les chemins. Chemins absolus vers le MP4 / affiches / accessoires.

Lisez references/deck-schema.md lors de l'écriture du JSON du deck, du choix des mots-clés ou du débogage de la mise en page. Lisez references/example-decks.md pour des decks de départ. Lisez references/themes.md lors du choix d'un thème ou de l'explication des compromis entre thèmes.

Route Application Web (par défaut — fonctionne pour tout le monde)

https://voxflow.studio/apps/slice

Flux de travail :

  1. Collez l'article / la note dans le compositeur principal.
  2. L'IA le découpe en 5 à 8 cartes.
  3. Choisissez un thème (13 options — voir references/themes.md) + une voix (6 voix de production : 男主播 / 霸总男声 / 闲聊男声 / 小美 / 小心 / 小徐).
  4. Rendu → MP4 1080×1920 + couverture multi-aspect (9:16 / 3:4 / 1:1).

Dites à l'utilisateur qu'il s'agit de la seule route qui produit le rendu Slice exact pour les 13 thèmes — ce sont des compositions Remotion privées, non expédiées avec la CLI.

Route CLI Deck (voxflow slice)

Pour les utilisateurs qui souhaitent le JSON structuré du deck sans le rendu — rapide (un aller-retour, quota 200), pilotable par pipeline, conscient du thème. Il appelle le même backend /api/slice/deck que l'application web, donc la forme du deck est canonique.

voxflow slice article.md                                  # thème par défaut : paper-slide
voxflow slice article.md --theme editorial-mag -o deck.json
voxflow slice --text "long article ..." --theme bold-poster --json | jq .deck

Quand utiliser cette route :

  • L'utilisateur souhaite inspecter / itérer sur la qualité du découpage de l'IA avant de s'engager dans un rendu.
  • L'utilisateur souhaite coller le deck dans le flux "importer un deck" de l'application web pour le rendre avec un thème différent.
  • L'utilisateur est un contributeur avec la composition Remotion video-present/src/compositions/PaperSlide privée et souhaite effectuer le rendu du deck localement — voxflow slice ... --json -o props.json puis alimenter props.json dans le script d'expérimentation.
  • L'utilisateur construit une automatisation qui nécessite une sortie structurée (par exemple, publier des cartes de connaissances sous forme de texte sur Twitter / 即刻 à partir de deck.cards[*].caption + narration).

Limites :

  • Pas de MP4. Le moteur de rendu cloud qui produit la vidéo 1080×1920 se trouve dans l'application web.
  • Pas de TTS. Associez voxflow slice avec voxflow narrate si vous souhaitez un audio par carte sans rendu.

Route Stage — voxflow slice stage (prévisualisation d'itération)

Pour la phase d'itération humaine dans la boucle avant de s'engager dans un rendu cloud. Stage démarre un serveur HTTP local avec rechargement à chaud — chaque sauvegarde du JSON du deck met à jour la page instantanément. Aucun coût de quota, aucun aller-retour réseau.

voxflow slice deck.md -o deck.json     # 1. produire un deck (quota 200)
voxflow slice stage deck.json          # 2. ouvrir la prévisualisation locale (gratuite)
                                       # 3. modifier deck.json à la main ou relancer slice
                                       # 4. la prévisualisation se recharge à chaud à la sauvegarde

Vous voulez un démarrage sans quota, sans connexion ? Utilisez directement l'exemple fourni :

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

Drapeaux :

voxflow slice stage <deck.json> [--port <n>] [--theme <id>] [--no-open]
  --port      Par défaut 5180. Saute automatiquement +1 jusqu'à 5189 en cas de conflit.
  --theme     Verrouille la prévisualisation sur un thème (doit être l'un des 13 identifiants valides).
  --no-open   Ne lance pas automatiquement le navigateur (environnements CI / SSH / agent).

Quand utiliser Stage :

  • L'utilisateur est dans une boucle d'édition multi-tours — modifications de copie, réorganisation des cartes, test A/B de thème — et rouvrir le MP4 à chaque itération est une friction coûteuse.
  • L'utilisateur souhaite publier des cartes individuelles sous forme de texte brut sur des plateformes axées sur le texte (X / Twitter / 即刻 / Threads / Mastodon / commentaires de blog). Stage fournit à chaque carte un bouton "Copier le texte" (titre + légende + narration), et la barre d'outils du deck offre "Copier JSON / Télécharger .json / Copier en Markdown" pour le collage dans Notion / blog / 飞书. Les exports d'images / carrousels pour 小红书 / 微博 / 公众号 头图 arriveront dans une phase future une fois que les images fixes par carte seront disponibles.
  • Boucles pilotées par IA où l'agent régénère deck.json et l'humain révise via le navigateur — la page se met à jour sans que l'agent ait à réimprimer les chemins.

Utilitaires d'exportation de texte (Phase 1.4 texte uniquement)

L'interface utilisateur de Stage intègre des contrôles d'exportation axés sur le texte afin que les cartes puissent être réutilisées sur des plateformes de texte uniquement sans payer un rendu complet :

  • "Copier le texte" par carte — cliquez sur le petit bouton sur n'importe quelle carte → le presse-papiers obtient {titre}\n\n{légende (si distincte)}\n\n{narration} (tronqué). Déposez-le dans un tweet, un post 即刻, un extrait de blog.
  • Barre d'outils du deck — "Copier JSON" — copie l'intégralité du JSON du deck dans le presse-papiers (pour le pipeline vers des outils personnalisés / le partage avec un autre agent / la sauvegarde d'un instantané).
  • Barre d'outils du deck — "Télécharger .json" — enregistre le deck sous <titreSerie>.json (nom de fichier automatiquement assaini, limité à 60 caractères + .json).
  • Barre d'outils du deck — "Copier en Markdown" — formate l'intégralité du deck en Markdown (H1 = titreSerie, H2 par carte, narration en bloc de citation). Collez-le dans Notion / éditeur de blog / docs 飞书.

Les formateurs vivent dans lib/stage-core/deck-format.js (formatCardAsText, formatDeckAsMarkdown, suggestDeckFilename) et sont testés unitairement dans tests/deck-format.test.js. Leur source est transformée en chaîne dans le HTML servi via Function.prototype.toString() afin que le navigateur exécute le même code que les tests couvrent — une seule source de vérité, pas de double maintenance.

Les exports d'images / carrousels MP4 pour 小红书 / 微博 / 公众号 头图 ne sont PAS dans la Phase 1.4 texte uniquement. Ceux-ci arriveront dans une phase future une fois que les miniatures renderStill par carte seront disponibles (elles nécessitent un point de terminaison backend Remotion qui n'existe pas encore).

Ce que Stage n'est PAS :

  • Pas encore un aperçu Remotion complet. Le MVP montre la structure du deck (cartes + JSON) ; les miniatures de thème rendues sur le cloud arrivent dans la Phase 1.3 via renderStill.
  • Pas un substitut aux pixels du rendu final — les thèmes sont des compositions côté serveur. Stage prévisualise le texte du deck, pas les images vidéo finales.

Boucle d'édition avec l'IA (le flux de travail d'itération réel)

Stage n'essaie pas d'être Cursor — c'est un fermeur de boucle de feedback visuel qui transmet les consignes à l'outil d'IA que l'utilisateur a déjà ouvert (Claude Code, Cursor, ChatGPT, n'importe lequel). Deux éléments couvrent l'intégralité de la boucle d'édition :

IntentionUXSortie
Réécriture complète d'une carte ("régénère cette carte, garde le reste")Survolez la carte → bouton d'angle Modifier avec l'IAFenêtre modale avec une consigne : chemin du fichier + extrait JSON cards[N] + emplacement <votre instruction>
Réécriture locale d'une phrase ("juste cette phrase est incorrecte")Sélectionnez du texte dans une carte → bouton flottant Modifier la sélection avec l'IA apparaîtFenêtre modale avec une consigne : chemin du fichier + la sous-chaîne sélectionnée exacte entre guillemets + le JSON complet de la carte pour le contexte

L'utilisateur tape l'instruction (par exemple "raccourcir à 12 caractères, plus viscéral"), clique sur Copier la consigne, la colle dans son IA. L'IA utilise ses outils d'édition de fichiers natifs (Edit de Claude Code, Apply de Cursor, etc.) pour réécrire le fichier. Le watcher SSE de Stage recharge à chaud la prévisualisation en ~150 ms. Bouclez jusqu'à satisfaction.

Pourquoi cette conception et non un chat intégré / serveur MCP : voir #3330 pour la justification complète de la conception (copier-coller universel vs MCP réservé à Claude Code, compromis coût vs couverture, future voie de mise à niveau MCP conditionnelle à la télémétrie d'utilisation).

Route d'Approximation CLI (solution de repli MP4 complet)

Si l'utilisateur doit avoir un MP4 à partir de la CLI uniquement (pas d'application web, pas d'accès contributeur Remotion), utilisez voxflow present ou voxflow picstory en solution de repli — ils couvrent la même forme article-vers-vidéo mais avec leurs propres schémas visuels, pas les 13 thèmes Slice exacts.

voxflow present --text "collez l'article ou le résumé" --style editorial --output slice-approx.mp4
voxflow picstory --topic "sujet" --style sketchnote --scenes 4 --output slice-sketch.mp4

Schéma CLI le plus proche par thème Slice :

Thème SliceRoute CLI la plus proche
paper-slidevoxflow picstory --style sketchnote
editorial-magvoxflow present --style editorial
bold-postervoxflow present --style brutalist (poids le plus proche)
notion-cardvoxflow present --style minimal
brutalistvoxflow present --style brutalist
glass-darkvoxflow present --style noir ou --style aurora
editorial-stencilvoxflow present --style editorial (pas d'équivalent letterbox / dual-tone)
broadsheetvoxflow present --style editorial (pas de palette saumon FT)
blueprintvoxflow picstory --style chalkboard (sensation de grille/diagramme la plus proche)
daisy-pastelvoxflow picstory --style sketchnote (pas d'équivalent d'illustration pastel)
showa-catalogvoxflow picstory --style vintage_newspaper (pas d'équivalent city-pop)
photo-featurevoxflow picstory --style photo (photo-feature nécessite imageUrl par carte — voir deck-schema)
atmosphericvoxflow present --style noir

Dites toujours à l'utilisateur : "Ceci est un brouillon adjacent à Slice. Le moteur de rendu exact des 13 thèmes se trouve sur voxflow.studio/apps/slice."

Route Remotion Locale (contributeurs uniquement)

Ignorer si video-present/src/compositions/PaperSlide n'est pas dans votre dépôt — c'est du code privé ; les utilisateurs npm / compétences ne l'ont pas.

Depuis la racine du dépôt contributeur :

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

Effectuer le rendu d'un sous-ensemble :

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

Vérifier les sorties :

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

Attendu : 1080×1920, 20-35 secondes, pas de flashs noirs, pas de débordement de légende, figure non rognée.

Règles d'Écriture des Decks (s'appliquent à tous les 13 thèmes)

  • Carte titre : accroche, contraste ou promesse. Évitez les étiquettes abstraites comme "Introduction".
  • Carte corps : une seule idée. Légende généralement inférieure à 16 caractères chinois ou 7 mots anglais.
  • Narration : conversationnelle, 25-60 caractères chinois par carte corps.
  • Mots-clés de scène (préférez-les lorsqu'ils conviennent) : problem-framing, evidence-board, customer-pain, timeline-review, owner-deadline, risk-guardrail, cashflow-ledger, team-alignment, before-after, learning-loop, decision-fork, growth-system.
  • Mots-clés de figure / icône (accents visuels) : thinking, running, climbing, stuck, celebrating, briefcase, users, target, clock,

…

[ tronqué pour la traduction ]

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

VoxFlowStudio/skills

Use when the user wants to turn text content into a set of polished, shareable visual CARD IMAGES or narrated card VIDEOS — knowledge cards, quote cards, 小红书图文, carousel cards, poster cards — rendered as HTML/CSS and exported via Playwright at ratios like 1:1 / 3:4 / 9:16; optionally produces a narrated MP4 video from those cards via `voxflow card render` (per-card TTS + FFmpeg static-image clips with optional subtitle bar / intro+outro cards / BGM mix). Triggers: card / 卡片 / 知识卡 / 文字卡片 / 金句卡 / 图文卡片 / 卡片生成 / make cards / card video / 卡片视频. For article → Slice-themed card VIDEO use voxflow:slice; for short videos / AI clips use voxflow:video; for podcasts use voxflow:podcast.

VoxFlowStudio/skills

Use when the user wants to read text aloud (TTS), search VoxFlow voices, sample AI stories, or set up VoxFlow install/auth/quota — the entry-point voice toolkit. For podcasts use voxflow:podcast; for short videos / AI clips use voxflow:video; for article-to-card reels (Slice) use voxflow:slice; for shareable card images or narrated card videos use voxflow:card; for transcription / dubbing / subtitle translation use voxflow:transcribe.

VoxFlowStudio/skills

Use when the user wants AI-generated short-form video — knowledge cards (picstory / 小红书 / TikTok / Reels), narrated explainers, presentations, AI clips, or slides — covering picstory, present, slides, explain, and image generation. For article-to-card reels (Slice — 13 themes including paper-slide), use voxflow:slice. For shareable HTML/CSS card images or narrated card MP4 videos (`voxflow card render`) use voxflow:card.

Skills associés