Agent 小白智库 / Agent Skills 技能库 / Open Design 0.19 怎么用：桌面应用、MCP 与设计工作台教程 一句话结论 小白先用 Open Design 桌面应用；要在 Codex 里调用则接入 MCP。选好 Skill 和设计系统后，再让本地 Agent 生成可预览原型。
适用场景 想让 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 后由代理转成同一套聊天流 解决步骤 先决定你要做的设计类型：网页原型、SaaS 落地页、Dashboard、移动 App、社媒轮播、海报还是 PPT 普通用户先从官网安装 macOS / Windows 桌面应用；已经在用 Codex 的用户可从 Open Design 的 `Settings > MCP server` 复制配置片段 使用 Open Design CLI 时，Codex 的当前入口是 `od mcp install codex`；macOS 先用 `which -a od` 确认命中的不是系统自带 `/usr/bin/od` 安装或配置一个设计引擎：Claude Code、Codex、OpenCode、Cursor Agent 任意一个即可；Docker 与源码只留给自托管或参与开发的用户 打开 Open Design 后选 Skill，再选 Design System，例如 Neutral Modern、Linear、Stripe、Vercel、Apple 等 按它弹出的 discovery 表单补齐受众、语气、品牌、约束，让 Agent 先问清楚再生成 预览右侧 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 webpnpm tools-dev status
pnpm tools-dev logs
pnpm tools-dev check
pnpm tools-dev stop仍然不行怎么办 桌面应用或 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，再减少页面数量 如果设计质量不够，先补品牌素材、参考网站、禁用风格和验收标准，不要只说“高级一点” 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，并支持导出。 小白理解它的工作方式 Skill 决定这次要做什么类型的东西，例如 dashboard、mobile-app、social-carousel。 Design System 决定视觉语言，例如 Linear 的克制、Stripe 的商业感、Apple 的留白。 Discovery 表单先问清受众、语气、内容规模和限制，减少 Agent 自由发挥。 桌面应用、MCP server 或本地 daemon 协调 Claude Code / Codex / OpenCode 等引擎，让它在你授权的项目目录里写文件。 生成结果会作为 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 个点。小白第一次试跑路线 先用桌面应用，或把 MCP 接到已安装的 Codex；不要从 Docker 和源码构建起步。 先选 web-prototype 或 saas-landing，不要一上来做复杂多页应用。 只给 3-5 个模块，例如 Hero、功能、流程、案例、CTA。 第一版只看结构和风格，不要纠结每个字。 第二轮再让 Agent 做视觉细节：字号、间距、按钮、移动端适配。 最终导出 HTML 或 ZIP，作为客户预览 Demo 或交给开发继续实现。 注意事项 这是设计原型工具，不等于完整生产系统；上线前仍要做代码审查、性能、安全和兼容性测试。 连接本地 CLI 时，Agent 能读写项目文件；只在可信目录里运行，不要把私密资料全塞进去。 BYOK API Key 不要写进公开截图、仓库或示例链接。 仓库迭代很快，README 里 skills / design systems 数量可能会变，实际以 GitHub 最新说明和 release 为准。
还卡着？
仅把删除凭证、客户数据和环境变量值后的必要截图、日志片段、需求说明或当前页面链接发到 zhemuy@gmail.com。