Loading
To create a video from this capture, use the website-to-hyperframes skill.
Recommended by author
This prompt takes no variables — just pick a model and run.
# Design where you code Source: https://www.dddx.dev/ To create a video from this capture, use the `website-to-hyperframes` skill. ## What's in This Capture | File | Contents | |------|----------| | `screenshots/contact-sheet.jpg` | **View this first.** All scroll screenshots in labeled grid — see the entire page at a glance | | `screenshots/scroll-*.png` | Individual viewport screenshots if you need detail on a specific section. | | `extracted/tokens.json` | Design tokens: 11 colors, 2 fonts, 1 headings, 1 CTAs | | `extracted/design-styles.json` | Computed styles from live DOM: typography hierarchy, button/card/nav styles, spacing scale, border-radius, box shadows. Primary data source for DESIGN.md. | | `extracted/asset-descriptions.md` | One-line description of every downloaded asset. Read this for asset selection — only open individual files for safe-zone checking. | | `extracted/visible-text.txt` | Page text in DOM order, prefixed with HTML tag (`[h1]`, `[p]`, `[a]`). Use as context — rephrase freely. | | `assets/contact-sheet.jpg` | Downloaded images in labeled grid — view before opening individual files | | `assets/svgs/contact-sheet.jpg` | SVGs rendered as thumbnails in labeled grid | | `assets/` | Individual downloaded images, SVGs, and font files. | ## Brand Summary - **Colors**: #FFFFFF (bg-light), #09090B (bg-dark), #71717A (neutral), #000000 (bg-dark), #E4E4E7 (surface-light), #F4F4F5 (bg-light), #161616 (surface-dark), #3B1219 (accent), #1A3A2A (accent), #2563EB (accent) - **Fonts**: Geist (100-900 variable), Geist Mono (100-900 variable)
Running prompts needs a free account.
Sign in and we'll stream the response from Claude Sonnet 4.6 right here — no config needed for the platform models.
To create a video from this capture, use the website-to-hyperframes skill.
# Design where you code Source: https://www.dddx.dev/ To create a video from this capture, use the `website-to-hyperframes` skill. ## What's in This Capture | File | Contents | |------|----------| | `screenshots/contact-sheet.jpg` | **View this first.** All scroll screenshots in labeled grid — see the entire page at a glance | | `screenshots/scroll-*.png` | Individual viewport screenshots if you need detail on a specific section. | | `extracted/tokens.json` | Design tokens: 11 colors, 2 fonts, 1 headings, 1 CTAs | | `extracted/design-styles.json` | Computed styles from live DOM: typography hierarchy, button/card/nav styles, spacing scale, border-radius, box shadows. Primary data source for DESIGN.md. | | `extracted/asset-descriptions.md` | One-line description of every downloaded asset. Read this for asset selection — only open individual files for safe-zone checking. | | `extracted/visible-text.txt` | Page text in DOM order, prefixed with HTML tag (`[h1]`, `[p]`, `[a]`). Use as context — rephrase freely. | | `assets/contact-sheet.jpg` | Downloaded images in labeled grid — view before opening individual files | | `assets/svgs/contact-sheet.jpg` | SVGs rendered as thumbnails in labeled grid | | `assets/` | Individual downloaded images, SVGs, and font files. | ## Brand Summary - **Colors**: #FFFFFF (bg-light), #09090B (bg-dark), #71717A (neutral), #000000 (bg-dark), #E4E4E7 (surface-light), #F4F4F5 (bg-light), #161616 (surface-dark), #3B1219 (accent), #1A3A2A (accent), #2563EB (accent) - **Fonts**: Geist (100-900 variable), Geist Mono (100-900 variable)