mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Ular KimsanovandClaude Opus 4.7
a78ec5ec76
* fix(skill): all file paths use capture/ subfolder prefix Step-1 was updated to capture into <project-dir>/capture/ but all file-read instructions across steps 1-6 still used bare paths (extracted/tokens.json, assets/hero.png). Agents following the skill looked for files in wrong locations, producing broken compositions with 404'd images and fonts. - step-1: all 12+ file-read paths prefixed with capture/ - step-2: tokens.json and asset-descriptions.md paths fixed - step-3: visible-text.txt path fixed - step-4: asset-descriptions.md, asset examples, directory tree expanded to show capture/ children (screenshots/, assets/, extracted/) - step-5: minor cleanup - step-6: asset-descriptions.md path fixed, composition examples already correct (../capture/assets/) - techniques.md: Lottie, video, font paths all prefixed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(skill): address Copilot review — font comment path, add videos/ to tree - techniques.md: comment says ../capture/assets/fonts/ (matches composition context) - step-4 file tree: add videos/ under capture/assets/ --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
75 lines
4.8 KiB
Markdown
75 lines
4.8 KiB
Markdown
# Step 1: Capture & Understand
|
|
|
|
## Run the capture
|
|
|
|
Create a project directory for your video, then capture the website into a `capture/` subfolder within it:
|
|
|
|
```bash
|
|
npx hyperframes capture <URL> -o <project-dir>/capture
|
|
```
|
|
|
|
Example: `npx hyperframes capture https://stripe.com -o videos/stripe-launch/capture`
|
|
|
|
Keeping the capture artifacts (`screenshots/`, `assets/`, `extracted/`, `AGENTS.md`, `CLAUDE.md`) in a dedicated `capture/` subfolder keeps them isolated from the 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.
|
|
|
|
No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.
|
|
|
|
**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 3.1 Flash Lite vision (~$0.001/image).
|
|
|
|
Wait for it to complete. Print how many screenshots, assets, sections, and fonts were extracted.
|
|
|
|
## Read and summarize
|
|
|
|
Read each file below. After reading each one, **write a 1-2 sentence summary** of what you learned. These summaries are your working memory — the raw file content may be cleared from context later.
|
|
|
|
### Must read (do not skip)
|
|
|
|
1. **View the scroll screenshots** — viewport-sized captures covering the full page height (the number depends on the page length). Start with:
|
|
- `capture/screenshots/scroll-000.png` — the hero section at full 1920x1080 resolution. This is the most important image. Describe: is the background light or dark? What's the dominant visual element? What colors jump out?
|
|
- Then scan through the rest to see the full page. Each screenshot overlaps the previous by ~30%.
|
|
|
|
After viewing them, write 3-4 sentences describing the site's visual mood, layout patterns, color strategy, and overall feel.
|
|
|
|
2. **`capture/extracted/tokens.json`** — Note the top 5-7 colors (HEX), all font families with their weights (e.g. `Inter (400,700)` or `Sohne (100-900 variable)`), number of sections, and number of headings/CTAs.
|
|
|
|
3. **`capture/extracted/visible-text.txt`** — Each line is prefixed with the HTML tag: `[h1] Heading`, `[p] Body text`, `[a] Link text`. Use these tags to understand hierarchy — headings are key messages, paragraphs are supporting copy. Strip the `[tag]` prefix when quoting text in the script.
|
|
|
|
4. **`capture/extracted/asset-descriptions.md`** — One-line-per-file summary of all downloaded assets. Note which assets are most visually striking or useful for video (hero images, logos, product screenshots).
|
|
|
|
### Read if they exist
|
|
|
|
5. **`capture/extracted/animations.json`** — Note if the site uses scroll-triggered animations, marquees, canvas/WebGL, or named CSS animations.
|
|
|
|
6. **`capture/extracted/lottie-manifest.json`** — View each preview image at `capture/assets/lottie/previews/` to see what the animations look like.
|
|
|
|
7. **`capture/extracted/video-manifest.json`** — View each preview at `capture/assets/videos/previews/` to see what each video shows.
|
|
|
|
8. **`capture/extracted/shaders.json`** — If present, this contains the actual GLSL shader code that powers the site's WebGL visual effects (gradient waves, particle systems, noise fields). Read the fragment shaders to extract: color values used in gradients, noise algorithms, blend functions. You can recreate similar effects in your compositions using Canvas 2D or by embedding the shader patterns with a `<canvas>` + WebGL context. See the Canvas 2D and procedural art patterns in `techniques.md`.
|
|
|
|
### On-demand (read when building scenes)
|
|
|
|
9. **Individual images in `capture/assets/`** — Use `capture/extracted/asset-descriptions.md` as your index. View specific images when you need them for a beat.
|
|
|
|
10. **`capture/extracted/assets-catalog.json`** — Use to find remote URLs when you need an asset that wasn't downloaded.
|
|
|
|
### For rich captures (30+ images)
|
|
|
|
Launch a sub-agent to view all images and SVGs:
|
|
|
|
> "Read every image in capture/assets/ and every SVG in capture/assets/svgs/. For each, write one line: filename — what it shows, dominant colors, approximate size. Return the complete catalog."
|
|
|
|
Use the sub-agent's catalog as your asset reference for the rest of the workflow.
|
|
|
|
## Gate
|
|
|
|
Print your site summary before proceeding to Step 2:
|
|
|
|
- **Site:** [name]
|
|
- **Colors:** [top 3-5 HEX values with roles]
|
|
- **Fonts:** [font families]
|
|
- **Sections:** [count] sections, [count] headings, [count] CTAs
|
|
- **Key assets:** [3-5 most useful assets for video]
|
|
- **Vibe:** [one sentence describing the visual identity]
|