Open Design：10万+ star 的本地 AI 设计工具，Claude Design 的开源替代

先把问题问清楚，再让 AI 按设计规范动手。

今年四月，Anthropic 把 Claude Design 推上了 X 的热搜。用自然语言生成设计稿，一份融资 PPT、一个 SaaS 落地页、一套移动端原型，几秒钟就出来了。

然后大家发现，这东西要钱，绑账号，数据走云端，模型锁死在 Claude，不开源，也没法自部署。

差不多同一时间，GitHub 上出现了一个叫 Open Design 的项目，nexus-io 团队做的。README 第一句话很直接，说这就是 Claude Design 的开源替代，本地运行，自己带模型，Apache-2.0。

官网首屏，The 1st Collaborative AI Design Agent Workspace。

仓库首页实时截图，Star 与 Fork 计数同时可见。它现在十万多 Star。

它到底是个什么东西

先把最容易误会的地方说清楚。Open Design 本身不包含任何 AI 模型。

它是一个设计工作流框架，把你电脑上已有的 AI 编码工具接进来，让它们按预设的设计流程干活。你装了 Claude Code，它就用 Claude Code 当引擎。装了 Gemini CLI 或 Cursor Agent，一样。目前支持 16 种 CLI，启动时自动扫你的 PATH。

一个 CLI 都没有也行，走 BYOK 模式，填 API Key，支持 Anthropic、OpenAI、Azure OpenAI、Google Gemini 四个接口。

工作区入口，左边是项目，中间是输入框。

所以一句话概括它，是一个把 AI 编程助手改造成设计师的工具集。

这个设计有代价。它不保证产出质量的下限，因为质量取决于你接进来的那个引擎和那个模型。同一个需求，你挂 Claude Code 和挂一个本地小模型，出来的东西差得远。它保证的是流程一致性，不是结果一致性。

从一句话到一份成品

打开界面先看到两个选择器，选技能和设计系统，然后输入你要什么。

比如输入「帮我做一个种子轮融资 PPT，杂志风格」。

这时候 AI 不会直接开始画。它会先弹一个表单，问你四件事：目标受众是谁、风格偏哪个方向、有没有品牌色、内容大概几页。

生成前先弹表单，把需求问清楚再动手。

这个思路来自另一个开源项目 huashu-design 里的「Junior Designer 模式」。核心想法很朴素：先把问题问清楚，比直接乱猜一遍再反复改要省事得多。

为什么这一步值得单独做一个环节？道理在于生成的成本和返工的成本不对等。一次生成的成品如果方向错了，你改的不是某一个色值，是整个版式重来。而问四个问题的成本只有几十秒。把不确定提前消化掉，后面每一轮迭代都建立在同一个前提上。

填完表单，如果没有品牌色，它会让你选一个视觉风格方向，一共五档。

风格	感觉
Editorial Monocle / FT	印刷杂志感，奶油色加暖锈红
Modern Minimal	干净克制，Linear 或 Vercel 那种
Tech Utility	信息密度高，等宽字体，Bloomberg 风
Brutalist	粗暴有力，大号字，硬边框
Soft Warm	低对比度，柔和，有点 Notion 感

选定之后，调色板和字体栈就绑死了，AI 不会自由发挥。

每种风格方向都绑定一套调色板与字体说明。

然后它开始干活。界面上会冒出一张 Todo 卡片，实时显示进度，跟 Claude Code 跑起来那种感觉一样，一步一步打勾。

Todo 卡片逐步打勾，进度看得见。

生成完，结果在沙盒 iframe 里直接渲染出来，能交互，能下载成 HTML 或 PDF，也能打包成 ZIP。

沙盒 iframe 内的设计稿预览。

它真正卖的不是生成能力。生成这件事随便哪个模型都能做，它卖的是那套「先把问题问清楚再动手」的工序。

31 个技能

内置 31 个技能包，分两大类。

Prototype 模式 27 个，产出单页 HTML 设计稿。覆盖面挺宽，从网站落地页、SaaS 官网、后台管理界面，到手机端应用截图（带 iPhone 15 Pro 或 Pixel 机框）、三屏引导流程、游戏化应用、社媒轮播图、杂志海报、HTML 邮件，再到产品需求文档、工程值班手册、财务摘要、发票单据、看板快照、OKR 记录表。

Deck 模式 4 个，产出横向翻页的演示文稿。其中 guizang-ppt 是杂志风 PPT，WebGL 背景，单文件 HTML 导出，来自另一个开源项目 op7418/guizang-ppt-skill。

guizang-ppt 生成的杂志风 PPT，单文件 HTML。

mobile-app 技能生成的移动端原型，三屏同框。

每个技能就是一个文件夹，里面放 SKILL.md、模板文件和参考资料。想加新技能，按规范塞进去，重启守护进程就能用。

技术上说，每个技能是一份写给 agent 的说明书。SKILL.md 里写清楚这类产出该有哪些区块、用什么栅格、哪些地方不能省，模板文件给出骨架，参考资料补上行业惯例。agent 读完之后再动手，产出的东西就不会是一张白纸上的自由发挥。

七十二份品牌说明书

设计系统是一套品牌 Markdown 文件，规定颜色、字体、间距、组件写法、品牌语气。每次生成前 AI 会把这份文件读进去，按规范写代码。

内置 72 套，覆盖的品牌你大概都认识。开发工具类的 Cursor、Vercel、Linear、Supabase，生产力类的 Notion、Figma、Miro、Raycast，金融类的 Stripe、Coinbase、Revolut，还有 AI 类的 Claude、Mistral、ElevenLabs，以及 Tesla、Nike、Spotify 这些消费品牌。

设计系统库，每套都标出四个品牌色。

在库里每套显示四个品牌色，点进去能看完整的 DESIGN.md，配实时示例。想做一个 Notion 风格的产品主页，直接选 Notion 那套，字体间距色系它就知道了。

这套东西的本质是给 AI 的约束文件，不是素材库。素材是往里填，约束是往外限。

这个区别在实际使用中很明显。如果你只是给 AI 一句「做得像 Notion 一点」，它会去猜 Notion 是什么样，猜出来的往往是「浅色背景加圆角卡片」这种表面特征。而读了 DESIGN.md 之后，它知道的是具体的字号阶梯、行高比例、边框色值和语气用词。前者是印象，后者是规格。

72 套这个数量也有意思。它不是一个通用风格库，是一堆具体公司的具体做法，等于把别人已经调好的答案直接摊开给你抄。

不绑定模型，这是最本质的区别

Claude Design 只能用 Claude，没得选。Open Design 的守护进程启动时扫 PATH，自动识别你装了什么。

Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、GitHub Copilot CLI、Hermes，这些都在名单上。找到哪些就列进可选项，一键切换。免费用免费的，付费的用付费的，取决于你自己装了什么。

没有 CLI 也一样，填 API Key 走代理模式，支持标准 OpenAI 兼容接口。如果你在找稳定统一的模型接入方式，RouteFast.ai 这类中转服务也能作为补充，一个入口对接 Claude、GPT、Gemini 等主流模型。

这件事的意义不只是「多几个选择」。设计生成是个反复试的过程，同一个需求你可能要出五六个版本。能切模型意味着你可以用一个便宜的模型先跑草稿定方向，定下来之后再用强的模型精修细节。而在只能用一个模型的产品里，这个成本阶梯是不存在的。

除了 HTML 设计稿，聊天界面也能生成图片和视频，输出直接落到项目文件夹。

类型	模型
图片	gpt-image-2（OpenAI / Azure）
视频	Seedance 2.0（字节 Volcengine）
视频	HyperFrames（HeyGen OSS）

类型	适合做什么
图片	海报、头像、信息图、社媒图
视频	15 秒电影感短视频，文生视频或图生视频
视频	HTML 转 MP4，动态排版、数据图动画、Logo 结尾

项目里还附了 93 个现成提示词，43 个图片类、39 个视频类、11 个 HyperFrames 类。

东西都存在你自己的盘上

所有项目数据都存在本地的 .od/ 文件夹里。

app.sqlite 放项目列表、对话历史、消息记录。projects/<id>/ 是每个项目的工作目录，也是 AI 读写文件的地方。artifacts/ 存手动保存的渲染结果。

关掉再开，项目还在，Todo 卡片还在，上次的进度也还在。

它还内置了一个只读 MCP 服务器。接进 Claude Code、Cursor、VS Code 之后，另一个项目里的 AI 能读到这边的产物。注意是只读，它的定位是让别人来读，不是让别人来改。

两条路，选一条

最省事是下桌面版。官网 open-design.ai 提供打包好的应用，macOS 是 Apple Silicon 版，Windows 是 x64 版，下载直接用，不用自己装运行时。

想从源码跑，环境要求是 Node 24 和 pnpm 10.33.x。

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

跑起来之后终端会打印本地访问地址。第一次启动它会自动扫描你装了哪些 CLI，加载全部 31 个技能和 72 套设计系统，然后弹一个欢迎框。没有任何 CLI 的话，就在这一屏填 API Key。

几个常用命令：

pnpm tools-dev status
pnpm tools-dev logs
pnpm tools-dev stop

它到底造了什么

Open Design 做的事说简单也简单：把你已有的 AI 编码工具，接进一套精心设计的工作流里。

它没造模型，没造 agent，造的是中间那层工序。内置的提问环节、风格选择器、设计系统库和自检机制，才是它跟「直接让 AI 画个页面」的区别。

它也不是万能的。产出的东西是 HTML 原型，不是可以直接交付给开发的组件代码，中间还隔着一次工程化。设计系统覆盖的是风格，不是信息架构，页面该放什么内容还是得你自己想清楚。

项目还在快速更新，技能库和设计系统库都在扩。平时就用 Claude Code 或 Cursor 做开发的人，顺手让它把界面也做了，是挺自然的一件事。GitHub 地址是 https://github.com/nexu-io/open-design 。

在云栈社区逛一圈你会发现，这类「把 AI 编码工具接进特定工作流」的思路正在开花结果。Open Design 只是其中长势最猛的一个。