开源仅 5 天，暴涨 18.2K 标星！超牛的 Claude Design 开源替代品来了
来源: 开源星探（微信公众号）
发布: 2026年5月4日
标签: AI设计, 开源, Claude, OpenDesign, 设计工具, 前端开发
引言
2026 年 4 月中旬，Anthropic 发布了 Claude Design，整个设计圈都炸开了锅。
只需一句话描述，就能直接交付可交互的 HTML 设计稿，无需 Figma，无需 Photoshop，甚至无需懂设计。这种「从文本到成品」的体验，让无数人看到了设计行业的未来。
但高兴没几天，现实就给了大家一记闷棍：Claude Design 仅对付费用户开放预览，且完全闭源，所有数据必须上传到 Anthropic 云端，不能换用其他模型，也无法自托管。
这哪里是工具，这分明是把创作者锁进了一个漂亮的笼子里。
但是开源社区永远不缺大牛，nexu.io 创始人 Tom Huang 在 GitHub 上开源了一个 Claude Design 平替项目：Open Design。
开源仅仅 5 天，已经斩获了 18.2K 标星！涨势喜人，被开发者称为 "Claude Design 的真正开源杀手——甚至更强"。
它没有选择从头训练一个 AI 模型，而是走了一条更聪明、更开放的道路：不创建新的 AI 代理，而是让你电脑上已有的编码代理（Claude Code、Codex、Cursor、Gemini 等）直接变身设计引擎。
项目简介
Open Design 是一个本地优先、可部署到 Vercel、每一层都 BYOK（自带密钥）的开源项目。
它的核心设计哲学非常简洁：我们不造 Agent，你的已经够好了。
它不是简单地把 Claude Design 的 Prompt 抄过来，而是完整复刻了 Claude Design 的核心体验，包括：
- 结构化的交互式提问流程
- 品牌级设计系统约束
- 实时 Todo 流 + 五维自省批判机制
- 沙盒预览 + 一键导出多种格式
- 真实的文件系统交互
当我们输入「帮我做一份杂志风的种子轮 pitch deck」，AI 不会立刻开始生成像素。相反，Open Design 会先弹出一个交互式问题表单，帮你明确需求细节；然后从 5 套精挑的视觉方向中推荐一个；接着在 UI 中显示一张活的 TodoWrite 计划卡片；同时在磁盘上构建出一个真实的项目目录，里面有 seed 模板、布局库、自检 checklist。
Agent 强制读取这些文件，对自己的输出跑一轮五维评审，几秒后吐出一个 <artifact>，渲染在沙盒 iframe 里。
这不是 "AI 试图做点设计"，这是一个被提示词栈训练得像高级设计师一样工作的 AI。
其次它的催生，是站在以下这四个开源项目的肩膀上：
效果展示
入口页
选 skill、选 design system、写一行需求。同一个表面服务原型、deck、移动端、dashboard、editorial 页面所有 mode。
初始化问题表单
模型动笔之前，OD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。
方向选择器
用户没有品牌上下文时，agent 自动跳第二个表单，5 套精选方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）一个 radio 选完，色板 + 字体栈直接锁定，没有 freestyle 空间。
实时 Todo 进度
Agent 的计划以活卡片形式流入 UI。in_progress → completed 实时切换。用户能在中途以极低成本介入纠偏。
沙盒预览
每个 <artifact> 都在干净的 srcdoc iframe 里渲染。可在文件工作区里就地编辑；可下载为 HTML / PDF / ZIP。
72 套 design system 库
每套产品系统都展示 4 色色卡。点进去看完整的 DESIGN.md、色板网格、live showcase。
Deck 模式
内置的 guizang-ppt-skill 原样接入。杂志版式、WebGL hero 背景、单文件 HTML 输出、可导 PDF。
移动端原型
像素级精确的 iPhone 15 Pro chrome（灵动岛、状态栏 SVG、Home Indicator）。多屏原型直接复用 /frames/ 共享资源，agent 永远不需要重新画一遍手机。
核心亮点
1、129 套品牌级设计系统
Open Design 内置了 129 套 Design Systems，包括：
- 2 套手写起手（Neutral Modern、Warm Editorial）
- 70 套从 awesome-design-md 导入的产品系统
- 57 套来自 awesome-design-skills 的设计技能
每一套都包含完整的设计规范：颜色、排版、间距、组件、动效。你可以一键套用 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小红书 等一线品牌的设计语言。
2、31 个可组合 Skills
Open Design 有 31 个内置 Skills，按用途分为三大类：
设计交付类（27 个 Prototype 模式）：
web-prototype- 单页 HTML 落地页saas-landing- SaaS 营销页面dashboard- 后台管理界面pricing-page- 定价页面docs-page- 三栏文档页blog-post- 长篇博客内容mobile-app- 移动 App 屏幕（带设备框）mobile-onboarding- 移动端引导流gamified-app- 游戏化移动应用email-marketing- 邮件营销模板social-carousel- 社媒轮播图magazine-poster- 杂志海报motion-frames- 动态帧设计sprite-animation- 像素动画dating-web- 约会类网站仪表盘digital-eguide- 数字指南wireframe-sketch- 手绘线框稿critique- 五维自评审tweaks- 微调面板pm-spec- PM 规范文档eng-runbook- 工程 Runbookfinance-report- 财务报表hr-onboarding- HR 入职计划invoice- 发票kanban-board- 看板team-okrs- OKR 评分卡
演示类（4 个 Deck 模式）：
guizang-ppt- 杂志风格 Web PPT（默认）simple-deck- 简洁横滑演示replit-deck- Replit 风格演示weekly-update- 周报演示
每个 Skill 都是一个独立文件夹，遵循 Claude Code 的 SKILL.md 规范，并叠加 Open Design 的 od: frontmatter，极易扩展。
3、11 种 CLI 代理支持
Open Design 支持 11 种 coding-agent CLI，会自动在你的 PATH 上检测：
- Claude Code
- Codex
- Cursor Agent
- Gemini CLI
- OpenCode
- Qwen
- GitHub Copilot CLI
- Hermes
- Kimi
- Pi
- Kiro
你可以一键切换使用哪个 agent 做设计引擎，不需要为 Open Design 单独付费。
如果你一个 CLI 都没装，也没关系，Open Design 还提供了 OpenAI 兼容的 BYOK 代理作为兜底，填入 baseUrl + apiKey + model，任意 vendor（Anthropic-via-OpenAI、DeepSeek、Groq、MiMo、OpenRouter、自托管 vLLM）都能用。
4、丰富的媒体生成
除了设计原型，Open Design 还支持生成图像、视频、音频，与设计循环并行可用：
- gpt-image-2（Azure / OpenAI）做海报、头像、信息图、城市插画地图
- Seedance 2.0（字节跳动）做 15 秒电影感 t2v + i2v
- HyperFrames 做 HTML→MP4 动态图形
内置 93 条 可一键复刻的 prompt gallery，43 条 gpt-image-2 + 39 条 Seedance + 11 条 HyperFrames，都附预览图与来源署名。
5、沙盒预览 + 多种导出
每个生成的 <artifact> 都在干净的 srcdoc iframe 里渲染，可以在文件工作区里就地编辑，也可以一键导出：
- HTML
- PPTX
- ZIP
- Markdown
快速上手（5 分钟）
环境要求
- Node.js: ~24
- pnpm: 10.33.x（推荐用 Corepack 自动管理）
- OS: macOS、Linux、WSL2（Windows 原生也能用，但 WSL2 更稳定）
- 可选：已安装的 coding-agent CLI（Claude Code、Codex 等）
安装步骤
# 1. 克隆项目
git clone https://github.com/nexu-io/open-design.git
cd open-design
# 2. 启用 Corepack 并安装依赖
corepack enable
pnpm install
# 3. 启动完整产品（daemon + web + desktop）
pnpm tools-dev
# 或者只启动 daemon + web
pnpm tools-dev run web
启动后访问终端打印的 Web URL 即可使用。
第一次使用
首次加载时，应用会自动检测你已安装的 code-agent CLI，默认选择 web-prototype skill + Neutral Modern design system。你只需要：
- 选择一个 Skill（比如
saas-landing或dashboard） - 选择一个 Design System（比如 Linear、Stripe 等）
- 写一行需求（比如 "帮我做一个 AI 写作助手的定价页面"）
- 点击 Send
Agent 就会开始工作，实时显示 Todo 进度，生成的 HTML 会在右侧沙盒中即时预览。完成后点击 "Save to disk" 可以保存到磁盘。
常用命令
# 启动完整产品（后台）
pnpm tools-dev
# 启动 daemon + web（前台）
pnpm tools-dev run web
# 查看状态
pnpm tools-dev status
# 查看日志
pnpm tools-dev logs
# 停止
pnpm tools-dev stop
# 重启
pnpm tools-dev restart
# 健康检查
pnpm tools-dev check
# 生产构建
pnpm build
项目优势在哪？
Open Design 的出现，意味着即使你不是专业设计师，也能用本地 Agent 快速产出高质量的网页、移动端原型和演示文档。它的价值在于：
1、完全开源，自托管
相比 Claude Design 的闭源云端方案，Open Design 可以完全本地运行，数据不离开你的机器。你可以部署到 Vercel，也可以完全离线使用。
2、复用你已有的 Agent
不需要额外付费订阅任何服务，直接用你已有的 Claude Code、Cursor Agent 等工具。你不需要学习新的 AI 工具，不需要支付新的订阅费。
3、品牌级设计系统
内置 129 套来自 Linear、Stripe、Vercel 等一线公司的设计系统，让你的原型看起来像真正的产品，而不是"草稿"。
4、真正的设计工作流
不是简单的 Prompt → 图片，而是有结构化的需求澄清、品牌系统约束、实时反馈、五维自审、沙盒编辑、多种导出格式的完整设计工作流。
5、设计师 + 开发者的桥梁
让设计师用自然语言描述需求，让 AI Agent 生成可交互的原型，而开发者可以直接导出代码继续完善。这可能是未来设计协作的新模式。
与 Claude Design 的对比
| 维度 | Claude Design | Open Design |
|---|---|---|
| 开源 | ❌ 闭源 | ✅ 完全开源 |
| 部署 | 仅云端 | 本地 + Vercel |
| 数据 | 必须上传云端 | 本地优先，BYOK |
| Agent 支持 | 专用模型 | 11 种 CLI 代理 |
| 设计系统 | 有限 | 129 套 |
| Skills 数量 | 有限 | 31 个可组合 |
| 导出格式 | 有限 | HTML/PDF/PPTX/ZIP/MD |
| 费用 | $20+/月 | 开源免费 |
适合谁用？
- 设计师：快速出高保真原型，无需 Figma
- 产品经理：一句话生成 dashboard/落地页/MRD
- 开发者：用自然语言做 UI，边做边改
- 创业者：快速验证产品 idea，用 PPT 模式做 pitch deck
- AI 开发者：集成到自己的 Agent 系统
未来展望
Open Design 刚刚开源 5 天就已经斩获 18.2K 星，展现出了极强的社区吸引力。随着更多开发者的参与，我们可以期待：
- 更多 Skills 的涌现
- 更丰富的 Design Systems
- 与更多 coding-agent 的深度集成
- 更好的代码导出质量
- 可能的 VS Code 插件、Figma 插件等
无论如何，Open Design 已经证明了一点：开源社区永远是最强的放大器。当一个好的 idea 遇到开源的力量，任何闭源产品都可以被颠覆。
Claude Design 锁住的设计未来，现在被 Open Design 免费开放给了所有人。
GitHub 地址: https://github.com/nexu-io/open-design
本文首发于「程序员茄子」博客，原文链接：https://chenxutan.com