Vibe Editing mit Claude: alle Prompts aus dem Video

Werkzeuge: Claude Code (Opus 5.5, Aufwand „medium“) + HyperFrames (Open Source, github.com/heygen-com/hyperframes). Tipp: Installiere HyperFrames zuerst in Claude Code, dann kann Claude Videos als HTML bauen und rendern.

---

Use Case 1: Ein Short komplett von Claude schneiden lassen

Schritt 1: Schnittstil lernen. Lade 3–5 Videos eines Creators herunter, dessen Schnitt dir gefällt (nur zur Analyse), leg sie in einen Ordner und schreib:

Analysiere bitte einmal im Detail, also sehr, sehr ausführlich, den Editing Style von [Creator], den ich dir gegeben habe. Und schreib daraus eine Vorlage, bitte.

Schritt 2: Daraus einen Skill machen.

Daraus einen Skill erstellen.

Schritt 3: Dein Rohvideo mit dem Skill schneiden lassen.

Schneide das Video bitte einmal mit dem [Name] Skill. Achte darauf, bei den Einblendungen und Overlays, dass wenn ich Logos erwähne oder Prompts, oder irgendetwas in die Richtung, du dann das immer visualisierst und auch die richtigen Logos im Internet heraussuchst. Und achte auch bei Einblendungen darauf, dass sie immer zusätzlichen Mehrwert für den Zuschauer bieten oder Neugier erzeugen. Keine Untertitel generieren. Bleib bei der Original-Geschwindigkeit und spare bei den Soundeffekten.

---

Use Case 2: Aus einem Bild (Stellenanzeige) eine Animation

Lade deine Grafik ins Projekt hoch und ersetze Firma, Rollen, Orte und Farben durch deine eigenen.

Make a 10-second animated hiring clip for GeneralMind, built for the LinkedIn feed.

You are the creative director, motion designer, sound designer, and developer.

Build the clip in HyperFrames and render it to a 1080x1350 (4:5) 60fps MP4.
Also export a 1080x1080 square version from the same composition.

Everything on screen must be created in code:
- HTML
- CSS
- SVG
- Canvas
- GSAP

No stock footage.
No generated images.
No image assets (except the official GeneralMind logo if it exists in the project).

The audio must also be created from scratch:
- synthesize the soundtrack with the Web Audio API
- use OfflineAudioContext
- render to WAV and mux it into the MP4
- no samples, no external audio files

IMPORTANT: LinkedIn autoplays muted. The clip must work 100% without sound.
Sound is a bonus, never a carrier of information.

Create everything inside a new folder called:

generalmind-hiring-clip

---

# THE BRAND (context only, do not explain it in the clip)

GeneralMind automates the operational work between unstructured communication
(emails, PDFs, Excel) and enterprise systems (ERP).

Positioning: "Supply Chain on Autopilot."
Tagline: "From inbox to ERP. On autopilot."

The clip should FEEL like GeneralMind: calm, precise, intelligent, premium,
a hint of autonomy and flow. But it is a hiring post, not a product film.

---

# THE MESSAGE

GeneralMind is hiring.

Roles:
- GTM Engineer
- Partnership Manager (owns and runs Partnerships)
- Founding Generalist (techy, builder mindset)

Context:
- Key focus: US expansion
- Goal: unseen, exponential growth
- Locations: Berlin or New York City

The viewer should understand within 3 seconds:
"GeneralMind is hiring, and it's going big in the US."

---

# VISUAL DIRECTION

Base the look on the existing hiring graphic:

- muted blue-gray background (approx. #A3B4C2, verify against brand tokens in the project)
- white typography, large modern grotesk, tight tracking
- frosted-glass search box (backdrop blur, thin white border, soft inner light)
- GeneralMind logo top center
- minimal, airy, lots of whitespace

First inspect the project for official GeneralMind brand tokens, fonts, and logo.
If they exist, use them. Do not invent a new identity.

The core visual metaphor: THE SEARCH BOX.
The static graphic comes to life. A search is being typed.
Results appear like autocomplete, each role "resolving" like a matched record.
This subtly echoes what GeneralMind does: unstructured input becomes a clean,
structured result.

Avoid:
- generic "We're hiring!" confetti, emojis, rockets, balloons
- stock-style office imagery, handshake icons
- excessive neon, AI gradients, glowing brains
- busy particles
- anything that looks like a Canva template

---

# STRUCTURE (10 seconds)

Choose a tempo first (around 120 BPM works well: 1 beat = 0.5s).
Lock every major hit to a beat.

## 0.0–1.5s — HOOK

The blue-gray canvas. The glass search box fades/scales in with slight overshoot.
A blinking cursor. Typing starts immediately:

"We are looking for…"

Typing must feel real: slight timing irregularity, soft key ticks in the audio.
The first frame must already look intentional (it's the LinkedIn thumbnail).

## 1.5–3.0s — "WE'RE HIRING!"

The search box slides down. "We're hiring!" lands above it in huge type
(mask reveal per word, or letters rising from a baseline clip).
Logo settles top center.
Musical hit on the downbeat.

## 3.0–6.5s — THE ROLES

Results drop into the search box one by one, on the beat (~1s each):

  GTM Engineer
  Partnership Manager
  Founding Generalist

Each row: a thin divider draws in, the title types/resolves, then a small
right-aligned tag appears (e.g. "Berlin · NYC").
A subtle highlight sweep (the "autopilot line", one accent color) passes over
each row as it locks in, as if it were matched and confirmed.
Keep all three visible together at the end of this beat; hold long enough to read.

## 6.5–8.5s — US EXPANSION

The box compresses. A single thin accent line draws an arc from
"BERLIN" (left) to "NEW YORK" (right), like a route or data flow.
Type above or below:

"Building the US. From day one."

Optional small secondary line: "Exponential growth starts here."
Keep it to max 2 text elements on screen.

## 8.5–10.0s — END CARD (hold min. 1.5s)

Minimal:

GeneralMind
Supply Chain on Autopilot.

"Apply via link in comments"   ← (or careers URL if provided; do not invent one)

Subtle life: slow breathing glow on the glass, the accent line slowly flowing.
Never fully static.

Bonus: make the last frame visually match the first frame closely enough that
the clip loops cleanly on LinkedIn.

---

# TYPOGRAPHY

- one modern grotesk (brand font if available, otherwise e.g. Inter Tight / Geist)
- max 1 idea on screen at a time (except the role list)
- minimum text size readable on a phone in the feed: headline ≥ 110px,
  role titles ≥ 54px, tags ≥ 30px (at 1080 width)
- keep all text inside a safe area: 90px margin on all sides

---

# MOTION LANGUAGE

- nothing linear: deliberate easing (expo/power out, slight overshoot on entries)
- motivated transitions: the search box is the persistent object; it moves,
  scales, compresses, but never disappears abruptly
- no plain crossfades
- subtle depth: background blur layers, light parallax on the glass
- pace: energetic but calm; confident, not hectic

---

# SOUND DESIGN (optional layer, still build it)

- ~120 BPM, clean and modern, warm rather than dark
- soft key-tick sounds during typing
- light kick/pulse from the "We're hiring!" hit
- a small tonal "ping" per role as it locks in (ascending notes → feels like growth)
- whoosh on the Berlin → NYC arc
- warm resolved chord on the end card, short tail
- headroom, no clipping, no brick-wall compression

---

# TRUTHFULNESS

Only show what was given:
- the three roles
- Berlin / New York
- US expansion focus
- the brand taglines

Do NOT invent team size, funding, customer logos, salaries, metrics,
growth numbers, or a careers URL.

---

# BUILD PROCESS

Before coding:
1. Write a short beat sheet with exact timestamps and frame numbers.
2. Map every visual hit to a beat.
3. Define what the viewer must understand at each beat (sound off).
Then build.

---

# QUALITY CONTROL

After the first render:
- snapshot frame 0 (thumbnail), 2.0s, 5.5s, 7.5s, 9.5s and inspect each
- check readability at phone size (scale the frame down to ~360px wide and look again)
- check every text holds long enough to be read once
- check the clip works fully muted
- check that audio hits land on the intended frames
- check the 1:1 export: nothing cropped, composition still balanced
- fix anything that looks like a template, then re-render

---

# FINAL OUTPUT

generalmind-hiring-clip/
- source files and animation code
- audio generation code + rendered WAV
- hiring-4x5.mp4 (1080x1350, 60fps, ~10s, with audio)
- hiring-1x1.mp4 (1080x1080)
- poster.png (first frame, usable as a LinkedIn thumbnail)
- helper scripts to reproduce the render

The viewer should leave with one simple thought:

GeneralMind is hiring GTM Engineers, a Partnership owner, and Generalists,
in Berlin or NYC, to take Supply Chain on Autopilot to the US.

---

Use Case 3: Aus einem Prompt ein Brandfilm

Ersetze Marke, Positionierung und Story durch deine eigene – die Struktur (Beat Sheet, Sound aus Code, Qualitätskontrolle) funktioniert für jede Marke.

Make a cinematic 18-second brand launch film for GeneralMind.

You are the creative director, motion designer, sound designer, and developer.

Build the entire film in HyperFrames and render the final result to a 2560x1440 60fps MP4.

Everything on screen must be created in code:
- HTML
- CSS
- SVG
- Canvas
- GSAP

No stock footage.
No generated images.
No image assets.
No generic SaaS dashboard screenshots.

The audio must also be created from scratch:
- synthesize the complete soundtrack with the Web Audio API
- use OfflineAudioContext
- render the soundtrack to WAV
- mux it into the final MP4
- no audio samples or external audio files

Create everything inside a new folder called:

generalmind-trailer

---

# THE BRAND

GeneralMind automates operational work between unstructured communication and enterprise systems.

The core idea:

Companies already digitized their systems.

But much of the work between those systems is still done manually by humans.

Emails arrive.
PDFs are opened.
Excel files are checked.
Information is compared.
Exceptions are resolved.
Data is copied into ERP systems.

GeneralMind turns that manual layer into autonomous workflows.

Core positioning:

“Supply Chain on Autopilot.”

“From inbox to ERP. On autopilot.”

Strategic thesis:

“Companies digitized their systems.
They never digitized the work between them.”

Important:

Do NOT position ERP systems such as SAP as obsolete or as the enemy.

ERP remains the system of record.

The enemy is the manual work between systems.

GeneralMind is the execution layer between incoming operational information and the ERP.

---

# CREATIVE CONCEPT

The film should visualize the transition:

MANUAL OPERATIONS
→
OPERATIONAL AUTONOMY

The central visual metaphor should be:

EMAIL → EXCEL → HUMAN → ERP

transforming into:

EMAIL → GENERALMIND → ERP

But do not simply show this as static text.

Turn it into a cinematic visual system.

Represent enterprise operations as streams of information moving through space:

- email envelopes
- document outlines
- PDF pages
- spreadsheet cells
- purchase-order rows
- quantities
- delivery dates
- SKU-like identifiers
- approval states
- ERP-style structured records

Everything should be abstract and premium rather than looking like a literal fake enterprise dashboard.

At first, information should feel fragmented and manually connected.

Then GeneralMind should collapse that complexity into one clean autonomous flow.

The visual transformation itself should tell the story.

---

# STORY ARC

The viewer should understand the film even if they know nothing about GeneralMind.

The emotional progression:

FRICTION
→
COMPLEXITY
→
CONTROL
→
AUTONOMY

The first half shows the hidden manual work inside enterprise operations.

The second half reveals GeneralMind as the layer that makes that work disappear.

Do not create a feature tour.

Create a category-level brand statement.

---

# POSSIBLE 18-SECOND STRUCTURE

You may improve this structure if you find a stronger cinematic solution, but preserve the underlying story.

## 0.0–2.0s — COLD OPEN

Start nearly black.

One email appears in space.

Then another.

Then ten.

Then dozens.

Documents begin unfolding from them.

The soundtrack starts with a low mechanical pulse.

Large sparse text:

“ENTERPRISES DIGITIZED THEIR SYSTEMS.”

Hold long enough to read.

Something should already feel wrong.

---

## 2.0–5.0s — THE HIDDEN WORK

The camera moves through the operational flow.

EMAIL

becomes

PDF

becomes

EXCEL

becomes

HUMAN

becomes

ERP

Every transition requires another visible manual handoff.

Information splits into:

price
quantity
SKU
delivery date
supplier
PO number

Lines connect the pieces manually.

The system becomes increasingly dense.

Text:

“NOT THE WORK BETWEEN THEM.”

This should visually complete the opening thesis.

---

## 5.0–7.5s — THE PROBLEM PEAKS

The manual system accelerates.

Multiple documents.
Multiple decisions.
Multiple handoffs.

Copy.
Check.
Compare.
Correct.
Enter.

Words appear briefly as part of the environment rather than as slides.

The audio builds tension with:
- filtered noise riser
- accelerating pulse
- subtle mechanical clicks
- increasing sub energy

Then everything stops.

One frame of near-silence.

---

## 7.5–10.0s — THE DROP

A single clay / accent line cuts through the complexity.

It moves through:

EMAIL
→
DOCUMENT
→
DECISION
→
ERP

As it passes through the scene, the messy manual connections collapse.

EXCEL disappears.

HUMAN disappears from the repetitive execution layer.

The entire structure reorganizes into one elegant system.

Big impact in the soundtrack exactly on the transformation.

Text:

“THE WORK CAN RUN ITSELF.”

Do not imply that humans are removed from every decision.

This is about automating repetitive operational execution while preserving escalation when human judgment is needed.

---

## 10.0–13.0s — GENERALMIND

The autonomous flow becomes one continuous system.

Information enters.

It gets interpreted.

Matched.

Checked.

Structured.

Then moves into the ERP.

Show this through motion and visual transformation rather than explanatory paragraphs.

The word:

GENERALMIND

emerges from the center of the flow.

The surrounding operational data begins orbiting / routing through it.

---

## 13.0–15.5s — POSITIONING REVEAL

Everything simplifies.

Large typography:

“SUPPLY CHAIN
ON AUTOPILOT.”

This is the main brand moment.

Give it space.

The music should open up here with the melodic motif fully resolved.

---

## 15.5–18.0s — END CARD

Minimal.

GENERALMIND

From inbox to ERP.
On autopilot.

Hold the end card for at least 2 seconds.

Allow subtle motion:
- very slow depth drift
- breathing glow
- moving data line
- tiny parallax

Never completely static.

---

# VISUAL DIRECTION

The film should feel like a launch film from a top AI / enterprise technology company.

Think:

- premium
- architectural
- intelligent
- understated
- cinematic
- highly intentional

Avoid:

- generic AI gradients
- glowing brains
- robots
- matrix code
- fake futuristic HUD interfaces
- random particles
- corporate stock-video aesthetics
- cheesy “AI magic”
- excessive neon
- generic SaaS presentation slides

Enterprise operations should feel physical and dimensional.

Documents should behave like objects.

Data should behave like infrastructure.

GeneralMind should feel like the invisible execution layer connecting everything.

---

# TYPOGRAPHY

Text should be sparse.

Never use paragraphs.

Maximum one idea at a time.

Use approximately 2–7 words per major text moment.

Typography should feel editorial and expensive.

Use:

- a strong modern grotesk / sans for most typography
- optionally a restrained serif for one thesis moment if it improves the film

Do not use trendy decorative typography.

Hierarchy must remain readable on first viewing.

---

# COLOR

First inspect whether the project contains official GeneralMind brand tokens or existing brand styles.

If reliable existing brand colors are available, use them.

Do not invent a new corporate identity when one already exists.

If no brand system exists in the project, use a restrained temporary palette:

- warm off-white
- near-black / graphite
- muted gray
- one controlled cool or warm accent

The accent should primarily represent the autonomous GeneralMind layer.

Manual operations should feel visually noisier and lower contrast.

GeneralMind should simplify the palette as the film progresses.

---

# MOTION LANGUAGE

Nothing should move linearly.

Use deliberate easing everywhere.

Use:

- anticipation
- overshoot
- inertia
- parallax
- depth
- motion blur
- masks
- scale
- camera movement
- clipping
- perspective

Transitions must be motivated.

Examples:

An email edge becomes a spreadsheet line.

Spreadsheet cells stretch into ERP rows.

A cursor movement becomes the GeneralMind execution line.

A document folds into a structured data record.

A chaotic connection graph collapses into one path.

Do NOT use plain crossfades between scenes.

Make the entire film feel like one continuous transformation.

---

# CAMERA

Treat the composition like a 3D cinematic space even if most elements are DOM/SVG.

Use:

- foreground
- midground
- background
- scale-based depth
- blur-based depth
- parallax
- camera pushes
- controlled whip transitions

The camera should move through the operational system rather than observe slides from outside.

---

# SOUND DESIGN

Choose a tempo first.

Lock all major cuts and visual impacts to that tempo.

Build a real trailer soundtrack from scratch using Web Audio API synthesis.

Possible components:

- deep sine/sub pulse
- tight synthetic kick
- filtered noise risers
- transient impacts
- short metallic ticks representing manual operations
- tonal pulses
- low drones
- stereo whooshes
- one simple memorable melodic motif

The manual section should feel mechanical and repetitive.

The GeneralMind transition should remove noise and introduce clarity.

The reveal at approximately 13 seconds should be the largest musical resolution.

The GeneralMind reveal should have:

- large impact
- sub boom
- tonal hit
- long controlled reverb tail

No voiceover.

No clipping.

No brick-wall compression.

Leave enough headroom that the impact still feels large.

---

# TRUTHFULNESS

Only communicate claims that can be supported.

Do NOT invent:

- customer numbers
- automation percentages
- benchmark results
- savings
- ROI
- transaction volumes
- customer logos
- integrations
- product capabilities
- market-share claims

If you are not certain a claim is true, do not show it.

The film should primarily communicate the category and product concept rather than relying on unverified statistics.

---

# CREATIVE STANDARD

This must NOT feel like:

“A website animated into a video.”

It should feel like an actual launch film.

Every scene needs:

- visual intention
- hierarchy
- composition
- timing
- sound design
- a reason to exist

If an element does not strengthen the story, remove it.

Prefer one exceptional visual metaphor over ten mediocre animations.

---

# BUILD PROCESS

Before coding anything:

1. Write a detailed beat sheet.
2. Define exact timestamps.
3. Define the musical tempo.
4. Map every major visual hit to a beat/frame.
5. Define the visual transformation connecting each scene.
6. Decide what the viewer should understand from every beat.

Then build.

---

# QUALITY CONTROL

Do not render once and stop.

After the first implementation:

1. Render or snapshot the key frame of every major beat.
2. Inspect every key frame visually.
3. Check:
   - composition
   - typography
   - spacing
   - readability
   - hierarchy
   - continuity
4. Check that text remains visible long enough to understand on a single viewing.
5. Verify every musical impact lands on the intended visual frame.
6. Verify transitions work as continuous transformations rather than disconnected scenes.
7. Check that no scene feels like a PowerPoint slide.
8. Check the opening 2 seconds separately. It must create immediate curiosity.
9. Check the reveal separately. It must be the strongest visual/audio moment.
10. Fix anything that feels generic.
11. Repeat the render-review cycle until the result feels shippable.

---

# FINAL OUTPUT

Render:

2560 × 1440
60 fps
18 seconds
MP4
audio included

Final directory:

generalmind-trailer/

Include:

- source files
- animation code
- audio-generation code
- rendered WAV
- final MP4
- any helper scripts required to reproduce the render

The final film should leave the viewer with one simple idea:

Companies already have their systems.

GeneralMind automates the work between them.

SUPPLY CHAIN ON AUTOPILOT.