Claude Design 太封闭？这个开源项目把 AI 设计工具重新做了一遍

大家好，今天想跟你们聊一个我最近在玩的东西。

事情是这样的——4月17号，Anthropic 发了一个叫 Claude Design 的工具，说是能让大模型直接产出设计产物。不是写文字，是真的生成页面、原型、PPT 那种。当时确实挺火的，我也去试了一下，嗯，确实有点东西。

但是用了几天之后，我心里总有点不太舒服。不是说它不好，而是有三个让我很难受的地方：闭源的，你看不到里面怎么运作；要付费订阅，团队用起来成本不低；最关键的是——它把你锁死在 Anthropic 的模型上，想换个模型？没门。

结果不到三周，GitHub 上就冒出来一个叫 Open Design 的项目。现在已经拿了 31k Star，迭代速度猛得吓人——从我开始写这篇文章到现在，已经从 v0.3.0 跳到 v0.4.0，再到昨天刚发的 v0.4.1。支持 16 种编程 Agent、31 个文件化 Skill、72 套品牌级 Design System。

它的口号很简单：同样的体验，零锁定。

好，那这个东西到底是什么？我们一起来拆解一下。

Open Design 到底是什么？

说白了，Open Design 就是一个跑在你本地的 AI 设计调度中心。

它自己不绑任何模型，而是去检测你机器上装了哪些编程 Agent 的 CLI——比如说 Claude Code、Codex、Gemini CLI 这些。检测到了之后，它就把设计任务丢给这些 Agent 去执行。

架构很简单，就三层：

浏览器（Next.js 16） → 本地守护进程（Express + SQLite） → 派发任务给 CLI Agent

中间这一层还带了一个 BYOK 代理，用 SSE 标准化传输，并且做了 SSRF 防护。就是说，你的 API Key 不会被随便乱传。

我们来看一下它的技术栈，了解一下就知道这个项目是什么定位了：

一句话：它是运行在本地的 AI 设计调度中心。数据都在你自己机器上，不锁任何模型。

怎么装？从零跑起来

好，概念我们了解了，接下来我们动手。先说环境准备。

环境要求

大家先确认一下自己机器上有没有这些：

这个地方要注意一下，Agent CLI 一定要在 PATH 里。后面我们会看到，Open Design 启动时会自动扫描 PATH 来检测你装了哪些 Agent。

安装步骤

来，我们一步步走：

# 1. 克隆仓库
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 2. 启用 Corepack，确保 pnpm 版本一致
corepack enable
corepack pnpm --version   # 应该输出 10.33.2

# 3. 安装依赖
pnpm install

# 4. 启动开发服务器
pnpm tools-dev run web
# 浏览器会自动打开 http://localhost:3000

启动的时候，守护进程会自动做这么几件事：

• 扫描 PATH 上所有已安装的 Agent CLI
• 加载全部 31 个 Skill 和 72 套品牌 Design System + 57 套设计 skill
• 创建 .od/ 运行时目录，里面有 SQLite、项目文件、产物缓存

整个过程几十秒就搞定了。

这里要插一段重要的坑。我最早装的是 5 月 5 号发的 v0.4.0，当时刚出的 Electron 桌面版下下来双击——窗口根本弹不出来，直接崩了。GitHub issue 里一堆人报同一个问题，官方描述是 "packaged app crashes before the window appears"。昨天（5 月 6 号）紧急发了 v0.4.1，把启动崩溃修了，顺便加了几个蛮实用的新功能（手动编辑模式、Cmd/Ctrl+P 快速切换、可调整聊天面板，后面会展开讲）。

好消息是，上面这套 pnpm tools-dev run web 的 Web 模式其实 v0.4.0 也能跑，崩溃主要砸的是 Electron 桌面版。但不管怎样，你现在装的话务必拉 v0.4.1 或者更新——踩过坑的人劝你一句。

怎么确认安装成功？

浏览器打开 http://localhost:3000，然后检查这四个东西：

1. Agent 选择器 — 页面顶部应该能看到识别到的 CLI 列表
2. Skill 卡片 — 左侧边栏有 31 个 Skill 选项
3. Design System 选项 — 右侧边栏列出了可用的设计系统
4. 发现表单 — 中间区域有个需求收集表单

如果某个 CLI 没被识别到，手动检查一下：

which claude        # Claude Code
which codex         # Codex CLI
which gemini        # Gemini CLI
which cursor-agent  # Cursor Agent

如果 which 找不到，说明不在 PATH 里，需要先解决这个问题。

跑一个原型试试

好，环境没问题了。我们来跑第一个原型，走一遍完整流程。

第一步 — 选 Skill 和 Design System

在 Skill 侧边栏点 web-prototype，这是最通用的入口。然后在 Design System 那边选 Default Neutral，新手推荐从这个开始。

第二步 — 填发现表单

系统会弹出来 5 到 8 个问题，比如说：

"这个产品/页面是做什么的？" → "一个 AI 代码审查工具的落地页" "目标用户是谁？" → "软件开发者和工程经理" "需要哪些区块？" → "Hero、Features、How it works、Pricing、CTA" "品牌色偏好？" → "蓝色和深灰，专业感"

这一步是硬性要求，不能跳过。Open Design 不让你跳过需求收集直接生成。实际上这样能避免 80% 的返工。我第一次用的时候觉得有点烦，但后来发现——确实，把需求想清楚再动手，比反复改要快得多。

第三步 — 选视觉方向

会给你 5 个方向选。做 SaaS 落地页的话，推荐 Modern Minimal，就是 Linear/Vercel 那种风格。

第四步 — 等生成

你会看到 Agent 的计划流实时出现在 UI 里，它按步骤一步步执行。几十秒之后，完整的 HTML 页面就在沙箱 iframe 里渲染出来了。你可以直接在预览里点元素发表评论，或者导出成 HTML/ZIP。

API 配置（这个很重要）

Open Design 本身不提供 AI 能力，它把活儿派给你机器上的 Agent。所以说，Agent CLI 的 API 配置搞对是关键。

方式一：直接配置 Claude Code CLI（推荐）

# 设置 API 地址
claude config set api-url https://api.anthropic.com

# 设置 API Key
claude config set api-key sk-ant-your-api-key-here

然后验证一下：

claude --version
claude "你好" --max-tokens 100

Open Design 调用 Claude Code 的时候会自动继承这些配置，不用在 Open Design 里再设一遍。

方式二：环境变量（macOS/Linux）

export ANTHROPIC_BASE_URL="https://api.anthropic.com"
export ANTHROPIC_API_KEY="sk-ant-your-api-key-here"

# 然后启动 Open Design
pnpm tools-dev run web

方式三：BYOK 回退（不需要本地 CLI）

在 Open Design 的 Web UI 的 Settings 面板里直接填：

baseUrl: https://api.anthropic.com
apiKey: sk-ant-xxx
model: claude-sonnet-4-6    # 推荐 Sonnet，性价比高

Open Design 通过 /api/proxy/{anthropic,openai,azure,google}/stream 转发请求，内置了 SSRF 防护。

怎么验证 API 路径是对的？创建一个测试项目，用 web-prototype 加个简单 Prompt，然后看终端日志。如果看到 Connecting to https://api.anthropic.com/v1/messages 就说明连接正常。响应时间应该在 5 秒以内。

核心功能拆解

好，基础操作我们走通了。接下来深入看看它到底能干什么。

16 种 Agent，自动检测，零配置

这是 Open Design 最核心的设计理念——Agent 不可知论。什么叫不可知论呢？就是说它不关心你用哪个 Agent，你装了什么它就用什么。

Daemon 启动的时候会自动扫 PATH，用 which / command -v 检测所有已知的 CLI。而且它支持 nvm、fnm、mise 这些版本管理器，不用担心版本切换的问题。

目前支持这些 Agent：

检测到的 Agent 会自动出现在 UI 的选择器里，你只需要在下拉菜单里切换就行。非常方便。

v0.4.1 还专门改进了代理恢复机制——就算某个 CLI 中途断了，下次也能自动接上，不用从头重来。长 Prompt 跑一半掉线的崩溃感，这次终于能救回来了。

31 个 Skill：能力全覆盖

Skill 这个概念大家可能第一次见。实际上，每个 Skill 就是一个文件夹，里面有一个 SKILL.md 加上一些素材和参考文件。添加新 Skill 只需要复制一个文件夹，然后重启服务。

我们来看一下都有哪些 Skill，我按类型给大家分好了。

设计交付类（8 个）

演示文稿类（4 个）

办公文档类（9 个）

pm-spec（PRD）、meeting-notes（会议纪要）、weekly-update（周报）、eng-runbook（运维手册）、finance-report（财务报表）、hr-onboarding（入职文档）、invoice（发票）、kanban-board（看板）、team-okrs（OKR 目标管理）。

营销与创意类（10 个）

social-carousel（社交轮播图）、email-marketing（营销邮件）、magazine-poster（海报）、motion-frames（动态帧动画）、sprite-animation（精灵动画）、wireframe-sketch（线框图）、critique（设计自评）、tweaks（精细调整）、dating-web（社交页面）、digital-eguide（数字手册）。

我个人的使用感觉是这样的——web-prototype 最简单，5 分钟就能跑通；saas-landing 实用价值最高，产出的东西能直接用；simple-deck 做 PPT 特别快，比做 Keynote 快多了。

72 套品牌 Design System

这个是真的让我惊讶。72 套品牌级的设计系统，全部是纯文本的 DESIGN.md 文件。Agent 能直接读懂里面的设计规范，然后按照规范来生成设计。

按行业给大家分一下：

AI & LLM 品牌：Claude、Cohere、Mistral、ElevenLabs、xAI、Ollama。风格特征是干净、技术感、低饱和度。做 AI 产品的话从这里选。

开发者工具（推荐首选）：Cursor、Vercel、Linear、Framer、Supabase、MongoDB、PostHog、Sentry 这些。深色主题、等宽字体、高对比度。做开发者产品或 SaaS 工具的首选。

生产力工具：Notion、Figma、Miro、Airtable、Raycast。友好、白色背景、圆角元素。协作工具选这个方向。

金融科技：Stripe、Coinbase、Binance、Mastercard、Wise、Revolut。信任导向、蓝色基调、专业严谨。

电商与出行：Shopify、Airbnb、Uber、Nike、Starbucks。视觉冲击力强、品牌色浓烈、大图展示。

媒体与内容：Spotify、PlayStation、Wired、The Verge。编辑感、大图排版、强对比。

汽车与高端品牌：Tesla、BMW、Ferrari、Lamborghini。高级感、金属质感、大量留白。

通用基础款：Default Neutral、Warm Editorial。新手推荐从 Default Neutral 开始。

每套系统都有一个标准的 9 段式结构：Color（色彩）、Typography（字体）、Spacing（间距）、Layout（布局）、Components（组件）、Motion（动效）、Voice（语调）、Brand（品牌资产）、Anti-patterns（禁止使用的模式）。

这意味着什么呢？你可以在 Prompt 里说"用 Stripe 的风格做一个支付页面"，Agent 会真的去读 Stripe 的色彩、字体、间距规范来生成设计。不是大概像，而是遵循明确的设计规范。

72 套品牌系统的来源是这样的：2 套手工编写的基础款 + 70 套产品系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等等），从 VoltAgent/awesome-design-md 导入。

5 种视觉方向

填完发现表单之后、生成代码之前，会出现一个方向选择器。5 个方向各有明确的调色板和字体组合：

实战建议：同样的 Prompt，选不同方向，出来的结果差异非常大。如果不确定选什么，先选 Modern Minimal，后面可以用 tweaks Skill 调整。

反 AI 审美疲劳：6 层防护

这个东西我觉得特别有意思。Open Design 继承了上游项目的一套完整反 AI-Slop 体系，一共 6 层：

1. 强制发现表单：第一轮必须先收集需求，想直接生成？被硬性阻断了。
2. 品牌资产五步协议：定位 → 下载品牌资产 → 提取色值 → 写入 brand-spec → 重述确认。一套走下来，品牌信息不会丢。
3. 五维自评门禁：生成 artifact 之前，必须对 Philosophy、Hierarchy、Detail、Function、Innovation 逐项打分（1-5 分）。任一维度不通过就阻断。
4. P0/P1/P2 检查清单：每个 Skill 内置必检项，P0 不通过不能发布。
5. 审美黑名单：硬编码禁止一些常见的 AI 设计套路——激进紫色渐变、通用 emoji 图标、圆角左边框卡片、Inter 字体当展示字、手绘 SVG 人物、捏造的统计数据。
6. 诚实占位符：宁可用 — 或者标注灰色块，绝不伪造数据。

这套机制的效果就是——最终产出的东西「看起来不像 AI 做的」。当然了，实际项目里你可能还是要微调，但至少不会一眼就觉得是 AI 生成的。

v0.4.1 体验升级：手动编辑 + 快速切换 + 可调面板

v0.4.1 这个版本除了修崩溃，还塞了几个让日常体验明显变顺的新功能，我单独拎出来讲。

手动编辑模式 这个我等了很久。之前 Agent 生成完 artifact，你想改一个小地方——比如一行文案、改个颜色——要么让 Agent 重新跑（费 token），要么切 tweaks Skill 再走一遍流程（慢）。v0.4.1 直接给了手动编辑入口，生成完之后在预览里双击进入编辑模式，HTML、CSS、文案都能手改，改完保存就行。这种小调整从 30 秒掉到 3 秒。

Cmd/Ctrl+P 快速文件切换 熟悉 VS Code 的人一看就懂。项目里 artifact 一多，之前得从侧边栏找，现在按 Cmd+P 输入关键字直接跳。文件数量起来之后救命。

可调整大小的聊天面板 以前聊天区固定宽度，看长代码的时候两边挤得很难受。现在能拖边界调宽度，小屏笔记本也能好好用了。

RTL/Bidi 工艺模块 做阿拉伯语、希伯来语项目的可以注意一下——v0.3.0 铺了基础的 RTL 支持，v0.4.1 把工艺模块也适配了。国际化场景下是个实实在在的加分项。

简单总结下这次 0.4 的节奏：v0.4.0 是功能大版本（MCP 集成、Critique Theater 设计评审、实时 artifact），v0.4.1 是体验大版本（修崩溃 + 手动编辑 + 快速切换）。两个连起来看，才算完整的 0.4 能力。

几个实战场景

好，功能我们看完了。接下来聊几个我自己试过的实际场景，给大家一个直观的感受。

场景一：独立开发者做 SaaS 落地页

目标很简单：3 小时内出一个能交付的落地页。

1. 选 saas-landing Skill
2. Design System 选 Linear 或 Vercel——开发者工具风格，跟目标受众匹配
3. 发现表单里认真填：产品名、一句话描述、目标用户画像、核心价值主张、品牌色偏好
4. 视觉方向选 Modern Minimal
5. 等几十秒，Agent 自动生成 Hero → Features → Pricing → CTA 完整页面
6. 在预览里点需要调整的部分加评论，切到 tweaks Skill 微调
7. 导出 ZIP，部署到 Vercel

Token 消耗方面，首次生成大概 30K-50K input + 8K-15K output。5 次迭代下来大概 250K tokens。用 Claude Sonnet 的话，总成本大概 1 到 1.5 美元。

场景二：产品经理生成 PRD

这个场景我觉得对 PM 特别有用。

1. 选 pm-spec Skill
2. Design System 选 Notion，文档风格最配
3. 把需求要点输进去，比如："做一个用户反馈收集功能。用户可以提交文字反馈和截图。管理员可以后台查看、分类、标记已处理。需要邮件通知。"
4. 发现表单补充：目标用户、优先级、技术约束
5. Agent 自动生成完整 PRD，包含背景、目标、用户故事、验收标准、技术方案概要
6. 导出 Markdown

关键技巧：在发现表单里尽量详细地写约束条件，比如"需要支持移动端""首屏性能要求 < 2 秒"。Agent 会在 PRD 里体现这些约束。

场景三：数据仪表盘

这个是我觉得最酷的一个场景。

1. 选 dashboard Skill
2. Design System 选 Stripe 或 Vercel
3. 输入数据字段描述："需要展示 MRR、月活跃用户、客户流失率、功能使用排行。左上角放 KPI 总览卡片，中间放趋势折线图，右侧放排行列表。"
4. 发现表单里指定图表类型偏好
5. 出来的结果包含侧边栏导航、KPI 卡片、图表区、数据表格，一整套

进阶：自定义和成本优化

Token 成本怎么控？

每个 Skill 的 Prompt Stack 大概 5K-10K tokens（系统提示），加上 5K-15K output。一次完整生成大概 20K-40K tokens。

几个省钱的策略：

算一笔账，用 Claude Sonnet 4.5（$3/$15 per MTok）：

一次完整生成：
  Input:  40K tokens × $3/MTok  = $0.12
  Output: 12K tokens × $15/MTok = $0.18
  合计：约 $0.30

5 次迭代（含缓存）：约 $1.00 - $1.50

一块多钱做一个完整的 SaaS 落地页，我觉得挺值的。

怎么创建自己的 Design System？

非常简单，就一个 DESIGN.md 文件。

# 创建目录
mkdir -p design-systems/my-brand

# 写 DESIGN.md
cat > design-systems/my-brand/DESIGN.md << 'EOF'
## Color
- Primary: #2563EB (Blue 600)
- Secondary: #7C3AED (Violet 600)
- Background: #F8FAFC
- Text: #0F172A
- Accent: #F59E0B (Amber 500)

## Typography
- Display: "Geist", sans-serif
- Body: "Inter", sans-serif
- Code: "JetBrains Mono", monospace
- Scale: 12/14/16/18/24/32/48

## Spacing
- Unit: 4px
- Section: 64px
- Component: 16px

## Components
- Button radius: 8px
- Card radius: 12px
- Shadow: 0 1px 3px rgba(0,0,0,0.1)

## Anti-patterns
- No gradients in buttons
- No rounded-full cards
- No emoji as icons
EOF

# 重启守护进程
pnpm tools-dev stop
pnpm tools-dev start

重启之后，my-brand 就会自动出现在 Design System 选择器里。Agent 会按你定义的色彩、字体、间距来生成设计。

遇到问题怎么办？

我把自己遇到过的几个问题和解决方案整理一下。

Agent 没被识别？

which claude          # 检查 CLI 在不在 PATH 里
echo $PATH            # 确认 PATH

# 如果用 nvm：
nvm use 24
which claude

生成超时？

先检查终端日志有没有网络错误，然后手动试一下 Agent CLI 能不能用：claude "test" --max-tokens 50。再确认 API 配置：claude config list。

产物质量不满意？

1. 检查发现表单是不是填得太笼统了——越模糊的输入，出来的东西越差
2. 确认 Design System 选对了没有
3. 用 critique Skill 跑一下五维自评
4. 用 tweaks Skill 针对性调整
5. 换个视觉方向试试

端口冲突？

lsof -i :3000
kill -9 <PID>
# 或者换个端口
PORT=3001 pnpm tools-dev run web

跟 Claude Design 和 Open CoDesign 比怎么样？

最后给大家做一个横向对比，这样你能更清楚 Open Design 的定位。

大家可以看到，Open Design 在灵活性和开放性上是明显领先的。当然了，Claude Design 在体验打磨上可能更成熟一些——毕竟有 Anthropic 的资源。但如果你重视开放性、可控性和成本，Open Design 是更好的选择。

不过有一点要注意，如果你想部署到 Vercel 的话，.od/ 目录需要持久化文件系统，而 Vercel 的 Serverless 架构不支持。推荐的方案是混合部署：Web 层放 Vercel，Daemon 层放自己的服务器，中间用 Cloudflare Tunnel 之类的连起来。

未来路线图

目前 v0.4.1 已经发布的功能包括：守护进程 + 16 CLI 适配器、Web 应用、31 Skill + 72 品牌 Design System、SQLite 持久化、BYOK 多供应商代理、Claude Design ZIP 导入、五维自评门禁、Electron 桌面应用（macOS / Windows，v0.4.1 才把启动崩溃修好）、媒体生成（图片 + 视频 + HyperFrames）、MCP 服务器集成（Claude Code / Cursor / VS Code）、Critique Theater 设计评审、手动编辑模式、Cmd/Ctrl+P 快速文件切换、可调整大小的聊天面板、代理恢复机制、RTL/Bidi 工艺模块等。

正在做的有：评论模式精准编辑（部分已上线：预览元素评论 + 聊天附件，精准 patch 可靠性还在打磨）、AI 微调面板 UX、Vercel + Tunnel 部署方案、一键 npx od init 初始化。

计划中的：Skill 市场（od skills install <github-repo> 和 od skill add | list | remove | test CLI）。

最后说两句

玩了几天 Open Design 之后，我最大的感受是——它重新定义了 AI 设计工具该有的样子：

1. 不绑模型，你有什么 Agent 就用什么 Agent
2. Skill 就是文件夹，复制一个就能扩展能力
3. Design System 就是 Markdown，72 + 57 套规范是纯文本，Agent 能真正读懂并执行
4. 问题表单优先，6 层反 AI-Slop 机制确保产出不像 AI 做的
5. 本地优先，数据在你自己的机器上，不被锁定到任何云平台

31k Star 只是开始。这个项目正以几乎每天一个版本的速度迭代——光我写这篇文章的过程里，就从 v0.3.0 → v0.4.0 → v0.4.1 连跳了三个版本。我觉得我们正在见证一个重要的开源基础设施的诞生。

当然了，实际用下来也有一些不完美的地方——v0.4.0 桌面版启动崩溃这个坑我前面讲过（好在 v0.4.1 已经修掉）；某些 Design System 的生成效果还不太稳定，同样的 Prompt 换个方向差异能很大；某些 Agent 的日志解析偶尔会漏几帧事件。但总体来说，已经是一个能真正用在项目里的工具了。

如果你正在用 Claude Design 但想要更多控制权，或者想在开放平台上做 AI 辅助设计，我建议你试试 Open Design。

项目地址：github.com/nexu-io/open-design 官网：open-design.ai 许可证：Apache-2.0 当前版本：v0.4.1