Skip to main content
Claude Design 制作了 HyperFrames 视频的有效初稿 — 品牌标识、场景内容、布局、动画和过渡。然后，您可以下载 ZIP 并在任何 AI 编码智能体（Claude Code、Cursor、Codex、Windsurf 等）中通过 linting 和实时预览进行优化。

​
开始使用

1

下载说明文件

在 GitHub 上打开 claude-design-hyperframes.md 并单击下载按钮 (↓) 进行保存。
2

开放克劳德设计

在 claude.ai/design 开始新的聊天。
3

附上文件+描述您的视频

将 claude-design-hyperframes.md 文件拖到聊天中。描述您想要什么 - 包括屏幕截图、品牌资产或调色板（如果有的话）。
4

下载 ZIP 文件

Claude Design 生产 index.html、preview.html、README.md 和 DESIGN.md。下载 ZIP。
5

在任何 AI 编码智能体中进行优化

在 Claude Code、Cursor、Codex 或任何具有终端访问权限的代理中打开项目，以进行动画打磨、计时和制作 QA。
附加文件，不要粘贴 URL。 Claude Design 本机读取文件附件并保留详细信息。 URL 驱动的运行会产生可用的输出，但始终会错过更多规则。

​
使用哪种设置

​
它是如何运作的

指令文件为 Claude Design 提供了预有效的 HTML 骨架 — 结构规则（数据属性、时间轴注册、场景可见性、预览令牌转发）已经嵌入。 Claude Design填写创意作品：
  1. 调色板 + 排版 — :root 上的 CSS 自定义属性
  2. 场景内容 — .scene-content 包装器内的文本、图像、布局
  3. 动画 — GSAP 入口补间和场景中活动
  4. 过渡 — 对大多数场景进行硬剪辑，在 2-3 个关键时刻进行着色器过渡
这种模板优先的方法意味着输出在首次下载时以零错误的方式通过 npx hyperframes lint — 您的编码代理可以立即开始精炼，而无需进行结构修复。

​
提示示例

功能公告

创始人推介

统计突出显示

稀疏简短（让它问）

这些说明告诉 Claude Design 在生成之前询问一个简短的澄清问题。

​
提示中应包含哪些内容

Claude Design 按可靠性顺序读取输入：附件 > 粘贴内容 > 网络研究 > URL。 您的提示越具体，输出就越好。如果有的话，请包括调色板、字体、持续时间和场景创意。

​
已知的限制

  • 窗格内预览 — 在 Claude Design 的 iframe 沙箱中，清理不可靠。在本地下载并使用 npx hyperframes preview 以实现可靠播放。
  • 无 linting — Claude Design 无法运行 npx hyperframes lint。模板优先的骨架处理结构有效性，但自我审查清单是下载前唯一的质量检查。
  • 着色器可在任何纵横比下工作 — 垂直 (1080x1920)、横向 (1920x1080) 和方形 (1080x1080) 均受支持。
  • 3 次获取限制 — Claude Design 限制每回合的网络获取。所有关键规则均已内联；外部参考仅适用于边缘情况。
  • 向后查找 - 在窗格内预览中向后拖动可以显示空白帧。前向搜索通常有效。

​
移交给您的编码代理

克劳德设计公司的输出是有效的初稿。在 Claude Code、Cursor、Codex 或任何具有终端访问权限的 AI 编码智能体中打开它：
然后迭代：
  • “让场景 3 的入口更加快捷”
  • “在场景 5 的统计数据中添加计数器动画”
  • “加快节奏——场景 4 和 6 感觉太长了”
  • “将过渡 2 上的着色器更改为故障”

​
后续步骤

提示指南

Claude Code、Claude Design 和其他代理的 HyperFrames 的更多提示模式。

@hyperframes/玩家

将乐曲嵌入到官方播放器组件中。