案例 Open Design：31个Skills+72套设计系统，Claude Design的开源替代品

2026-05-09 06:34:08 +0800 CST views 9

Open Design：31个Skills+72套设计系统，Claude Design的开源替代品

GitHub: https://github.com/nexu-io/open-design
Star: 31.5K
协议: Apache-2.0
官网: open-design.ai
发布平台: 程序员茄子（chenxutan.com）
标签: AI设计, Claude Design替代, 开源设计工具, 本地运行, 多模型, 设计系统

引言

今年 4 月，Anthropic 推出了 Claude Design——用自然语言生成设计稿，融资PPT、SaaS落地页、移动端原型，几秒钟就出来。

然后大家发现：

要钱 💰
绑定 Anthropic 账号 🔒
数据走云端 ☁️
模型锁死 Claude 🔐
没有开源 ❌
没有自部署 ❌

差不多同一时间，GitHub 上出现了 Open Design——Claude Design 的开源替代品，本地运行，自己带模型，Apache-2.0 协议。

一、项目定位

Open Design 本身不包含任何 AI 模型。它是一个设计工作流框架。

把电脑上已有的 AI 编码工具接进来，让它们按照预设的设计流程生成 UI、原型和设计稿。

一句话概括：

把 AI 编程助手改造成设计师的工具集。

二、支持的 CLI 工具（16种）

启动时自动扫描 PATH，发现哪个就用哪个：

序号	工具	说明
1	Claude Code	Anthropic 官方 CLI
2	Codex CLI	OpenAI CLI
3	Devin for Terminal	Devin 终端版
4	Cursor Agent	Cursor 编辑器 Agent
5	Gemini CLI	Google Gemini
6	OpenCode	开源编码工具
7	Qwen Code	通义千问 CLI
8	GitHub Copilot CLI	GitHub Copilot
9	Hermes	Agent 生态配置
10	Kimi CLI	Moonshot CLI
11	Pi	AI 助手
12	Kiro CLI	AI 编码工具
13	Kilo	AI 编码工具
14	Mistral Vibe CLI	Mistral CLI
15	DeepSeek TUI	DeepSeek 终端
16	更多...	持续扩展

BYOK 模式

没有 CLI？直接填 API Key：

接口	支持
Anthropic	✅
OpenAI	✅
Azure OpenAI	✅
Google Gemini	✅

三、使用体验

第一步：选技能 + 设计系统

打开界面，选择技能（Skill）和设计系统（Design System），输入需求。

第二步：问答表单

AI 不会直接开始画，先弹表单问问题：

目标受众是谁？
整体风格偏哪个方向？
有没有品牌色？
内容大概几页？

核心想法：先把问题问清楚，比直接乱猜一遍再反复改省事得多。

这来自「Junior Designer 模式」——出自开源项目 huashu-design。

第三步：选风格方向

风格	感觉
Editorial Monocle / FT	印刷杂志感，奶油色 + 暖锈红
Modern Minimal	干净克制，Linear / Vercel 那种
Tech Utility	信息密度高，等宽字体，Bloomberg 风
Brutalist	粗暴有力，大号字，硬边框
Soft Warm	低对比度，柔和，有点 Notion 感

第四步：AI 开始干活

Todo 卡片实时显示进度，类似 Claude Code 运行时。

第五步：预览和导出

沙盒 iframe 渲染，可交互，支持导出：

HTML ✅
PDF ✅
ZIP ✅

四、31 个 Skills

Prototype 模式（27个）

产出单页 HTML 设计稿：

Skill	说明
web-prototype	网站落地页、营销页
saas-landing	SaaS 产品官网，Hero / 功能 / 定价区块
dashboard	后台管理界面，侧边栏 + 数据图表
mobile-app	手机端应用截图，iPhone 15 Pro / Pixel 机框
mobile-onboarding	三屏引导流程，开屏 + 卖点 + 登录
gamified-app	游戏化应用，暗色主题，XP 条 + 任务列表
social-carousel	三张 1080×1080 社媒轮播图
magazine-poster	单页杂志风海报
email-marketing	HTML 邮件，兼容主流客户端
pm-spec	产品需求文档（PRD），目录 + 决策记录
eng-runbook	工程值班手册
finance-report	财务摘要报告
invoice	发票单据
kanban-board	看板快照
team-okrs	OKR 目标记录表

Deck 模式（4个）

产出横向翻页演示文稿：

Skill	说明
guizang-ppt	杂志风 PPT，WebGL 背景，单文件 HTML
simple-deck	极简翻页版
replit-deck	产品演示风格
weekly-update	周报 deck，进展 / 阻塞 / 下周计划

自定义 Skill

每个技能是一个文件夹，里面有 SKILL.md、模板文件和参考资料。按规范放进去，重启守护进程就能用。

五、72 套设计系统

设计系统 = 品牌 Markdown 文件，规定颜色、字体、间距、组件写法、品牌语气。

按分类

分类	品牌
AI / LLM	Claude、Mistral、Cohere、ElevenLabs、Ollama、X.AI
开发工具	Cursor、Vercel、Linear、Supabase、Framer、PostHog、Sentry、Warp
生产力	Notion、Figma、Miro、Airtable、Raycast
金融	Stripe、Coinbase、Revolut、Wise、Mastercard
电商 / 消费	Shopify、Airbnb、Nike、Starbucks
汽车	Tesla、BMW、Ferrari、Lamborghini
媒体	Spotify、The Verge、Meta、PlayStation

使用方式

选 Notion 设计系统 → AI 自动使用 Notion 的字体、间距、色系。

六、多模型支持

与 Claude Design 的本质区别

维度	Claude Design	Open Design
模型	只能用 Claude	16 种 CLI + 4 种 API
部署	云端	本地
数据	上传云端	本地存储
开源	❌	✅ Apache-2.0
自部署	❌	✅

七、图片和视频生成

内置三种媒体模型

类型	模型	适合做什么
图片	gpt-image-2（OpenAI / Azure）	海报、头像、信息图、社媒图
视频	Seedance 2.0（字节 Volcengine）	15秒电影感短视频
视频	HyperFrames（HeyGen OSS）	HTML 转 MP4，动态排版

提示词库

93 个现成 prompt：

43 个图片类
39 个 Seedance 视频类
11 个 HyperFrames 类

每个带缩略图预览，点一下就能填进对话框。

八、数据在本地

所有项目数据存在 .od/ 文件夹：

路径	内容
app.sqlite	项目列表、对话历史、消息记录
projects/<id>/	每个项目的工作目录
artifacts/	手动保存的渲染结果

关掉再开，项目还在，进度不丢。

九、MCP 服务器

内置 MCP 服务器，只读权限。

接进 Claude Code、Cursor、VS Code 后，另一个项目里的 AI 可以直接读取 Open Design 的设计文件。

用例：「按这套样式重构代码」——省去导出再上传的步骤。

十、如何跑起来

方式1：下载桌面版（最省事）

macOS（Apple Silicon）✅
Windows（x64）✅

下载直接用，不需要装 Node 或 pnpm。

方式2：从源码跑

环境要求：Node 24、pnpm 10.33.x

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web

常用命令

pnpm tools-dev status   # 查看运行状态
pnpm tools-dev logs     # 看日志
pnpm tools-dev stop     # 停止所有进程
pnpm tools-dev check    # 状态 + 日志 + 常见问题诊断

十一、总结

核心价值

价值	说明
开源免费	Apache-2.0 协议
本地运行	数据不上云
多模型	16 种 CLI + 4 种 API
31 个 Skills	覆盖常见设计场景
72 套设计系统	知名品牌风格一键复用
媒体生成	图片 + 视频一体化
MCP 集成	设计文件跨项目共享