本地优先 · 完全开源 · Claude Design 的最佳替代方案

📌 **开源地址：**github.com/nexu-io/open-design（⭐ 40k+ Stars）

🌐 **官网：**open-design.ai

📥 **下载：**Releases 页面

📜 **许可证：**Apache 2.0

一、Open Design 是什么？

2026年4月，Anthropic 发布了 Claude Design（基于 Opus 4.7），展示了 LLM 从「写文字」到「出设计稿」的飞跃。它一度爆火——但始终闭源、付费、纯云端、绑定 Anthropic 模型，无法自部署、无法切换 Agent、无法定制。

**Open Design（OD）**就是开源界的回答：同样的设计循环，同样的 Artifacts-first 理念，零锁定。

它的核心思路是：不造 Agent，只做连接。你电脑上已经装好的编程 Agent（Claude Code、Codex、Gemini CLI 等），Open Design 会自动检测并将它们转化为设计引擎，配合 31 种可组合技能和 129 套品牌级设计系统，驱动整个设计流程。

💡 **一句话概括：**告诉 AI「帮我做一个 SaaS 落地页」，它会先弹出问卷锁定需求，再选出视觉方向，然后自动生成带交互效果的完整页面——整个过程 1-3 分钟。

二、核心能力详解

🤖 16 种 Agent 自动检测

Open Design 不绑定任何单一模型。它会自动扫描你 PATH 中已安装的 Agent CLI，一键切换：

  • Anthropic 系： Claude Code

  • OpenAI 系： Codex CLI

  • Google 系： Gemini CLI

  • Cursor 系： Cursor Agent

  • Devin： Devin for Terminal

  • 国产系： Qwen Code、Qoder CLI、Kimi CLI、DeepSeek TUI

  • 其他： OpenCode、GitHub Copilot CLI、Hermes、Pi、Kiro、Kilo、Mistral Vibe CLI

没有安装任何 CLI？Open Design 还提供了 BYOK（Bring Your Own Key）代理，支持 Anthropic / OpenAI / Azure / Google Gemini / Ollama / SenseAudio 等多种 API 接入，粘贴 baseUrl + apiKey 即可使用。

🎨 129 套品牌级设计系统

内置 129 套设计系统，涵盖全球顶级产品风格：

Linear · Stripe · Vercel · Airbnb · Tesla · Notion

Anthropic · Apple · Cursor · Supabase · Figma

小红书（Xiaohongshu）等本土化风格

2 套手写入门模板 + 70 套产品系统 + 57 套设计技能系统

一键切换设计风格，生成的设计稿自动匹配对应品牌调性。

🛠️ 31 种可组合技能（Skills）

技能分两大类，覆盖设计、营销、运营、工程、产品、财务、HR、销售、个人等 9 大场景：

原型类（27 种）：

web-prototype — 单页 HTML 原型

saas-landing — SaaS 营销落地页

dashboard — 后台管理界面

mobile-app — 移动 APP 屏幕

gamified-app — 游戏化应用

social-carousel — 社交轮播图

magazine-poster — 杂志海报

dating-web — 约会网站

sprite-animation — 精灵动画

motion-frames — 动效帧

wireframe-sketch — 线框草图

finance-report — 财务报告

hr-onboarding — HR 入职页面

kanban-board — 看板

team-okrs — 团队 OKR 页面

……等

演示文稿类（4 种）：

guizang-ppt — 杂志风格 PPT（WebGL 特效）

simple-deck — 简约演示文稿

replit-deck — Replit 风格演示

weekly-update — 周报演示

🎬 媒体生成能力

不仅是静态页面！Open Design 还支持图片、视频、音频的生成：

  • gpt-image-2 （Azure / OpenAI）— 海报、头像、信息图、插画地图

  • Seedance 2.0 （字节跳动）— 15 秒电影级文生视频和图生视频

  • HyperFrames （HeyGen）— HTML→MP4 动效视频（产品展示、动态排版、数据图表）

内置 93 个现成的 Prompt 模板（43 图片 + 39 视频 + 11 动效帧），带预览缩略图，开箱即用。

🎨 5 大视觉方向

每次生成前，AI 会让你从 5 个精心策展的视觉方向中选择：

  • Editorial Monocle  — 编辑杂志风

  • Modern Minimal  — 现代极简风

  • Warm Soft  — 温暖柔和风

  • Tech Utility  — 科技实用风

  • Brutalist Experimental  — 粗野实验风

每个方向自带确定性的 OKLch 色板和字体栈，确保输出一致且专业。

📐 设备框架 + Claude Design 导入

内置像素级精确的设备框架（iPhone 15 Pro、Pixel、iPad Pro、MacBook、Chrome），让设计稿看起来像真实产品截图。

还支持直接导入 Claude Design 的导出 ZIP，自动解析为可编辑项目——无缝迁移，之前的工作不白费。

💾 本地持久化

使用 SQLite 数据库（.od/app.sqlite）存储项目、对话、消息、标签页和模板。关掉明天再打开，所有进度和文件状态原封不动。

三、保姆级使用教程（10 步完成第一个设计）

步骤一：安装 Open Design

方式 A：桌面版（推荐非技术用户）

访问 open-design.ai 下载安装包

macOS：下载 .dmg → 拖入 Applications（首次运行在「隐私与安全性」中允许）

Windows：下载 .exe → 安装（SmartScreen 选「更多信息→运行」）

方式 B：源码部署（推荐开发者）

安装 Node.js 24.x 和 pnpm（corepack enable）

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

浏览器自动打开 http://localhost:7457

步骤二：配置 AI 引擎

方式 1：使用已安装的 Agent CLI（推荐 ✅）

如果已安装 Claude Code / Gemini CLI / Codex 等，Open Design 会自动检测，直接点击「开始使用」。免费且速度快。

方式 2：使用 API 密钥（备用）

输入 Anthropic / OpenAI / Gemini 等 API 密钥即可。密钥获取：console.anthropic.com/settings/keys

步骤三：选择设计技能

点击顶部「技能」下拉菜单，选择设计类型。

🎯 **新手推荐：**先选择 saas-landing（SaaS 落地页），最常用也最容易出效果。

步骤四：选择设计系统

点击「设计系统」下拉菜单，推荐新手先用 Neutral Modern。

步骤五：输入设计提示词

示例提示词：

帮我做一个 AI 写作工具的 SaaS 落地页，产品叫「智写AI」。 主要功能：AI 文章生成、多语言翻译、内容润色、SEO 优化。 目标用户：自媒体创作者、内容营销人员。 页面风格：简洁现代，主色调蓝色。 需要包含：导航栏、英雄区、功能介绍、用户评价、定价表、注册按钮。

步骤六：填写发现问卷

AI 自动弹出问卷，填写 5 个关键字段：表面类型、目标受众、品牌语气、品牌背景、设计规模。30 秒问卷，避免 30 分钟返工。

步骤七：选择视觉方向

AI 展示 5 个视觉方向（Editorial / Minimal / Warm / Tech / Brutalist），每个带色板和字体预览。选择最符合品牌调性的方向。

步骤八：等待生成（1-3 分钟）

实时任务进度：分析需求 → 制定设计计划 → 生成代码 → 五维度自我审查 → 自动优化。完成后预览区展示最终效果，可直接点击、滚动交互。

步骤九：修改和迭代

直接聊天告诉 AI 要改什么：「把主色调改成绿色」「在英雄区加一张图」——AI 自动更新，无需从头开始。

步骤十：导出设计

支持 5 种格式导出：HTML（浏览器直接打开）· PDF（打印归档）· PPTX（PowerPoint 编辑）· ZIP（打包文件）· Markdown（文档记录）

四、进阶技巧

  • 自定义设计系统： 在 design-systems/ 文件夹创建自己的设计系统，团队输出保持品牌一致性

  • 添加新技能： 在 skills/ 文件夹创建自定义技能，扩展能力边界

  • 部署到服务器：pnpm build && OD_HOST=0.0.0.0 pnpm tools-dev run --prod ，团队共用

  • 导入 Claude Design： 拖入 ZIP 自动解析，闭源到开源无缝迁移

五、Open Design vs Claude Design 对比

对比项

Open Design

Claude Design

开源

✅ Apache 2.0

❌ 闭源

价格

✅ 免费

❌ 付费

数据

✅ 100% 本地

☁️ 云端

模型支持

16 种 Agent + BYOK

仅 Anthropic

设计系统

129 套

有限

技能

31 种 + 可扩展

固定

自部署

✅ Vercel / 本地

❌

导出格式

HTML/PDF/PPTX/ZIP/MD

有限

六、技术架构

  • 本地守护进程（Daemon）： 唯一特权进程，管理 Agent 生命周期和文件系统访问

  • Web 应用层： 可部署到 Vercel，浏览器端设计界面

  • 桌面版（Electron）： 沙箱化渲染器 + Sidecar IPC

  • Agent 运行时： 项目文件夹中启动 CLI，拥有真实的 Read/Write/Bash/WebFetch 能力

  • SQLite 持久化： 全部数据本地存储

⚠️ 系统要求：

macOS：Apple Silicon（M1/M2/M3），macOS 11+

Windows：x64，Windows 10/11

Linux：AppImage 可用（稳定版尚未完全开放）

源码部署需要 Node.js 24.x + pnpm

总结

Open Design 证明了开源同样可以做出顶级的设计工具。16 种 Agent 支持、129 套设计系统、31 种技能、媒体生成能力——功能不仅不逊于 Claude Design，在开放性和可定制性上更是全面碾压。

更重要的是，你的数据永远留在自己电脑上。在这个 AI 工具都在抢数据的时代，这份坚持本身就值得尊重。

🔗 相关链接

GitHub 开源仓库 · 官网下载