Open Design 0.19 怎么用：桌面应用、MCP 与设计工作台教程

介绍 Open Design 的桌面应用与 MCP 首选路线、Codex 接入、安全边界和 0.17—0.19 新能力；Docker 与源码安装保留为高级路线。

内容更新 2026-08-13

先看结论

小白先用 Open Design 桌面应用；要在 Codex 里调用则接入 MCP。选好 Skill 和设计系统后，再让本地 Agent 生成可预览原型。

操作步骤

  1. 先决定你要做的设计类型：网页原型、SaaS 落地页、Dashboard、移动 App、社媒轮播、海报还是 PPT
  2. 普通用户先从官网安装 macOS / Windows 桌面应用；已经在用 Codex 的用户可从 Open Design 的 Settings > MCP server 复制配置片段
  3. 使用 Open Design CLI 时，Codex 的当前入口是 od mcp install codex；macOS 先用 which -a od 确认命中的不是系统自带 /usr/bin/od
  4. 安装或配置一个设计引擎：Claude Code、Codex、OpenCode、Cursor Agent 任意一个即可；Docker 与源码只留给自托管或参与开发的用户
  5. 打开 Open Design 后选 Skill，再选 Design System，例如 Neutral Modern、Linear、Stripe、Vercel、Apple 等
  6. 按它弹出的 discovery 表单补齐受众、语气、品牌、约束，让 Agent 先问清楚再生成
  7. 预览右侧 artifact，发现问题用“修改颜色 / 缩小标题 / 改成移动端三屏”这类具体反馈继续迭代

命令与示例

# Codex MCP 接入：先确认 od 是 Open Design CLI
which -a od
# macOS 如果只显示 /usr/bin/od，请不要执行下一行；改从 Open Design 的 Settings > MCP server 复制配置片段
od mcp install codex

# 先预览配置或需要移除时，以当前 CLI --help 为准
od mcp install codex --print
od mcp install codex --uninstall
# 高级路线：需要自托管时才用 Docker
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
openssl rand -hex 32
# 将上一步输出粘贴到 .env 的 OD_API_TOKEN= 后，再启动
docker compose up -d
# 浏览器打开 http://localhost:7456
# 高级路线：参与开发或改源码时才使用
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
corepack pnpm --version
pnpm install
pnpm tools-dev run web
pnpm tools-dev status
pnpm tools-dev logs
pnpm tools-dev check
pnpm tools-dev stop

2026 年 8 月版本变化

  • 0.17 加入 Codex 集成，可通过 od mcp install codex 接入；执行前先确认 CLI 路径，或者直接使用桌面应用 Settings 提供的 MCP server 配置片段。
  • 0.18 加入 Team Workspace，适合共享项目与设计资产；账号权限、成员边界和数据范围仍要按团队策略配置。
  • 0.19 可通过 Open Design Cloud 的订阅与受支持模型直接生成、编辑图片，并能在一次启动中向 Agent 传入多个 Skills；BYOK 是否支持对应媒体能力要按当前 provider 与模型核对，这也不等于自动完成生产级设计审核。

它能做什么

  • 网页和落地页：营销首页、SaaS Landing、产品介绍页、文档页。
  • 业务界面：Dashboard、后台管理、数据看板、CRM 或运营工具原型。
  • 移动端：iPhone / Pixel 风格的多屏 App 原型和 onboarding。
  • 内容物料：社媒轮播、海报、邮件模板、动效分镜、像素风解释页。
  • PPT / Deck：基于 guizang-ppt 等技能生成杂志感网页 PPT，并支持导出。

小白理解它的工作方式

  1. Skill 决定这次要做什么类型的东西，例如 dashboard、mobile-app、social-carousel。
  2. Design System 决定视觉语言，例如 Linear 的克制、Stripe 的商业感、Apple 的留白。
  3. Discovery 表单先问清受众、语气、内容规模和限制，减少 Agent 自由发挥。
  4. 桌面应用、MCP server 或本地 daemon 协调 Claude Code / Codex / OpenCode 等引擎，让它在你授权的项目目录里写文件。
  5. 生成结果会作为 artifact 放进预览窗口，可以继续改，也可以保存、导出 HTML / PDF / ZIP / PPTX。

Claude Code、Codex、OpenCode 怎么选

  • Claude Code：可做交互式设计迭代、多文件工程和长任务；先核对当前 CLI、插件与账号实际能力。
  • Codex：同样可做交互式修改、多文件工程和长任务；先核对当前 App、CLI、云端与 AGENTS.md 工作方式。
  • OpenCode：适合想用开源客户端和自定义 provider 的用户。
  • BYOK API 模式：适合没有安装 CLI，或者只想填 1A1API / OpenAI-compatible 接口试用的人。
  • 第一次试用不必纠结，能被 Open Design 检测到的 CLI 先用起来，再换模型对比。

第一条任务这样写

请用 Open Design 帮我做一个可预览原型。\n类型：{网页 / Dashboard / 移动端 / PPT / 海报}\n业务：{你的业务说明}\n目标用户：{谁会看}\n核心内容：{必须出现的模块，3-6 条}\n参考风格：{例如 Linear / Stripe / Apple / Notion / 小红书}\n不想要：{不要大渐变、不要营销废话、不要卡片堆太满}\n输出要求：先给我一个可点击/可预览版本，再列出还能继续优化的 5 个点。

小白第一次试跑路线

  1. 先用桌面应用，或把 MCP 接到已安装的 Codex；不要从 Docker 和源码构建起步。
  2. 先选 web-prototype 或 saas-landing，不要一上来做复杂多页应用。
  3. 只给 3-5 个模块，例如 Hero、功能、流程、案例、CTA。
  4. 第一版只看结构和风格，不要纠结每个字。
  5. 第二轮再让 Agent 做视觉细节：字号、间距、按钮、移动端适配。
  6. 最终导出 HTML 或 ZIP，作为客户预览 Demo 或交给开发继续实现。

注意事项

  • 这是设计原型工具，不等于完整生产系统；上线前仍要做代码审查、性能、安全和兼容性测试。
  • 连接本地 CLI 时，Agent 能读写项目文件；只在可信目录里运行，不要把私密资料全塞进去。
  • BYOK API Key 不要写进公开截图、仓库或示例链接。
  • 仓库迭代很快，README 里 skills / design systems 数量可能会变，实际以 GitHub 最新说明和 release 为准。

参考来源

适合谁看

  • 想让 Agent 帮你做落地页、SaaS 首页、仪表盘、移动端原型、海报或 PPT
  • 希望设计过程可本地运行、可换模型、可接自己的 API Key
  • 想给客户先出一个能打开预览的 Demo，再继续细化交付

需要解决的问题

  • 直接让 AI 生成网页，结果很像模板，风格和细节不稳定
  • 不会 Figma，但又想先做一个能给客户看的原型
  • Claude Code、Codex、OpenCode 都能写代码，却不知道怎么把它们变成设计工作流

先理解这些

  • Open Design 把设计任务拆成 Skill、设计系统、提问表单、方向选择、Todo 计划、预览 iframe 和导出文件
  • 它本身不绑定某一个模型，而是自动检测本机 PATH 里的 Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode 等 CLI
  • 如果没有本地 CLI，也可以走 BYOK API 模式，填写 baseUrl、apiKey、model 后由代理转成同一套聊天流

遇到困难时

  • 桌面应用或 MCP 接入失败时，先看 Open Design Settings 的状态和配置片段；只有走源码 / Docker 高级路线时才检查 Node、pnpm 与 Docker Desktop
  • macOS 输入 od 出现八进制转储帮助：你调用的是系统 /usr/bin/od，不要继续；从 Open Design Settings 复制 MCP 配置，或按当前官方安装说明安装并确认 CLI 路径
  • 如果检测不到 Claude Code / Codex，检查 CLI 是否在 PATH 里，尤其是 macOS GUI 启动时 PATH 可能和终端不同
  • 如果 Agent 生成很慢或失败，先换一个更简单的 Skill，例如 web-prototype，再减少页面数量
  • 如果设计质量不够，先补品牌素材、参考网站、禁用风格和验收标准，不要只说“高级一点”