Claude Design
Claude Design 生成 HyperFrames 视频的有效初稿——品牌标识、场景内容、布局、动画和过渡。然后你下载 ZIP 并在任何 AI 编程 agent（Claude Code、Cursor、Codex、Windsurf 等）中通过 linting 和实时预览进行优化。
快速开始
下载指令文件
在 GitHub 上打开 claude-design-hyperframes.md 并点击下载按钮（↓）保存。
打开 Claude Design
在 claude.ai/design 开始新对话。
附加文件 + 描述你的视频
将 claude-design-hyperframes.md 文件拖入对话。描述你想要的内容——如果有截图、品牌素材或调色板，也一并提供。
下载 ZIP
Claude Design 会生成 index.html、preview.html、README.md 和 DESIGN.md。下载 ZIP。
在任何 AI 编程 agent 中优化
在 Claude Code、Cursor、Codex 或任何具有终端访问权限的 agent 中打开项目，进行动画打磨、时间调整和生产 QA。
npx skills add heygen-com/hyperframes # 安装 skills（一次性）
npx hyperframes lint # 应该零错误通过
npx hyperframes preview # 打开 Studio
💡 Tip
附加文件，不要粘贴 URL。 Claude Design 原生读取文件附件并保留细节。URL 驱动的运行会生成可用输出，但通常会遗漏更多规则。
选择哪种方式
| 平台 | 推荐设置 |
|---|---|
| Claude Design | 从 GitHub 下载 claude-design-hyperframes.md 并附加到对话中 |
| Claude Code | npx skills add heygen-com/hyperframes，然后使用 /hyperframes |
| Cursor / Codex / Gemini CLI | npx skills add heygen-com/hyperframes |
工作原理
指令文件为 Claude Design 提供预验证的 HTML 骨架——结构规则（data 属性、时间线注册、场景可见性、预览令牌转发）已经嵌入。Claude Design 填充创意内容：
- 调色板 + 排版 —
:root上的 CSS 自定义属性 - 场景内容 —
.scene-content包装器内的文本、图片、布局 - 动画 — GSAP 入场补间和场景内活动
- 过渡 — 大多数场景使用硬切，2-3 个关键时刻使用着色器过渡
这种模板优先的方法意味着输出在首次下载时就能通过 npx hyperframes lint 零错误——你的编程 agent 可以立即开始优化，无需修复结构问题。
示例提示
- 功能发布
text 使用附件文件。我刚为应用发布了深色模式。为我制作一个 15 秒的 Instagram 短视频来宣布它。 - 应用名称：Taskflow - 主色调：#6C5CE7 - 风格是简洁、极简、深色 - 关键数据："47% 的用户请求了此功能" - 创始人推介
text 使用附件文件。25 秒的 LinkedIn 创业视频。 问题：销售团队每天在手动 CRM 更新上浪费 3 小时。 解决方案：AutoCRM — AI 记录每次通话、邮件和会议。 势头：200+ 团队，$1.2M ARR，月环比增长 18%。 CTA：autocrmhq.com 专业但不企业化。想想 Linear 或 Vercel 的风格。 - 数据亮点
text 使用附件文件。10 秒短视频。只有一个大数字： "$4.2 billion processed in Q1 2026" 深色背景，数字从零开始动画。微妙、自信。以 logo 占位符和 "stripe.com" 结尾 - 简略描述（让它提问）
text 使用附件文件。为 Orbit 制作一个 30 秒的发布视频。指令告诉 Claude Design 在生成前先问一个简短的澄清问题。
提示中应包含的内容
Claude Design 按以下可靠性顺序读取输入：附件 > 粘贴内容 > 网络研究 > URL。
| 输入类型 | 给 Claude Design 的内容 |
|---|---|
| 截图 / PDF / 品牌指南 | 调色板、排版、UI 模式、语气——最强来源 |
| 粘贴的十六进制代码、字体、文案 | 对其覆盖内容具有权威性 |
| 品牌名称（知名品牌） | Claude Design 可以研究博客、新闻、维基百科 |
| SPA URL（React/Vue 主页） | 返回近乎空白的框架——改用博客/新闻 |
你的提示越具体，输出越好。如果有调色板、字体、时长和场景想法，请一并包含。
已知限制
- 面板内预览 — 在 Claude Design 的 iframe 沙箱中拖动不可靠。下载后使用
npx hyperframes preview本地播放以获得可靠的回放。 - 无 linting — Claude Design 无法运行
npx hyperframes lint。模板优先的骨架处理结构有效性，但自审检查清单是下载前唯一的 QA。 - 着色器支持任何宽高比 — 竖屏（1080x1920）、横屏（1920x1080）和方形（1080x1080）均支持。
- 3 次获取限制 — Claude Design 限制每轮的网络获取次数。所有关键规则已内联；外部引用仅用于边缘情况。
- 向后搜索 — 在面板内预览中向后拖动可能显示空白帧。向前搜索通常正常工作。
移交给你的编程 agent
Claude Design 的输出是有效的初稿。在 Claude Code、Cursor、Codex 或任何具有终端访问权限的 AI 编程 agent 中打开它：
npx skills add heygen-com/hyperframes # 一次性设置
npx hyperframes lint # 验证结构
npx hyperframes preview # 打开 Studio
然后迭代：
- "让场景 3 的入场更干脆"
- "给场景 5 的统计数据添加计数器动画"
- "收紧节奏——场景 4 和 6 感觉太长了"
- "把过渡 2 的着色器改为故障效果"
下一步
- 提示指南 在 Claude Code、Claude Design 和其他 agent 中使用 HyperFrames 的更多提示模式。
- @hyperframes/player 使用官方 player 组件嵌入合成。