2026 年 4 月中旬，Anthropic 发布了 Claude Design——只需一句话描述，就能直接交付可交互的 HTML 设计稿，无需 Figma、Photoshop，甚至无需懂设计。

这种「从文本到成品」的体验让设计圈为之震动。

但 Claude Design 仅对付费用户开放预览，完全闭源，所有数据必须上传到 Anthropic 云端，不能换用其他模型，也无法自托管。这实际上把创作者锁定在了一个封闭生态中。

开源社区很快给出了回应。nexu.io 创始人 Tom Huang 在 GitHub 上开源了 Open Design 项目——一个 Claude Design 的开源替代品。

开源仅 5 天，项目斩获 18.2K 标星，被开发者称为「Claude Design 的真正开源杀手——甚至更强」。

Open Design 没有选择从头训练 AI 模型，而是走了一条更聪明的路：不创建新的 AI 代理，而是让你电脑上已有的编码代理（Claude Code、Codex、Cursor、Gemini 等）直接变身设计引擎。

项目简介

Open Design 是一个本地优先、可部署到 Vercel、每一层都 BYOK（自带密钥）的开源项目。它的核心设计哲学非常简洁：「我们不造 Agent，你的已经够好了。」

它不是简单地把 Claude Design 的 Prompt 抄过来，而是完整复刻了 Claude Design 的核心体验：

• 结构化的交互式提问流程
• 品牌级设计系统约束
• 实时 Todo 流 + 五维自省批判机制
• 沙盒预览 + 一键导出多种格式
• 真实的文件系统交互

当输入「帮我做一份杂志风的种子轮 pitch deck」时，Open Design 不会立刻开始生成像素。它会先弹出一个交互式问题表单，帮你明确需求细节；然后从 5 套精挑的视觉方向中推荐一个；接着在 UI 中显示一张活的 TodoWrite 计划卡片；同时在磁盘上构建出一个真实的项目目录。Agent 强制读取这些文件，对自己的输出跑一轮五维评审，几秒后吐出 HTML 渲染在沙盒 iframe 里。

核心功能展示

入口页 —— 选择 skill、design system、写一行需求。支持 service prototype、deck、移动端、dashboard、editorial 等多种模式。

初始化问题表单 —— 模型动笔之前，先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项替代 30 分钟来回返工。

方向选择器 —— 用户没有品牌上下文时，agent 自动提供 5 套精选方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm），色板 + 字体栈直接锁定。

实时 todo 进度 —— Agent 的计划以活卡片形式流入 UI，in_progress → completed 实时切换，用户能在中途介入纠偏。

沙盒预览 —— 每个 HTML 都在干净的 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），多屏原型直接复用共享资源。

五大核心亮点

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、saas-landing、dashboard、pricing-page、docs-page、blog-post、mobile-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、eng-runbook、finance-report、hr-onboarding、invoice、kanban-board、team-okrs

演示类（4 个 Deck 模式）：guizang-ppt（杂志风格 Web PPT，默认）、simple-deck、replit-deck、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. 沙盒预览 + 多种导出

每个生成的 HTML 都在干净的 srcdoc iframe 里渲染，可以在文件工作区里就地编辑，也可以一键导出为 HTML、PDF、PPTX、ZIP、Markdown。

快速上手（5 分钟）

环境要求：

• Node.js: ~24
• pnpm: 10.33.x（推荐用 Corepack 自动管理）
• OS: macOS、Linux、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、一个 Design System、写一行需求，点击 Send，Agent 就会开始工作。

项目优势

Open Design 的价值在于：

苏米注：Open Design 的出现填补了 AI 设计工具领域的关键空白——它证明了开源社区可以在封闭产品发布后迅速提供更强、更灵活的替代方案。对于独立开发者、产品经理和 AI 爱好者来说，这是一个极具生产力的新工具。

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