ukimsanov
92a5ef419b
Capture improvements:
- Font weights via document.fonts API + DOM sampling (variable font detection)
- Section background-image extraction (no more false #FFFFFF on hero photos)
- Detected libraries surfaced in CLAUDE.md brand summary
- Structured visible-text.txt with [tag] prefixes, cookie/nav noise filtered
- tokens.json cleaned: removed images/paragraphs/icons (duplicated elsewhere),
filtered sections to heading-only, trimmed cssVariables to design-relevant
- Removed redundant scroll pass in htmlExtractor (2-5s faster per capture)
- Font cap at 20 families, Placeholder/Fallback fonts filtered
CLAUDE.md rewrite:
- Removed prescriptive tone ("use exact strings" → "rephrase freely")
- Removed fluff sections (How to Create, DESIGN.md warning, Example Prompts,
Source Patterns)
- asset-descriptions.md promoted to first data row
- Removed assets-catalog.json from inventory
Skill fixes:
- Dead shader refs → point to packages/shader-transitions/README.md
- Google Fonts import in techniques.md → local @font-face placeholder
- Added Stripe DESIGN.md as light-brand example
- Removed HANDOFF.md generation from step-7
- Updated step-1 for new font weight + visible-text formats
3.9 KiB
Step 1: Capture & Understand
Run the capture
npx hyperframes capture <URL> -o captures/<project-name>
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)
-
View the scroll screenshots — viewport-sized captures covering the full page height (the number depends on the page length). Start with:
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.
-
extracted/tokens.json— Note the top 5-7 colors (HEX), all font families with their weights (e.g.Inter (400,700)orSohne (100-900 variable)), number of sections, and number of headings/CTAs. -
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. -
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
-
extracted/animations.json— Note if the site uses scroll-triggered animations, marquees, canvas/WebGL, or named CSS animations. -
extracted/lottie-manifest.json— View each preview image atassets/lottie/previews/to see what the animations look like. -
extracted/video-manifest.json— View each preview atassets/videos/previews/to see what each video shows. -
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 intechniques.md.
On-demand (read when building scenes)
-
Individual images in
assets/— Useasset-descriptions.mdas your index. View specific images when you need them for a beat. -
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 assets/ and every SVG in 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]