heygen-com--hyperframes/docs/guides/claude-design.mdx

---
title: Claude Design
description: "Create HyperFrames video drafts in Claude Design, 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

<Steps>
  <Step title="Download the instruction file">
    Open [`claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) on GitHub and click the download button (↓) to save it.
  </Step>
  <Step title="Open Claude Design">
    Start a new chat at [claude.ai/design](https://claude.ai/design).
  </Step>
  <Step title="Attach the file + describe your video">
    Drag the `claude-design-hyperframes.md` file into the chat. Describe what you want — include screenshots, brand assets, or a palette if you have them.
  </Step>
  <Step title="Download the ZIP">
    Claude Design produces `index.html`, `preview.html`, `README.md`, and `DESIGN.md`. Download the ZIP.
  </Step>
  <Step title="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.
    ```bash
    npx skills add heygen-com/hyperframes   # install skills (one-time)
    npx hyperframes lint                     # should pass with zero errors
    npx hyperframes preview                  # open the studio
    ```
  </Step>
</Steps>

<Tip>
  **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.
</Tip>

## Which setup to use

| Surface                     | Recommended setup                                                                                                             |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Claude Design               | Download [`claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md) from GitHub and 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 it works

The instruction file 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 — your coding agent can start refining immediately without structural fixes.

## Example prompts

<CardGroup cols={1}>
  <Card title="Feature announcement">
    ```text
    Use the attached file. 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"
    ```
  </Card>
  <Card title="Founder pitch">
    ```text
    Use the attached file. 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.
    ```
  </Card>
  <Card title="Stat highlight">
    ```text
    Use the attached file. 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"
    ```
  </Card>
  <Card title="Sparse brief (let it ask)">
    ```text
    Use the attached file. Make a 30-second launch video for Orbit.
    ```

    The instructions tell Claude Design to ask ONE short clarifying question before generating.
  </Card>
</CardGroup>

## 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.
- **3 fetch limit** — Claude Design limits web fetches per turn. All critical rules are inlined; external references are for edge cases only.
- **Seeking backwards** — scrubbing backwards in the in-pane preview can show blank frames. 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:

```bash
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

<CardGroup cols={2}>
  <Card title="Prompt Guide" icon="message" href="/guides/prompting">
    More prompt patterns for HyperFrames across Claude Code, Claude Design, and other agents.
  </Card>
  <Card title="@hyperframes/player" icon="play" href="/packages/player">
    Embed compositions with the official player component.
  </Card>
</CardGroup>