HyperFrames 中文文档
使用指南

Open Design

在 Open Design 中创建 HyperFrames 视频草稿——开源、自带 API 密钥的 Claude Design 替代方案——然后在任意 AI 编程代理中进行精修。

Open Design 是一个开源、本地优先的 Claude Design 替代方案。它通过 pnpm tools-dev 在你的笔记本电脑上运行，将 Web 层部署到 Vercel，并委托给你 PATH 中已有的编程代理 CLI（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、Copilot、Hermes、Kimi、Pi）——或任何兼容 OpenAI 的 BYOK 端点。

Open Design 生成 HyperFrames 合成的有效初稿——调色板、场景内容、GSAP 入场补间、场景中活动以及着色器过渡。然后你可以下载项目并在任意 AI 编程代理中进行精修，支持代码检查和实时预览。

快速开始

下载指令文件

在 GitHub 上打开 open-design-hyperframes.md，点击下载按钮（↓）将其保存。

在本地运行 Open Design

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm tools-dev run web
# open the web URL printed by tools-dev

将文件放入 skill 中，或附加到聊天中

推荐做法： 将 open-design-hyperframes.md 复制到 Open Design 仓库中的 skills/hyperframes-handoff/SKILL.md。守护进程会在下次请求时自动发现它，并在选择器中将其暴露为 skill。

或者： 开始新的聊天并直接附加文件——Open Design 原生读取附件。

描述你的视频

选择 hyperframes-handoff skill（或你活跃的原型 skill），选择设计系统或视觉方向，然后输入简介。如果有截图、品牌素材或调色板，一并提供。

将项目保存到磁盘

Open Design 将 index.html、preview.html、README.md 和 DESIGN.md 快照写入 .od/projects/<id>/。点击 Save to disk 或下载为项目 ZIP。

在任意 AI 编程代理中精修

Open Design 项目文件夹本身就是一个真实的工作目录。将其交给 Claude Code、Cursor、Codex 或任何具有终端访问权限的代理：

cd .od/projects/<your-project-id>
npx skills add heygen-com/hyperframes   # one-time setup
npx hyperframes lint                     # verify structure
npx hyperframes preview                  # open the studio

💡 Tip

**放入 skills/ 目录，不要粘贴到聊天中。**Open Design 的守护进程在请求时读取 SKILL.md 文件，并自动注入附带文件（模板、参考文档）。粘贴 URL 或聊天附件也可以使用，但 skill 路径能提供完整的预检流程（模板注入 + 五维自我审查关卡）。

选择哪种设置

场景推荐设置
Open Design（开源）将 open-design-hyperframes.md 放入 skills/hyperframes-handoff/SKILL.md
Claude Codenpx skills add heygen-com/hyperframes，然后使用 /hyperframes
Cursor / Codex / Gemini CLInpx skills add heygen-com/hyperframes
Claude Design（闭源）将 claude-design-hyperframes.md 附加到你的聊天中

工作原理

指令文件为 Open Design 提供预验证的 HTML 骨架——结构规则（data 属性、时间轴注册、场景可见性、预览令牌转发）已经嵌入。Open Design 填充创意工作：

  1. 调色板 + 字体——由当前活跃的 DESIGN.md 驱动（Open Design 内置 72 个设计系统，当未指定品牌时还有 5 种确定性视觉方向），绑定到 :root
  2. 场景内容——.scene-content 包装器内的文本、图片、布局
  3. 动画——GSAP 入场补间和场景中活动
  4. 过渡——大多数场景使用硬切，2-3 个关键时刻使用着色器过渡

Open Design 的五维自我审查在输出前运行，因此生成的产物通过代码检查，你的编程代理可以立即开始精修，无需结构性修复。

示例提示词

  • 功能公告text Use the hyperframes-handoff 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"
  • 创始人宣传（BYOK，使用你自己的 CLI）text Use the hyperframes-handoff skill on Codex CLI. 25-second LinkedIn video. 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 Use the Linear design system. Professional but not corporate.
  • 品牌驱动（使用 72 个设计系统之一）text Use the hyperframes-handoff skill. Design system: Stripe. 10-second reel. One big number: "$4.2 billion processed in Q1 2026" Dark background, the number animates up from zero. Subtle, confident. End with logo placeholder and "stripe.com"
  • 简略简介（让它自己提问）text Use the hyperframes-handoff skill. 30-second launch video for Orbit. Open Design 的 RULE 1 总是在输出代码前先打开一个 <question-form>，因此简略的简介会变成一个简短的表单（平台 · 受众 · 语调 · 品牌 · 规模），而不是 AI 自由发挥的渲染。

提示词中应包含什么

Open Design 按以下优先级读取输入：当前活跃的 DESIGN.md > 附件 > 粘贴内容 > 网页搜索 > URL。

输入类型对 Open Design 的作用
活跃设计系统（内置 72 个，可从选择器切换）完整的 9 部分规格（颜色、字体、间距、布局、组件、动效、语调、品牌、反模式）——最强来源
截图 / PDF / 品牌指南调色板、字体、UI 模式、语调——代理原生读取
粘贴的十六进制代码、字体、文案对其涵盖的内容具有权威性
品牌名称（知名品牌）Open Design 可以通过 WebFetch 获取博客、新闻、维基百科
SPA URL（React/Vue 首页）返回近空壳——应改为博客/新闻来源

提示词越具体，输出越好。先选择设计系统或视觉方向，然后描述内容。

为什么选择 Open Design 而非 Claude Design

Claude DesignOpen Design
许可证闭源Apache-2.0
费用Pro / Max / TeamBYOK（使用自己的 CLI / API 密钥免费）
形态仅 Web（claude.ai）Web 应用 + 本地守护进程（或部署到 Vercel）
代理运行时仅 Anthropic（Opus 4.7）10 个 CLI 适配器 + 兼容 OpenAI 的 BYOK 代理
Skills专有31 个基于文件的 SKILL.md 包，可直接放入
设计系统专有72 个内置 DESIGN.md 系统
文件系统级工作区❌✅ 真实的 cwd，真实的 Read / Write / Bash / WebFetch

如果你想要 Claude Design 的工作流但不想被锁定，Open Design 采用相同的产物优先思维模型——开源、本地、BYOK。

已知限制

  • 渲染仍在本地进行——Open Design 生成 HTML；npx hyperframes render 和 HDR 编码仍需要你机器上的 FFmpeg + Node 22+。
  • 面板内预览是沙箱化的 iframe——完整浏览器播放是可靠的；如需帧精确的拖动预览，请在交接后使用 npx hyperframes preview。
  • 着色器透传需要 WebGL——与 Claude Design 路径相同；Open Design 的 iframe 沙箱支持它。
  • Skill 预检在守护进程端执行——如果你跳过 skill 选择器直接在聊天中粘贴原始 HTML，会失去附带文件注入和五维审查关卡。请使用 skill。

交接给你的编程代理

Open Design 的项目文件夹就是代理的工作目录。没有"导出再重新导入"的步骤——直接用 Claude Code、Cursor、Codex 或任何 AI 编程代理打开同一目录：

cd .od/projects/<your-project-id>
npx skills add heygen-com/hyperframes   # one-time setup
npx hyperframes lint                     # verify structure
npx hyperframes preview                  # open the studio

然后以与 Claude Design 路径相同的方式迭代：

  • "让场景 3 的入场更干脆"
  • "给场景 5 的数据添加一个计数器动画"
  • "收紧节奏——场景 4 和 6 感觉太长了"
  • "把过渡 2 的着色器改成故障效果"

下一步

  • Claude Design 指南 同一工作流的闭源版本——当你笔记本电脑上没有 CLI 时很有用。
  • 提示词指南 在 Claude Code、Claude Design、Open Design 和其他代理中使用 HyperFrames 的更多提示词模式。

Claude Design

在 Claude Design 中创建 HyperFrames 视频草稿，然后在任何 AI 编程 agent 中优化。

提示词指南

如何提示 Claude Code、Cursor、Codex、Google Antigravity、GitHub Copilot CLI 和其他 AI 代理来编写 Hyperframes 合成——包含可直接复制粘贴的示例和词汇表。