Website zu HyperFrames
Erfassen Sie eine Website und erstellen Sie daraus ein professionelles Video.
Benutzer sagen Dinge wie:
- "Erfasse https://... und erstelle mir ein 25-Sekunden-Produktlaunch-Video"
- "Verwandle diese Website in eine 15-Sekunden-Social-Ad für Instagram"
- "Erstelle eine 30-Sekunden-Produkttour von https://..."
Der Workflow umfasst 7 Schritte. Jeder Schritt erzeugt ein Artefakt, das den nächsten freischaltet.
Schritt 1: Erfassen & Verstehen
Lesen: references/step-1-capture.md
Führen Sie die Erfassung durch, lesen Sie die extrahierten Daten und erstellen Sie eine Arbeitszusammenfassung mit der Methode „Aufschreiben und Vergessen".
Freigabe: Geben Sie Ihre Seitenzusammenfassung aus (Name, Hauptfarben, Schriftarten, Schlüssel-Assets, ein Satz zur Stimmung).
Schritt 2: DESIGN.md schreiben
Lesen: references/step-2-design.md
Schreiben Sie 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.
Freigabe: DESIGN.md existiert im Projektverzeichnis.
Schritt 3: SKRIPT schreiben
Lesen: references/step-3-script.md
Schreiben Sie das Erzählskript. Das Rückgrat der Geschichte. Die Szenendauern stammen aus der Erzählung, nicht aus Schätzungen.
Freigabe: SCRIPT.md existiert im Projektverzeichnis.
Schritt 4: STORYBOARD schreiben
Lesen: references/step-4-storyboard.md
Schreiben Sie eine pro-Beats kreative Richtung: Stimmung, Kameraführung, Animationen, Übergänge, Assets, Tiefenschichten, Soundeffekte. Dies ist der kreative Nordstern – das Dokument, dem der Ingenieur folgt, um jede Komposition zu erstellen.
Freigabe: STORYBOARD.md existiert mit Beat-für-Beat-Anleitung und einer Asset-Prüftabelle.
Schritt 5: VO generieren & Timing zuordnen
Lesen: references/step-5-vo.md
Generieren Sie TTS-Audio, transkribieren Sie es für Wort-für-Wort-Zeitstempel und ordnen Sie die Zeitstempel den Beats zu. Aktualisieren Sie STORYBOARD.md mit den tatsächlichen Dauern.
Freigabe: narration.wav (oder .mp3) + transcript.json existieren. Beat-Timings in STORYBOARD.md aktualisiert.
Schritt 6: Kompositionen erstellen
Lesen: Die /hyperframes-Fähigkeit (rufen Sie sie auf – jede Regel zählt)
Lesen: references/step-6-build.md
Erstellen Sie jede Komposition gemäß dem Storyboard. Nach jeder: Selbstüberprüfung auf Layout, Asset-Platzierung und Animationsqualität.
Freigabe: Jede Komposition wurde selbst überprü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. Erstellen Sie eine HANDOFF.md für die Kontinuität in mehreren Sitzungen.
Freigabe: npx hyperframes lint und npx hyperframes validate bestehen mit null Fehlern.
Kurzreferenz
Videotypen
| Typ | Dauer | Beats | Erzählung |
|---|---|---|---|
| Social Ad (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-Feed)
Referenzdateien
| Datei | Wann lesen |
|---|---|
| step-1-capture.md | Schritt 1 – Erfasste Daten lesen |
| step-2-design.md | Schritt 2 – DESIGN.md schreiben |
| step-3-script.md | Schritt 3 – Erzählskript schreiben |
| step-4-storyboard.md | Schritt 4 – Kreative Richtung pro Beat |
| step-5-vo.md | Schritt 5 – TTS, Transkription, Timing |
| step-6-build.md | Schritt 6 – Kompositionen mit Selbstüberprüfung erstellen |
| step-7-validate.md | Schritt 7 – Linten, validieren, Vorschau anzeigen, Ü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) |