Open Design · Lesson 1 / 2

Open Design 基础

开源的 Claude Design 设计工作台

你学过了 Stitch（Google 的 AI 设计工具）。Open Design 是开源的 Claude Design 替代品——本地优先、模型无关、直接对接 Claude Code 等你已有的编码 Agent。它不内置 AI，而是让你已有的 Agent 来做设计。

Open Design 是什么？

Open Design（nexu-io/open-design）是一个本地优先的开源设计工作台，可以理解为"Claude Design 的开源替代"。但它和 Stitch/Claude Design 最大的区别是：它没有自己的 AI——它让你已有的编码 Agent（Claude Code、Codex、Cursor 等）来做设计。

💡 核心定位

Stitch / Claude Design：云端 AI 做设计 → 你下载代码

Open Design：你的本地 Agent 做设计 → 直接写进你的项目文件

一个是"AI 工具"，一个是"Agent 工作台"。

和 Stitch 的对比

维度	Stitch	Open Design
开源	❌ 闭源	✅ Apache-2.0
运行方式	云端 Web	本地桌面 App + CLI
AI 模型	Gemini（Google 限定）	任意模型（BYOK，用你自己的 Key）
和 Claude Code 的关系	通过 MCP 连接	原生集成，od mcp install claude
设计系统	你自己创建	151 个品牌设计系统内置（Stripe、Linear、Notion…）
Skills	stitch-skills（15 个）	100+ 功能 Skills 内置
输出	Figma / HTML / React	HTML / PDF / PPTX / MP4 / ZIP
隐私	Google 云端处理	本地运行，数据不出机器

安装

推荐：桌面 App（零配置）

# 从 open-design.ai 下载桌面版
# 安装后自动检测你装了的 CLI 工具
# 自动加载 100+ Skills、151 个设计系统

CLI 安装到 Claude Code：

# 一行命令安装
curl -fsSL https://open-design.ai/install.sh | sh -s claude

# 或者用 MCP 安装
od mcp install claude

项目要求：Node ~24、pnpm 10.33.x

核心能力

能力	说明
Agent 原生	没有内置 AI，用你已有的 CLI Agent
模型无关	BYOK 代理，支持 OpenAI/Anthropic/Google/Ollama 等任意端点
151 个设计系统	Stripe、Linear、Notion、Apple、Vercel、Shopify 等品牌开箱即用
100+ Skills	每个 skill 是一个 SKILL.md，遵循 Agent Skills 标准
277 个插件	场景、图片模板、视频模板、设计系统等
MCP 服务器	stdio MCP，让 Agent 读你的设计项目文件
输出格式	HTML / PDF / PPTX / MP4 / ZIP / Markdown
本地优先	桌面 App + SQLite，数据不出机器

设计工作流

1. 提需求（Brief）
   PM 或你提交一个设计需求
   ↓
2. 选插件（Plugin）
   Agent 推荐合适的插件（落地页、仪表盘、PPT 等）
   ↓
3. 定方向（Direction）
   从 5 个候选方向中选一个，或传截图/URL 提取设计系统
   ↓
4. 选品牌设计系统
   从 151 个中选，或用自己的 DESIGN.md
   ↓
5. 生成产物
   Agent 写出真正的 HTML/CSS 文件到你的项目目录
   ↓
6. 交接给开发
   产物直接丢进 Claude Code / Cursor 继续开发

内置 Skills（部分）

Skill	作用
create-design-system	从代码库提取设计系统
frontend-design	生成前端设计稿
wireframe	线框图
interactive-prototype	交互原型
make-a-deck	生成 PPT 风格展示
critique	五维自我评审
tweaks	AI 调参面板

动手练习

🎯 安装 Open Design

安装桌面 App
访问 open-design.ai 下载桌面版。
连接到 Claude Code
```
od mcp install claude
```
浏览内置设计系统
看看 151 个品牌设计系统中，有没有你常用的。

课后推荐阅读

GitHub 仓库 — 源码和文档
官网 — 下载桌面版
回顾 Stitch 基础 — 对比理解

下一课讲集成与指挥——MCP、Skills、设计系统、和 Claude Code 的深度配合。