Open Design 的工作原理 —— 可自托管、自带密钥的架构

本指南面向那些想要理解自己究竟在运行什么的人：Open Design 在底层是如何工作的，为什么它能在每一层都做到自托管和 BYOK，以及它的技能和设计系统为什么本质上都只是你可以 fork 的文件。它沿用了 AI Stack Engineer 在他的完整视频中给出的架构优先式讲解，并根据当前版本重新撰写、更新到位。想看实时运行就观看上方视频，想看文字版就继续往下读。

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

什么是 Open Design？

Open Design 是云端设计工具的一个完全开源的替代品：本地优先、可部署到 Web，且每一层都支持 BYOK。“BYOK”意为自带密钥（bring your own key）。Open Design 不会捆绑自己的模型或智能体，而是扫描你机器上已有的各类编码 CLI —— Claude Code、Codex、Cursor、Gemini、OpenCode 等等 —— 并以它作为引擎。如果你的环境里一个都没有，还有 Anthropic API 兜底。许可证为 Apache-2.0，所以你可以 fork 它、在内部部署它，并自由地修改它。

AI Stack Engineer 反复回到的一点是：云端设计工具只能跑在某一家厂商的模型上、跑在他们的云里、藏在付费方案之后，且毫无自托管的可能。Open Design 把这三点全部反转 —— 你的机器、你的智能体、你的密钥。

它是如何构建的（值得理解的那部分）

整个架构刻意保持简单：

• 前端 —— 一个 Vite + React + TypeScript 应用。
• 后端 —— 一个 Node + Express 守护进程，用 SQLite 存储项目、对话、消息和标签页。
• 守护进程是唯一拥有特权的进程。它会启动你所选的那个 CLI，并把工作目录设为隐藏 .od 目录下的某个按项目划分的文件夹。

最后这一点正是让 Open Design 超越聊天框的关键：智能体会获得面向真实文件系统的真实读 / 写 / bash / 网络抓取工具。当它生成一件产物时，它是在往磁盘上写真实的文件，你可以打开、编辑、做版本管理并导出 —— 而不是在聊天窗口里返回一坨数据。

技能和设计系统本质上都只是文件

两块构件承担了大部分工作，而它们都是你拥有的普通文件：

• 技能覆盖各种真实场景 —— Web 原型、SaaS 落地页、仪表盘、定价页、文档、博客、移动应用、幻灯片（包括一个杂志风格的 PPT 技能）—— 此外还有各类工作产物模板，如产品规格、周报、会议纪要、操作手册、财务报告、发票、看板和 OKR。每一个都是你可以阅读、编辑或扩充的文件。
• 设计系统以纯 markdown 的 DESIGN.md 文件形式存储。每一个都定义了取材自真实品牌的色彩、排版、间距、布局、组件、动效、语气、品牌规则和反模式。

Open Design 工作区：描述你想构建的东西，选择一种模式，剩下的交给你的智能体完成。

正因为两者都是文件，你的整个设计工作流就变得可版本化、可 fork —— 一个团队可以把自己内部的技能和品牌 DESIGN.md 放进 git，并让任意智能体据此生成。

安装与自托管

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 上的桌面应用可以跳过 Node 和 pnpm。首次加载时它会扫描你的 PATH 并列出找到的智能体；选一个（AI Stack Engineer 用 OpenCode 测试了非 Claude 路径），或者使用 Anthropic 的 BYOK 选项。

提示栈里有两处值得了解的巧思：一个是需求发现表单（它会在动笔前询问场景、受众、语气、品牌、规模 —— 30 秒的单选按钮，能省下 30 分钟的纠偏），另一个是方向选择器（五个精选的视觉方向，配有确定性的调色板，这样模型就不会自由发挥气质走调）。

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

完成后，导出为 HTML、PDF 或 ZIP —— 或者部署。由于它既可部署到 Web 又是本地优先的，没有任何东西非得碰到第三方的云。

坦诚的结论

AI Stack Engineer 的评价很中肯：一个为某个顶级模型精调过的、打磨精良的云端工具，在开箱即用的精致度和导出广度上仍然胜出。而 Open Design 胜在对很多人真正重要的地方 —— 它免费且采用 Apache-2.0，你自带智能体和密钥，而且模型灵活性是一项低调的超能力：如果某家厂商涨价，或者你想比较两个模型如何处理同一个布局，你只要在下拉菜单里切换智能体再重跑一遍即可。几点坦诚的提醒：它还处于研究预览的早期阶段；Claude Code 能获得最丰富的流式输出（结构化的 stream-JSON），而其他 CLI 则是按行缓冲的；输出质量在很大程度上取决于你接入的模型；还有一些功能，比如评论模式下的精准编辑，仍在路线图上。

小贴士

• 理解 .od 项目文件夹 —— 你的产物在那里是真实的文件；记得备份 / 提交它们。
• 把技能和 DESIGN.md 放进 git，打造一个可版本化、可团队共享的工作流。
• 使用本地 CLI，这样生成就能搭在你本就付费的订阅之上。
• 慎重选择引擎 —— 一个弱模型即使配上出色的设计系统，产出依然是弱的。
• 需要隐私或掌控时就自托管 / 部署 —— 任何东西都不必离开你的机器。

常见问题

“每一层都支持 BYOK”是什么意思？ 你自带智能体 CLI 和你自己的模型密钥。Open Design 提供设计场景、技能和设计系统；模型及其成本都留在你这一侧。

我的作品实际上存在哪里？ 在你的机器上，存在 .od 下一个按项目划分的文件夹里，由本地守护进程管理（SQLite + 真实文件）。它可自托管，也可部署到 Web。

我能自定义技能和设计系统吗？ 可以 —— 它们都是普通文件（技能是文件夹，设计系统是 DESIGN.md）。编辑它们、添加你自己的，并把它们纳入版本控制。

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

---

这篇文字指南基于 AI Stack Engineer 的完整实操讲解。观看上方的完整视频，并订阅 AI Stack Engineer，获取更多实用的 AI 技术栈拆解。