Was macht Marketing Studio Agent?

Skill von ara.so – Sammlung von Marketing-Skills.

Marketing Studio ist eine agentengesteuerte Videorender-Engine für Claude Code. Führen Sie /marketing in Ihrem Produkt-Repository aus, um eine vollständige Launch-Asset-Suite zu generieren: 3D-Logoreveal, Bildschirm aufgezeichnete Produktdemo, heroisches Launch-Video mit Voiceover/Musik, plattformspezifische Social-Clips und OG-Assets. Das gesamte Rendering erfolgt in einem zentralen Engine-Repo mit Remotion, Blender, Playwright und ElevenLabs.

Installation

# Engine-Repo klonen
git clone https://github.com/ucsandman/marketing-studio.git
cd marketing-studio

# Abhängigkeiten installieren
cd studio && npm install && cd ..

# Konfiguration (optional: Blender-Pfad, ElevenLabs-API-Key)
cp .env.example .env

# Skills in Claude Code installieren
node scripts/install-skills.mjs

# Toolchain überprüfen
python launch.py --check

Das Installationsskript kopiert die Skills nach ~/.claude/skills und verknüpft sie mit Ihrem geklonten Engine-Pfad.

Kern-Workflow

Der `/marketing`-Befehl

Aus Ihrem Produkt-Repository:

claude
> /marketing

Dies führt die gesamte Pipeline aus:

Brand-Onboarding – Leitet Marken-Tokens aus Ihrem Designsystem ab (oder fragt danach)
Logoreveal – 3D-Blender-Animation, in Remotion composited
Produktdemo – Playwright zeichnet Ihre laufende App mit Kamerazoom auf
Launch-Video – 30-90s Hero-Video, das Demo, Logo und Text kombiniert
Audiospur – ElevenLabs-Voiceover und auf das Video abgestimmte Musik
Social-Clips – Plattformspezifische Ausschnitte (X, LinkedIn, TikTok)
OG-Assets – Statisches Bild, animierte Schleife, README-GIF

Einzelne Skills

Führen Sie jeden Asset-Typ eigenständig aus:

> /logo-reveal
> /product-demo
> /launch-video
> /audio-track
> /social-clip
> /og-assets

Brand-Konfiguration

Brands werden in brands/<id>.json definiert:

{
  "id": "myproduct",
  "name": "MyProduct",
  "tagline": "Schneller liefern, weniger kaputt machen",
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#8b5cf6",
    "accent": "#f59e0b",
    "background": "#000000",
    "foreground": "#ffffff",
    "muted": "#6b7280",
    "success": "#10b981",
    "warning": "#f59e0b",
    "error": "#ef4444",
    "text": "#f9fafb",
    "textMuted": "#9ca3af",
    "border": "#374151",
    "surface": "#111827"
  },
  "fonts": {
    "heading": "Inter",
    "body": "Inter",
    "mono": "JetBrains Mono"
  },
  "voice": {
    "tone": "selbstbewusst, technisch, kein Schnickschnack",
    "avoid": ["KI-Slop", "Game-Changer", "revolutionär"]
  }
}

Registrieren Sie die Brand in studio/src/lib/brand.ts:

import { z } from 'zod';

export const BrandSchema = z.object({
  id: z.string(),
  name: z.string(),
  tagline: z.string(),
  colors: z.object({
    primary: z.string(),
    secondary: z.string(),
    accent: z.string(),
    // ... alle 13 Farben
  }),
  fonts: z.object({
    heading: z.string(),
    body: z.string(),
    mono: z.string(),
  }),
  voice: z.object({
    tone: z.string(),
    avoid: z.array(z.string()),
  }),
});

export type Brand = z.infer<typeof BrandSchema>;

export function getBrand(brandId: string): Brand {
  const brandData = require(`../../brands/${brandId}.json`);
  return BrandSchema.parse(brandData);
}

Fügen Sie eine Logo-Mark-Komponente in studio/src/brands/<id>Mark.tsx hinzu:

import React from 'react';

export const MyProductMark: React.FC<{
  size?: number;
  color?: string;
}> = ({ size = 100, color = '#3b82f6' }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill={color} />
    </svg>
  );
};

Manuelles Rendern

Remotion-Befehle

Rendern Sie jede Komposition direkt:

cd studio

# Logoreveal
npx remotion render LogoReveal ../out/myproduct/logo.mp4 \
  --props='{"brandId":"myproduct","cta":"Den Launch ansehen"}'

# Produktdemo
npx remotion render ProductDemo ../out/myproduct/demo.mp4 \
  --props='{"brandId":"myproduct","captureVideo":"../assets/captures/demo.mp4"}'

# Launch-Video
npx remotion render LaunchVideo ../out/myproduct/launch.mp4 \
  --props='{"brandId":"myproduct","demoVideo":"../out/myproduct/demo.mp4","script":["Aufhänger","Problem","Lösung"]}'

# Social-Clip
npx remotion render SocialClip ../out/myproduct/social-x.mp4 \
  --props='{"brandId":"myproduct","platform":"x","feature":"Echtzeit-Synchronisation"}'

# Animiertes OG
npx remotion render AnimatedOG ../out/myproduct/og.mp4 \
  --props='{"brandId":"myproduct"}'

Feeder-Skripte

Produktdemo aufzeichnen

cd feeders/capture
node capture.mjs \
  --url http://localhost:3000 \
  --output ../../assets/captures/demo.mp4 \
  --brand myproduct \
  --script zoom-dashboard,click-feature,pan-results

Blender-Logo rendern

cd feeders/blender
python render_logo.py \
  --brand myproduct \
  --output ../../assets/blender/logo-frames/ \
  --style draw-on

Audio generieren

cd feeders/audio
node generate.mjs \
  --script "Liefern Sie Ihr Produkt in Tagen, nicht Monaten" \
  --voice-id "ELEVENLABS_VOICE_ID" \
  --output ../../assets/audio/voiceover.mp3

node generate.mjs \
  --type music \
  --mood energetic \
  --duration 60 \
  --output ../../assets/audio/music.mp3

Setzen Sie ELEVENLABS_API_KEY in .env.

Props-Builder

Generieren Sie Render-Props mit Builder-Skripten:

# Launch-Video-Props erstellen
node scripts/build-launch-props.mjs \
  --brand myproduct \
  --demo-video ./assets/captures/demo.mp4 \
  --script "Aufhänger" "Problembeschreibung" "Lösungsdemo" \
  --output ./props/launch-myproduct.json

# Social-Clip-Props erstellen
node scripts/build-social-props.mjs \
  --brand myproduct \
  --platform x \
  --feature "Echtzeit-Zusammenarbeit" \
  --output ./props/social-x-myproduct.json

Props-Dateien sind JSON:

{
  "brandId": "myproduct",
  "demoVideo": "./assets/captures/demo.mp4",
  "logoRevealVideo": "./out/myproduct/logo.mp4",
  "script": [
    {"type": "hook", "text": "In Tagen liefern, nicht Monaten", "duration": 3},
    {"type": "problem", "text": "Marketing-Assets brauchen Wochen", "duration": 4},
    {"type": "solution", "text": "Ein Befehl, vollständige Suite", "duration": 5}
  ],
  "voiceover": "./assets/audio/voiceover.mp3",
  "music": "./assets/audio/music.mp3"
}

Umgebungsvariablen

# .env
BLENDER_PATH=/Applications/Blender.app/Contents/MacOS/Blender
ELEVENLABS_API_KEY=Ihr_API_Key_hier
COMFYUI_URL=http://localhost:8188

Alle sind optional; Feeder funktionieren ohne sie eingeschränkt weiter.

Verifizierung und Tests

# Vollständiger Toolchain-Health-Check
python launch.py --check

# Frame 0 jeder Komposition rendern (Smoke-Test)
node scripts/smoke.mjs

# Brand-Schema-Validierung
cd studio && npm test

# Remotion Studio für interaktive Vorschau starten
python launch.py

Wichtige Muster

Fortsetzung bei Fehlern

Die Pipeline schreibt ein Run-Manifest in .marketing-run.json:

{
  "brand": "myproduct",
  "timestamp": "2026-07-10T12:00:00Z",
  "completed": ["logo-reveal", "product-demo"],
  "current": "launch-video",
  "props": {
    "logoRevealVideo": "./out/myproduct/logo.mp4",
    "demoVideo": "./out/myproduct/demo.mp4"
  }
}

Ein erneuter Aufruf von /marketing setzt am letzten unvollständigen Schritt fort.

Kamerazoom-Mathematik

Produktdemo-Aufnahmen verwenden gemessene Easing-Funktionen für professionelle Zooms:

// studio/src/lib/camera.ts
export function calculateZoom(
  frame: number,
  duration: number,
  startScale: number = 1,
  endScale: number = 1.2
): number {
  const progress = frame / duration;
  const eased = 1 - Math.pow(1 - progress, 3); // kubisches Ease-Out
  return startScale + (endScale - startScale) * eased;
}

Nahtlose Loop-Regeln

Animierte OG-Loops müssen auf identischen Frames beginnen und enden:

// studio/src/compositions/AnimatedOG.tsx
export const AnimatedOG: React.FC<{brandId: string}> = ({brandId}) => {
  const frame = useCurrentFrame();
  const {durationInFrames} = useVideoConfig();
  const brand = getBrand(brandId);
  
  // Auf [0, 1) normalisieren für nahtlosen Loop
  const progress = (frame % durationInFrames) / durationInFrames;
  const rotation = progress * 360;
  
  return (
    <AbsoluteFill style={{backgroundColor: brand.colors.background}}>
      <div style={{transform: `rotate(${rotation}deg)`}}>
        {/* Logo-Markierung */}
      </div>
    </AbsoluteFill>
  );
};

Plattformspezifische Social-Clips

Seitenverhältnisse und Sicherheitszonen pro Plattform:

// studio/src/compositions/SocialClip.tsx
const PLATFORM_SPECS = {
  x: { width: 1280, height: 720, safeZone: 0.1 },
  linkedin: { width: 1280, height: 720, safeZone: 0.1 },
  tiktok: { width: 1080, height: 1920, safeZone: 0.15 },
  instagram: { width: 1080, height: 1920, safeZone: 0.12 },
};

export const SocialClip: React.FC<{
  brandId: string;
  platform: keyof typeof PLATFORM_SPECS;
  feature: string;
}> = ({brandId, platform, feature}) => {
  const spec = PLATFORM_SPECS[platform];
  const safeWidth = spec.width * (1 - 2 * spec.safeZone);
  
  return (
    <AbsoluteFill style={{width: spec.width, height: spec.height}}>
      {/* Inhalt */}
    </AbsoluteFill>
  );
};

Fehlerbehebung

Blender nicht gefunden

Fehler: Blender executable nicht gefunden unter /Applications/Blender.app

Setzen Sie BLENDER_PATH in .env oder überspringen Sie 3D-Logoreveals (die Pipeline fällt auf 2D zurück).

ElevenLabs-Ratenlimit

Fehler: 429 Too Many Requests

Die Audio-Generierung ist optional. Die Pipeline rendert Videos ohne Voiceover, wenn die API fehlschlägt.

Playwright-Aufnahme-Timeout

Fehler: Seite wurde nicht innerhalb von 30s geladen

Stellen Sie sicher, dass Ihr Entwicklungsserver auf dem richtigen Port läuft. Das Aufnahmeskript wartet auf den Zustand networkidle.

Remotion-Speicherfehler

Fehler: JavaScript heap out of memory

Setzen Sie das Node-Speicherlimit:

export NODE_OPTIONS="--max-old-space-size=8192"
npx remotion render ...

Brand-Schema-Validierung fehlgeschlagen

Fehler: Ungültiges Brand-JSON

Führen Sie cd studio && npm test aus, um Schema-Verstöße zu sehen. Alle 13 Farben, 3 Schriftarten und Sprachregeln sind erforderlich.

Dateistruktur

marketing-studio/
├── brands/              # Produktspezifische Brand-Tokens (JSON)
├── studio/              # Remotion-Projekt (alle Kompositionen)
│   ├── src/
│   │   ├── compositions/
│   │   │   ├── LogoReveal.tsx
│   │   │   ├── ProductDemo.tsx
│   │   │   ├── LaunchVideo.tsx
│   │   │   ├── SocialClip.tsx
│   │   │   └── AnimatedOG.tsx
│   │   ├── brands/      # Logo-Mark-Komponenten
│   │   └── lib/
│   │       ├── brand.ts
│   │       └── camera.ts
├── feeders/
│   ├── blender/         # Headless-Blender-Szenen
│   ├── capture/         # Playwright-Rekorder
│   ├── audio/           # ElevenLabs-Client
│   └── comfy/           # ComfyUI-Client (optional)
├── skills/              # Claude-Code-Skills
│   ├── marketing.md
│   ├── logo-reveal.md
│   ├── product-demo.md
│   └── ...
├── scripts/
│   ├── install-skills.mjs
│   ├── build-launch-props.mjs
│   ├── build-social-props.mjs
│   └── smoke.mjs
├── props/               # Generierte Render-Props (JSON)
├── assets/              # Aufnahmen, Audio, Blender-Frames
├── out/                 # Finale gerenderte Videos
└── examples/            # Echte Ausgabe von ausgelieferten Produkten

Best Practices

Smoke-Test nach Brand-Änderungen ausführen: node scripts/smoke.mjs erfasst Schema-Fehler vor vollständigen Renderings
Props-Builder verwenden: Props-JSON niemals von Hand bearbeiten; scripts/build-*-props.mjs nutzen
Demo zuletzt nach UI-Arbeiten filmen: /polish und /frontend-verify vor /product-demo ausführen
Audio erst, nachdem das Bild feststeht: Voiceover erst generieren, wenn das Launch-Video-Skript endgültig ist
Lokal vor /marketing testen: Einzelne Skills (/logo-reveal, /product-demo) ausführen, um Brand-Tokens zu debuggen
Run-Manifest behalten: .marketing-run.json während aktiver Läufe nicht löschen (ermöglicht Fortsetzung)

Marketing Studio Agent

Was ist Marketing Studio Agent?

In Ihrer bevorzugten KI fragen

Dokumentation

Was macht Marketing Studio Agent?

Installation

Kern-Workflow

Der `/marketing`-Befehl

Einzelne Skills

Brand-Konfiguration

Manuelles Rendern

Remotion-Befehle

Feeder-Skripte

Produktdemo aufzeichnen

Blender-Logo rendern

Audio generieren

Props-Builder

Umgebungsvariablen

Verifizierung und Tests

Wichtige Muster

Fortsetzung bei Fehlern

Kamerazoom-Mathematik

Nahtlose Loop-Regeln

Plattformspezifische Social-Clips

Fehlerbehebung

Blender nicht gefunden

ElevenLabs-Ratenlimit

Playwright-Aufnahme-Timeout

Remotion-Speicherfehler

Brand-Schema-Validierung fehlgeschlagen

Dateistruktur

Best Practices

Verwandte Skills

Verwandte Skills

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

In Ihrer bevorzugten KI fragen

Dokumentation

Was macht Marketing Studio Agent?

Installation

Kern-Workflow

Der /marketing-Befehl

Einzelne Skills

Brand-Konfiguration

Manuelles Rendern

Remotion-Befehle

Feeder-Skripte

Produktdemo aufzeichnen

Blender-Logo rendern

Audio generieren

Props-Builder

Umgebungsvariablen

Verifizierung und Tests

Wichtige Muster

Fortsetzung bei Fehlern

Kamerazoom-Mathematik

Nahtlose Loop-Regeln

Plattformspezifische Social-Clips

Fehlerbehebung

Blender nicht gefunden

ElevenLabs-Ratenlimit

Playwright-Aufnahme-Timeout

Remotion-Speicherfehler

Brand-Schema-Validierung fehlgeschlagen

Dateistruktur

Best Practices

Verwandte Skills

Verwandte Skills

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

Der `/marketing`-Befehl