Name: app-preview-craft
Author: Community

app-preview-craft – Store-Screenshots, Social-Karten und 3D-Gerätevideos

Alles, was diese Fähigkeit erstellt, ist eine Seite (stage/stage.html), die von einem Thema in Pose gesetzt und von Headless Chrome aufgenommen wird: Standbilder werden gescreenshottet und von sharp fertiggestellt, Videos werden Frame für Frame gerendert und in ffmpeg eingespeist. Dieselbe Seite betreibt das Vorschau-Studio, sodass das, was der Benutzer dort sieht, genau das ist, was die CLI exportiert.

0. Fähigkeit finden und einmal einrichten

Die folgenden Pfade sind relativ zum Verzeichnis, das diese SKILL.md enthält. Lösen Sie es einmal auf und stellen Sie Befehlen das Verzeichnis voran – $SKILL bedeutet dieses Verzeichnis durchgängig:

SKILL=/absoluter/pfad/zu/app-preview-craft        # der Ordner mit SKILL.md, scripts/, stage/
# nicht sicher, wo es installiert wurde? (Fähigkeitsordner, dann der Claude Code Plugin-Cache)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
     ~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
     -path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1

Überprüfen Sie dann die Maschine. --fix führt npm install innerhalb der Fähigkeit aus, wenn Pakete fehlen:

node "$SKILL/scripts/doctor.mjs" --fix

Doctor muss mit Ready. enden. Ein fehlendes ffmpeg ist nur eine Warnung (Standbilder funktionieren trotzdem). Wenn es kein WebGL meldet, können 3D-Themen nicht gerendert werden – sagen Sie das, anstatt stillschweigend auf flache Themen umzuschalten.

Ausgaben gehen in das Verzeichnis, in dem der Benutzer arbeitet (das cwd der Shell), es sei denn, er benennt einen anderen Ordner mit --out. Schreiben Sie niemals Renderings in $SKILL. Der temporäre Zustand lebt in $TMPDIR/app-preview-craft/ und wird nach jedem Durchlauf entfernt.

1. Arbeitsablauf

Wählen Sie die Kategorie (das erste CLI-Argument) aus dem, was der Benutzer angefordert hat:

Kategorie	Erstellt	Standardgröße
`app-store`	Ein Set: ein Screenshot pro Folie, pro Größe, plus `overview.png`	`iphone-6.9` 1320×2868
`social-card`	Eine Karte (oder `--all` Folien) für og/X/LinkedIn/Instagram/story	`og` 1200×630
`screen-video`	2D-Bewegung aus den Screens allein; akzeptiert Screen-Recordings	`reel` 1080×1920
`device-video`	three.js Geräte-Showcase-Video	`reel` 1080×1920
`device-mockup`	3D-Helden-Standbild, optional transparent	`mockup-landscape` 2400×1600

Inhalte sammeln. Screenshots (PNG/JPG/WebP) und/oder Aufnahmen (MP4/MOV/WebM) aus dem Projekt des Benutzers, eine pro Folie, in Reihenfolge. Schreiben Sie den Text selbst, es sei denn, der Benutzer hat ihn bereitgestellt (siehe §4). Ohne Screens wird die gebündelte Beispiel-App "Tempo" verwendet – gut zum Zeigen von Themen, niemals für ein auslieferbares Produkt.
Ein Thema auswählen. Ein vom Benutzer genanntes Thema gewinnt. Für App Store-Sets gleichen Sie die Store-Kategorie der App mit der Tabelle in §3 ab und sagen Sie, welches Thema Sie gewählt haben und warum. Wenn der Benutzer unentschlossen ist, zeigen Sie ihm zuerst die Optionen:
```
node "$SKILL/scripts/cli.mjs" gallery app-store        # → ./gallery-app-store.png
```
Lesen Sie das Blatt zurück (damit es für den Benutzer gerendert wird) und lassen Sie ihn wählen. Das Studio (§8) ist die bessere Antwort, wenn sie visuell stöbern und anpassen möchten.

Rendern.

node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \
  --theme ledger \
  --title "Jeder Euro, *buchgeführt*" --title "Budgets, die sich *anpassen*" --title "Privat *by design*" \
  --subtitle "Einzeiliger Nutzen…" --subtitle "…" --subtitle "…" \
  --size iphone-6.9,ipad-13 --set palette.accent=auto

Prüfen Sie vor dem Melden. Lesen Sie overview.png (Sets), das Standbild, oder extrahieren Sie Frames aus einem Video (--frames 1,4,mid,end rendert PNG-Frames anstelle eines Videos – günstig zum Überprüfen der Bewegung). Achten Sie auf abgeschnittene Überschriften, Text über dem Gerät, ein Gerät, das Dekoration verdeckt, leere Bildschirme. Beheben Sie mit --set/pro-Folie-Überschreibungen und rendern Sie neu.
Melden Sie die Ausgabepfade, das Thema und die Größe, und – wann immer ein 3D-Gerät erscheint – dass CREDITS.txt geschrieben wurde und dass die CC-BY-Nennung mit den Bildern reisen muss (§7).

2. Größen

node "$SKILL/scripts/cli.mjs" list sizes --category app-store gibt die Tabelle aus. Jede BxH funktioniert auch. Mehrere auf einmal: --size iphone-6.9,iphone-6.5,ipad-13.

App Store Connect erfordert das 6.9"-Set (iphone-6.9) für iPhone-Apps und ipad-13 für iPad-Apps; andere Größen sind optional. PNG-Ausgabe ist flach (Apple lehnt Alpha ab).
Tablet-Größen tauschen das Telefon automatisch gegen einen flachen Tablet-Rahmen aus, es sei denn, das Thema ist rahmenlos. Geben Sie iPad-Screenshots für diese Folien, wenn die App sie hat.
App-Preview-Videos: --size app-preview (886×1920) oder app-preview-ipad, 15–30 s, 30 fps. Eine stille Stereo-AAC-Spur wird automatisch hinzugefügt (Connect erwartet Audio).
Google Play: play-phone, play-tablet und play-feature (1024×500, Social-Card).

3. Themen

list themes --category <c> gibt diese mit ihren Layouts aus. Jede Kategorie hat ≥ 5.

app-store – jedes modelliert nach einer beliebten App-Kategorie

Thema	App-Kategorie	Inspiriert von	Aussehen
`stride`	Gesundheit & Fitness	Strava, Nike Run Club	heißes Orange, kompakte Großbuchstaben-Pills, Geschwindigkeitsstreifen, geneigtes Telefon
`ledger`	Finanzen	Revolut, Monzo, Robinhood	mitternachtsblaues Mesh, mint→cyan Farbverlaufswörter, Chromkugeln
`serene`	Gesundheit & Achtsamkeit	Calm, Headspace	Pastell-Aurora, kursive Serifen-Akzente, rahmenloser Bildschirm auf einem weichen Blob
`canvas`	Produktivität	Notion, Things, Linear	warmes Papier, Notizbuchraster, große Serife, flaches Tinten-Telefon
`sizzle`	Essen & Trinken	DoorDash, Uber Eats, Deliveroo	sonniges Gelb, Tupfen, rote Marker-Hervorhebungen, geneigtes Telefon
`wander`	Reisen	Airbnb, Hopper, Booking	Abenddämmerungsverlauf mit einer Retro-Sonne, die über das gesamte Set läuft (Panorama)
`mixtape`	Musik & Audio	Spotify, Apple Music	Ihr Bildschirm unscharf zu einem leuchtenden Hintergrund, riesiges umrissenes Wort
`arcade`	Spiele	Apple Arcade, Mobile Game Launch Art	Synthwave-Gitter, Neonränder, glänzende 3D-Spielzeuge
`snapshot`	Foto & Social	Instagram, BeReal, VSCO	drei rahmenlose Aufnahmen gefächert wie Prints, warmes Filmmesh
`pulse`	Gesundheitsdaten & Wearables	Oura, WHOOP, Apple Health	klinisches Schwarz, purpurrotes Leuchten, Überschrift unter einem frontseitigen Pro Max

Die Themen leihen sich eine Stimmung, niemals eine Marke: keine Logos, Namen oder Grafiken dieser Apps erscheinen.

social-card

launch (Aurora + geneigtes Telefon), spotlight (Strahl + Spiegelboden), pastel-fan (drei gefächerte Bildschirme), bento (Raster von Bildschirmausschnitten), neon-grid (Synthwave), editorial (Papier, Serife, Duoton-Bildschirm), duo (MacBook + Telefon – übergeben Sie einen desktop-Bildschirm für den Laptop).

screen-video (2D)

carousel, stack (Karten fliegen weg), scroll (lange Aufnahmen scrollen im Telefon), zoom-tour (randloser Ken Burns zum focus jeder Folie), wall (geneigte Wand von Bildschirmen), store-preview (App Store-Vorschau-Stil – verwenden Sie --size app-preview), grid-reveal.

device-video (3D)

turntable, orbit (Kamera fährt Bögen), float (loopbar), rise (Kamera fährt herein), flip (Rückseite → Vorderseite-Enthüllung), trio (drei Modelle fächern sich auf), desk (MacBook-Deckel öffnet sich, Telefon rutscht daneben; beide stehen auf scene.floor), spotlight (360° auf einem Spiegel), synthwave, keyframes (Ihre eigenen Geräte- und Kamerabewegungen, von motion.keys – siehe §5).

device-mockup (3D-Standbilder)

studio, noir, pedestal, levitate, lineup (jedes Telefonmodell), flatlay, desk-duo. Fügen Sie --transparent für ein freigestelltes PNG hinzu.

4. Text

Überschrift pro Folie: ≤ 6 Wörter, ein Nutzen, kein Feature. Heben Sie 1–2 Wörter mit *Sternchen* hervor, um sie im Stil des Themas zu betonen; " | " erzwingt einen Zeilenumbruch.
Untertitel: ein kurzer Satz. Kicker (optional): ein einwortiges Label darüber.
Die ersten beiden Folien tragen den Pitch – die meisten Käufer scrollen nicht weiter.
Erfinden Sie niemals Bewertungen, Downloadzahlen, Auszeichnungen oder Pressezitate. Dekoration wie rating und laurels ist für echte Zahlen, die der Benutzer Ihnen gibt; fragen Sie, wenn Sie unsicher sind.
Nennen Sie keine Mitbewerber oder verwenden Sie Apple/Google-Marken im Text, über das hinaus, was die Store-Richtlinien erlauben.

5. Alles konfigurieren

Auflösungsreihenfolge, später gewinnt: eingebaute Basis → Layout-Standards → Thema (und seine extends-Kette) → benutzerdefinierte Themendatei → Projektkonfiguration themeOverrides → CLI-Verknüpfungen → --set → pro-Folie theme.

Verknüpfungen: --layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro.
--set pfad=wert erreicht jeden Themenschlüssel (wiederholbar). list options gibt die dokumentierten Pfade mit Typen und Bereichen aus. Werte werden umgewandelt; JSON funktioniert für Listen/Objekte: --set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.
device.pose ist x,y,z Grad. Themen bleiben ungefähr innerhalb von ±20° Gieren und ±6° Rollen, sodass der Bildschirm in Store-Thumbnail-Größe noch lesbar ist; steilere Posen funktionieren, kosten aber Lesbarkeit.
Farben akzeptieren auto = die lebendigste Farbe im ersten Screenshot: --accent auto.
--device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none oder die ID des eigenen Modells des Benutzers (§7).
Layouts sind innerhalb einer Art austauschbar (list layouts): Standbilder – hero-top, hero-bottom, tilt, duo, fan, split, big-type, callout, bento, laptop-phone, showcase, pedestal, lineup, flatlay; Videos – carousel, stack, scroll, zoom-tour, wall, phone-swap, grid-reveal, turntable, orbit, float, rise, flip, trio, desk, spotlight, keyframes.
Eigene Bewegung: Das keyframes-Layout bewegt ein 3D-Gerät und die Kamera durch motion.keys, eine Liste von { "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }. at ist ein Bruchteil des gesamten Videos; ein Wert, den ein Schlüssel auslässt, gilt vom vorherigen Schlüssel; der erste Schlüssel beginnt mit der eigenen Pose des Themas. Eases: linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo. --theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. Es ist keine Animationsbibliothek beteiligt: Jeder Frame ist eine reine Funktion seiner Zeit, was es ermöglicht, Frames in beliebiger Reihenfolge zu rendern. Überprüfen Sie eine Bewegung mit --frames 0,2,mid,end.

Benutzerdefinierte Themen sind JSON- (oder .mjs-)Dateien mit einer beliebigen Teilmenge von Themenschlüsseln plus extends:

{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
  "type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }

Übergeben Sie --theme pfad/zu/acme.json oder legen Sie es in ./.app-preview-craft/themes/ (oder ~/.app-preview-craft/themes/) ab und verwenden Sie --theme acme. list themes zeigt benutzerdefinierte an.

Projektkonfiguration. node "$SKILL/scripts/cli.mjs" init app-store schreibt app-preview-craft.json; danach rendert node "$SKILL/scripts/cli.mjs" (keine Argumente) es, und Flags überschreiben es immer noch. $SKILL/examples/app-preview-craft.json ist ein vollständiges, funktionierendes Beispiel: Text pro Folie, Dekoration und Themenüberschreibungen, eine benutzerdefinierte Themendatei, ein Desktop-Bildschirm und eine jobs-Liste, die ein App Store-Set, eine Social-Card, ein Mockup und ein Video in einem Befehl rendert. Pfade in einer Konfiguration lösen relativ zur Konfigurationsdatei auf.

Pro-Folie-Schlüssel: screen, desktop (Laptop-Display), title, subtitle, kicker, theme (Überschreibungen nur für diese Folie), decor (ersetzt die Dekoration des Themas für diese Folie), focus: [x, y, zoom] (Zoom-Tour-Ziel), hold (Sekunden in einem Video), trim: [start, end] und at (welche Sekunde einer Aufnahme ein Standbild verwendet), bigWord (Big-Type-Layout).

Dekorations-Items sind {kind, x, y, scale, rotate, style, layer, delay, …} mit x/y als Seitenbruchteilen und style eines von glass | solid | light | dark | outline:

Art	Zusätzliche Schlüssel
`badge`	`text`, `icon` (star bolt heart check sparkle trophy leaf lock music pin flame bell chart shield globe play)
`rating`	`score`, `label`, `starColor`
`laurels`	`top`, `text`, `bottom`
`chips`	`items[]`, `icons[]`, `width`, `lead`
`notification`	`app`, `title`, `body`, `time`, `icon` (Bildpfad) oder `glyph`, `width`
`stat`	`label`, `value`, `trend`, `trendColor`
`callout`	`rect: [x, y, w, h]` des Screenshots zum Vergrößern, `w`, `border`, `radius`
`arrow`	`w`, `h`, `text` (handschriftliche Notiz), `flip`, `stroke`
`logo`	`name`, `src` (App-Symbolpfad)
`store-badge`	`top`, `text` oder `src` für das offizielle Badge-Kunstwerk
`sparkles` `confetti`	`count`, `colors[]`, `area: [x0, y0, x1, y1]`, `seed`
`blob`	`size`, `color`, `opacity` (sitzt hinter dem Gerät)
`orbs` `rings` `shapes`	3D-Primitive: `count`, `shapes[]`, `finish` (glossy chrome matte glass iridescent), `area`, `items[]`
`credit`	`text` (standardmäßig die Modell-Nennungszeile)

6. Bildschirme und Behandlungen

sharp bereitet jeden Screenshot vor, bevor Chrome startet: screen.cleanStatusBar (zeichnet eine 9:41 / voller Akku iOS-Statusleiste neu – nur telefonförmige Aufnahmen), tint + tintAmount, duotone: "#dunkel,#hell", saturate, brightness, sharpen und einen vorher unscharf gemachten Hintergrund für blur-shot-Hintergründe.
Auf iPhone-Modellen wird die Dynamic Island als eine einzige zusammengeführte schwarze Pille über den Pillen- und Kameraausschnitten des Modells gezeichnet, passend zu dem, was iOS anzeigt. Liefern Sie Screenshots mit freiem Inselbereich (jede normale iOS-Aufnahme ist das); cleanStatusBar behält die Uhrzeit und die Symbole auf beiden Seiten.
Eine Aufnahme, die höher als das Display ist, scrollt in Videos (scroll-Thema) und zeigt ihren oberen Teil in Standbildern (screen.fit=top).
Aufnahmen werden von ffmpeg mit der Ausgabebildrate in Frames aufgeteilt; in Videos dauert die Folie jeder Aufnahme so lange wie der Clip (überschreiben mit hold, schneiden mit trim). Standbilder verwenden einen Frame (at, Standard: die Mitte).
Laptop-Displays buchstablieren einen Telefon-Screenshot über eine unscharfe Kopie, es sei denn, die Folie hat einen desktop-Bildschirm. desktop akzeptiert auch eine Aufnahme. Im desk-Video-Layout öffnet sich der MacBook-Deckel, und der Laptop-Bildschirm wird nach einer kurzen Verzögerung eingeblendet.

Bildschirm-Tastaturen werden automatisch auf iPhone-Modellen gezeichnet, wenn die Aufnahme eine Tastatur zeigt (erkannt an der unteren Hälfte des Bildschirms); deaktivieren mit screen.cleanKeyboard=true.

7. Modelle und Lizenzen

Verbundene .glb-Modelle: node "$SKILL/scripts/cli.mjs" list devices druckt ihre IDs. Verwenden Sie --device galaxy-s21-ultra, macbook-pro-16 usw. Alle Telefonmodelle zeigen die Vorder- und Rückseite (bei flip-Videos) und haben eine realistische Kameraleiste.
Eigenes .glb-Modell – mit --device pfad/zu/model.glb. Das Modell muss ein Phone-, Tablet- oder Laptop-Bone-System für die Bildschirm- und Kamerapositionierung haben (siehe $SKILL/docs/custom-models.md für Bones, UV-Map und Beispiel). Das Modell erhält automatisch eine CREDITS.txt-Datei im Ausgabeordner mit einer Standard-Nennung; überschreiben mit meta.credit: "…" im Modell oder --set meta.credit="…".
Alle 3D-Modelle in der Fähigkeit werden unter CC-BY 4.0 verteilt. Die CREDITS.txt muss mit jedem Bild oder Video verteilt werden, das ein 3D-Gerät zeigt. Wenn Sie texturierte Modelle sehen, müssen Sie ihnen eine Nennung geben: Das ist keine optionale Bitte; es ist die Lizenz.

8. Das Studio (Vorschau = Editor)

node "$SKILL/scripts/cli.mjs" studio shots/01.png shots/02.png shots/03.png --theme ledger

Dies startet einen lokalen HTTP-Server, öffnet den Browser auf stage/stage.html und lädt die Screens und den Text in eine Live-Kopie des ausgewählten Themas. Die Studio-Seite enthält eine Symbolleiste, die die Live---set- und --size-Bearbeitung, Themen-/Layout-Auswahl, ein Farbpipetten-Tool (die aktuelle auto-Farbe, die aus Ihrem Bildschirm kommt) und die Möglichkeit, mehrere Ausgabegrößen gleichzeitig zu betrachten, freischaltet.

Schreiben Sie das JSON, das der Benutzer im Studio erstellt in eine Projektkonfigurationsdatei (node "$SKILL/scripts/cli.mjs" init app-store, die es generiert, wenn es nicht existiert), ersetzen Sie nur die Schlüssel, die sich geändert haben. Zum Beispiel:

{
  "category": "app-store",
  "theme": "ledger",
  "slides": [
    {
      "screen": "shots/01.png",
      "title": "Jeder Euro, *buchgeführt*",
      "subtitle": "Einzeiliger Nutzen…"
    }
  ],
  "themeOverrides": {
    "palette": { "accent": "#ff5a1f" },
    "device": { "pose": [5, -15, 4] }
  },
  "sizes": ["iphone-6.9", "ipad-13"]
}

Dann rendern Sie es: node "$SKILL/scripts/cli.mjs".

9. Pre-Checks und Sicherheitsnetze

Vor dem Rendern eine Tabelle der Folien mit copy preview ausgeben. Jede Folie zeigt Vorschaubild, Überschrift, Untertitel, Dauer (Aufnahmen). Dies fängt fehlende/vertauschte Bildschirme und Tippfehler im Text, bevor 3 Minuten Video vergeudet werden.
copy" <kategorie> gibt einen CLI-Befehl für einen Schnellstart aus. copy" full ist der vollständige Befehl mit benutzerdefinierten Themen, --set überschreibungen, mehreren Größen und per-slide decor.
Der erste list-Befehl ist langsam (Bündelung von three.js/sharp/ffmpeg). Danach sind sie sofort.
Fehlerbehandlung: Ein fehlgeschlagener Frame stoppt das Rendern nicht – die Ausgabe zeigt ihm eine rote Überschreibung, setzt dann den Rest fort. Am Ende gibt es eine Zusammenfassung: 5 OK, 1 FAILED (slide 3: device model not found — check --device).

10. Plattform-Hinweise

Gemini / Gemnasium: $SKILL muss eine absolute Umgebungsvariable sein; Gemini hat kein Konzept dafür. Finden Sie die Fähigkeit, bevor Sie sie verwenden. Ihr fis-Tool kann den absoluten Pfad aus der .cursorindex- oder .claude/skills-Struktur auflösen.
Cursor: Siehe <guidelines> in Cursor-Regeln. Verwenden Sie $CURSOR_HOME oder cwd, falls verfügbar.
Claude Code / Codex: SKILL erwartet, gesetzt zu sein; die find-Befehle oben funktionieren in jeder Shell.

11. Beispiel-Workflow

# 1. Fähigkeit finden und einrichten
SKILL=/pfad/zu/app-preview-craft
node "$SKILL/scripts/doctor.mjs" --fix

# 2. App Store-Set rendern (3 Folien)
node "$SKILL/scripts/cli.mjs" app-store ./screenshots/01.png ./screenshots/02.png ./screenshots/03.png \
  --theme ledger \
  --title "Jeder Euro, *buchgeführt*" --title "Budgets, die sich *anpassen*" --title "Privat *by design*" \
  --subtitle "Verfolgen Sie Ausgaben mühelos" --subtitle "Intelligente Grenzen, die mit Ihnen lernen" --subtitle "Ihre Daten, verschlüsselt und sicher" \
  --size iphone-6.9,ipad-13 \
  --set palette.accent=auto

# 3. Überprüfen
open ./overview.png

# 4. Social-Card für denselben App
node "$SKILL/scripts/cli.mjs" social-card ./screenshots/01.png \
  --theme launch \
  --title "Jeder Euro, *buchgeführt*" \
  --subtitle "Die persönliche Finanz-App, der Sie vertrauen können" \
  --size og

# 5. 3D-Geräte-Mockup
node "$SKILL/scripts/cli.mjs" device-mockup ./screenshots/01.png \
  --theme studio \
  --device iphone-17-pro \
  --size mockup-portrait \
  --transparent

12. Hinweise zur Integration

Diese Fähigkeit interagiert ausschließlich über die CLI – es gibt keine API, kein SDK. Alle Ausgaben sind Dateien (out/-Verzeichnis, es sei denn, --out ist gesetzt). Die Fähigkeit schreibt in $TMPDIR/app-preview-craft/ während der Verarbeitung und räumt am Ende auf. Wenn der Agentenvorgang unterbrochen wird, können Rückstände zurückbleiben – doctor.mjs löscht diese beim Start.

Leistung: Ein App Store-Set (3 Folien, 1 Größe) dauert ~15–30 s auf einem M1 MacBook Air. Gerätevideos sind ~30–120 s (das Keyframe-Layout ist am schnellsten, da es die wenigsten Neukonfigurationen erfordert). Die meisten Kosten entstehen durch Chrome-Start und Video-Enkodierung. --frames kann zur schnellen Iteration verwendet werden.

Debugging: Setzen Sie VERBOSE=1 node … für Konsolenprotokolle, VERBOSE=2 für Chrome-Debug-Ports und VERBOSE=3 für Datenstruktur-Dumps. Fehler schreiben $TMPDIR/app-preview-craft/last-error.json.

Themen-Migration: Wenn ein Thema nicht vorhanden ist, geben Sie list themes --category <kategorie> aus und wählen Sie das nächste visuelle Äquivalent. Die meisten Themen portieren gut.

Nicht unterstützte Features: Keine Videovorschau in der CLI (nur Standbilder); keine Echtzeit-Kollaboration; keine Webhook-Bereitstellung; keine SVG-Ausgabe.

app-preview-craft

Was ist app-preview-craft?

In Ihrer bevorzugten KI fragen

Dokumentation