Slice (Slice-Funktion)

Slice-Funktion

Verwandle einen Artikel, eine Notiz, ein Paper oder ein grobes Thema in ein vertikales 1080×1920-Kartenvideo – mit Sprachausgabe, paginiert im TTS-Rhythmus, mit 13 visuellen Themen für 抖音 / 小红书 / 知乎 / X / 公众号 / 飞书 / TikTok / LinkedIn / 雪球 / 微博 / 即刻 / B 站 / 播客.

Umbenannt von paper-slide → slice. Das Produkt heißt jetzt Slice (voxflow.studio/apps/slice); der alte Slug ist nicht mehr registriert. paper-slide existiert nur noch als eine der 13 Themen-IDs.

Route wählen

Kontext	Route	Hinweise
Benutzer möchte das Deck-JSON (ohne Rendering) – schnell, skriptbar, pipelinefähig	CLI: voxflow slice <artikel.md> --theme <id>	Ruft /api/slice/deck direkt auf (200 Kontingent; umbenannt von /api/paper-slide/slice in #3307 Deploy 2). Liefert das kanonische 5–8 Karten Deck-JSON, validiert durch dasselbe Backend wie die Web-App, alle 13 Themen akzeptiert. Kein MP4 – --json in eigene Tools pipen, die lokale Remotion-Komposition (Contributors) oder in die Web-App einfügen zum Rendern.
Benutzer iteriert an einem Deck – mehrere Runden Text-/Struktur-Änderungen vor dem Rendern	CLI: voxflow slice stage <deck.json>	Startet eine lokale Vorschauseite (kein Kontingentverbrauch), die bei jeder Speicherung des Deck-JSONs hot-reloadet. Nützliche Schleife: voxflow slice ... -o deck.json → voxflow slice stage deck.json → Prompt anpassen → Slice erneut ausführen → Vorschau aktualisiert sich sofort. Siehe Stage-Route unten.
Benutzer möchte ein fertiges MP4 + Cover (Standard-Consumer-Flow)	Web-App: https://voxflow.studio/apps/slice	Der einzige Ort, der die exakten 6 Slice-Themen Ende-zu-Ende rendert. Der kostenlose Tarif liefert 9:16 MP4 + mehrseitiges Cover (9:16/3:4/1:1).
Benutzer möchte ähnlich aussehendes Video offline über CLI, aber das reine Deck-JSON von voxflow slice reicht nicht	voxflow present oder voxflow picstory --style sketchnote	Nur Näherung. Unterschiedliche visuelle Schemata; kann die Slice-Themen editorial-mag / notion-card / brutalist / glass-dark nicht ausgeben. Siehe CLI-Näherung unten.
Lokaler Checkout hat video-present/src/compositions/PaperSlide (nur VoxFlow-Contributors)	Lokales Remotion-Experimentierskript	Siehe Lokale Remotion-Route. Hinweis: Das Experimentierskript trainiert nur die originale paper-slide-Komposition; die anderen 12 Themen rendern nur über den Cloud-Worker.
Benutzer möchte nur Strategie oder Text	Deck-JSON über voxflow slice (oder von Hand nach Schema) erstellen; sagen, welcher Renderer verwendet werden soll.	Das Deck-Schema ist renderer-unabhängig; dasselbe JSON rendert in jedem Thema.
Benutzer möchte Open-Source / Package	Private APIs, Tokens, generiertes Audio, MP4-Ausgaben außerhalb des Skill-Packages halten.

Arbeitsablauf

1. Wähle ein Thema, das zur Plattform passt. Lies references/themes.md einmal – es listet alle 13 Themen, ihre visuelle Signatur und welche Plattform / welcher Inhaltstyp zu jedem passt. Verwende nicht standardmäßig paper-slide für alles.
2. Wähle ein Szenario. Konkreter Anwendungsfall ist besser als generischer Füller: Paper-Zusammenfassung, Produkt-Update, Meeting-Abschluss, Karriereberatung, Gründerlektion, Marktkommentar, Vorfallüberprüfung.
3. Schreibe ein straffes Deck. 4-6 Karten: ein Titel + 3-5 Textkörper. Eine Idee pro Textkarte. Bildunterschriften kurz genug für eine Zeile.
4. Wähle visuelle Elemente aus kontrollierten Schlüsselwörtern. Suche nicht im Web oder generiere zufällige Bilder zur Renderzeit – wähle ein kanonisches figureKeyword; der Renderer ordnet es einer lokalen handgezeichneten Szene / Pose / Symbol zu. (Siehe references/deck-schema.md.)
5. Rendere über die gewählte Route. Web-App für exakte Themen; CLI für Näherung; lokales Skript für Contributors.
6. Überprüfe das Artefakt. Prüfe Dauer, Abmessungen (1080×1920) und mindestens einen Titel-Frame + einen Text-Frame, bevor das Erledigt gemeldet wird.
7. Melde Pfade. Absolute Pfade zu MP4 / Postern / Props.

Lies references/deck-schema.md beim Schreiben von Deck-JSON, beim Auswählen von Schlüsselwörtern oder beim Debuggen des Layouts. Lies references/example-decks.md für Start-Decks. Lies references/themes.md beim Auswählen eines Themas oder Erklären von Themen-Kompromissen.

Web-App-Route (Standard – funktioniert für alle)

https://voxflow.studio/apps/slice

Arbeitsablauf:

1. Füge den Artikel / die Notiz in den Hero-Composer ein.
2. KI schneidet es in 5–8 Karten.
3. Wähle ein Thema (13 Optionen – siehe references/themes.md) + eine Stimme (6 Produktionsstimmen: 男主播 / 霸总男声 / 闲聊男声 / 小美 / 小心 / 小徐).
4. Rendern → 1080×1920 MP4 + mehrseitiges Cover (9:16 / 3:4 / 1:1).

Sage dem Benutzer, dass dies die einzige Route ist, die das exakte Slice-Rendering für alle 13 Themen liefert – es sind private Remotion-Kompositionen, nicht in der CLI enthalten.

CLI-Deck-Route (voxflow slice)

Für Benutzer, die das strukturierte Deck-JSON ohne Rendering möchten – schnell (ein Round-Trip, 200 Kontingent), pipelinefähig, themenbewusst. Ruft dasselbe /api/slice/deck-Backend wie die Web-App auf, daher ist die Deck-Form kanonisch.

voxflow slice artikel.md                                  # Standard-Thema: paper-slide
voxflow slice artikel.md --theme editorial-mag -o deck.json
voxflow slice --text "langer Artikel ..." --theme bold-poster --json | jq .deck

Wann diese Route verwenden:

• Der Benutzer möchte die KI-Schnittqualität überprüfen / daran iterieren, bevor er sich für ein Rendering entscheidet.
• Der Benutzer möchte das Deck in den „Deck importieren“-Flow der Web-App einfügen, um es mit einem anderen Thema zu rendern.
• Der Benutzer ist ein Contributor mit der privaten video-present/src/compositions/PaperSlide Remotion-Komposition und möchte das Deck lokal rendern – voxflow slice ... --json -o props.json dann props.json in das Experimentierskript einspeisen.
• Der Benutzer baut Automatisierung, die strukturierte Ausgabe benötigt (z. B. Veröffentlichung von Wissenskarten als Text auf Twitter / 即刻 aus deck.cards[*].caption + narration).

Grenzen:

• Kein MP4. Der Cloud-Renderer, der das 1080×1920-Video produziert, lebt in der Web-App.
• Kein TTS. Kombiniere voxflow slice mit voxflow narrate, wenn du Audio pro Karte ohne Rendering möchtest.

Stage-Route – voxflow slice stage (Iterationsvorschau)

Für die menschliche Iterationsphase vor dem Cloud-Rendering. Stage startet einen lokalen HTTP-Server mit Hot-Reload – jede Speicherung des Deck-JSONs aktualisiert die Seite sofort. Kein Kontingentverbrauch, kein Netzwerk-Round-Trip.

voxflow slice deck.md -o deck.json     # 1. Deck erstellen (200 Kontingent)
voxflow slice stage deck.json          # 2. lokale Vorschau öffnen (kostenlos)
                                       # 3. deck.json von Hand bearbeiten oder slice erneut ausführen
                                       # 4. Vorschau hot-reloadet bei Speicherung

Möchtest du einen Starter ohne Kontingent und Anmeldung? Verwende direkt die mitgelieferte Beispiel:

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

Flags:

voxflow slice stage <deck.json> [--port <n>] [--theme <id>] [--no-open]
  --port      Standard 5180. Überspringt automatisch +1 bis 5189 bei Konflikt.
  --theme     Vorschau auf ein Thema festlegen (muss eine der 13 gültigen IDs sein).
  --no-open   Browser nicht automatisch starten (CI / SSH / Agent-Umgebungen).

Wann Stage verwenden:

• Der Benutzer befindet sich in einer mehrrundigen Bearbeitungsschleife – Textoptimierungen, Karten-Neuanordnung, Thema A/B – und das erneute Öffnen des MP4 bei jeder Iteration ist teure Reibung.
• Der Benutzer möchte einzelne Karten als reinen Text auf textfirst-Plattformen veröffentlichen (X / Twitter / 即刻 / Threads / Mastodon / Blog-Kommentare). Stage bietet für jede Karte einen „Text kopieren“-Button (Titel + Bildunterschrift + Erzählung), und die Deck-Symbolleiste bietet „JSON kopieren / .json herunterladen / als Markdown kopieren“ zum Einfügen in Notion / Blog / 飞书. Bild- / Karussell-Exports für 小红书 / 微博 / 公众号 头图 kommen in einer zukünftigen Phase, sobald Einzelkarten-Standbilder verfügbar sind.
• KI-gesteuerte Schleifen, in denen der Agent deck.json neu generiert und der Mensch über den Browser prüft – die Seite aktualisiert sich, ohne dass der Agent Pfade erneut ausgeben muss.

Textexport-Dienstprogramme (Phase 1.4 nur Text)

Die Stage-Benutzeroberfläche liefert textfirst-Export-Steuerelemente, sodass Karten auf reinen Textplattformen wiederverwendet werden können, ohne für ein vollständiges Rendering zu bezahlen:

• „Text kopieren“ pro Karte – klicke den kleinen Button auf einer beliebigen Karte → Zwischenablage erhält {title}\n\n{caption (falls unterschiedlich)}\n\n{narration} (getrimmt). In einen Tweet, 即刻-Beitrag, Blog-Schnipsel einfügen.
• Deck-Symbolleiste – „JSON kopieren“ – kopiert das vollständige Deck-JSON in die Zwischenablage (zum Einfügen in eigene Tools / Teilen mit einem anderen Agenten / Speichern eines Schnappschusses).
• Deck-Symbolleiste – „.json herunterladen“ – speichert das Deck als <seriesTitle>.json (Dateiname automatisch bereinigt, auf 60 Zeichen + .json begrenzt).
• Deck-Symbolleiste – „Als Markdown kopieren“ – formatiert das gesamte Deck als Markdown (H1 = seriesTitle, H2 pro Karte, Erzählung als Blockzitat). In Notion / Blog-Editor / 飞书-Dokumente einfügen.

Formatierer leben in lib/stage-core/deck-format.js (formatCardAsText, formatDeckAsMarkdown, suggestDeckFilename) und sind in tests/deck-format.test.js getestet. Ihre Quelle wird via Function.prototype.toString() in das bereitgestellte HTML stringifiziert, sodass der Browser den gleichen Code ausführt, den die Tests abdecken – einzige Quelle der Wahrheit, keine doppelte Wartung.

Bild- / MP4-Karussell-Exports für 小红书 / 微博 / 公众号 头图 sind NICHT in Phase 1.4 nur Text. Diese kommen in einer zukünftigen Phase, sobald renderStill-Miniaturansichten pro Karte verfügbar sind (sie erfordern einen Backend-Remotion-Endpunkt, der noch nicht existiert).

Was Stage NICHT ist:

• Noch keine vollständige Remotion-Vorschau. MVP zeigt Deck-Struktur (Karten + JSON); cloudgerenderte Themen-Miniaturansichten kommen in Phase 1.3 via renderStill.
• Kein Ersatz für die Pixel des vollständigen Renderings – Themen sind serverseitige Kompositionen. Stage zeigt eine Vorschau des Deck-Texts, nicht der endgültigen Video-Frames.

Bearbeiten-mit-KI-Schleife (der eigentliche Iterations-Workflow)

Stage versucht nicht, Cursor zu sein – es ist ein visueller Feedback-Schließer, der Prompts an das KI-Tool übergibt, das der Benutzer bereits geöffnet hat (Claude Code, Cursor, ChatGPT, alles). Zwei Funktionen decken die gesamte Bearbeitungsschleife ab:

Absicht	UX	Ausgabe
Ganzkarten-Neuschreibung („diese Karte neu generieren, restliche behalten“)	Über die Karte hovern → Eck-Button Mit KI bearbeiten	Modal mit Prompt: Dateipfad + cards[N] JSON-Snippet + <your instruction> Feld
Lokale Phrasen-Neuschreibung („nur diese Phrase ist falsch“)	Text in einer Karte auswählen → schwebender Auswahl mit KI bearbeiten-Button erscheint	Modal mit Prompt: Dateipfad + das exakt ausgewählte Teilstring in Anführungszeichen + vollständiges Karten-JSON für Kontext

Der Benutzer gibt die Anweisung ein (z. B. „auf 12 Zeichen kürzen, viszeraler“), klickt auf Prompt kopieren, fügt in sein KI-Tool ein. Die KI verwendet ihre nativen Dateibearbeitungswerkzeuge (Claude Code's Edit, Cursor's Apply usw.), um die Datei neu zu schreiben. Stages SSE-Listener hot-reloadet die Vorschau innerhalb von ~150 ms. Schleife wiederholen, bis zufrieden.

Warum dieses Design und kein eingebetteter Chat / MCP-Server: siehe #3330 für die vollständige Design-Begründung (universelles Kopieren und Einfügen vs. nur Claude Code MCP, Kosten vs. Abdeckungsabwägung, zukünftiger MCP-Upgrade-Pfad abhängig von Nutzungstelemetrie).

CLI-Näherungs-Route (vollständiger MP4-Fallback)

Wenn der Benutzer unbedingt ein MP4 allein von der CLI benötigt (keine Web-App, kein Contributor-Remotion-Zugriff), auf voxflow present oder voxflow picstory zurückgreifen – sie decken die gleiche Artikel-zu-Video-Form ab, aber mit ihren eigenen visuellen Schemata, nicht den exakten 13 Slice-Themen.

voxflow present --text "Artikel oder Zusammenfassung einfügen" --style editorial --output slice-approx.mp4
voxflow picstory --topic "Thema" --style sketchnote --scenes 4 --output slice-sketch.mp4

Nächstgelegene CLI-Schemata pro Slice-Thema:

Slice-Thema	Nächstgelegene CLI-Route
paper-slide	voxflow picstory --style sketchnote
editorial-mag	voxflow present --style editorial
bold-poster	voxflow present --style brutalist (nächstgelegene Gewichtung)
notion-card	voxflow present --style minimal
brutalist	voxflow present --style brutalist
glass-dark	voxflow present --style noir oder --style aurora
editorial-stencil	voxflow present --style editorial (kein Letterbox / Zweiton-Äquivalent)
broadsheet	voxflow present --style editorial (keine FT-Salmon-Palette)
blueprint	voxflow picstory --style chalkboard (nächstgelegener Raster-/Diagramm-Feel)
daisy-pastel	voxflow picstory --style sketchnote (kein Pastell-Illustrations-Äquivalent)
showa-catalog	voxflow picstory --style vintage_newspaper (kein City-Pop-Äquivalent)
photo-feature	voxflow picstory --style photo (photo-feature benötigt imageUrl pro Karte – siehe deck-schema)
atmospheric	voxflow present --style noir

Sage dem Benutzer immer: „Dies ist ein Slice-ähnlicher Entwurf. Der exakte 13-Themen-Renderer lebt auf voxflow.studio/apps/slice.“

Lokale Remotion-Route (nur Contributors)

Überspringen, wenn video-present/src/compositions/PaperSlide nicht in deinem Checkout ist – es ist privater Code; npm / Skills-Benutzer haben es nicht.

Vom Contributor-Checkout-Root aus:

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

Eine Teilmenge rendern:

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

Ausgaben überprüfen:

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

Erwartet: 1080×1920, 20-35 Sekunden, keine schwarzen Blitze, kein Bildunterschriften-Überlauf, Figur nicht abgeschnitten.

Schreibregeln für Decks (gelten für alle 13 Themen)

• Titelkarte: Aufhänger, Kontrast oder Versprechen. Vermeide abstrakte Bezeichnungen wie „Einleitung“.
• Textkarte: nur eine Idee. Bildunterschrift normalerweise unter 16 chinesischen Zeichen oder 7 englischen Wörtern.
• Erzählung: gesprächig, 25-60 chinesische Zeichen pro Textkarte.
• Szenen-Schlüsselwörter (bevorzugen, wenn sie passen): problem-framing, evidence-board, customer-pain, timeline-review, owner-deadline, risk-guardrail, cashflow-ledger, team-alignment, before-after, learning-loop, decision-fork, growth-system.
• Figure / Symbol-Schlüsselwörter (visuelle Akzente): thinking, running, climbing, stuck, celebrating, briefcase, users, target, clock.