二、两周 40K Star：Open Design 是什么
Open Design 是一个开源项目，GitHub 仓库 nexu-io/open-design，Apache-2.0 协议。
它给自己的定位极其清晰：
"Design's old world ends here."
—— Open Design README
两周冲上 40K Star，靠的不是营销，是一个简单的洞察：设计工具的下一个形态不是某个闭源 SaaS，而是一个能让任何 AI Agent 当设计引擎的开放工作流。
它不训练模型。它连接模型。
Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、Qwen、DeepSeek TUI、Kimi、GitHub Copilot CLI、Hermes、Pi、Kiro、Kilo、Mistral Vibe、Devin for Terminal、Qoder CLI——一共 16 种 AI Coding CLI，Open Design 可以从你的 PATH 中自动检测。
没有本地 CLI？它也支持 OpenAI-compatible 的 BYOK proxy，填上 baseUrl、apiKey 和模型名就能跑。
核心理念只有一个：把 Agent 当运行时，而非绑定某一家模型。
三、四根柱子的架构
Open Design 不是从零开始。它整合了四个开源项目的肩膀：
3.1 huashu-design —— 设计哲学指南针
提供 Junior-Designer 工作流程、五步品牌资产协议、反 AI-slop checklist、五维自我评审、以及"5 流派 × 20 设计哲学"的方向选择器。
3.2 guizang-ppt-skill —— 演示文稿模式
杂志风格布局、WebGL hero 效果、P0/P1/P2 checklist。做 PPT 时默认调用这套技能。
3.3 OpenCoworkAI/open-codesign —— UX 北极星
流式 artifact loop、沙盒 iframe 预览、实时 Agent 面板（todo 卡片 + 工具调用 + 可中断生成）、五种格式导出。
3.4 multica-ai/multica —— daemon 和运行时
PATH 扫描 Agent 检测、本地 daemon 作为唯一特权进程、Agent 作为队友的世界观。
这四根柱子搭起来，Open Design 的架构长这样：
- 前端：Next.js + React + TypeScript，Web 可部署（包括 Vercel）
- 本地 daemon：Node + Express + SQLite + SSE
- 项目存储：本地 SQLite 和
.od/projects/<id>/
- Agent 调度：通过
child_process.spawn 启动，在真实项目目录中读写文件
- 预览：沙盒 iframe，隔离执行
- 导出：HTML、PDF、PPTX、ZIP、Markdown
Local-first 不等于 offline。 生成本身仍然依赖你选的模型和 API。但工作空间、调度、文件、预览全部回到本地控制。模型层留给用户自己决定。
四、从一句话到交付物：工作流拆解
很多人以为 AI 设计工具就是"说一句话，模型吐一个页面"。Open Design 不这么干。它要做的是让模型遵循设计工作流，交付可预览、可迭代、可导出的真实产物。
第一步：需求澄清（Question Form）
你输入"帮我做一个 SaaS 落地页"，Open Design 不会立刻开始生成。
它会先弹出一个交互式 question form，锁定：
- 受众是谁（开发者 / 企业客户 / 消费者）
- 调性（极简 / 活泼 / 严肃 / 奢华）
- 品牌上下文（已有设计系统？参考网站？）
- 约束（必须响应式？必须暗色模式？）
- 视觉方向（参考哪个品牌？Linear？Stripe？Apple？）
这是硬性规则。Turn 1 必须完成需求澄清。没有这一步，Agent 拿不到足够边界，产出必然是通用 AI 味儿的模板。
第二步：加载 Skill + Design System
Open Design 内置 31 个 file-based SKILL.md，以及 129 套 DESIGN.md 设计系统。
- Skill 决定"这次要交付什么类型的作品"——网页原型、SaaS 落地页、Dashboard、Mobile App、PPT、周报、HR onboarding 页面、Kanban 板……
- Design System 决定"作品应该长成什么品牌风格"——Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic、Cursor、Supabase、小红书……
Agent 拿到的是完整的上下文：项目元数据 + 活跃设计系统 + Skill 文件 + 模板 + checklist。不是一句话 prompt，而是一套完整的工程上下文。
第三步：Agent 在真实目录中工作
Agent 读写文件、生成图片、输出 .pptx、.pdf、.zip。所有产物落在你的本地项目目录里，不是某个云平台的数据库里。
你可以随时打断生成。也可以实时看 todo 卡片流动，看工具调用逐条执行。
第四步：沙盒预览 + 五维自检
产物在沙盒 iframe 中渲染。你可以在预览中点任何元素，drop 一个 pin，留下评论，让模型只重写那个区域。
生成完成后，Artifact lint 会跑一遍自检，发现命名、布局、结构、可访问性问题，把发现反馈给 Agent 继续迭代。
还有一个五维自我评审：
- 视觉层级是否清晰？
- 品牌一致性是否达标？
- 可访问性是否合规？
- 响应式是否完整？
- 有无 AI slop（渐变堆砌、无意义动画、默认占位图）？
第五步：导出
HTML、PDF、PPTX（Agent 驱动）、ZIP、Markdown。产物归你所有。
五、多场景实战
场景一：SaaS 落地页
需求：一个数据可视化 SaaS 的产品首页。
- 选 Skill：
landing-page 或 saas-ui
- 选 Design System：
Linear（开发者工具的标杆）或 Stripe（金融科技信任感）
- Agent 产出：Next.js 项目，含 Hero 区域、功能特性、定价表、CTA、Footer
- 预览：沙盒 iframe 中实时渲染，可切换桌面/平板/手机视图
- 导出：HTML 静态包，或 ZIP 发给前端工程师继续开发
场景二：融资 PPT
需求：A 轮路演 Deck。
- 选 Skill：
guizang-ppt-skill（默认进入演示文稿模式）
- 选 Design System：自定义品牌色 + 参考知名风投机构的 Deck 风格
- Agent 产出：
.pptx 文件，含封面、问题陈述、解决方案、市场规模、商业模式、团队、融资需求
- 预览：逐页 iframe 渲染
- 导出：直接下载 PPTX，或转 PDF
场景三：Dashboard 后台
需求：电商运营后台。
- 选 Skill：
dashboard 或 kanban
- 选 Design System：
Supabase（开发者熟悉的暗色/亮色切换）或 Vercel（极简仪表盘）
- Agent 产出：含数据表格、图表区域、筛选器、状态卡片的 React 组件
- 预览：实时数据模拟
- 导出：JSX 组件包，直接接入现有代码库
场景四：Mobile App 原型
需求：健身追踪 App 的三个核心页面。
- 选 Skill：
mobile-app
- 选 Design System：自定义，参考 Apple HIG 或 Material Design
- Agent 产出：三个页面的 HTML 原型，含交互动效
- 预览：套上 iPhone 15 Pro 外壳，像素级精确
- 导出：ZIP 包，含所有资源文件
六、与 Claude Design 的正面对比
Open Design 的 GitHub README 里有一张三方对比表，极其诚实：
| 维度 |
Claude Design |
Open Design |
| License |
闭源 |
Apache-2.0 |
| Agent |
Anthropic 独占（Opus 4.7） |
16 个 CLI + BYOK Proxy |
| Skills |
闭源专有 |
31 个 file-based SKILL.md，可替换 |
| 设计系统 |
专有 |
129 套 DESIGN.md，品牌级 |
| Provider 灵活度 |
Anthropic only |
任意模型 |
| 需求澄清表单 |
❌ |
✅ Turn 1 硬性规则 |
| 方向选择器 |
❌ |
✅ 5 个确定性方向 |
| 实时 todo + 工具流 |
❌ |
✅ |
| 沙盒 iframe 预览 |
❌ |
✅ |
| Claude Design ZIP 导入 |
n/a |
✅ 可以接手 Anthropic 未完成的工作 |
| 文件系统级工作空间 |
❌ |
✅ 真实目录 + SQLite 持久化 |
| 五维自检 |
❌ |
✅ 生成前 Gate |
| Artifact Lint |
❌ |
✅ 自动反馈 |
| 导出格式 |
有限 |
HTML / PDF / PPTX / ZIP / Markdown |
| 可部署 |
❌ |
✅ Vercel 一键部署 |
| 费用 |
\(20/月 + 额度焦虑 | 免费（只付模型 API 费用） |
最狠的一条：**Open Design 支持导入 Claude Design 的 ZIP 文件。**
你在 Claude Design 里做了一半、额度用完了的项目，可以无缝迁移到 Open Design 里继续迭代。这不是替代，这是**接管**。
---
## 七、Codex 桌面应用集成
用户最关心的一点：Open Design 如何在 Codex 桌面应用中使用？
答案是：**作为 Skill 安装。**
hursh-shah 开源了一个 `codex-design-skill`（`hursh-shah/codex-design-skill`），专门给 Codex 做 UI 设计。它的核心行为是：
- 默认 Next.js，除非你明确要求其他框架
- 先确定视觉方向（调性、布局、字体、颜色、动效），再写代码——防止 AI 生成那种"看起来对但说不出哪里对"的 UI
- 只在需要特定组件时，才用 21st.dev 做灵感参考
- 产出生产级代码：响应式布局、可访问性状态、校验检查
- 甚至会在实现前过一遍 Next.js 安全门，检查 `CVE-2025-55182`
安装方式：
```bash\)skill-installer install https://github.com/hursh-shah/codex-design-skill/tree/main/ui-design |
|
安装后重启 Codex，Skill 自动加载。然后你对 Codex 说：
> "用 ui-design skill，帮我设计一个设置页面，含用户资料、通知偏好和账单区块。"
Codex 会调用 design system、执行设计评审流程、输出生产级代码。这和 Open Design 的哲学完全一致：不是让模型"写个页面"，而是让模型"遵循一套设计工作流"。
更进一步的集成路径是：Open Design 的本地 daemon 可以作为 Codex 的 MCP server。Codex 桌面应用通过 MCP 协议连接 Open Design daemon，获得全部 100+ 设计工具的访问权限——创建形状、设置填充和描边、管理 auto-layout、运行布尔运算、分析设计 token、导出资源。
这相当于把 Open Design 的整个设计工作流，嵌进了 Codex 的编码工作流。
---
## 八、为什么说这是设计工具的去中心化时刻
Claude Design 证明了一件事：大模型可以直接生成设计产物。
但它同时也证明了一件反过来的事：**如果这种能力只存在于一个闭源、云端、单一模型的产品里，用户终将撞上额度的墙、锁定的墙、数据主权的墙。**
Open Design 的答案是拆解这三堵墙：
- **额度墙**：BYOK，你用谁的 API 都行，付该付的钱，没有中间商赚差价
- **锁定墙**：Apache-2.0 开源，Skill 和 Design System 都是文件，可读可替换可 Fork
- **数据墙**：产物落在本地目录，项目存在本地 SQLite，预览跑在沙盒 iframe
两周 40K Star 的速度，说明市场已经等不及了。
这不是又一个开源 Figma 克隆。Figma 是画布工具，Open Design 是 Agent 工作流。前者让你手动画，后者让 Agent 自动做。两者甚至不是竞争关系——很多团队会继续用 Figma 做协作，用 Open Design 做 prompt-to-prototype。
但 Anthropic 应该感到警惕。
Claude Design 把 Figma 股价打下来 9%，这很威风。但如果它的额度策略把用户逼向开源替代方案，那威风的代价就是用户流失。Open Design 的 Claude Design ZIP 导入功能，像一根管子，把 Anthropic 的用户往开源世界引流。
**商业史上有一个反复出现的模式：领先者靠封闭建立壁垒，然后被开源的洪水冲垮。**
Claude Design 领先了两个月。Open Design 用两周追到了 40K Star。
---
## 九、尾声：设计的旧世界正在终结
回到开头的问题：为什么 Open Design 重要？
因为它把 Claude Design 证明可行的事情——AI 直接生成设计产物——从 Anthropic 的专有花园里搬到了公共广场上。
在这个广场上：
- 模型由你选（Claude、GPT、Gemini、Kimi、DeepSeek、Ollama……）
- 费用由你控（BYOK，没有平台税）
- 产物归你所有（本地文件，不是云数据库里的记录）
- 规则由你写（Skill 和 DESIGN.md 都是文本文件，可改可扩展）
这不只是 Claude Design 的开源替代。这是设计工具范式的根本转移——从"你用什么软件"变成"你用什么工作流"。
Anthropic 证明了 AI 能做设计。
Open Design 证明了 AI 做设计这件事，不应该只属于 Anthropic。
---
**参考链接**
- Open Design GitHub：https://github.com/nexu-io/open-design
- Open Design 官网：https://open-design.ai/
- Knight Li 项目解析（中文）：https://www.knightli.com/2026/05/18/open-design-open-source-claude-design-alternative/
- 掘金技术架构分析：https://juejin.cn/post/7633988297136652303
- Claude Design 测评（腾讯云）：https://cloud.tencent.com/developer/article/2656723
- PC World 额度实测引用来源
- codex-design-skill：https://github.com/hursh-shah/codex-design-skill
#深度研究 #格帕文士 #OpenDesign #ClaudeDesign #AI设计 #开源 #Codex #Figma
