Open Design 项目解析：把 Claude Code、Codex 变成 AI 设计工具

Mon, 18 May 2026 18:57:16 +0800

Open Design 是 nexu-io 推出的开源 AI 设计项目，定位是 local-first、open-source 的 Claude Design / Figma 替代方案。

它想解决的问题很明确：Claude Design 证明了大模型可以直接生成设计制品，但这类能力如果只存在于闭源、云端、单一模型的产品里，用户就很难自托管、接入自己的 Agent、替换模型、沉淀私有设计系统，或者把产物放进本地工作流。

Open Design 的思路不是重新造一个大模型，而是把你电脑上已有的 coding-agent CLI 接进一个设计工作台。Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、Copilot CLI、Kimi、DeepSeek TUI 等工具，都可以成为它的“设计引擎”。

Open Design 是什么

Open Design 可以理解为三个部分的组合：

一个 Web UI，用来对话、预览、管理项目和导出产物。
一个本地 daemon，负责调度 Agent、管理文件、保存项目和提供 API。
一组 Skills、Design Systems 和模板，用来约束 Agent 生成更像设计作品，而不是随手拼出来的 AI 页面。

用户输入需求后，Open Design 不只是把一句话丢给模型。它会先让用户补充设计简报，选择场景和方向，再把项目元数据、当前设计系统、Skill 文件、模板、检查清单等上下文注入给 Agent。Agent 在真实文件夹里读写文件，最后生成可在沙盒 iframe 中预览的 artifact。

这让它更接近“AI 设计工作流”，而不是单次网页生成器。

为什么它和普通 AI 生成网页不一样

很多 AI 工具都能生成一个 HTML 页面，但 Open Design 的重点不是“让模型写页面”，而是“让模型按设计流程交付可预览、可导出、可迭代的制品”。

它强调几个设计：

先问问题，再生成。新设计 brief 会先出现交互式 question form，用来锁定受众、语气、品牌上下文、约束和视觉方向。
Skills 是文件，不是黑盒插件。每个 Skill 由 SKILL.md、assets/、references/ 组成，可以被阅读、替换和扩展。
Design Systems 是 Markdown，不是固定主题 JSON。颜色、字体、间距、组件、动效、品牌语气和反模式都可以写进 DESIGN.md。
Agent 在真实项目目录里工作。它能读模板、写文件、生成图片、输出 .pptx、.pdf、.zip 等文件。
产物在沙盒 iframe 中预览，减少直接执行不受控代码的风险。

这套结构的目标，是让 AI 更像一个有规范、有素材、有检查清单的设计协作者。

它支持哪些 Agent

Open Design 的一个亮点是“把 Agent 当运行时”，而不是绑定某一家模型。

README 中列出的支持对象包括 Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、Qoder CLI、GitHub Copilot CLI、Hermes、Kimi、Pi、Kiro、Kilo、Mistral Vibe、DeepSeek TUI 等。它会从 PATH 中自动检测这些 CLI，并允许用户切换。

如果本地没有合适的 CLI，也可以走 OpenAI-compatible 的 BYOK proxy，把自己的 baseUrl、apiKey 和模型填进去，让 daemon 把流式输出规范化成同一套聊天流。

这种设计的好处是：

不锁定单一模型。
可以复用用户已经安装和配置好的 Agent。
本地文件读写由 daemon 管理，权限边界更清晰。
对企业或重度用户来说，更容易接入自己的模型和 API 供应商。

Skills 和 Design Systems 是它的核心资产

Open Design 内置了大量 Skills 和 Design Systems。README 中提到，项目内置的 Skills 覆盖网页原型、SaaS landing page、dashboard、mobile app、gamified app、社交轮播图、杂志海报、PPT、周报、财务报告、HR onboarding、invoice、kanban、OKR 等场景。

Design Systems 则用于给 Agent 提供品牌级视觉约束。仓库介绍中列出了 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic、Cursor、Supabase、Figma、小红书等设计系统来源。

这两者的关系可以这样理解：

Skill 决定“这次要交付什么类型的作品”。
Design System 决定“作品应该长成什么品牌风格”。

如果没有这两层约束，AI 很容易生成那种看起来熟悉但缺少判断的通用页面。有了 Skill 和 Design System，模型至少有了清晰的任务边界、视觉参考和检查规则。

它能生成什么

Open Design 不是只做网页原型。

按 README 的描述，它覆盖 web、desktop、mobile prototypes、slides、images、videos、HyperFrames 等方向，并支持 HTML、PDF、PPTX、ZIP、Markdown 等导出形式。媒体生成方面，它把图片、视频、音频也放在同一个设计循环里，例如海报、头像、信息图、地图插画、短视频和 HTML 转 MP4 动效。

这意味着它的使用场景可以很宽：

创业团队快速做 pitch deck。
产品团队生成 landing page 或功能原型。
运营团队做活动页、社媒图、周报。
设计师用它做 moodboard、视觉方向和第一版 layout。
开发者把需求转成可运行的前端 artifact。

它的价值不只是“生成一个页面”，而是把多个内容形态放进同一套 Agent 工作流。

本地优先是什么意思

Open Design 强调 local-first。它不是把所有东西都交给一个远端 SaaS 后端，而是在本地跑 daemon 和项目工作区。

仓库 README 里描述的架构大致是：

前端是 Next.js / React / TypeScript。
本地 daemon 使用 Node、Express、SQLite 和 SSE。
项目、会话、消息、tab、模板等数据保存在本地 SQLite 和 .od/projects/<id>/ 目录。
Agent 通过 child_process.spawn 启动，并在项目 artifact 文件夹中读写。
预览通过沙盒 iframe 渲染。
导出包括 HTML、PDF、PPTX、ZIP、Markdown。

这种结构更适合希望把设计产物留在本机、接入本地 Agent、控制 API key、维护私有工作区的用户。

不过 local-first 不等于完全离线。实际生成仍然取决于你使用的 Agent 和模型。如果你用的是云端模型 API，内容仍然会发往对应供应商。Open Design 更准确的定位，是把工作区、调度、文件和预览放回本地，把模型层交给用户自己选择。

和 Claude Design / Figma 的关系

Open Design 在 README 中明确把自己称为 Claude Design / Figma 的开源替代方向，但它并不是传统意义上的 Figma 复刻。

Figma 是设计师手动编辑、协作和交付设计稿的专业工具；Open Design 更偏 Agent-native：用户通过自然语言、表单、Skills 和设计系统驱动 Agent 产出可运行 artifact。

它更像是把几个东西合在一起：

Claude Design 的 artifact-first 体验。
Figma 的设计系统意识。
Claude Code / Codex 这类 Agent 的文件读写和执行能力。
本地 daemon 的项目管理和沙盒预览。

所以它未必会替代专业设计师的全流程工具，但很适合做“从想法到可预览原型”的快速通道。

适合谁使用

Open Design 更适合这些人：

已经在使用 Claude Code、Codex、Cursor、Gemini CLI 等 Agent 的开发者。
想把 AI 设计产物放到本地项目目录里管理的人。
需要快速生成网页原型、PPT、海报、运营素材的创业团队。
希望自定义 Skills、Design Systems、提示词栈的高级用户。
不想被单一模型或单一云端产品锁住的团队。

不太适合这些人：

只想打开网页、输入一句话、立刻下载图片的轻量用户。
完全不想碰 Node、pnpm、daemon、CLI 和本地配置的人。
需要成熟多人协作、设计评审和矢量编辑能力的专业 Figma 流程。

换句话说，Open Design 更像给 Agent 用户和技术型设计团队准备的工具，而不是面向所有人的轻量设计 SaaS。

需要注意的地方

Open Design 的 README 标注了 0.8.0-preview，并说明项目仍在快速迭代。这类项目的活力很强，但也意味着 API、数据目录、桌面版迁移、Skills 结构和导出流程可能还会变化。

使用前最好注意几点：

不要把它当成稳定企业级设计平台。
先用测试项目体验工作流，再导入重要资料。
如果要迁移 .od/ 数据，先备份，确保 daemon 和桌面应用都已停止。
BYOK 时注意 API key、代理地址和本地私有网络访问风险。
生成的设计仍需要人工审查，尤其是品牌、版权、文案和视觉一致性。

开源项目最大的好处是可检查、可改、可贡献；代价是你需要接受一定的工程摩擦。

小结

Open Design 的看点，不只是“开源版 Claude Design”。它真正有意思的地方，是把 Agent CLI、Skills、Design Systems、本地 daemon 和沙盒预览组织成一个设计工作流。

它把设计生成从单次 prompt 推向了更结构化的流程：先问问题，选方向，加载设计系统，读取 Skill，写入真实文件，预览 artifact，再导出结果。

如果你已经习惯用 Claude Code、Codex 或 Cursor 处理代码，那么 Open Design 值得关注。它代表了一种新的产品形态：不是 AI 帮你画一张图，而是 AI 在本地项目空间里，按设计系统和任务技能，生成一组可以继续迭代的设计制品。

参考资料

nexu-io/open-design GitHub 仓库

AI设计 on KnightLi的博客