以 Claude Design 级别的质量做设计，却不烧 token

本指南正面切入成本问题：如果你用过封闭式云端设计工具，你就懂那种神奇——也知道 token 耗得有多快。Open Design 让你能以相近的质量做设计，因为它把工作交给任何你想用的模型来跑——你已经付费的那个智能体，或者你自己的密钥——这样你就不必再为一份单独的设计预算精打细算。它沿用 Roy Shavit 在他的实操演示中跑的那套构建流程，用英文重写并更新到了当前版本。想看实时演示就看上方视频，想看文字版就继续往下读。

HyperFrames 画廊：由代码驱动的动效与视频作品，你可以复刻并二次创作。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台。和那款封闭式云端工具一样，你给它一个提示词，就能拿回一个真实的成品——落地页、应用或幻灯片——以可编辑的 HTML 形式呈现，你可以在 VS Code 或你的编辑器里继续打磨。有三点让它与众不同，而前两点正是它运行成本更低的原因：

• 它是开源的（Apache-2.0）——你可以读源码、fork 它、自托管它。
• 它在你的电脑上运行——文件留在你自己的机器上；没有任何东西上传到第三方云端。
• 它能用任何你想用的模型——通过你现有的 CLI，使用 Codex、Claude，或其他 15 种以上的模型，又或者用你自己的 API 密钥（BYOK）。

成本这件事：别再精打细算 token 了

Roy 的说法直白，而这正是关键所在：封闭式云端设计工具会很快烧光它的 token 额度，于是你不得不省着用，处处节制自己的设计工作。Open Design 移除了这个天花板，因为生成是通过你已经拥有的智能体／订阅，或一把你自己掌控的密钥来跑的。你可以为每个项目自行决定成本／质量的权衡——草稿用便宜的模型，定稿那一遍用顶级模型——而不是被别人那份单独的设计额度计量着用。自托管还意味着工作发生在你自己的机器上，这让一切都更精简。

第 1 步——安装并检测你的模型

最简单的路径是桌面应用：访问 open-design.ai/download，选择你的操作系统，下载，然后把它拖进去。更喜欢从源码安装：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

打开它打印出的本地 URL（一个动态端口——不要写死）。在设置里，Open Design 会立即识别本地已安装的模型——Roy 装了 Codex 和 Claude，它也会识别出 OpenCode 或其他模型。设一个默认模型，或者从任意供应商带上你自己的密钥，这样你甚至都不需要装 CLI。这正是它的独特之处：你不会被绑死在某一家供应商上。

幻灯片模式：选择一个演示文稿类别，并以一个示例为起点进行复刻。

第 2 步——构建一个落地页，低成本迭代

Roy 为一项游戏串流服务构建了一个落地页。他发出需求简述，Open Design 返回一份探索表单（产出类型、受众、品牌方向、范围、动效程度），他作答后，它就开始构建——这里跑的是 Claude Opus，因为他的 CLI 就设成了这个。结果是一个扎实的初版：主视觉区、演示数据、平台支持、定价页、用户评价、常见问题——在桌面、平板和手机上都做了响应式适配。

这些迭代工具让改动的成本保持很低：选中一块区域并加上批注、留一条评论，或者做行内编辑直接改文字。切到代码视图就能看到生成的 HTML 和设计文件。满意之后，分享按钮可以导出为 PDF，或者直接部署到 Vercel 或 Cloudflare Pages（填入你的 token，站点就上线了），又或者你点进源码，在 VS Code、Cursor 或你的编辑器里继续干活。

在预览中呈现的真实生成原型——一个深色、富有电影感的代理公司落地页。

第 3 步——超越页面：生成一段视频

Open Design 并不局限于静态设计。Roy 用 hyperframes 动效技能生成了一段《纽约时报》风格的动态条形图——花了几分钟，产出一个真实的 MP4，你可以把它放进一段更长的视频里，或者当作一段带品牌的片段来用。还有 170 多个设计系统插件可供选择（Apple、PlayStation 等等），而且因为这个库是开放的，社区还在不断往里添东西。

何时该用哪个（坦诚的判断）

Roy 说得很公道。当你想要模型的灵活性、更低的成本或自托管时，选 Open Design——工作留在你自己的机器上，跑在你选的任何模型上，包括第三方模型。当你想要一套最简、零安装的配置，并以最少的工作量上手时，选那款封闭式云端工具——而且要说明，它开箱即用的成品仍然要更精致一点。同样的内容，那边完成度略高；而这边的掌控力明显更强、运行成本更低。

小贴士

• 跑在你已经付费的那个智能体上（或 BYOK），以摆脱一份单独的 token 上限。
• 草稿用便宜的模型，定稿用强力的模型——你可以为每个项目调节成本／质量这个旋钮。
• 用行内编辑和区域批注来做廉价、精准的改动，而不是整页重新生成。
• 导出为代码，或部署到 Vercel／Cloudflare——做完后直接从分享里操作。
• 试试 hyperframes 技能——当你需要动效／视频，而不只是静态页面时。

常见问题

相比封闭式云端工具，这是怎么省下 token 的？ 生成是通过你自己的智能体／订阅，或你自己的 API 密钥来跑的，所以没有一份单独的、被计量的设计预算需要耗尽——模型和成本都由你来选。

我能在自己的编辑器里继续打磨产出吗？ 可以——产出是可编辑的 HTML／文件。点进源码，在 VS Code、Cursor 或任何编辑器里继续，或者部署到 Vercel／Cloudflare Pages。

它能做的不止网页吗？ 是的——原型、幻灯片、图片和视频（通过 hyperframes 动效技能），外加一个庞大的设计系统库。

它免费吗？ 这个应用在 Apache-2.0 协议下开源，本地运行免费。你只需为你接入的那个智能体和密钥所产生的模型与媒体用量付费。

---

这份文字指南基于 Roy Shavit 的实操演示。请观看上方的完整视频，并订阅 Roy Shavit，获取更多实用的 AI 构建内容。