website-to-hyperframeslisted

# Website to HyperFrames Capture a website, then produce a professional video from it. Users say things like: - "Capture https://... and make me a 25-second product launch video" - "Turn this website into a 15-second social ad for Instagram" - "Create a 30-second product tour from https://..." The workflow has 7 steps. Each produces an artifact that gates the next. By default it's collaborative — gates marked 💬 stop and ask the user. If the user signals autonomous mode ("decide for me", "surprise me"), every 💬 gate is skipped; see step-2-brief.md for how that propagates. --- ## Step 0: Capture & Understand the Brand **Read:** [references/step-0-capture.md](references/step-0-capture.md) Capture the site, then read the extracted data to understand the **brand and product** — what it does, who it's for, what voice it speaks in, what mood it lives in. The captured assets are a brand toolkit for later, not the building blocks the video is made from. **Gate:** Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory. --- ## Step 1: Brand Identity **Read:** [references/step-1-design.md](references/step-1-design.md) Write DESIGN.md — a brand cheat sheet covering the visual identity: colors, typography, component styles, layout principles. Use `design-styles.json` for exact computed values. **Speed option:** For fast-pacing videos (billboard-per-beat), DESIGN.md can be a 50-line summary of colors