开放式设计

开放设计是 Claude Design 的开源、本地优先替代方案。它使用 pnpm tools-dev 在您的笔记本电脑上运行，将 Web 层部署到 Vercel，并委托给 PATH 上已有的任何编码代理 CLI（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、Copilot、Hermes、Kimi、Pi），或委托给任何与 OpenAI 兼容的 BYOK 端点。开放设计可生成 HyperFrames 合成的有效初稿 — 调色板、场景内容、GSAP 入口补间、场景中活动和着色器过渡。然后，您可以下载该项目，并在任何 AI 编码智能体中通过 linting 和实时预览进行优化。

开始使用

下载说明文件

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

本地运行开放设计

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

将文件放入技能中，或将其附加到聊天中

推荐： 将 open-design-hyperframes.md 复制到 Open Design 存储库内的 skills/hyperframes-handoff/SKILL.md 。守护进程会在下一个请求时自动发现它，并将其公开为选择器中的技能。 或者： 开始新的聊天并直接附加文件 - Open Design 可以本地读取附件。

描述您的视频

选择 hyperframes-handoff 技能（或您的活动原型技能），选择设计系统或视觉方向，然后输入简介。包括屏幕截图、品牌资产或调色板（如果有的话）。

将项目保存到磁盘

开放设计将 index.html、preview.html、README.md 和 DESIGN.md 快照写入 .od/projects/<id>/。单击 保存到磁盘 或下载为项目 ZIP。

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

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

cd .od/projects/<id>
npx skills add heygen-com/hyperframes   # install skills (one-time)
npx hyperframes lint                     # should pass with zero errors
npx hyperframes preview                  # open the studio

放入 skills/，不要粘贴到聊天中。 Open Design 的守护进程在请求时读取 SKILL.md 文件并自动注入辅助文件（模板、引用）。粘贴的 URL 或聊天附件是有效的，但技能路径为您提供了完整的飞行前管道（模板注入 + 5 维自我批判门）。

使用哪种设置

表面	推荐设置
开放式设计（开源）	将 `open-design-hyperframes.md` 放入 `skills/hyperframes-handoff/SKILL.md`
克劳德·科德	`npx skills add heygen-com/hyperframes`，然后使用 `/hyperframes`
光标/Codex/Gemini CLI	`npx skills add heygen-com/hyperframes`
克劳德设计（闭源）	将 `claude-design-hyperframes.md` 附加到您的聊天中

它是如何运作的

指令文件提供了开放设计预有效的 HTML 骨架 - 结构规则（数据属性、时间线注册、场景可见性、预览令牌转发）已经嵌入。开放式设计填充创意工作：

调色板 + 版式 — 由绑定到 :root 的活动 DESIGN.md 驱动（开放设计提供 72 个开箱即用的系统，加上未命名品牌时的 5 个确定性视觉方向）
场景内容 — .scene-content 包装器内的文本、图像、布局
动画 — GSAP 入口补间和场景中活动
过渡 — 对大多数场景进行硬剪辑，在 2-3 个关键时刻进行着色器过渡

开放设计的 5 维自我批评在发布之前运行，因此工件到达时是干净的，并且您的编码代理可以立即开始精炼，而无需进行结构修复。

提示示例

功能公告

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）

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 个设计系统之一）

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"

稀疏简短（让它问）

Use the hyperframes-handoff skill. 30-second launch video for Orbit.

开放设计的 RULE 1 在发出代码之前总是以 <question-form> 开头，因此稀疏的摘要变成了一个简短的问题形式（表面·受众·基调·品牌·规模）而不是 AI 自由风格渲染。

提示中应包含哪些内容

Open Design 按以下可靠性顺序读取输入：活动 DESIGN.md > 附件 > 粘贴内容 > 网络研究 > URL。

输入类型	开放式设计带来了什么
主动设计系统（已发货 72 个，可从选择器切换）	完整的 9 部分规格（颜色、排版、间距、布局、组件、动作、声音、品牌、反模式）——最强来源
屏幕截图/PDF/品牌指南	调色板、排版、UI 模式、语气 — 由代理本地读取
粘贴的十六进制代码、字体、副本	他们所涵盖的内容具有权威性
品牌名称（知名）	开放设计可以 `WebFetch` 博客、媒体、维基百科
SPA URL（React/Vue 主页）	返回近乎空的外壳——转向博客/新闻

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

为什么使用开放式设计与克劳德设计

	克劳德设计	开放式设计
执照	关闭	阿帕奇-2.0
成本	专业版/最高版/团队版	BYOK（使用您自己的 CLI/API 密钥免费）
外形尺寸	仅限网络 (claude.ai)	Web 应用程序 + 本地守护程序（或部署到 Vercel）
代理运行时	仅人择（Opus 4.7）	10 个 CLI 适配器 + 兼容 OpenAI 的 BYOK 代理
技能	所有权	31 个基于文件的 `SKILL.md` 捆绑包，可丢弃
设计系统	所有权	72 个已发货 `DESIGN.md` 系统
文件系统级工作区	❌	✅ 真实`cwd`，真实`Read` / `Write` / `Bash` / `WebFetch`

如果您想要没有锁定的克劳德设计循环，开放设计也是同样的工件优先思维模型——开放、本地、BYOK。

已知的限制

渲染仍然在本地进行 — 开放设计生成 HTML； npx hyperframes render 和 HDR 编码仍然需要您的计算机上有 FFmpeg + Node 22+。
窗格内预览是沙盒 iframe - 完整的浏览器播放是可靠的；对于帧精确的擦除，在切换后使用 npx hyperframes preview 。
着色器直通需要 WebGL — 与 Claude Design 路径相同； Open Design 的 iframe 沙箱支持它。
技能预检是守护进程端 — 如果您绕过技能选择器并将原始 HTML 粘贴到聊天中，您将失去侧文件注入和 5 维批评门。使用技能。

移交给您的编码代理

Open Design的项目文件夹是代理的cwd。没有“导出然后重新导入”步骤 - 针对同一目录打开 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 上的着色器更改为故障”

后续步骤

克劳德设计指南

同一工作流程的闭源风格 — 当您的笔记本电脑上没有 CLI 时非常有用。

提示指南

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

Getting Started

Concepts

Guides

Deploy

开始使用

使用哪种设置

它是如何运作的

提示示例

功能公告

创始人推介（BYOK 使用您自己的 CLI）

品牌驱动（使用 72 个设计系统之一）

稀疏简短（让它问）

提示中应包含哪些内容

为什么使用开放式设计与克劳德设计

已知的限制

移交给您的编码代理

后续步骤

克劳德设计指南

提示指南

​开始使用

​使用哪种设置

​它是如何运作的

​提示示例

功能公告

创始人推介（BYOK 使用您自己的 CLI）

品牌驱动（使用 72 个设计系统之一）

稀疏简短（让它问）

​提示中应包含哪些内容

​为什么使用开放式设计与克劳德设计

​已知的限制

​移交给您的编码代理

​后续步骤

克劳德设计指南

提示指南

开始使用

使用哪种设置

它是如何运作的

提示示例

提示中应包含哪些内容

为什么使用开放式设计与克劳德设计

已知的限制

移交给您的编码代理

后续步骤