hanzoai/frames
2
0
Fork 0
mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
frames/docs/guides/claude-design.mdx
T
zooqueen 75094e0d60 frames: publish the toolchain as @hanzo/frames 
@hanzo/frame is taken by the hero video primitive — one full-bleed video
element — which has held that name on npm since it shipped. This repo is the
video toolchain: a CLI, a renderer, a studio, a player. Plural is what it is,
so the CLI publishes as @hanzo/frames and the workspace packages follow it
(@hanzo/frames-core, @hanzo/frames-engine, and the rest).

The binary stays `frames`, and now actually ships. The manifest mapped it to
bin/frames.mjs while the file on disk was bin/hyperframes.mjs, so a global
install produced no working command.

The paths that name a package to fetch were pointing elsewhere. The update
check read registry.npmjs.org/frames, a different author's package, and the
npm, bun and pnpm installers would have pulled it over the CLI; the render
image installed the upstream hyperframes; scaffolded projects and the docs
pinned the unscoped name. All of them now name @hanzo/frames.
2026-08-13 18:10:14 -07:00

153 lines
7.2 KiB
Plaintext
Raw Permalink Blame History

---
title: Claude Design
description: "Create Frames video drafts in Claude Design, then refine in any AI coding agent."
---
Claude Design produces a **valid first draft** of a Frames 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.
<Note>
**Sending your design as a URL ("Send to Frames"), rather than downloading a ZIP?** Use the [Send to Frames guide](https://raw.githubusercontent.com/hanzoai/frames/main/docs/guides/claude-design-send-to-frames.md) instead. That flow has different authoring rules; this page covers the Download-ZIP flow.
</Note>
## Get started
<Steps>
<Step title="Download the instruction file">
Open [`claude-design-frames.md`](https://github.com/hanzoai/frames/blob/main/docs/guides/claude-design-frames.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-frames.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 hanzoai/frames # install skills (one-time)
npx @hanzo/frames lint # should pass with zero errors
npx @hanzo/frames 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-frames.md`](https://github.com/hanzoai/frames/blob/main/docs/guides/claude-design-frames.md) from GitHub and attach to your chat |
| Claude Code | `npx skills add hanzoai/frames`, then use `/frames` |
| Cursor / Codex / Gemini CLI | `npx skills add hanzoai/frames` |
## 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 @hanzo/frames 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 @hanzo/frames preview` locally for reliable playback.
- **No linting** — Claude Design can't run `npx @hanzo/frames 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 hanzoai/frames # one-time setup
npx @hanzo/frames lint # verify structure
npx @hanzo/frames 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 Frames across Claude Code, Claude Design, and other agents.
</Card>
<Card title="@frames/player" icon="play" href="/packages/player">
Embed compositions with the official player component.
</Card>
</CardGroup>
Reference in New Issue View Git Blame Copy Permalink