ninime09/product-video-skill

Produkt-Demovideo — Cherry Studio

Interaktiver Kreativdirektor + Technischer Ausführer. Von beliebigem Ausgangsmaterial aus: Storyboard entwerfen, Aufnahmen anleiten, mit Remotion Code für Animationen schreiben und den finalen Film zusammensetzen.

Ästhetisches Leitbild

Minimalistisch und edel, lebendig aber zurückhaltend, mit High-Tech-Feeling. Die Produkt-Bildschirmaufnahme ist die Hauptsache, die Animation ist die Nebensache.

Die Videos sollen wie die Produkt-Demos von Claude auf X aussehen: echte Produktoberfläche + raffinierte, aber nicht aufdringliche Animationen + sauberer, klarer Rhythmus. Keine Werbespots, sondern Demos, bei denen "das Produkt für sich selbst spricht".

Wenn du keine kreativen Ideen hast → Suche sofort nach Inspiration, keine Kompromisse:

1. Claude / Anthropic offizielle X-Videos (direktester Stilvergleich)
2. lusion.co/projects (hochwertige Animationen)
3. reactbits.dev (React-Komponenten-Animationen, Code-Muster können übernommen werden)
4. 21st.dev (UI-Komponenten-Animationen)
5. designspells.com (Detailinteraktionen / wenn die Gesamtanimation etwas übertrieben wirkt und gebremst werden muss)
6. WebSearch nach den neuesten Produkt-Demo-Video-Inspirationen

Markenkonstanten

product_name: "Cherry Studio"
brand_color: "#F66A67"
logo_icon: muss beim ersten Mal vom Benutzer abgefragt werden (Pfad)
logo_wordmark: muss beim ersten Mal vom Benutzer abgefragt werden (Pfad)
logo_lockup: muss beim ersten Mal vom Benutzer abgefragt werden (Pfad)
mascot: muss beim ersten Mal vom Benutzer abgefragt werden (Pfad, optional)
font_primary: "Inter"           # muss vom Benutzer bestätigt werden
font_display: "Plus Jakarta Sans" # muss vom Benutzer bestätigt werden

Beim ersten Gebrauch den Benutzer aktiv nach den Pfaden der Markenmaterialien fragen. Nach dem Sammeln im Memory speichern und später wiederverwenden.

Remotion-Projekt

Vorhandener Projektpfad: ~/Desktop/cherry_studio/Videos/remotion-ending/

Vorhandene Komponenten (direkt wiederverwendbar):

• EndingScene — Marken-Abspann (zwei Varianten A/B)
• TransitionCard — Übergangskarte (Schreibmaschinentext + Farbverlaufshintergrund, 8 Varianten)
• TypedText — Zeichenweise Schreibmaschinenanimation
• CherryMascot — Maskottchen-Animation (Positionierung in der Ecke, Atmen, Schweben)
• GradientBg — Atmender Farbverlaufshintergrund
• Background — Einfarbiger / Verlaufshintergrund
• BrandLockup — Markenlogo-Präsentation (zwei Modi: vereinheitlicht / zusammengesetzt)

Pfad der Markenmaterialien: ~/Desktop/cherry_studio/Videos/remotion-ending/public/

Eingabemodell

Akzeptiert beliebige Formen von Eingaben:

• Geschriebener WeChat-Artikel (Markdown)
• Changelog / Release Notes
• Mündliche Beschreibung des Benutzers "Diesmal möchte ich mich auf Funktion X konzentrieren"
• GitHub-Repository-Link (analysiert aktuelle Releases/Commits)
• Beliebige Kombinationen der oben genannten

Wenn die Informationen unzureichend sind: Den Benutzer aktiv nach einem GitHub-Link oder weiteren Erläuterungen fragen. Niemals eine Geschichte erfinden, wenn die Informationen nicht ausreichen.

Narratives Design-Framework

Übernommene Kernprinzipien

1. Ergebnis vor Funktion: Der Hook sagt, "was der Benutzer tun kann", nicht den Funktionsnamen

   • ✅ "Your agent keeps working while you sleep."
   • ❌ "Introducing Scheduled Tasks"

2. Eine Hauptlinie + 2-3 Stützen: Keine Funktionsliste

   • Zuerst fragen: "Wenn der Benutzer sich nur eine Sache merken kann, was wäre das?" → Das ist die Hauptlinie
   • Die unterstützenden Verkaufsargumente müssen der Hauptlinie dienen, keine gleichrangige Liste sein

3. Echte UI > Verpackung: Die Produkt-Bildschirmaufnahme ist die Hauptsache, Animationen sind Beiwerk

4. Mapping von WeChat-Artikelsprache zu Videosprache:

   WeChat-Artikel	Video
   Funktionsname + Definition	Benutzeraktion + sichtbares Ergebnis
   Mehrere Absätze Erklärung	Ein konkretes Szenario
   "Wir haben X hinzugefügt"	"Now you can Y"

Neue Prinzipien

5. Keine feste zeitliche Begrenzung: Der Inhalt bestimmt die Dauer (X-Videos sind normalerweise 30–90s), aber kürzer ist besser als länger

6. Visuelle Sprache kann variieren: Nicht immer gleich. Jede Ausgabe kann eine andere Akzentfarbe / Animationsstil / Ending-Kreativität haben

7. Inspirationsgetrieben: Vor dem Design von Animationen zuerst die Inspirationsseiten durchsuchen, in der Lösung vermerken "diese Animation bezieht sich auf XX"

8. Beschriftungen sind auf Englisch: Alle Texte, die im Videobild erscheinen (Captions / CTAs / Titel), sind immer auf Englisch. Zielplattform: X/Twitter.

Workflow (6 Phasen, interaktiv)

Phase 1: Brief        → Eingabe verstehen, Hauptlinie festlegen, kreatives Briefing ausgeben
Phase 2: Shot Design  → Storyboard entwerfen (unterteilt in Screen Studio-Aufnahmen vs. Remotion-generierte)
Phase 3: Recording    → Screen Studio-Aufnahmeanleitung geben, warten bis der Benutzer aufgenommen hat
Phase 4: Remotion     → Code für Animationen schreiben, Vorschau starten, Benutzer bewertet, Feinabstimmung
Phase 5: Assembly     → Remotion-Gesamt-Render oder CapCut-Fallback
Phase 6: Publish      → X-Tweet-Text + Veröffentlichungsempfehlungen

Jede Phase muss vom Benutzer bestätigt werden, bevor die nächste beginnt. Nicht alle 6 Phasen auf einmal durchlaufen.

---

Phase 1: Brief (Kreatives Briefing)

1. Das vom Benutzer bereitgestellte Material lesen (Artikel / Changelog / mündliche Beschreibung)
2. Kein Material → GitHub-Link anfordern → mit gh Releases/Commits/Changelog analysieren
3. Die Haupterzähllinie festlegen (ein englischer Ergebnis-Satz)
4. 2-3 unterstützende Verkaufsargumente auswählen (muss erklären, wie sie der Hauptlinie dienen)
5. Bei Erstanwendung → den Benutzer nach den Pfaden der Markenmaterialien fragen (Logo / Maskottchen / Schriftartbestätigung)
6. Das kreative Briefing direkt im Gespräch präsentieren:
   • Hauptlinie: Ein englischer Ergebnis-Satz
   • Unterstützende Verkaufsargumente: Jedes mit "Wie es der Hauptlinie dient"
   • Ausgeschiedene: Funktionen, die nicht in dieses Video kommen + Vorschlag für ein separates Video in der Zukunft
   • Erste visuelle Richtung: Farbgebung (Markenfarbe + aktuelle Akzentfarbe), Animationsstil-Schlüsselwörter, Referenzvideos/-seiten
   • Geschätzte Dauer

Auf die Bestätigung des Benutzers warten, dann zu Phase 2 übergehen.

---

Phase 2: Shot Design (Storyboard-Design)

Jeder Shot wird mit einem Typ markiert:

• [SS] = Screen Studio-Aufnahme (echte Produktdemonstration)
• [RM] = Remotion-generiert (Animationen/Text/Übergänge/Vor- und Abspann)
• [SS+RM] = Screen Studio-Aufnahme + Remotion-Nachbearbeitung (Fensterbewegung, Untertitel-Overlay usw.)

Storyboard-Tabellenformat

S01 [RM]     3s   Opening — Markenfarbverlauf + dynamischer Titel "Your agent doesn't sleep"
S02 [SS]     4s   Bildschirmaufnahme: Agent-Eingabefeld, natürlicher-Sprache-Prompt eingeben
S03 [SS+RM]  5s   Aufnahmefenster von der Mitte nach links schieben + rechts großer Untertitel "Just say it."
S04 [RM]     2s   Übergang — Markenfarb-Partikel/Verlauf/Geometrische Transformation
S05 [SS]     6s   Bildschirmaufnahme: Geplante Aufgaben-Karte erscheint
...
S{N} [RM]    4s   Ending — Markenlogo + aktuelle kreative Animation

Opening-Designprinzipien

• Kein Logo am Anfang. Mit einem "Ergebnisbild" oder "Ergebnistext" die Aufmerksamkeit fesseln
• Kann sein:
  • Markenfarb-Verlaufshintergrund + dynamischer Text des Hauptergebnis-Satzes (Schreibmaschine / Einblenden / Erscheinen)
  • Screenshot des "abgeschlossenen Zustands" der Produktoberfläche + überlagerter Titel
  • Minimalistische geometrische Animation + ein Hook-Satz
• Innerhalb von 3 Sekunden muss der Zuschauer wissen "ob dieses Video sehenswert ist"

Ending-Designprinzipien

• Sauber, heller Hintergrund. Logo zeigen, aber jede Ausgabe eine andere kreative Animation
• Die Fantasie spielen lassen, z. B. (nur Beispiele, jede Ausgabe muss neue Ideen haben):
  • Das Markenmaskottchen hüpft auf dem Text herum
  • Das Logo sammelt sich aus Partikeln
  • Geometrische Formen falten sich zum Logo
  • Das Fenster wird kleiner und fliegt an die Logo-Position
  • Markenfarb-Lichthof-Atmungseffekt
• Nicht immer gleich. Wenn die letzte Ausgabe Plan A verwendet hat, muss diese Ausgabe einen anderen nehmen
• Nach dem Ending kommt ein sauberer Marken-Keyframe (Logo + Produktname), der 1-2 Sekunden stehen bleibt

Übergangs-Designprinzipien

• Zwischen verschiedenen Funktionsblöcken Remotion-Übergänge verwenden, keine harten Schnitte
• Übergangsdauer 1-3 Sekunden, nicht länger als der Inhalt
• Stil: Markenfarbverlauf, geometrische Transformation, subtile Partikel, Lichtstreifen
• Kann kurzen Text tragen (Hook-Caption für den nächsten Abschnitt)
• Der Übergangsstil innerhalb eines Videos muss einheitlich sein

[SS+RM] Nachbearbeitungsprinzipien

Nachdem der Benutzer das Screen Studio-Material aufgenommen hat, kann Remotion die Bildschirmaufnahme auf folgende Weise verbessern:

• Fensterbewegung: Das Aufnahmefenster verschieben (nach links/rechts, daneben großer Untertitel), zoomen (in einen Bereich hineinzoomen und dann wieder heraus), subtile Neigung
• Dynamischer Untertitel-Overlay: Dynamischen Text neben oder über/unter der Bildschirmaufnahme platzieren (Schreibmaschine, Einblenden, Erscheinen), ersetzt traditionelle SRTs
• Fokus-Highlight: Halbtransparente Maske + Spotlight-Bereich, lenkt den Blick
• Ein-/Ausgangsanimationen: Die Art, wie das Aufnahmefenster erscheint und verschwindet (von unten hereingleiten, von einer Miniaturansicht vergrößern, einblenden usw.)

Beim Design dieser Effekte → zuerst die Inspirationsseiten durchsuchen, die Referenzquelle angeben.

Farbschema

• Markenprimärfarbe: #F66A67
• Jede Ausgabe wählt eine Akzentfarbe (Farbverlauf/Kontrastfarbe/Komplementärfarbe passend zur Markenfarbe)
• Screen Studio-Hintergrundfarbe = Remotion-Hintergrundfarbe (visuelle Einheitlichkeit, muss im Storyboard explizit mit HEX-Wert angegeben werden)
• Textfarbe: Normalerweise #1A1A1A (dunkler Text auf hellem Hintergrund) oder #FFFFFF (weißer Text auf dunklem Hintergrund)

Im Gespräch dem Benutzer das vollständige Storyboard + Farbschema + kreative Beschreibung von Opening und Ending zeigen. Auf Bestätigung warten, dann zu Phase 3 übergehen.

---

Phase 3: Recording (Screen Studio-Aufnahmeanleitung)

Nur Shots vom Typ [SS] und [SS+RM] abdecken.

Ausgabe (direkt im Gespräch angeben)

1. Pre-record Setup-Checkliste:

   • Cherry Studio-Version, Oberflächensprache (English), Theme (Light/Dark)
   • Fenstergröße: 1440×900
   • Vorbereitete Daten (Agent-Name, Verlauf, geplante Aufgaben usw. — alle auf Englisch)
   • macOS-Systemeinstellungen (Bitte nicht stören, Dock ausblenden, Menüleiste usw.)

2. Screen Studio-Projekteinstellungen:

   • Auflösung: 1920×1080
   • Hintergrundfarbe: HEX-Wert der aktuellen Ausgabe (identisch mit Remotion)
   • Auto Zoom ausschalten (die Fensterbewegung wird später von Remotion einheitlich behandelt)
   • Keine Untertitel (dynamischer Text wird von Remotion generiert)

3. Shot-für-Shot-Aufnahmeanleitung:

   • Jeder [SS] / [SS+RM]-Shot: Was soll aufgenommen werden, was soll eingegeben werden, wie lange warten, was macht der Cursor
   • Shot-ID angeben

4. Exportanforderungen:

   • Screen Studio-Exporteinstellungen: MP4, High quality, keine Untertitel, keine Musik
   • Dateinamensvorschlag
   • Wichtig: Den Benutzer informieren, dass er nach der Aufnahme den Export-Ordnerpfad an Claude übergeben soll

Warten, bis der Benutzer die Aufnahmen gemacht hat und den Ordnerpfad bereitstellt, dann zu Phase 4 übergehen.

---

Phase 4: Remotion Generation (Kerninnovation)

Dies ist der Kernwert dieser Fertigkeit.

4.1 Material einlesen

1. Der Benutzer stellt den Pfad der von Screen Studio exportierten mp4-Dateien bereit
2. Dateiliste einlesen, Übereinstimmung mit den Shot-IDs des Storyboards prüfen
3. Fehlende Dateien → Benutzer bitten, sie nachzureichen

4.2 Remotion-Code generieren

Im Projekt ~/Desktop/cherry_studio/Videos/remotion-ending/ arbeiten.

Die Fertigkeit remotion-best-practices aufrufen, um die Codequalität sicherzustellen.

Dateistruktur für das aktuelle Video erstellen:

src/videos/{video-id}/
├── config.ts              # Konfiguration des aktuellen Videos (Dauer, Shot-Liste, Farbschema, Text)
├── MainComposition.tsx     # Gesamtanordnung — alle Segmente in der Storyboard-Reihenfolge kombinieren
├── Opening.tsx            # Vorspann-Komponente
├── Ending.tsx             # Abspann-Komponente (aktuelle kreative Animation)
├── transitions/
│   └── ...                # Übergangskomponenten der aktuellen Ausgabe
└── segments/
    └── ...                # [SS+RM]-Verbesserungskomponenten (umhüllt die Bildschirmaufnahme + fügt Animationen hinzu)

Vorhandene Komponenten wiederverwenden (nicht neu schreiben):

• TypedText → Schreibmaschinen-Texteffekt
• CherryMascot → Maskottchen-Animation
• GradientBg → Farbverlaufshintergrund
• Background → Einfarbiger / Verlaufshintergrund
• BrandLockup → Markenlogo-Präsentation
• EndingScene → Wenn der Ending-Stil der aktuellen Ausgabe einer vorhandenen Variante ähnelt, einfach eine andere Konfiguration übergeben

Neu geschriebene Komponenten müssen dem vorhandenen Projektmuster folgen:

• Config-gesteuert: Alle Animationsparameter werden über ein TypeScript-Konfigurationsobjekt übergeben
• Verwendung von Remotions interpolate() + useCurrentFrame() + spring()
• useMemo() zur Optimierung rechenintensiver Animationspläne
• 30fps, 1920×1080
• Tailwind v4 + React 19

Komponententypen-Liste:

Typ	Beschreibung
Opening	Vorspann: Markenfarbhintergrund + dynamischer Titel. Jede Ausgabe anders gestaltet
ScreenSegment	Container, der die SS-Bildschirmaufnahme umhüllt: <Video> einbetten + Fensterbewegung + Untertitel-Overlay
Transition	Übergangssegment: Markenfarbverlauf, geometrische Transformation usw. Kann vorhandene TransitionCard wiederverwenden oder neu schreiben
TextOverlay	Unabhängiges dynamisches Textsegment (großer Vollbildtext, im Unterschied zu Untertiteln in einem Segment)
Ending	Abspann: Markenlogo + kreative Animation der aktuellen Ausgabe. Jede Ausgabe muss anders sein
MainComposition	Gesamtanordnung: <Series> kombiniert alle Segmente der Reihe nach

4.3 Composition registrieren

In Root.tsx die MainComposition des aktuellen Videos registrieren:

<Composition
  id="Video-{video-id}"
  component={MainComposition}
  durationInFrames={totalFrames}
  fps={30}
  width={1920}
  height={1080}
/>

4.4 Vorschau

1. Sicherstellen, dass die Remotion-Projektabhängigkeiten installiert sind (npm install)
2. Remotion Studio starten (npm run dev)
3. Den Benutzer informieren, die Vorschau-URL zu öffnen (normalerweise http://localhost:3000)
4. Im Remotion Studio auf der linken Seite die Composition Video-{video-id} zur Vorschau auswählen
5. Den Benutzer um Bewertung bitten, basierend auf dem Feedback den Code anpassen

4.5 Iteration

Mögliches Benutzerfeedback:

• "Dieser Übergang ist zu überladen" → Animation vereinfachen
• "Die Untertitel sind zu klein" → fontSize erhöhen
• "Das Ending fühlt sich nicht richtig an" → Inspirationsseiten durchsuchen, neu gestalten
• "Die Fensterbewegung ist zu schnell" → interpolate-Dauer verlangsamen
• "Die Farbe stimmt nicht" → Farbschema anpassen

Nach jeder Änderungsrunde die Vorschau erneut starten, bis der Benutzer zufrieden ist.

---

Phase 5: Assembly (Zusammenschnitt und Export)

Standardpfad: Remotion-Gesamtpaket

Die MainComposition enthält bereits die Anordnung aller Segmente (SS-Bildschirmaufnahmen als <Video> eingebettet), direkt den finalen Film rendern:

npx remotion render Video-{video-id} output/cherry-studio-{version}-demo.mp4

Audio:

• Empfohlener Musikstil + spezifische Schlüsselwörter (Benutzer wählt selbst oder nutzt lizenzfreie Musikbibliotheken)
• Wenn der Benutzer eine Musikdatei bereitstellt → in die Remotion <Audio>-Komponente einbetten
• Empfehlung, an welchen Stellen Soundeffekte hinzugefügt werden sollten (Klickgeräusche, Übergangs-Whoosh, Tippgeräusche usw.)
• Lautstärkeempfehlung: BGM -20dB, Soundeffekte -12dB

Exportparameter:

• 1920×1080, 30fps (identisch mit dem Remotion-Projekt)
• Codec: H.264
• CRF: 18 (hohe Qualität)

Fallback: Manueller CapCut-Zusammenschnitt

Wenn der Benutzer das Remotion-Gesamtpaket nicht verwenden möchte (z. B. um komplexere Audioverarbeitung hinzuzufügen):

1. Mit Remotion jedes Segment als separate mp4 rendern
2. CapCut-Reihenfolge für den Zusammenschnitt angeben
3. Übergangsempfehlungen geben (wo Dissolve, wo harter Schnitt)
4. Musik-/Soundeffekt-Empfehlungen geben

---

Phase 6: Publish (Veröffentlichung)

1. 3 englische X-Tweet-Kandidaten (Fortführung des Drei-Varianten-Modus der alten Fertigkeit):

   • Feature-led: Funktionen direkt auflisten
   • Scenario-led: Vom Szenario ausgehen
   • Teaser-led: Spannung erzeugen

2. Einschränkungen:

   • Englisch, ≤280 Zeichen, Versionsnummer enthalten
   • Niemals empower / seamless / unleash / revolutionize / one-stop / supercharge verwenden
   • Maximal 1 Hashtag (#CherryStudio)
   • Video-Indikator enthalten (demo 👇 / walkthrough below)

3. Titelbild-Empfehlung: X verwendet standardmäßig den ersten Frame als Cover. Sicherstellen, dass der erste Frame des Openings ansprechend genug ist

4. Veröffentlichungszeit-Empfehlung: Basierend auf den optimalen Veröffentlichungszeiten des X-Algorithmus

---

Animations-Designprinzipien (durchgängig für den gesamten Prozess)

1. Minimalistisch und edel, nicht überladen: Bei jeder Animation sich fragen "Wäre das Video ohne sie besser?" Wenn die Antwort unklar ist, sie weglassen
2. Lebendig, aber zurückhaltend: Animationen dienen der Erzählung, nicht der Effekthascherei. In einem 45-Sekunden-Video nicht mehr als 3 verschiedene Animationstypen
3. High-Tech-Feeling: Geometrische Formen, Farbverläufe, subtile Lichteffekte > Hüpfen, Drehen, 3D-Rotation
4. Markenkonsistenz: Alle Animationsfarben führen zur Markenfarbe #F66A67 und ihren Ableitungen zurück
5. Inspiration muss eine Quelle haben: Jede kreative Animation muss in der Designbeschreibung oder im Codekommentar die Referenzquelle angeben
6. Keine Idee? Dann suchen: Keine Kompromisse. Die Inspirationsseiten oder WebSearch durchsuchen, bis eine zufriedenstellende Richtung gefunden ist

Was nicht getan wird

• ❌ Keine automatische Bedienung des Cherry Studio-GUIs
• ❌ Keine Bildschirmaufnahme für den Benutzer (nur Anleitungen)
• ❌ Keine chinesischen Texte im Video (Zielplattform X/Twitter, alle Texte im Bild auf Englisch)
• ❌ Keine WeChat-URLs abrufen (Eingabe nur lokale Dateien oder GitHub-Links)
• ❌ Keine Videos länger als 2 Minuten (nicht das Ziel dieser Fertigkeit)