Was macht Website zu HyperFrames?
Erfassen Sie eine Website und erstellen Sie daraus ein professionelles Video.
Benutzer sagen Dinge wie:
- „Erfasse https://... und mach mir ein 25-sekündiges Produkteinführungsvideo“
- „Wandle diese Website in eine 15-sekündige Social-Media-Anzeige für Instagram um“
- „Erstelle eine 30-sekündige Produkttour von https://...“
Der Workflow 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ühren Sie die Erfassung durch, lesen Sie die extrahierten Daten und erstellen Sie eine Arbeitszusammenfassung mit der Methode "Aufschreiben und Vergessen".
Tor: Geben Sie Ihre Site-Zusammenfassung aus (Name, Hauptfarben, Schriftarten, wichtige 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.
Tor: DESIGN.md existiert im Projektverzeichnis.
Schritt 3: DREHBUCH schreiben
Lesen: references/step-3-script.md
Schreiben Sie das Erzähl-Skript. Die Story-Grundlage. Die Szenenlängen ergeben sich aus der Erzählung, nicht aus Schätzungen.
Tor: SCRIPT.md existiert im Projektverzeichnis.
Schritt 4: STORYBOARD schreiben
Lesen: references/step-4-storyboard.md
Schreiben Sie die kreative Richtung pro Beat: Stimmung, Kameraführung, Animationen, Übergänge, Assets, Tiefenebenen, Soundeffekte. Dies ist der kreative Nordstern – das Dokument, dem der Engineer folgt, um jede Komposition zu erstellen.
Tor: STORYBOARD.md existiert mit Beat-für-Beat-Anweisungen und einer Asset-Prüftabelle.
Schritt 5: VO generieren + Timing zuordnen
Lesen: references/step-5-vo.md
TTS-Audio generieren, für Wort-für-Wort-Zeitstempel transkribieren und Zeitstempel den Beats zuordnen. Aktualisieren Sie STORYBOARD.md mit den tatsächlichen Dauern.
Tor: narration.wav (oder .mp3) + transcript.json existieren. Beat-Timings in STORYBOARD.md aktualisiert.
Schritt 6: Kompositionen erstellen
Lesen: Der Skill hyperframes (laden Sie ihn – jede Regel zählt)
Lesen: references/step-6-build.md
Erstellen Sie jede Komposition gemäß dem Storyboard. Nach jeder Komposition: Selbstprüfung für Layout, Asset-Platzierung und Animationsqualität.
Tor: Jede Komposition wurde selbstgeprüft. Keine überlappenden Elemente, keine falsch platzierten Assets, keine statischen Bilder ohne Bewegung.
Schritt 7: Validieren & Bereitstellen
Lesen: references/step-7-validate.md
Linten, validieren, Schnappschuss erstellen, Vorschau anzeigen. Übermitteln Sie dem Benutzer zuerst die lokale Studio-Projekt-URL
(http://localhost:<port>/#project/<project-name>) – rendern Sie nur
auf explizite Anforderung hin in MP4. Behandeln Sie index.html nicht als
Projektübergabelink; es ist nur Quellcode-Kontext.
Tor: npx hyperframes lint und npx hyperframes validate bestehen mit null Fehlern, und die endgültige Antwort enthält die aktive Studio-Projekt-URL.
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, Musik im Fokus |
| Launch-Teaser | 10-20s | 2-4 | Minimal, hohe Energie |
Format
- Querformat: 1920x1080 (Standard)
- Hochformat: 1080x1920 (Instagram Stories, TikTok)
- Quadrat: 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 – Drehbuch 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 erstellen mit Selbstprüfung |
| step-7-validate.md | Schritt 7 – Linten, validieren, Schnappschuss, Vorschau |
| techniques.md | Schritt 4 & 6 – 10 visuelle Techniken mit Code-Mustern (SVG-Zeichnen, Canvas 2D, 3D, Typografie, Lottie, Video, Tippen, variable Schriften, MotionPath, Übergänge) |