开源仅 5 天，暴涨 18.2K 标星！超牛的 Claude Design 开源替代品来了！

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 实时切换。用户能在中途以极低成本介入纠偏。

沙盒预览 —— 每个 都在干净的 srcdoc iframe 里渲染。可在文件工作区里就地编辑；可下载为 HTML / PDF / ZIP。

72 套 design system 库 —— 每套产品系统都展示 4 色色卡。点进去看完整的 DESIGN.md、色板网格、live showcase

Deck 模式（guizang-ppt） —— 内置的 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 - 工程 Runbook
• • finance-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
• • PDF
• • 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。你只需要：

1. 1. 选择一个 Skill（比如 saas-landing 或 dashboard）
2. 2. 选择一个 Design System（比如 Linear、Stripe 等）
3. 3. 写一行需求（比如 "帮我做一个 AI 写作助手的定价页面"）
4. 4. 点击 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. 1. 完全开源：你可以看到工作流的每个细节，理解 AI 是如何思考的，也可以二次开发。
2. 2. 不锁定：换用任何模型都可以，不会被某家公司绑定。
3. 3. 本地优先：数据永远在你手里，不会上传到第三方云端。
4. 4. 零额外付费：你已经为 Claude Code 或其他 CLI 付费了，不需要再为 Open Design 付费。
5. 5. 极强的扩展性：添加新的 Skill 只需要一个文件夹，社区可以持续贡献。

对于独立开发者、产品经理、AI 爱好者、内容创作者来说，这都是一个极具生产力的新工具。

写在最后

当一个工具用 "便利" 把你圈入付费墙，再用 "封闭" 阻止你离开时，开源社区就会站出来。

Open Design 不是另一个 AI 玩具，它是对封闭生态的有力回应——设计应该是自由的，你的数据应该是你的，你的工具应该由你控制。

GitHub：https://github.com/nexu-io/open-design