Videos erstellen mit Claude Code und remotion-best-practices

Dieses Kapitel erklärt, wie man lokal von Grund auf ein Remotion-Werbevideoprojekt mit Claude Code und dem Skill remotion-best-practices erstellt und generiert.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Ihre lokale Umgebung die folgenden Anforderungen erfüllt.

Abhängigkeiten	Versionsanforderung	Zweck
Node.js	>= 18.0	Remotion und npm-Skripte ausführen
npm / pnpm	Neueste stabile Version	Verwaltung von Abhängigkeitspaketen
Claude Code	Neueste Version	KI-gestützte Codegenerierung und Projekt-Scaffolding
remotion-best-practices	Als Skill installiert	Bietet Remotion-Projektstandards und -vorlagen

Claude Code installieren

Das offizielle Ein-Klick-Installationsskript ist verfügbar; führen Sie den entsprechenden Befehl für Ihr System aus.

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Überprüfen Sie nach der Installation, ob sie erfolgreich war:

$ claude --version
2.1.142 (Claude Code)

Beim ersten Ausführen müssen Sie sich bei Ihrem Anthropic-Konto anmelden und autorisieren. Wenn Sie kein offizielles Konto haben, können SieClaude Code API-Konfiguration prüfen

Den remotion-best-practices Skill installieren

Ein Skill ist ein Erweiterungspaket für Claude Code. remotion-best-practices bündelt Best Practices und Code-Vorlagen für Remotion-Projekte.

Was ist ein Skill

Ein Skill ist im Wesentlichen ein strukturiertes Prompt-Dokument (SKILL.md). Nachdem Claude Code es gelesen hat, erhält es Fachwissen und Spezifikationsvorgaben im entsprechenden Bereich.

Der remotion-best-practices Skill enthält die folgenden Inhalte:

Inhaltsmodul	Beschreibung
Projektverzeichnisstandards	Definiert standardmäßige geschichtete Strukturen für Kompositionen, Komponenten und Assets
Verwendung der Animation-API	Standardmuster für interpolate, spring und useCurrentFrame
Best Practices für die Leistung	Spezifikationen zur Vermeidung von redundantem Rendering, zum Vorladen statischer Assets usw.
Vorlagen für die Render-Konfiguration	Empfohlene Parameterkombinationen für Codec, fps, Auflösung usw.

Installationsmethode

Navigiere im Terminal zu deinem Projektverzeichnis und führe den Installationsbefehl aus:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

Nach der Installation kannst du überprüfen, ob der Skill erkannt wurde:

claude skills list

Du solltest einen Abschnitt ähnlich dem folgenden sehen:

Installed skills:
  - remotion-best-practices  (active)

Quellcode-Adresse von remotion-best-practices:https://github.com/remotion-dev/skills

Erstellen eines Remotion-Projekts

Nachdem alle Vorbereitungen abgeschlossen sind, starte Claude Code in einem leeren Verzeichnis und verwende einen einzigen Prompt, damit es das Projekt automatisch einrichtet.

Claude Code starten und einen Prompt übergeben

Wir können ein Verzeichnisvideo-markererstellen und dann hineinwechseln:

mkdir video-marker
cd video-marker

Im Projektverzeichnis ausführen:

claude

Nachdem du die interaktive Oberfläche betreten hast, füge den folgenden Prompt ein:

先读取 remotion-best-practices skill，然后创建一个 Remotion 项目。

目标：6 秒钟的「Hello Example」好莱坞风格片头视频，1920x1080，30fps.

效果要求：
- 纯黑背景
- "HELLO EXAMPLE" 文字以冲击力方式砸入画面，伴随冲击波扭曲效果
- 撞击瞬间爆发金色粒子
- 强烈的色差闪光（chromatic aberration）
- 文字落定后，绿色（#3A7EC2）轮廓光晕脉冲
- 顶部和底部黑色宽幅遮幅条像电影一样滑入

只需一个 Composition，不用拆分场景。整体质感对标好莱坞大片片头字幕。

Dann warte einfach, bis es generiert wird~

Wenn es fertig ist, wird es dir sagen, wie du die mp4-Datei generierst:

Browser-Vorschau:

cd hello-example
npm run dev

Vorschau-Effekt:

mp4 generieren:

cd hello-example
npx remotion render HelloExample out/hello-example.mp4

Exportinformationen:

Das Video befindet sich im out-Verzeichnis:

Der Prompt verlangt ausdrücklich, dass Claude Code zuerst den Skill liest, sodass der generierte Code streng der Spezifikation remotion-best-practices folgt, anstatt sich auf die eigenen Standardgewohnheiten des Modells zu verlassen.

Was Claude Code tun wird

Nach dem Lesen der Fähigkeit wird Claude Code automatisch die folgenden Schritte ausführen:

Schritt	Aktion	Generierter Inhalt
1	Projekt initialisieren	package.json、tsconfig.json、remotion.config.ts
2	Verzeichnisstruktur erstellen	src/compositions、src/components、src/assets
3	Scene-Komponenten generieren	Intro.tsx、FeaturesScene.tsx、StatsScene.tsx、Outro.tsx
4	Gemeinsame Komponenten generieren	TechCard.tsx、AnimatedCounter.tsx、CodeSnippet.tsx
5	Composition registrieren	Schließe alle Szenenübergänge in Root.tsx ab

Weitere Beispiele

Beispiel 1: Animation des Zahlenwachstums

帮我用 Remotion 创建一个 8 秒的视频。背景是深色，画面中央显示一个数字，从 0 逐渐增长到 1,000,000，数字有弹跳动画效果，最后定格时出现"突破百万！"的字样。字体要大，颜色用金黄色。
Claude Code 接到这个指令后会：

Wir können die KI das Video direkt in Claude für uns exportieren lassen:

Generiertes Video:

Beispiel 2: Produkteinführungs-Countdown

用 Remotion 做一个 15 秒的产品发布倒计时视频。从 10 倒数到 0，每个数字出现时有缩放+透明度的过渡动画，背景用黑色，数字用白色大字体，右上角有"NEW"红色徽章。倒计时结束时全屏出现产品名称"CLAUDE PRO"，字体要震撼。

Generiertes Video:

Wichtige Punkte:Je spezifischer der Prompt, desto besser. Wenn du die Zeit, Farben, Effekte und den Textinhalt klar beschreibst, kann Claude Code es auf Anhieb richtig umsetzen, ohne dass wiederholte Anpassungen nötig sind.

Die generierte Projektstruktur verstehen

Nachdem das Projekt eingerichtet ist, sieht die Verzeichnisstruktur wie folgt aus:

hello-example/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts              ← 入口，注册所有 Composition
    ├── Root.tsx              ← 主 Composition，拼接所有场景
    ├── compositions/
    │   ├── Intro.tsx         ← 开场 Logo 动画
    │   ├── ProblemScene.tsx  ← 问题引入场景
    │   ├── FeaturesScene.tsx ← 技术卡片展示
    │   ├── StatsScene.tsx    ← 数据统计场景
    │   └── Outro.tsx         ← 结尾 CTA
    ├── components/
    │   ├── TechCard.tsx      ← 单个技术卡片
    │   ├── AnimatedCounter.tsx ← 数字滚动
    │   └── CodeSnippet.tsx   ← 代码块动画
    └── assets/
        ├── colors.ts         ← 品牌色常量
        └── logo.svg

Erklärung der Kerndatei

Root.tsxEs ist der Einstiegspunkt des gesamten Videos, an dem alle Szenen in der Reihenfolge der Zeitachse zusammengesetzt werden:

Überblick über die Struktur von Root.tsx

import "./index.css";
import { Composition } from "remotion";
import { HelloExample } from "./Composition";

export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="HelloExample"
component={HelloExample}
durationInFrames={180}
fps={30}
width={1920}
height={1080}
/>
</>
);
};

Die Hauptvideokomponente, die Series verwendet, um Szenen in der richtigen Reihenfolge zusammenzufügen:

const MainVideo = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>   {/* 3秒 */}
        <Intro />
      </Series.Sequence>
      <Series.Sequence durationInFrames={210}>  {/* 7秒 */}
        <FeaturesScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={450}>  {/* 15秒 */}
        <StatsScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={300}>  {/* 10秒 */}
        <Outro />
      </Series.Sequence>
    </Series>
  );
};

Abhängigkeiten installieren und Vorschau anzeigen

Nachdem Claude Code den Code generiert hat, installieren Sie die Abhängigkeiten gemäß seinen Eingabeaufforderungen:

npm install

Starten Sie Remotion Studio, um den Videoeffekt in der Vorschau anzuzeigen:

npx remotion studio

> [email protected] studio
> remotion studio

Remotion Studio running at http://localhost:3000

Der Browser öffnet sich automatischhttp://localhost:3000, und Sie können die Zeitleiste ziehen, um den Effekt jedes Frames in Echtzeit in der Vorschau zu sehen.

Wenn eine Animation in einer Szene während der Vorschau zu schnell oder zu langsam erscheint, sagen Sie Claude Code einfach: "Die Karten-Eingangsanimation in Szene 2 ist zu schnell, verlängern Sie die Verzögerung", und Claude Code wird den entsprechenden Code finden und ändern.

Iteratives Anpassen mit Claude Code

Wenn Sie bei der Vorschau in Remotion Studio Probleme finden, können Sie diese direkt in natürlicher Sprache in Claude Code beschreiben, ohne den Code manuell zu ändern.

Häufige Anpassungsszenarien

Problembeschreibung	Wie Sie Claude Code anweisen
Kartenanimation zu schnell	Verringern Sie die Federsteifigkeit der Karten in FeaturesScene auf 80
Hintergrundfarbe ist falsch	Ändere die Hintergrundfarbe aller Szenen auf #0d1117
Der Zahlenzähler ist nicht flüssig	Verwende easeOutCubic-Easing für AnimatedCounter in StatsScene
Eine Szene hinzufügen	Füge nach StatsScene eine 10-sekündige Szene hinzu, die die Online-Instanz-Funktion präsentiert
Die Textschriftart ist zu klein	Ändere die Schriftart des Haupttitels in Intro.tsx auf 96px

Beschreibe das Problem direkt im Claude Code Terminal, und es findet die entsprechende Datei und ändert sie. Nach der Änderung lädt Remotion Studio automatisch per Hot-Reload neu.

Rendern und Exportieren des finalen Videos

Wenn du mit dem Ergebnis zufrieden bist, rendere es in eine MP4-Datei:

Render-Befehl

npx remotion render \
src/index.ts \ # Einstiegsdatei
ExamplePromo \ # Composition-ID, konsistent mit Root.tsx
out/example-promo.mp4 \ # Ausgabepfad
--codec=h264 \ # Kodierungsformat, beste Kompatibilität
--width=1920 \ # Ausgabebreite
--height=1080 # Ausgabehöhe

Rendering ExamplePromo (1800 frames)
Progress: ████████████████████ 100%
Rendered in 2m 34s → out/example-promo.mp4

Remotion Best Practices: KI zu besseren Leistungen verhelfen

Die Rendering-Geschwindigkeit hängt von der Szenenkomplexität und der Maschinenleistung ab. Wenn das Video lang ist und viele Effekte enthält, können Sie den Parameter--concurrency=4hinzufügen, um mehrthreadiges paralleles Rendering zu aktivieren, was eine Geschwindigkeitssteigerung um das 3- bis 4-fache bewirken kann.

In der tatsächlichen Nutzung gibt es einige Tipps, die die Qualität Ihrer Videos erheblich verbessern können. Wenn Sie diese Anweisungen zu Ihrem Prompt hinzufügen, wird sich ein spürbarer Unterschied zeigen:

🎬 Bildrate und Größe

Teilen Sie Claude Code mit, welche Plattform Sie anvisieren: Douyin verwendet1080×1920 Hochformat; Bilibili verwendet1920×1080 Querformat, WeChat verwendet1:1 Quadrat。
Für die Bildrate (fps) wird empfohlen,30fps(flüssig) oder60fps(ultra-flüssig, größere Dateigröße) zu verwenden.

🎞 Animation Rhythm

Verwende Remotionsspring()Funktion für Spring-Animationen, die 10-mal natürlicher ist als lineare Animationen. Sag im Prompt: "Verwende Spring-Easing-Effekte."
Wenn Text Zeichen für Zeichen erscheint, weise Claude an, "stagger delay" zu verwenden, wobei jedes Zeichen ein paar Frames versetzt erscheint.
Füge am Anfang und Ende des Videos 0.5 Sekunden Fade-in und Fade-out hinzu, um einen professionelleren Look zu erzielen.

🎨 Visuelle Textur

Verwende keine Volltonfarbe für den Hintergrund; lass Claude Farbverläufe oder Rastertexturen verwenden, um die Textur sofort zu verbessern.
Wenn du Untertitel hinzufügst, füge einentext-shadowzum Text hinzu; weißer Text ist auf dunklen Hintergründen klarer.
Verwende für Datencharts das@remotion/motion-blurPlugin, das während der Bewegung einen Unschärfeeffekt hinzufügt, wodurch es eher wie eine filmische Aufnahme wirkt.

⚡ Rendering-Effizienz

Verwende während der Entwicklungnpx remotion previewpreview und render/export nur, wenn du zufrieden bist, wodurch Zeit gespart wird.
Wenn das Video sehr lang ist, lass Claude--concurrencyParameter für paralleles Rendering aktivieren, wodurch es um ein Vielfaches schneller wird.
Verwende für Bild- und SchriftressourcenstaticFile()Referenzen, um Pfadfehler zu vermeiden.

Häufig gestellte Fragen

Claude Code hat den Skill nicht gelesen

Wenn der generierte Code nicht der Spezifikation von remotion-best-practices entspricht, bedeutet das, dass der Skill nicht richtig gelesen wurde.

Füge diesen Satz explizit am Anfang des Prompts ein:

Erzwinge das Lesen des Skills

Bevor du irgendeinen Code schreibst, lies die remotion-best-practices Skill -Datei vollständig.

Remotion Studio Startfehler

Eine häufige Ursache ist, dass die Node.js-Version zu alt ist. Prüfen und aktualisieren:

Node.js aktualisieren

# nvm verwenden, um zu Node.js 20 zu wechseln
nvm install 20
nvm use 20

spring()-Animation zeigt nur das erste Frame

Dies liegt daran, dassframe - delaywenn der Wert negativ ist, gibt spring 0 zurück.

Clamp-Schutz hinzufügen:

Beheben des Problems mit negativen Frames

const scale = spring({
frame: Math.max(0, frame - delay), // Sicherstellen, dass der übergebene Wert nicht negativ ist
fps,
config: { damping: 12, stiffness: 180 },
});

Andere Erweiterungen