Skip to main content
Claude Design needs a different setup than Claude Code, Cursor, or Codex. The local npx skills add heygen-com/hyperframes flow is the right path for coding agents. For Claude Design, attach the HyperFrames skill file to your chat — empirically that produces sharper, more rule-compliant output than pasting the URL.

​
Get the skill

Download SKILL.md

Save the file, then drag it into a Claude Design chat as an attachment.

View on GitHub

Read the skill, copy sections, or link to it in a prompt.
Prefer attaching the file over pasting the URL. Claude Design reads file attachments natively with detail preserved. URL-driven runs produce usable output but consistently miss more rules than attachment-driven runs.

​
Which setup to use

SurfaceRecommended setup
Claude DesignDownload SKILL.md and attach it to your chat
Claude Codenpx skills add heygen-com/hyperframes, then use /hyperframes
Cursor / Codex / Gemini CLInpx skills add heygen-com/hyperframes

​
Prompt shape for Claude Design

Claude Design does not use slash commands. Lead with the skill file (attached or URL), describe the video, and ideally give Claude Design something to synthesize from — screenshots, a brand PDF, a reference video, a pasted palette, or at minimum a vibe in words. The skill reads inputs in this order of reliability: attachments → pasted content → web research → URLs. A modern SPA homepage returns almost nothing via web_fetch because JavaScript isn’t executed, so brand-accurate output on brief like “make a video for linear.app” depends on attaching screenshots or letting Claude Design search for the brand’s blog, press, or Wikipedia. Strong Claude Design prompts usually include:
  • the attached skill file (or its URL)
  • the source material: screenshots, a brand PDF, a reference video, pasted copy, or a URL
  • duration and aspect ratio
  • tone or visual direction (if you have one — otherwise let Claude Design ask)
  • explicit deliverables: index.html, preview.html, README.md

​
Copy-paste prompts

Rich brief (attach SKILL.md + screenshots)

Use the attached skill. Make a 30-second 16:9 product walkthrough for my app,
matching the design in these screenshots. 5 scenes: hero, three features,
closing CTA. Shader transitions between scenes.

Pasted-content brief (attach SKILL.md + paste your copy)

Use the attached skill. 30s hero reel with this copy for each scene:

1. "The fast web broke us."
2. "Every app optimized for attention. None for thought."
3. "Something is changing. Blogs are back."
4. "Welcome to the slow web."

Dark theme, editorial, serif typography (not Playfair).

Sparse brief (attach SKILL.md, let it ask)

Use the attached skill. Make a 30-second launch video for Orbit.
The skill will ask ONE short question offering five input channels (screenshot, PDF, reference video, vibe word, must-have element) plus a “just build” escape hatch before generating.

Static URL brief (editorial piece, not a SPA)

Use the HyperFrames Claude Design skill at
https://github.com/heygen-com/hyperframes/blob/main/skills/claude-design-hyperframes/SKILL.md
and turn https://www.anthropic.com/news/claude-design-anthropic-labs into a
45-second editorial explainer. Keep copy close to the article's real headlines.

​
Preview with @hyperframes/player

When Claude Design generates a preview.html, it embeds the composition with <hyperframes-player> and forwards the Claude Design sandbox’s preview token into the iframe src. Without the token forward, the in-pane preview renders black (the sandbox serves a "preview token required" placeholder to the iframe). Copy this template verbatim: 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HyperFrames Preview</title>
  <style>html,body{margin:0;padding:0;background:#111;height:100%;overflow:hidden}</style>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
</head>
<body>
  <hyperframes-player id="p" controls autoplay muted
    style="display:block;width:100vw;height:100vh"></hyperframes-player>
  <script>
    document.getElementById("p").setAttribute(
      "src",
      "./index.html" + location.search,
    );
  </script>
</body>
</html>
When location.search is empty (opened locally, outside Claude Design’s sandbox), the token-forward line is a no-op and the player loads ./index.html as expected. The composition (index.html) must also pre-load the HyperFrames runtime right after GSAP so the player can drive playback inside Claude Design’s sandbox: 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js"></script>
If a classic script tag is needed instead of ESM, use the global player build with the same token-forwarding script: 
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/player/dist/hyperframes-player.global.js"></script>
<hyperframes-player id="p" controls autoplay muted
  style="display:block;width:100vw;height:100vh"></hyperframes-player>
<script>
  document.getElementById("p").setAttribute(
    "src",
    "./index.html" + location.search,
  );
</script>
See @hyperframes/player for the full API and framework examples.

​
What the skill teaches Claude Design

The skill is self-contained — it includes every HyperFrames-specific contract and every known Claude Design sandbox workaround, so Claude Design rarely needs to fetch additional references. Highlights:
  • An explicit opening redirect: Claude Design is told NOT to reach for its default video artifacts (copy_starter_component with kind: "animations.jsx", the built-in “Animated video” skill, React + Babel JSX, hand-rolled scale-to-fit stage wrappers). This is the single change that most reliably keeps Claude Design on the HyperFrames path
  • Correct data-* composition structure, the clip contract on scenes, and paused GSAP timelines registered on window.__timelines
  • Shader-transition timing rules: transitions must span the scene boundary (not start at it), animated content must be wrapped in <div class="scene-content"> so its pre-animation state doesn’t leak into the WebGL texture, and the scenes.length === transitions.length + 1 invariant (with flash-through-white as the invisible-bridge escape hatch)
  • Sandbox-compatible preview: token-forwarding preview.html template, runtime pre-load in index.html, data-composition-id ↔ __timelines key match (and a convention that the root element’s DOM id matches too)
  • Attachment-first input model: read screenshots / PDFs / reference videos when provided, otherwise ask one short clarifying question before generating
  • A banned-font list (including Fraunces, Inter Tight, and common AI defaults) plus a banned-pairings line to break the training-data monoculture
  • Deterministic render-safe animation choices (no Date.now(), no unseeded Math.random(), no repeat: -1, no stagger: { from: "random" })
  • Four worked-example anti-patterns with WRONG/RIGHT code pairs — exit tweens before shader transitions, non-deterministic stagger origins, absolute-positioned content containers, and SVG filter data URLs as background-image (the last one causes SecurityError on Safari + cross-origin iframe environments)
  • A README.md template for the end user with npx hyperframes doctor / preview / render commands and FFmpeg install instructions

​
Next steps

Prompt Guide

More prompt patterns for HyperFrames across Claude Code, Claude Design, and other agents.

@hyperframes/player

Embed compositions with the official player component.