ukimsanov
7f6bceb473
Step 0 had bloated to 91 lines that did the work of Steps 1–3: viewing contact sheets cell-by-cell, reading 8 data files, listing promising assets, inferring product purpose / audience / value prop / brand voice. That meant the agent did all the heavy lifting upfront, produced summaries that went stale before they were used, and the actual "run the capture" instruction was buried. Step 0 now owns only what Step 0 is: run the capture command, sanity-check it succeeded, hand off. 91 → 55 lines. Moved (composed into destination files, verified each was the right home before adding): - Read tokens.json + design-styles.json → step-1-design.md replaces the passive "you read these in Step 0" line with an active "Read these now — primary data source for Sections 3–6." - Contact-sheet "every cell, name 5 assets per page" anti-glance prose → step-3-storyboard.md asset-discovery bullet (which already covered contact-sheet viewing generally, now strengthened with the anti-glance rule). - Strategic site summary (product / audience / voice / value prop) → step-2-brief.md absorbed this; the brief itself IS the summary. Replaced "After presenting the site summary (from Step 0)" with step-2 grounding itself by reading DESIGN.md + asset-descriptions + visible-text directly. Step 0's new structure: - Run the capture (CLI command + project-dir convention) — unchanged - Confirm it succeeded (1-line summary, error-out on bad capture) - Reference table mapping each capture/ file to the step that first reads it (explicit "DO NOT read these here") - Gate: capture exits 0 + counts non-zero
4.0 KiB
Step 0: Capture
The capture pipeline downloads the site and extracts structured data for the rest of the workflow to read. Step 0 is a single command plus a sanity check. All analysis (reading files, viewing contact sheets, deriving brand voice, picking assets) happens in Steps 1–3, not here.
Run the capture
No API keys required for the base capture. However, before running, ask the user:
"For the best results, it is recommended to set a Gemini API key — it gives me AI-powered descriptions of every captured image, which helps me choose the right assets for each scene. It costs about $0.001 per image. You can skip this if you want, but the video quality will be better with it. To set it up: add
GEMINI_API_KEY=your-keyto a.envfile in the project root. You can get a free key at ai.google.dev."
If the user provides the key or already has one set, proceed. If they skip it, proceed anyway — the capture works without it, but asset-descriptions.md will have DOM-context descriptions only (position, size, alt text) instead of AI vision descriptions.
Create a project directory for your video if it doesn't exist yet, then capture the website into a capture/ subfolder within it:
npx hyperframes capture <URL> -o <project-dir>/capture
Example: npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture
Keeping capture artifacts (screenshots/, assets/, extracted/, AGENTS.md, CLAUDE.md) in a dedicated capture/ subfolder keeps them isolated from later build files (SCRIPT.md, STORYBOARD.md, DESIGN.md, compositions/, index.html, narration.wav, transcript.json, renders/, snapshots/), which all live at <project-dir>/ root.
For exploratory captures that aren't becoming a video yet, -o captures/<name> at the repo root is fine — the isolation convention only matters when you're building a video on top of the capture.
Confirm it succeeded
Wait for the capture to complete. Print one line summarizing what was captured:
"Captured N screenshots, M assets, K SVGs, F fonts. Ready for Step 1."
If the command exited non-zero, the counts are all zero, or required directories (extracted/, assets/, screenshots/) are missing, surface the error and stop — don't advance to Step 1 with a broken capture.
What lives in capture/ (reference table — DO NOT read these here)
Each downstream step reads only what it needs. Don't pre-fetch everything in Step 0; that bloats context and produces summaries that get stale by the time they're used.
| Path | First read in |
|---|---|
capture/extracted/tokens.json |
Step 1 (DESIGN.md — colors / fonts) |
capture/extracted/design-styles.json |
Step 1 (DESIGN.md — typography / components) |
capture/extracted/fonts-manifest.json |
Step 1 (font identification) |
capture/extracted/asset-descriptions.md |
Step 2 (brief grounding) and Step 3 (assets) |
capture/extracted/visible-text.txt |
Step 2 (brief) and Step 3 (script) |
capture/assets/contact-sheet-*.jpg |
Step 3 (asset picking) |
capture/assets/svgs/contact-sheet-*.jpg |
Step 3 (SVG / logo picking) |
capture/screenshots/contact-sheet-*.jpg |
Step 3 (visual mood reference) |
capture/extracted/animations.json |
Step 3 / Step 5 (only if site has animations) |
capture/extracted/lottie-manifest.json |
Step 3 (only if site uses Lottie) |
capture/extracted/video-manifest.json |
Step 3 (only if site embeds video) |
capture/extracted/shaders.json |
Step 3 / Step 5 (only if site has WebGL) |
capture/assets/<individual files> |
Step 5 (only when placing a specific asset) |
Gate
Capture exits 0. Asset / screenshot / font counts non-zero. Proceed to Step 1.