Was macht Ship to Show?
Framework in 7 Phasen, um einen Prototyp in ein Portfolio-Case-Study zu verwandeln.
Wann dieses Skill verwenden
- Der Benutzer hat einen Prototyp (React, Vue, HTML, exportiertes Figma) und möchte ihn dokumentieren
- Der Benutzer möchte ein Case-Study für sein Portfolio erstellen
- Der Benutzer möchte Demo-Videos einer Oberfläche erstellen
- Der Benutzer möchte ein Prototyp-Projekt auf seiner Website veröffentlichen
Voraussetzungen prüfen
Vor dem Start prüfen, ob die Tools installiert sind:
node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version
Wenn ein Tool fehlt, den Installationsbefehl (macOS) angeben:
- Node.js:
brew install node - FFmpeg:
brew install ffmpeg - Git:
brew install git - GitHub CLI:
brew install ghdanngh auth login - Vercel CLI:
npm i -g vercel
Die 7 Phasen
1. RAHMEN → Branche, Nutzer, Problem, Design-Perspektive identifizieren
2. STRUKTURIEREN → Prototyp lokal ausführbar machen
3. ANREICHERN → Fehlende Pfade für 5 Videos ergänzen
4. FILMEN → Videos via Puppeteer + FFmpeg erstellen
5. ERZÄHLEN → Case-Study mit narrativer Struktur und Beschriftungen verfassen
6. VERPACKEN → GitHub, Vercel, autarkes Integrationspaket
7. VERÖFFENTLICHEN → In die Portfolio-Seite integrieren
Die Phasen sequenziell ausführen. Jede Phase produziert ein konkretes Ergebnis, bevor die nächste beginnt. Phasen nicht zusammenfassen.
Phase 1: RAHMEN (15 Min)
Eingabe: eine Code-Datei oder ein Prototyp Ausgabe: case-study.md (v1), CLAUDE.md, Projekt-Memo
Aktionen
- Quellcode des Prototyps lesen
- Identifizieren:
- Die Branche und den Marktkontext
- Die Zielnutzer (Rolle, Nutzungskontext, Druck)
- Das adressierte Problem (mit einem Schlüsselwert, wenn möglich)
- Die vorhandenen Kernfunktionen
- Die Design-Perspektive (welche Hypothese der Prototyp testet)
- Eine Zusammenfassung von 1500 Zeichen mit narrativen Zwischenüberschriften verfassen
- Eine CLAUDE.md mit dem Projektpositionierung erstellen
- Eine Memo-Datei mit dem vollständigen Kontext erstellen
Checkliste
- Branche identifiziert
- Nutzer beschrieben (Rolle, Kontext, Druck)
- Problem mit einem Zahlenwert formuliert
- Design-Perspektive explizit
- Zusammenfassung verfasst
- CLAUDE.md erstellt
Phase 2: STRUKTURIEREN (10 Min)
Eingabe: die rohe Code-Datei Ausgabe: funktionsfähiges Projekt auf localhost
Aktionen
- package.json mit den erkannten Abhängigkeiten erstellen
- Build-Tool konfigurieren (Vite empfohlen)
- Tailwind CSS konfigurieren, falls verwendet
- index.html und Einstiegspunkt erstellen
- npm install
- Auf localhost starten
Wichtiger Hinweis
Wenn das Projekt auf einem Netzwerkdateisystem liegt (Google Drive, Dropbox, OneDrive), vor dem Start lokal kopieren. Dateiüberwachungen funktionieren auf entfernten Dateisystemen nicht.
Checkliste
- npm install ohne Fehler
- npm run dev startet den Server
- Der Prototyp wird im Browser angezeigt
- Keine Konsolenfehler
Phase 3: ANREICHERN (30-45 Min)
Eingabe: der funktionierende Prototyp + das Framing Ausgabe: filmbarer Prototyp mit vollständigen Pfaden
Aktionen
- 5 filmbare Pfade identifizieren:
- Übersicht / Triage (Eingang, Filterung, Auswahl)
- Hauptfunktion (die Schlüsselinteraktion des Produkts)
- Entscheidungsfindung und Feedback (Aktion, Bestätigung, Auswirkung)
- Grenzfall (Fehlalarm, Fehler, schneller Fall)
- Vollständiger Durchlauf (Ablauf, Sitzungsmetriken)
- Fehlende Interaktionen für jeden Pfad auflisten
- Fehlende Interaktionen implementieren
- Unterschiedliche Daten pro Fall hinzufügen
- Simulierte Anbindungen hinzufügen (Slack, E-Mail, CRM, Export)
- Mikrointeraktionen hinzufügen (Animationen, Ton-Feedback falls sinnvoll)
Checkliste
- 5 Pfade identifiziert und funktionsfähig
- Unterschiedliche Daten für jeden Fall
- Simulierte Integrationen sichtbar
- Jeder Pfad in 10 bis 20 Sekunden filmbar
Phase 4: FILMEN (30 Min)
Eingabe: die definierten Pfade + der funktionierende Prototyp Ausgabe: 5 bis 8 MP4-Videos, 5 PNG-Screenshots
Aktionen
- Struktur der Video-Pipeline erstellen:
video-scenes/
├── capture.js
├── scenes/
│ ├── shared/
│ │ ├── design-tokens.css
│ │ ├── animations.css
│ │ └── components.css
│ ├── 01-scene.html
│ └── ...
└── output/
- Design-Tokens aus dem Prototyp extrahieren (Farben, Schrift, Abstände, Radien)
- Gemeinsame CSS-Animationen erstellen (fadeIn, slideUp, scaleIn, stagger, typing)
- Für jede Szene eine HTML-Datei erstellen mit:
- Einem zeitlichen Storyboard als CSS-Kommentar
- Frame-für-Frame steuerbaren CSS-Timeline-Animationen
- Markup, das die Oberfläche des Prototyps nachbildet
- capture.js erstellen (Puppeteer + FFmpeg) mit Steuerung via Web Animations API
- Alle Videos rendern
- 5 Retina-Screenshots des echten Prototyps aufnehmen
Kern-Technik: Frame-für-Frame-Steuerung
// Alle Animationen pausieren
document.getAnimations({ subtree: true }).forEach(a => a.pause());
// Pro Frame die Zeit weiterschalten
document.getAnimations({ subtree: true }).forEach(a => {
a.currentTime = currentTimeMs;
});
Video-Spezifikationen
- 1920x1080
- 30 fps
- H.264 (MP4) + WebM optional
- Schwarzer Hintergrund (#0a0a0a)
- Schriftart Inter (Google Fonts)
- Dauer 8 bis 20 Sekunden pro Video
Checkliste
- Alle Videos als MP4 gerendert
- Vorschau zugänglich (lokaler HTTP-Server)
- Retina-Screenshots aufgenommen
- Visuelle Qualität geprüft
Phase 5: ERZÄHLEN (20 Min)
Eingabe: das Framing + die Videos + die Pfade Ausgabe: case-study.md (DE), case-study-en.md (EN)
Aktionen
-
Das Case-Study mit folgender narrativer Struktur verfassen:
- Header (Titel, Untertitel, Kategorie, Autor)
- Hero-Bild (volle Breite)
- Intention des Experiments (persönlicher Kontext, 3 Absätze)
- Die grundlegende Erkenntnis (das Problem mit einer Zahl)
- VIDEO: vorher/nachher (oder Vergleich)
- Die Design-Frage (Leitprinzipien)
- VIDEO: Datenfluss / Architektur
- Ein Abschnitt pro Funktion (Text + Video + Beschriftung)
- Erkenntnisse (übertragbare Mechanismen)
- Stack + Links
-
Jedes Video wird von seiner Beschriftung begleitet:
- Titel in Fettschrift (was das Video zeigt)
- Frustration: das Benutzerproblem
- Nutzen: der geschaffene Wert
-
Kein Video-Raster ohne Kontext. Jedes Video hat seine eigene Erzählung.
-
Die Versionen DE und EN erstellen
Ton
Praktiker, der ein Experiment teilt. Kein Verkäufer, der ein Produkt bewirbt. Präzise und professionelle Überschriften (keine umgangssprachliche Ausdrucksweise). Sichtbare Struktur: Problem, Mechanismus, Implikation.
Checkliste
- Case-Study DE vollständig
- Case-Study EN vollständig
- Jedes Video hat seine Frustration/Nutzen-Beschriftung
- Abschnitt Erkenntnisse mit übertragbaren Mechanismen
- Narrative und professionelle Abschnittsüberschriften
Phase 6: VERPACKEN (15 Min)
Eingabe: alle Ergebnisse der vorherigen Phasen Ausgabe: GitHub-Repo, Vercel-Prototyp, PORTFOLIO-INTEGRATION.md
Aktionen
- .gitignore erstellen (node_modules, dist, .env, frames)
- Git-Repo initialisieren, strukturierten Commit durchführen
- Auf GitHub pushen (öffentliches Repo)
- Den Prototyp auf Vercel bereitstellen (Produktion)
- Autarkes PORTFOLIO-INTEGRATION.md erstellen:
- YAML-Metadaten des Projekts
- Befehle zum Kopieren von Assets
- Vollständiger Inhalt des Case-Studys, Abschnitt für Abschnitt
- Asset-Inventar (Videos, Screenshots, Positionen)
- Video-Format (autoplay/loop/muted/playsinline)
- Format der Beschriftungen
- Veröffentlichungs-Checkliste
Checkliste
- GitHub-Repo erstellt und gepusht
- Prototyp auf Vercel bereitgestellt
- Autarkes PORTFOLIO-INTEGRATION.md erstellt
- Datei in das Portfolio-Projekt kopiert
Phase 7: VERÖFFENTLICHEN (variabel)
Eingabe: PORTFOLIO-INTEGRATION.md im Portfolio-Projekt Ausgabe: veröffentlichte Projektseite auf der Website
Aktionen
Diese Phase wird in einer separaten Sitzung, im Portfolio-Projekt, ausgeführt. Der Prompt:
Lies PORTFOLIO-INTEGRATION.md und implementiere das Case-Study als Projekt
auf meiner Website. Die Datei enthält alle Anweisungen: Assets,
Inhalt, Seitenstruktur, Video-Format und Beschriftungen.
Checkliste
- Assets in das Portfolio-Projekt kopiert
- Projektseite erstellt
- Videos mit autoplay/loop/muted
- Beschriftungen unter jedem Video
- og:image konfiguriert
- Versionen DE und EN
- Links zum Prototyp und GitHub funktionsfähig
Zusammenfassung
| Phase | Dauer | Ergebnisse |
|---|---|---|
| 1. Rahmen | 15 Min | case-study v1, CLAUDE.md |
| 2. Strukturieren | 10 Min | Projekt localhost |
| 3. Anreichern | 30-45 Min | filmbarer Prototyp |
| 4. Filmen | 30 Min | Videos + Screenshots |
| 5. Erzählen | 20 Min | Case-Study DE/EN |
| 6. Verpacken | 15 Min | GitHub, Vercel, Paket |
| 7. Veröffentlichen | variabel | Portfolio-Seite |
| Gesamt | ~2h30 | vollständig veröffentlichtes Case-Study |