Website zu HyperFrames
Erfasse eine Website und erstelle daraus ein professionelles Video.
Nutzer sagen Dinge wie:
- "Erfasse https://... und erstelle mir ein 25-Sekunden-Produkteinführungsvideo"
- "Verwandle diese Website in eine 15-Sekunden-Social-Anzeige für Instagram"
- "Erstelle eine 30-Sekunden-Produkttour von https://..."
Der Arbeitsablauf hat 7 Schritte. Jeder Schritt erzeugt ein Artefakt, das den nächsten Schritt ermöglicht.
Schritt 1: Erfassen & Verstehen
Lesen: references/step-1-capture.md
Führe die Erfassung durch, lese die extrahierten Daten und erstelle eine Arbeitszusammenfassung mit der "Aufschreiben-und-vergessen"-Methode.
Türsteher: Gib deine Website-Zusammenfassung aus (Name, Hauptfarben, Schriftarten, Schlüssel-Assets, Ein-Satz-Stimmung).
Schritt 2: DESIGN.md schreiben
Lesen: references/step-2-design.md
Schreibe eine einfache Markenreferenz für die erfasste Website. 6 Abschnitte, ~90 Zeilen. Dies ist ein Spickzettel, nicht der kreative Plan – der kommt in Schritt 4.
Türsteher: DESIGN.md existiert im Projektverzeichnis.
Schritt 3: SKRIPT schreiben
Lesen: references/step-3-script.md
Schreibe das Erzählskript. Das Rückgrat der Geschichte. Szenendauern ergeben sich aus der Erzählung, nicht aus Raten.
Türsteher: SCRIPT.md existiert im Projektverzeichnis.
Schritt 4: STORYBOARD schreiben
Lesen: references/step-4-storyboard.md
Schreibe die kreative Ausrichtung pro Beat: Stimmung, Kamera, Animationen, Übergänge, Assets, Tiefenebenen, Soundeffekte. Dies ist der kreative Nordstern – das Dokument, dem der Ingenieur folgt, um jede Komposition zu erstellen.
Türsteher: STORYBOARD.md existiert mit Beat-für-Beat-Ausrichtung und einer Asset-Prüftabelle.
Schritt 5: VO generieren + Zeitsteuerung zuordnen
Lesen: references/step-5-vo.md
Generiere TTS-Audio, transkribiere für Wort-für-Wort-Zeitstempel und ordne Zeitstempel den Beats zu. Aktualisiere STORYBOARD.md mit echten Dauern.
Türsteher: narration.wav (oder .mp3) + transcript.json existieren. Beat-Zeiten in STORYBOARD.md aktualisiert.
Schritt 6: Kompositionen erstellen
Lesen: Das /hyperframes-Skill (rufe es auf – jede Regel zählt)
Lesen: references/step-6-build.md
Erstelle jede Komposition gemäß dem Storyboard. Nach jeder Komposition: Selbstprüfung auf Layout, Asset-Platzierung und Animationsqualität.
Türsteher: Jede Komposition wurde selbstgeprüft. Keine überlappenden Elemente, keine falsch platzierten Assets, keine statischen Bilder ohne Bewegung.
Schritt 7: Validieren & Ausliefern
Lesen: references/step-7-validate.md
Linten, validieren, Vorschau anzeigen. Erstelle eine HANDOFF.md für die Kontinuität über mehrere Sitzungen hinweg.
Türsteher: npx hyperframes lint und npx hyperframes validate bestehen ohne Fehler.
Kurzreferenz
Videotypen
| Typ | Dauer | Beats | Erzählung |
|---|---|---|---|
| Social-Anzeige (IG/TikTok) | 10-15s | 3-4 | Optionaler Hook-Satz |
| Produktdemo | 30-60s | 5-8 | Vollständige Erzählung |
| Feature-Ankündigung | 15-30s | 3-5 | Vollständige Erzählung |
| Brand-Reel | 20-45s | 4-6 | Optional, Musikfokus |
| Launch-Teaser | 10-20s | 2-4 | Minimal, hohe Energie |
Format
- Querformat: 1920x1080 (Standard)
- Hochformat: 1080x1920 (Instagram Stories, TikTok)
- Quadratisch: 1080x1080 (Instagram-Startseite)
Referenzdateien
| Datei | Wann lesen |
|---|---|
| step-1-capture.md | Schritt 1 — Lesen der erfassten Daten |
| step-2-design.md | Schritt 2 — Schreiben von DESIGN.md |
| step-3-script.md | Schritt 3 — Schreiben des Erzählskripts |
| step-4-storyboard.md | Schritt 4 — Kreative Ausrichtung pro Beat |
| step-5-vo.md | Schritt 5 — TTS, Transkription, Zeitsteuerung |
| step-6-build.md | Schritt 6 — Erstellen von Kompositionen mit Selbstprüfung |
| step-7-validate.md | Schritt 7 — Linten, validieren, Vorschau, Übergabe |
| techniques.md | Schritte 4 & 6 — 10 visuelle Techniken mit Code-Mustern (SVG-Zeichnung, Canvas 2D, 3D, Typografie, Lottie, Video, Tippen, variable Schriftarten, MotionPath, Übergänge) |