Jonathon's AI Wiki

HyperFrames in Claude Design

8 min read

Source: Claude Design — HeyGen HyperFrames docs

Claude Design is the “draft in a design tool, refine in a coding agent” entry point for HyperFrames. You attach one instruction file to a chat at claude.ai/design, describe the video, and get back a valid first-draft composition as a downloadable ZIP — then open that ZIP in any AI coding agent (Claude Code, Cursor, Codex, Windsurf) to polish animation, timing, and QA. Because the draft ships from template-first skeletons, it passes npx hyperframes lint with zero errors on download, so the refine step starts on structure that already works. See HeyGen Hyperframes for the framework overview.

Key Takeaways

  • Two-stage workflow: draft, then refine. Claude Design generates the first-draft HyperFrames video — brand identity, scene content, layout, GSAP animations, transitions — and a coding agent does the production polish. The design tool never has to be production-perfect; it has to be structurally valid.
  • One attachment drives it. Download claude-design-hyperframes.md from the HyperFrames GitHub repo, drag it into a claude.ai/design chat, and describe the video. No install on the draft side.
  • Attach the file, don’t paste the URL. Claude Design reads file attachments natively with detail preserved; URL-driven runs “produce usable output but consistently miss more rules.”
  • Output is a 4-file project — index.html (the composition), preview.html, README.md, and DESIGN.md — downloaded as a ZIP.
  • Lint-clean on first download. Template-first skeletons mean npx hyperframes lint passes with zero errors, so the coding agent refines instead of repairs.
  • Refine commands are three lines: npx skills add heygen-com/hyperframes, npx hyperframes lint, npx hyperframes preview.
  • Open Design is the open-source / BYOK twin of this same loop — same artifact, same handoff, without the Anthropic-only constraint.

How It Works

The instruction file gives Claude Design pre-valid HTML skeletons. The structural rules HyperFrames needs are already baked into those skeletons, so the model never has to get them right from scratch:

  • Data attributes — the data-* timing/track attributes that drive composition layout.
  • Timeline registration — timelines registered correctly (the framework’s window.__timelines contract).
  • Scene visibility — scene show/hide logic.
  • Preview-token forwarding — the plumbing the in-pane and local preview need.

Against that fixed scaffold, Claude Design fills in only the creative work:

  1. Palette + typography — CSS custom properties on :root.
  2. Scene content — text, images, and layout inside .scene-content wrappers.
  3. Animations — GSAP entrance tweens and mid-scene activity.
  4. Transitions — hard cuts for most scenes, with shader transitions reserved for 2-3 key moments.

This template-first split is the whole reason the draft is reliable: structure is pre-validated, so the output passes npx hyperframes lint with zero errors on first download and the coding agent can start refining immediately without structural fixes. The instructions also tell Claude Design to ask ONE short clarifying question before generating, so a sparse brief becomes a quick scoping question rather than a freestyle render.

Get Started

  1. Download the instruction file. Open claude-design-hyperframes.md in the HyperFrames GitHub repo and click the download button (↓) to save it.
  2. Open the design surface. Start a new chat at claude.ai/design.
  3. Attach + describe. Drag the claude-design-hyperframes.md file into the chat, then describe what you want — include screenshots, brand assets, or a palette if you have them.
  4. Download the ZIP. Claude Design produces index.html, preview.html, README.md, and DESIGN.md. Download the ZIP.
  5. Refine in a coding agent. Open the project in Claude Code, Cursor, Codex, or any agent with terminal access for animation polish, timing, and production QA:
npx skills add heygen-com/hyperframes # install skills (one-time)
npx hyperframes lint                  # should pass with zero errors
npx hyperframes preview               # open the studio

Attach the file, don’t paste the URL. Claude Design reads file attachments natively with detail preserved. URL-driven runs produce usable output but consistently miss more rules — so the single highest-leverage move on the draft side is to drag the actual .md file in, not link to it.

Per the docs’ setup table, the matching install for the other surfaces is npx skills add heygen-com/hyperframes (then /hyperframes in Claude Code; the same add command for Cursor / Codex / Gemini CLI). Claude Design is the only surface that takes the attached file instead of the installed skill.

What to Include in Your Prompt

Claude Design weights its inputs by reliability — attachments > pasted content > web research > URLs. Lead with the most reliable source you have:

Input typeWhat it gives Claude Design
Screenshots / PDFs / brand guidesPalette, typography, UI patterns, tone — strongest source
Pasted hex codes, typefaces, copyAuthoritative for what it covers
Brand name (well-known)Claude Design can research blogs, press, Wikipedia
SPA URL (React/Vue homepage)Returns near-empty shell — pivot to blog/press instead

The more specific the prompt, the better the output: include palette, fonts, duration, and scene ideas when you have them. The doc’s example prompts are tight and worth copying as a shape — e.g. a 15-second Instagram reel with app name + primary color + vibe + one key stat, or a 10-second reel built around a single number that “animates up from zero.” A bare brief (“make a 30-second launch video for Orbit”) works too, because of the one-question clarify step.

Known Limitations

These are specific to the draft side (Claude Design’s iframe). The refine side (your coding agent + local CLI) has none of them:

  • In-pane preview scrubbing is unreliable in Claude Design’s iframe sandbox. Download and use npx hyperframes preview locally for reliable playback.
  • No linting in Claude Design — it can’t run npx hyperframes lint. The template-first skeletons handle structural validity, but the self-review checklist is the only QA before you download.
  • Shaders work at any aspect ratio — vertical (1080x1920), landscape (1920x1080), and square (1080x1080) are all supported (this one is a capability, not a constraint).
  • 3-fetch limit per turn — Claude Design caps web fetches. All critical rules are inlined in the instruction file; external references are for edge cases only.
  • Backward-seeking shows blank frames — scrubbing backwards in the in-pane preview can render blank; forward seeking usually works.

The throughline: anything flaky in the iframe is resolved the moment you hand off to a real terminal and run npx hyperframes preview / lint.

The Handoff (Refine Loop)

Claude Design’s output is a valid first draft — the coding agent does the rest. After npx skills add heygen-com/hyperframes, lint, and preview, iteration is conversational and incremental against the existing composition:

  • “Make scene 3’s entrance snappier”
  • “Add a counter animation to the stat in scene 5”
  • “Tighten the pacing — scenes 4 and 6 feel too long”
  • “Change the shader on transition 2 to glitch”

You never re-specify from scratch; you nudge the draft. This is the same refine vocabulary the hub article documents for the pure Claude-Code path.

The Open Design Route

Open Design is the open-source, local-first, BYOK alternative to Claude Design — the sibling guides/open-design.md covers it in full, and the wiki tracks the tool itself at Open Design. Same artifact-first mental model, same index.html / preview.html / README.md / DESIGN.md output, same npx hyperframes lint / preview handoff — minus the lock-in. Key differences from the docs’ comparison table:

  • License + cost: Apache-2.0 and BYOK (free with your own CLI or API key) vs. closed-source on Pro / Max / Team.
  • Agent runtime: 10 CLI adapters (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot, Hermes, Kimi, Pi) plus an OpenAI-compatible BYOK proxy, vs. Anthropic-only (the docs cite Opus 4.7).
  • Workspace: a real on-disk cwd with Read / Write / Bash / WebFetch — the project folder is the agent’s working directory, so there’s no export/re-import step.
  • Design systems: 72 shipped DESIGN.md systems (plus 5 deterministic visual directions when no brand is named), bound onto :root.

Setup is git clone + pnpm install + pnpm tools-dev run web. The reliability tip inverts the Claude Design one: drop the instruction file into skills/hyperframes-handoff/SKILL.md, don’t paste it into chat — the daemon reads SKILL.md at request time and injects the side files plus a 5-dimensional self-critique gate that you lose if you paste raw HTML. Use Open Design when you want the Claude Design loop without a paid plan, on a non-Anthropic runtime, or with a filesystem-grade workspace.

Try It

  1. Smoke test the draft. Download claude-design-hyperframes.md, open claude.ai/design, attach the file, and prompt: “10-second reel, one big number animating up from zero, dark background, end on a logo placeholder.” Download the ZIP.
  2. Prove lint-clean. In the unzipped folder run npx skills add heygen-com/hyperframes then npx hyperframes lint — confirm zero errors before touching anything.
  3. Refine, don’t rewrite. npx hyperframes preview, then nudge the draft conversationally (“make the number bigger,” “slow the entrance,” “swap the transition to glitch”).
  4. Compare routes. Run the same brief through Open Design (BYOK) and diff the drafts to feel the design-system difference (72 shipped systems vs. Claude Design’s proprietary set).

Graph View

Backlinks