Open Design 在开源 Claude Code 工具箱中的定位

本指南把 Open Design 放回它所处的语境：它不是一个独立的应用，而是开发者当下层叠在 Claude Code 之上的开源工具之一。文章会讲清 Open Design 构建在什么之上、增添了什么，以及何时该用它。内容取材于 Chase AI 对最新开源 Claude Code 工具的盘点，并结合当前版本重写、更新到最新。完整盘点可观看上方视频，或继续阅读文字版。

插件库：直接从注册表安装 skill——包括防套路（anti-slop）的设计 skill。

Open Design 是什么

Open Design 是一个开源、本地优先的设计平台——本质上是一个本地、图形界面驱动的 Claude Design，它运行在你已经在用的编码 agent 之上（Claude Code、Codex、Cursor、Gemini、OpenCode 等等），而不是自带一个模型。用 Chase 的一句话概括：如果你喜欢 Claude Design 的界面，却撞上了每周用量上限，那么它能在本地、免费地给你同样的体验。它沿用了大家熟悉的布局——原型、幻灯片——并加入了单一供应商工具所没有的能力，比如调用 API 生成图像和视频。

• 开源，Apache-2.0——可克隆、可阅读、可自托管。
• 本地运行——你的项目存在你自己的机器上，跑在你选择的任意 agent 上。
• 内置了丰富的 skill 与设计系统库。
• 不止于设计——原型、幻灯片、图像和视频。

在开放中构建，站在其他开源项目的肩膀上

Chase 点出的一个有用之处：Open Design 不是凭空冒出来的。它把若干现有开源项目缝合、在其之上构建，再叠加自己打包好的 skill 集。这种开放的血统正是关键所在——每一层都可被审视、可被替换：

• 它汲取了此前各类开放的 Claude Design 风格尝试中的最佳点子（终端优先的设计工具、杂志风格的 PowerPoint skill、其他开源设计克隆品，等等）。
• 它把这些包裹进统一的图形界面，以及一套可组合的 skill。
• 因为 skill 不过是文件、设计系统是可移植的 DESIGN.md，社区便能持续扩展它——你只需放进一个文件夹、提一个 pull request，就添加了一个 skill。

结果便是一个用起来像 Claude Design、但从头到尾都开放的工具，因此它以社区的节奏进步，而非依某个供应商的路线图。

插件中心：浏览注册表、导入插件，并为你的团队做好准备。

它在其他工具中的位置

Chase 的盘点里满是轻量的 Claude Code 附加件——token 追踪器、前端美化器、设计提取器、浏览器 agent。Open Design 是这个工具箱里的设计面：是你把一份需求转化为真实、合乎品牌的成品的地方，而其他工具则围绕它进行优化、提取或自动化。几组天然的搭配：

• 设计提取工具把无头浏览器对准任意网站，捕捉它的布局、配色和动效——这是产出 DESIGN.md 式品牌参考的好办法，随后你便可在 Open Design 内部使用它。
• 前端美化器在你导出后清理生成的 HTML。
• token／成本追踪器帮你看清每次 agent 运行的花费——这很有用，因为 Open Design 是搭在你所指向的任意 agent 上的。

贯穿整个生态的主线是：把工作留在本地，跑在你已经付费的 agent 上，并把小巧的开源工具组合起来，而非去租用某个封闭产品。

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

安装 Open Design

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.ai/download 获取零配置的桌面应用。首次运行时它会检测你已安装的 agent CLI；选一个，或自带你的 API key。在 open-design.ai/plugins 浏览完整的插件库。

小贴士

• 把 Open Design 当作你的设计面，并把那些更小的工具围绕它组合起来。
• 给它喂一份 DESIGN.md，它派生自一个真实网站（借助设计提取工具），以获得合乎品牌的产出。
• 让它跑在你已经付费的 agent 上，省掉第二份订阅——并绕开托管工具的每周上限。
• 扩展它——skill 是文件夹、设计系统是文件；添加你自己的，再提一个 PR。
• 在下游打磨导出物——导出后用前端工具清理生成的 HTML。

常见问题

Open Design 是它自己的模型吗？ 不是——它是包裹在你已经在用的编码 agent 外面的一层设计外壳。模型及其成本都留在你这一侧。

它构建在什么之上？ 它在若干更早的开源设计工具之上构建并加以统一，再叠加一套打包好的可组合 skill——全部 Apache-2.0、可审视。

我什么时候该用它而非托管工具？ 当你想要本地掌控、任意模型、无需订阅，或者你撞上了某个托管工具的用量上限时。它会在本地、免费地复刻那种体验。

它免费吗？ 这个应用在 Apache-2.0 下开源，本地运行免费。你只为所连接的 agent 与供应商的模型和媒体用量付费。

---

本文字版指南基于 Chase AI 的开源工具盘点。观看上方完整视频，并订阅 Chase AI，获取更多开源 Claude Code 工具内容。