Claude Design

Create HyperFrames video drafts in Claude Design using a template-first skill, then refine in any AI coding agent.

Claude Design produces a valid first draft of a HyperFrames video — brand identity, scene content, layout, animations, and transitions. You then download the ZIP and refine in any AI coding agent (Claude Code, Cursor, Codex, Windsurf, etc.) with linting and live preview.

Get started

1. Download the skill

   Right-click SKILL.md → Save Link As to download. (Clicking opens it as text in a new tab.)

2. Open Claude Design

   Start a new chat at claude.ai with Claude Design enabled.

3. Attach the skill + describe your video

   Drag the SKILL.md file into the chat. 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 any AI 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.

Which setup to use

Surface	Recommended setup
Claude Design	Right-click SKILL.md → Save Link As, then attach to your chat
Claude Code	npx skills add heygen-com/hyperframes, then use /hyperframes
Cursor / Codex / Gemini CLI	npx skills add heygen-com/hyperframes

How the skill works

The skill gives Claude Design pre-valid HTML skeletons — the structural rules (data attributes, timeline registration, scene visibility, preview token forwarding) are already embedded. Claude Design fills in the creative work:

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

This template-first approach means the output passes npx hyperframes lint with zero errors on first download — Claude Code can start refining immediately without structural fixes.

Example prompts

Feature announcement (attach SKILL.md)

Use the attached skill. I just shipped dark mode for my app. Make me a
15-second Instagram reel announcing it.

- App name: Taskflow
- Primary color: #6C5CE7
- The vibe is clean, minimal, dark
- Key stat: "47% of users requested this"

Founder pitch (attach SKILL.md)

Use the attached skill. 25-second LinkedIn video for my startup.

Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
Traction: 200+ teams, $1.2M ARR, 18% MoM growth.
CTA: autocrmhq.com

Professional but not corporate. Think Linear or Vercel energy.

Stat highlight (attach SKILL.md)

Use the attached skill. 10-second reel. Just one big number:

"$4.2 billion processed in Q1 2026"

Dark background, the number should animate up from zero. Subtle,
confident. End with logo placeholder and "stripe.com"

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

Use the attached skill. Make a 30-second launch video for Orbit.

The skill asks ONE short clarifying question before generating.

What to include in your prompt

Claude Design reads inputs in this order of reliability: attachments > pasted content > web research > URLs.

Input type	What it gives Claude Design
Screenshots / PDFs / brand guides	Palette, typography, UI patterns, tone — strongest source
Pasted hex codes, typefaces, copy	Authoritative 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 your prompt, the better the output. Include palette, fonts, duration, and scene ideas when you have them.

Known limitations

• In-pane preview — scrubbing is unreliable in Claude Design’s iframe sandbox. Download and use npx hyperframes preview locally for reliable playback.
• No linting — Claude Design can’t run npx hyperframes lint. The template-first skeletons handle structural validity, but the self-review checklist is the only QA before download.
• Shaders work at any aspect ratio — vertical (1080x1920), landscape (1920x1080), and square (1080x1080) all supported. HyperShader reads dimensions from data-width/data-height on the composition root.
• 3 fetch limit — Claude Design limits web fetches per turn. All critical rules are inlined in the skill; external references are for edge cases only.
• Seeking backwards — scrubbing backwards in the in-pane preview can show blank frames (async capture race condition). Forward seeking usually works.

The handoff to your coding agent

Claude Design’s output is a valid first draft. Open it in Claude Code, Cursor, Codex, or any AI coding agent with terminal access:

npx skills add heygen-com/hyperframes   # one-time setup
npx hyperframes lint                     # verify structure
npx hyperframes preview                  # open the studio

Then iterate:

• “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”

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.