13种Agent、129套设计系统：Open Design 开源项目完全指南
一个三天斩获 22,000+ Star 的开源设计工具，正在重新定义「AI 驱动设计」的工作方式。本文提供从环境搭建到进阶实战的完整教程。
一、故事的起点：Claude Design 爆火之后
2026 年 4 月 17 日，Anthropic 发布了 Claude Design------一个由 Opus 4.7 驱动的 AI 设计工具。它第一次让 LLM「不再只写文字，而是直接产出设计产物」。你只需要输入一句话，它就能生成完整的产品原型、演示文稿甚至交互页面。
Claude Design 迅速走红，但它有三个问题：
- 闭源：代码不公开，你无法知道内部如何运作
- 付费：需要 Claude 订阅，团队使用成本不低
- 锁定：只能用 Anthropic 的模型，无法切换
短短两周后，一个名为 Open Design 的开源项目在 GitHub 上线。
它在三天内收获了 22,000+ Star ，吸引了 25 位贡献者 提交了 39 个 PR。到 5 月 3 日，它已经迭代到 v0.3.0，支持 13 种编程 Agent 、31 个文件化 Skill 、129 套品牌级 Design System。
它的口号很简单：同样的体验，零锁定。
二、Open Design 是什么？
Open Design 是一个本地优先（local-first）的开源 AI 设计引擎。它本身不捆绑任何 AI 模型，而是自动检测你机器上已安装的编程 Agent CLI（如 Claude Code、Codex、Gemini CLI 等），将设计任务委托给它们执行。
核心架构只有三层：
scss
浏览器 (Next.js 16) → 本地守护进程 (Express + SQLite) → 派生 CLI Agent
↓
BYOK 代理 (SSE 标准化, SSRF防护)| 维度 | 说明 |
|---|---|
| 许可证 | Apache-2.0 |
| 前端 | Next.js 16 App Router + React 18 + TypeScript |
| 后端守护进程 | Node 24 + Express + SSE 流 + better-sqlite3 |
| 存储 | SQLite（.od/app.sqlite）+ 纯文件（.od/projects/<id>/） |
| Agent 传输 | child_process.spawn + 每种 CLI 的强类型事件解析器 |
| 预览 | 沙箱 iframe（srcdoc）+ 每种 Skill 的 <artifact> 解析器 |
| 导出格式 | HTML · PDF · PPTX · ZIP · Markdown |
一句话总结：它是一个运行在本地的 AI 设计调度中心。
三、快速上手：从零到第一个项目
3.1 环境准备
首先确保你的机器满足以下条件：
| 依赖 | 版本要求 | 说明 |
|---|---|---|
| Node.js | ~24 | 推荐使用 nvm 管理版本 |
| pnpm | 10.33.x | 通过 Corepack 启用 |
| Git | 任意版本 | 用于克隆仓库 |
| 至少一个 CLI Agent | Claude Code / Codex / Cursor / Gemini CLI | 必须出现在系统 PATH 上 |
3.2 安装与启动
bash
# 1. 克隆仓库
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 2. 启用 Corepack（确保 pnpm 版本一致）
corepack enable
corepack pnpm --version # 应输出 10.33.2
# 3. 安装依赖
pnpm install
# 4. 启动开发服务器
pnpm tools-dev run web
# 浏览器自动打开 http://localhost:3000启动过程中，守护进程会自动完成以下初始化：
- 扫描
PATH上所有已安装的 Agent CLI - 加载全部 31 个 Skill 和 129 套 Design System
- 创建
.od/运行时目录（包含 SQLite、项目文件、产物缓存）
3.3 验证安装是否成功
浏览器打开 http://localhost:3000，检查以下四个标志：
- Agent 选择器 --- 页面顶部显示识别到的 CLI 列表
- Skill 卡片 --- 左侧边栏展示 31 个 Skill 选项
- Design System 选项 --- 右侧边栏列出可用的设计系统
- 发现表单（Discovery Form） --- 中央区域显示需求收集表单
如果某个 CLI 未被识别，手动检查：
bash
which claude # Claude Code
which codex # Codex CLI
which cursor-agent # Cursor Agent
which gemini # Gemini CLI3.4 你的第一个原型
第 1 步 --- 选择 Skill 与 Design System：
在 Skill 侧边栏点击 web-prototype（最通用的入口 Skill），然后在 Design System 侧边栏选择 Default Neutral（新手推荐）。
第 2 步 --- 填写发现表单：
系统会弹出 5-8 个问题，例如：
"What is the product or page about?" → "A landing page for an AI-powered code review tool"
"Who is the target audience?" → "Software developers and engineering managers"
"What sections do you need?" → "Hero, Features, How it works, Pricing, CTA"
"Any brand color preferences?" → "Blue and dark gray, professional"
这一步是硬性要求 ------Open Design 不允许跳过需求收集直接生成。它防止了 80% 的返工。
第 3 步 --- 选择视觉方向：
从 5 种方向中选择一个。对于 SaaS 工具落地页，推荐 Modern Minimal（Linear/Vercel 风）。
第 4 步 --- 等待生成并查看结果：
你会看到 TodoWrite 计划流实时出现在 UI 中，Agent 按步骤执行。几十秒后，完整的 HTML 页面被渲染在沙箱 iframe 中。你可以直接在预览中点击元素发表评论，或导出为 HTML/ZIP。
3.5 Agent 的 API 配置（重要）
Open Design 本身不提供 AI 能力，它委托给你机器上的 CLI Agent。因此，确保 Agent CLI 已正确配置 API 访问是关键。
方式一：配置 Claude Code CLI（推荐）
如果你使用 Claude Code 作为 Agent，可以通过配置文件指定 API 代理：
bash
# 设置 API 地址（可直接使用 Anthropic 官方 API，或配置为代理地址）
claude config set api-url https://api.anthropic.com
# 设置 API Key
claude config set api-key sk-ant-your-api-key-here验证连接：
bash
claude --version
claude "你好" --max-tokens 100Open Design 在调用 Claude Code 时会自动继承这些配置，无需在 Open Design 内部重复设置。
方式二：通过环境变量配置（macOS/Linux）
bash
export ANTHROPIC_BASE_URL="https://api.anthropic.com"
export ANTHROPIC_API_KEY="sk-ant-your-api-key-here"
# 然后启动 Open Design
pnpm tools-dev run webWindows PowerShell：
powershell
$env:ANTHROPIC_BASE_URL = "https://api.anthropic.com"
$env:ANTHROPIC_API_KEY = "sk-ant-your-api-key-here"方式三：使用 BYOK 回退（无需本地 CLI）
在 Open Design Web UI 的 Settings 面板中直接填入：
yaml
baseUrl: https://api.anthropic.com # 或代理地址
apiKey: sk-ant-xxx # 你的 API Key
model: claude-sonnet-4-6 # 推荐使用 SonnetOpen Design 通过 /api/proxy/{anthropic,openai,azure,google}/stream 转发请求，内置 SSRF 防护。
验证 API 路由
创建一个测试项目（用 web-prototype Skill + 简单 Prompt），然后检查终端日志：
- 看到
Connecting to https://api.anthropic.com/v1/messages说明 API 连接正常 - 响应时间应在 5 秒以内
- 不应出现 429（限流）或 529（过载）错误
bash
# 确认环境变量已导出
echo $ANTHROPIC_BASE_URL四、核心功能深度解析
4.1 13 种编程 Agent，自动检测零配置
这是 Open Design 最核心的设计理念：Agent 不可知论 。Daemon 启动时自动扫描 PATH，用 which / command -v 检测所有已知 CLI，支持 nvm、fnm、mise 等版本管理器：
| Agent | 可执行文件 | 流格式 | 检测方式 |
|---|---|---|---|
| Claude Code | claude |
claude-stream-json |
PATH 扫描 |
| Codex CLI | codex |
json-event-stream |
PATH 扫描 |
| Gemini CLI | gemini |
json-event-stream |
PATH 扫描 |
| Cursor Agent | cursor-agent |
json-event-stream |
PATH 扫描 |
| GitHub Copilot | copilot |
copilot-stream-json |
PATH 扫描 |
| Devin for Terminal | devin |
acp-json-rpc |
PATH 扫描 |
| OpenCode | opencode |
json-event-stream |
PATH 扫描 |
| Qwen Code | qwen |
plain (raw stdout) |
PATH 扫描 |
| Hermes | hermes |
acp-json-rpc |
PATH 扫描 |
| Kimi CLI | kimi |
acp-json-rpc |
PATH 扫描 |
| Kiro CLI | kiro-cli |
acp-json-rpc |
PATH 扫描 |
| Mistral Vibe CLI | vibe-acp |
acp-json-rpc |
PATH 扫描 |
| Pi | pi |
pi-rpc (stdio JSON-RPC) |
PATH 扫描 |
检测到的 Agent 自动出现在 UI 选择器中，你只需在下拉菜单里切换。
4.2 31 个文件化 Skill：完整能力清单
每个 Skill 就是一个包含 SKILL.md + assets/ + references/ 的文件夹。添加新 Skill 只需复制文件夹并重启服务。以下是完整能力分类：
设计交付类（8 个）
| Skill | 用途 | 产出格式 |
|---|---|---|
web-prototype |
单页 HTML 落地页（最通用入口） | HTML |
saas-landing |
SaaS 产品营销页 | HTML |
dashboard |
管理后台/数据仪表盘 | HTML |
pricing-page |
定价页面 | HTML |
docs-page |
三栏技术文档页 | HTML |
blog-post |
长文博客内容 | HTML/Markdown |
mobile-app |
移动端 App 屏幕 | HTML + 设备框 |
mobile-onboarding |
移动端引导流程 | HTML + 多屏幕 |
演示文稿类（4 个）
| Skill | 用途 | 风格 |
|---|---|---|
guizang-ppt |
杂志风 Web PPT | 来自 @op7418，含演示模式 |
html-ppt |
HTML 幻灯片 | 来自 @lewislulu，15+ 示例卡片 |
simple-deck |
简洁横向幻灯片 | 快速出片 |
replit-deck |
Replit 风格演示 | 极简风 |
办公文档类（9 个）
| Skill | 用途 |
|---|---|
pm-spec |
PM 需求规格文档（PRD） |
meeting-notes |
会议纪要 |
weekly-update |
周报 |
eng-runbook |
工程运维手册 |
finance-report |
财务报表 |
hr-onboarding |
HR 入职文档 |
invoice |
发票/账单 |
kanban-board |
看板视图 |
team-okrs |
OKR 目标管理 |
营销与创意类（10 个）
| Skill | 用途 |
|---|---|
social-carousel |
社交媒体轮播图 |
email-marketing |
营销邮件 |
magazine-poster |
海报/印刷品 |
motion-frames |
动态帧动画 |
sprite-animation |
精灵动画 |
wireframe-sketch |
线框图草图 |
critique |
设计自评 |
tweaks |
精细化调整 |
dating-web |
约会/社交页面 |
digital-eguide |
数字手册 |
4.3 129 套 Design System：分行业选型指南
这是目前最丰富的开源设计系统集合 。所有系统都是纯文本 DESIGN.md 文件，Agent 可以直接阅读并理解设计意图。按实际使用场景分类：
AI & LLM 品牌
Claude、Cohere、Mistral、ElevenLabs、xAI、Ollama
风格特征：干净、技术感、低饱和度。适合 AI 产品、模型服务、API 平台。
开发者工具（推荐首选）
Cursor、Vercel、Linear、Framer、Supabase、MongoDB、PostHog、Sentry、Lovable、Resend、Cal
风格特征：深色主题、等宽字体、高对比度。适合开发者产品、SaaS 工具、技术文档站。
生产力工具
Notion、Figma、Miro、Airtable、Raycast
风格特征：友好、白色背景、圆角元素。适合协作工具、知识管理、B2B 产品。
金融科技
Stripe、Coinbase、Binance、Mastercard、Wise、Revolut
风格特征：信任导向、蓝色基调、专业严谨。适合支付、银行、加密货币产品。
电商与出行
Shopify、Airbnb、Uber、Nike、Starbucks
风格特征：视觉冲击力、强品牌色、大图展示。适合消费品牌、O2O 产品。
媒体与内容
Spotify、PlayStation、Wired、The Verge
风格特征：编辑感、大图排版、强对比。适合内容平台、媒体站点、播客。
汽车与高端品牌
Tesla、BMW、Ferrari、Lamborghini
风格特征：高级感、金属质感、大量留白。适合奢侈品牌、高端展示。
通用基础款
Default Neutral、Warm Editorial
新手推荐从 Default Neutral 开始，熟悉后逐步尝试其他系统。
每套系统使用标准的 9 段式 DESIGN.md 结构：
markdown
## Color → 主色、辅色、语义色（OKLch/HSL）
## Typography → 字体栈、字号层级、行高
## Spacing → 间距系统、网格
## Layout → 布局模式、断点
## Components → 组件规格、变体
## Motion → 动画曲线、时长
## Voice → 文案语调
## Brand → 品牌资产、Logo 使用规范
## Anti-patterns → 禁止使用的模式这意味着你可以在 Prompt 中说"用 Stripe 的风格做一个支付页面"，Agent 会真正读取 Stripe 的色彩、字体和间距规范来生成设计------不是大概像，而是遵循明确的设计规范。
4.4 5 种视觉方向：一键切换设计人格
在填写发现表单之后、生成代码之前，你会看到一个方向选择器。五个方向各有明确的 OKLch 调色板 + 字体组合：
| 方向 | 风格描述 | 调色特征 | 适用场景 |
|---|---|---|---|
| Editorial | Monocle/FT 杂志风 | 墨色 + 奶油色 + 暖铁锈 | 内容型产品、博客、出版物 |
| Modern Minimal | Linear/Vercel 极简风 | 冷色调、结构化、极简点缀 | SaaS、开发者工具（推荐） |
| Tech Utility | 终端美学 | 高密度信息、等宽字体 | 技术文档、CLI 工具页 |
| Brutalist | 粗野主义 | 超大字体、无阴影、硬朗 | 创意站点、艺术项目 |
| Soft Warm | 柔和温暖 | 低对比、宽间距、桃色中性 | 生活方式、健康类产品 |
实战建议 ：不要跳过这一步。同样的 Prompt 在不同方向下产出的结果差异巨大。如果不确定，先选 Modern Minimal，后续可以通过 tweaks Skill 调整。
4.5 反 AI 审美疲劳机制（6 层防护）
Open Design 继承了上游项目 huashu-design 的完整反 AI-Slop 体系，共 6 层：
- 强制发现表单：第一轮必须先收集需求，直接生成被硬性阻断
- 品牌资产五步协议：定位 → 下载品牌资产 → 提取色值 → 写入 brand-spec → 重述确认
- 五维自评门禁 ：生成
<artifact>前必须对 Philosophy、Hierarchy、Detail、Function、Innovation 逐项打分（1-5），任一不通过则阻断 - P0/P1/P2 检查清单：每个 Skill 内置必检项，P0 不通过不可发布
- 审美黑名单：硬编码禁止------激进紫色渐变、通用 emoji 图标、圆角左边框卡片、Inter 字体作展示字、手绘 SVG 人物、捏造的统计数据
- 诚实占位符 ：宁可用
---或标注灰色块，绝不伪造数据
这套机制确保最终产物「看起来不像 AI 做的」。
4.6 新手推荐学习路径
按照「上手难度 + 产出价值」排序，推荐以下学习顺序：
| 优先级 | Skill | 理由 |
|---|---|---|
| 1️⃣ | web-prototype |
最简单，单页 HTML，5 分钟就能跑通全流程 |
| 2️⃣ | saas-landing |
实用价值最高，产出可直接用于产品 |
| 3️⃣ | simple-deck |
PPT 替代，约 5 分钟产出一份演示文稿 |
| 4️⃣ | dashboard |
练习数据可视化布局 |
| 5️⃣ | mobile-app |
学习移动端布局和设备框适配 |
建议所有新手先用 Default Neutral 设计系统 + Modern Minimal 视觉方向跑通全流程，然后再探索其他组合。
五、实战场景全流程演练
以下是 5 个真实场景的完整操作指南，包含步骤、配置建议和 Token 消耗估算。
5.1 场景一：独立开发者做 SaaS 落地页
目标：3 小时内产出一个可交付的 SaaS 落地页。
操作步骤：
- 选择 Skill ：点击
saas-landing - 选择 Design System ：选
Linear或Vercel（开发者工具风格，和目标受众高度匹配） - 填写发现表单 ：详细输入产品定位------
- 产品名称和一句话描述
- 目标用户画像（如"技术团队负责人"）
- 核心价值主张（3-5 条）
- 是否需要 Pricing 区块（建议勾选）
- 品牌色偏好
- 选择视觉方向 ：
Modern Minimal - 等待生成：Agent 自动产出完整的 Hero → Features → Pricing → CTA 页面
- 审查与微调 ：在预览中点击需要调整的部分添加评论，切换
tweaksSkill 进行修改 - 导出交付 ：
Export as ZIP→ 部署到 Vercel
Token 消耗估算：
| 阶段 | 输入 Token | 输出 Token |
|---|---|---|
| 首次生成 | 30K-50K | 8K-15K |
| 每次微调迭代 | 15K-25K | 5K-10K |
| 5 次迭代总计 | ~250K | --- |
常用导出命令：
bash
# 导出为 ZIP（完整项目树）
# 在 UI 中点击 Export → ZIP
# 或导出为单文件 HTML
# Export → HTML (inline assets)5.2 场景二：产品经理生成 PRD 文档
目标：从需求描述生成结构化 PRD。
操作步骤：
- 选择 Skill ：
pm-spec（办公文档类） - 选择 Design System ：
Notion（文档风格最匹配） - 输入需求要点 ： "做一个用户反馈收集功能。用户可以提交文字反馈和截图。管理员可以在后台查看、分类、标记已处理。需要邮件通知。"
- 填写发现表单补充信息：目标用户、优先级、技术约束
- Agent 自动生成：完整 PRD 包含背景、目标、用户故事、验收标准、技术方案概要
- 导出为 Markdown ：
Export → Markdown
关键技巧：在发现表单中尽可能详细地描述约束条件（如"需要支持移动端""性能要求首屏<2秒"），Agent 会在 PRD 中体现这些约束。
5.3 场景三：技术博主生成封面图
目标：为博客文章生成风格统一的封面图。
操作步骤：
- 选择 Skill ：
magazine-poster - 选择 Design System ：
Wired或The Verge（编辑风格，适合文章封面） - 输入文章信息：标题、关键词、目标读者
- 选择视觉方向 ：
Editorial（杂志风）或Brutalist（吸睛） - 等待生成 ：Agent 调用
gpt-image-2生成海报 - 导出 ：
Export → PNG
可用的 Prompt 模板参考 （位于 prompt-templates/image/）：
bash
prompt-templates/image/
├── poster-zen-ai-art.md # AI 艺术风格海报
├── infographic-data-flow.md # 数据信息图
└── social-card-product-launch.md # 产品发布社交卡片5.4 场景四：一天验证移动端原型
目标：制作 5 屏移动 App 原型用于用户测试。
操作步骤：
- 选择 Skill ：
mobile-app - 设置设备框 ：选择
iPhone 15 Pro（位于 Device Frame 设置） - 选择 Design System ：
Spotify（音乐/内容类）或Airbnb（O2O 类） - 逐屏生成 ：
- Screen 1：Home（首页信息流）
- Screen 2：Listing（列表/搜索结果）
- Screen 3：Detail（商品/内容详情）
- Screen 4：Settings（设置页）
- Screen 5：Onboarding（引导流程）
- 导出 ：
Export → HTML或Export → ZIP
注意：每屏用独立的生成会话，便于独立调整。每个会话保持相同的 Design System 和视觉方向以维持一致性。
5.5 场景五：数据仪表盘设计
目标：从业务字段描述生成交互式仪表盘原型。
操作步骤：
- 选择 Skill ：
dashboard - 选择 Design System ：
Stripe或Vercel（数据可视化风格） - 输入数据字段 ： "需要展示 MRR、月活跃用户、客户流失率、功能使用排行。左上角放 KPI 总览卡片，中间放趋势折线图，右侧放排行列表。"
- 填写发现表单：指定图表类型偏好（折线图、柱状图、饼图等）
- 生成结果：完整的 Dashboard 包含侧边栏导航、KPI 卡片、图表区、数据表格
关键技巧：在发现表单中明确列出所有数据字段和期望的图表类型，Agent 会据此选择布局方案。
六、进阶技巧与优化
6.1 Token 消耗与成本优化
每个 Skill 的 Prompt Stack 约为 5K-10K Token （系统提示），加上 5K-15K 输出 Token。一次完整生成约消耗 20K-40K Token。
成本优化策略：
| 策略 | 说明 | 预期效果 |
|---|---|---|
| 优先使用 Sonnet | Claude Sonnet vs Opus，性价比高出 5 倍以上 | Token 费用降低 ~80% |
| 启用 Prompt Caching | Anthropic 原生缓存机制，对于重复的 System Prompt 只计 10% 费用 | 后续生成节省 ~30-50% |
| 减少无效迭代 | 用好发现表单，第一次就对准需求 | 减少 3-5 次无效生成 |
典型成本计算 （以 Claude Sonnet 4.5 为例， <math xmlns="http://www.w3.org/1998/Math/MathML"> 3 / 3/ </math>3/15 per MTok input/output）：
bash
一次完整生成：
Input: 40K tokens × $3/MTok = $0.12
Output: 12K tokens × $15/MTok = $0.18
合计：约 $0.30
5 次迭代（含缓存）：约 $1.00-1.506.2 自定义 Design System
创建自有品牌的设计系统非常简单------只需一个 DESIGN.md 文件：
bash
# 1. 创建设计系统目录
mkdir -p design-systems/my-brand
# 2. 编写 DESIGN.md
cat > design-systems/my-brand/DESIGN.md << 'EOF'
## Color
- Primary: #2563EB (Blue 600)
- Secondary: #7C3AED (Violet 600)
- Background: #F8FAFC
- Text: #0F172A
- Accent: #F59E0B (Amber 500)
## Typography
- Display: "Geist", sans-serif
- Body: "Inter", sans-serif
- Code: "JetBrains Mono", monospace
- Scale: 12/14/16/18/24/32/48
## Spacing
- Unit: 4px
- Section: 64px
- Component: 16px
## Layout
- Max Width: 1200px
- Columns: 12
- Gutter: 24px
## Components
- Button radius: 8px
- Card radius: 12px
- Shadow: 0 1px 3px rgba(0,0,0,0.1)
## Motion
- Duration: 200ms
- Easing: ease-out
## Voice
- Professional, concise, helpful
- No marketing fluff
## Brand
- Logo: /assets/logo.svg
- Favicon: /assets/favicon.ico
## Anti-patterns
- No gradients in buttons
- No rounded-full cards
- No emoji as icons
EOF
# 3. 重启守护进程
pnpm tools-dev stop
pnpm tools-dev start重启后，my-brand 会自动出现在 Design System 选择器中。Agent 会根据你定义的色彩、字体、间距规范来生成设计。
6.3 故障排查指南
问题 1：Agent 未被识别
bash
# 症状：UI 中 Agent 选择器为空
# 排查：
which claude # 检查 CLI 是否在 PATH 中
echo $PATH # 确认 PATH 包含相关目录
# 如果用的是 nvm：
nvm use 24
which claude # 应该指向 nvm 管理的版本
# 如果用的是 fnm：
fnm use 24问题 2：生成超时或无响应
bash
# 症状：Agent 启动后长时间无产出
# 排查：
# 1. 检查终端日志，看是否有网络错误
# 2. 验证 Agent CLI 可直接使用：
claude "test" --max-tokens 50
# 3. 检查 API 配置是否正确：
claude config list
# 确认 api-url 和 api-key 已设置问题 3：产物质量不达预期
markdown
症状：生成的页面存在布局问题或风格不符合预期
排查：
1. 检查发现表单是否详细填写（越模糊的输入，越差的结果）
2. 确认 Design System 选择是否正确
3. 运行 critique Skill 进行五维自评
4. 使用 tweaks Skill 进行针对性调整
5. 尝试切换到更适配的视觉方向问题 4：端口冲突
bash
# 症状：pnpm tools-dev run web 报端口被占用
lsof -i :3000 # 查看占用进程
kill -9 <PID> # 终止占用进程
# 或者设置环境变量指定其他端口
PORT=3001 pnpm tools-dev run web七、与 Claude Design / Open CoDesign 的全面对比
| 对比维度 | Claude Design | Open CoDesign | Open Design |
|---|---|---|---|
| 许可证 | 闭源 | MIT | Apache-2.0 |
| 形态 | Web | 桌面（Electron） | Web + 本地守护进程 |
| Vercel 可部署 | ❌ | ❌ | ✅ |
| Agent 运行时 | 捆绑（Opus 4.7） | 捆绑（pi-ai） | 委托给用户 CLI（13 种） |
| Skills | 专有 | 12 个 TS 模块 | 31 个文件化 SKILL.md |
| Design Systems | 专有 | 规划中 | 129 套 DESIGN.md |
| 供应商灵活性 | Anthropic 独占 | 7+ 供应商 | 13 CLI + BYOK 多供应商 |
| 问题表单（第 1 轮） | ❌ | ❌ | ✅（硬性规则） |
| 方向选择器 | ❌ | ❌ | ✅（5 种方向） |
| Claude Design ZIP 导入 | N/A | ❌ | ✅ |
| 五维自评 | ❌ | ❌ | ✅（生成前门禁） |
| Artifact Lint API | ❌ | ❌ | ✅ |
| Sidecar IPC | ❌ | ❌ | ✅ |
| 数据所有权 | Anthropic 云端 | 本地 | 本地（SQLite + 文件） |
Vercel 部署注意事项
.od/ 运行时目录需要持久化文件系统，而 Vercel 的 Serverless 架构不支持。推荐混合部署方案：
markdown
Web 层（Vercel）------ 处理 UI 和用户交互
↓
Daemon 层（自有服务器）------ 持久化存储 + Agent 调度
↓ Tunnel（Cloudflare Tunnel 等）八、未来路线图
已发布（v0.3.0）：
- ✅ 守护进程 + 13 CLI 适配器
- ✅ Web 应用（对话 + 发现表单 + 方向选择器 + 沙箱预览）
- ✅ 31 Skill + 129 Design System + 5 视觉方向
- ✅ SQLite 持久化 + BYOK 多供应商代理
- ✅ Claude Design ZIP 导入 + Sidecar 协议
- ✅ Artifact Lint API + 五维自评门禁
- ✅ 项目上传限制提升至 200MB
进行中：
- 🔄 评论模式精准编辑
- 🔄 AI 微调面板 UX
- 🔄 Vercel + Tunnel 部署方案
- 🔄 一键
npx od init初始化
计划中：
- 📋 Skill 市场（
od skills install <github-repo>） - 📋 Electron 桌面打包
九、总结
Open Design 重新定义了 AI 设计工具的规则：
- Agent 不可知：不绑定模型，用你已有的 CLI
- Skill 即文件：复制一个文件夹就能扩展能力，31 个 Skill 覆盖从原型到 PPT 的完整场景
- Design System 即 Markdown：129 套品牌设计规范是纯文本，Agent 真正读懂并执行
- 问题表单优先：6 层反 AI-Slop 机制确保产出不"像 AI 做的"
- 本地优先：数据在 SQLite + 纯文件中，不被锁定到任何云平台
如果你正在使用 Claude Design 但想要更多控制权，或者想在一个开放平台上做 AI 辅助设计，Open Design 是目前最好的选择。
22,000+ Star 只是开始。这个项目正以每天一个版本的速度迭代------我们正在见证一个重要的开源基础设施的诞生。
项目地址 ：github.com/nexu-io/ope... 官网 ：open-design.ai 许可证 ：Apache-2.0 当前版本：v0.3.0（2026-05-03）