Open Design：40K Star的开源设计神器，免费替代Claude Design，本地运行不依赖云端

4 月 17 号，Anthropic 推出了 Claude Design——只需一句需求描述，就能直接生成可交互的 HTML 设计稿。无需 Figma，不用 Photoshop，甚至不需要任何设计基础。

设计圈瞬间沸腾。

但热度过后，现实泼了一盆冷水：闭源、仅限付费用户、数据必须上传 Anthropic 云端、模型锁定为 Opus 4.7、不支持自托管、不能更换模型。

仅仅十一天之后，nexu.io 创始人 Tom Huang 在 GitHub 上发布了 Open Design。五天冲到 18K Stars，目前已经来到 40.8K Stars、4.6K Forks。采用 Apache-2.0 协议，完全免费。

Image

它没有重新造一个 Agent，而是巧妙地把你电脑上现有的编码 Agent，直接转化为设计引擎。

Open Design 是什么

Image

简单来说：给 Claude Code、Codex、Cursor、Gemini 这类 CLI 工具包上一层设计工作流，让它们像专业设计师一样输出网页原型、PPT、移动端界面和视觉物料。

Image

可以把它看作“Claude Design 的开源复刻”，但架构迥异。Claude Design 是一个封闭的 SaaS 产品，Open Design 则运行于本地，以 daemon + web 应用的形式，使用你自己的 API Key，驱动你自己的 Agent，数据始终不离开硬盘。

Image

技术栈基于 Next.js 16 + Express + SQLite，既可以部署到 Vercel，也能完全在本地运行。

怎么用

最直观的使用流程如下：

Image

在输入框里写下“帮我做一个 AI 写作助手的定价页”，Open Design 并不会立刻开始绘制。它会先弹出一个结构化问题表单，引导你确认目标平台、目标用户、调性和品牌上下文。花 30 秒勾选选项，远比后续 30 分钟的反复修改要划算得多。

如果没有品牌规范，它会紧接着给出一个方向选择器，从五套预设视觉风格中挑选一款——Editorial Monocle、Modern Minimal、Warm Soft、Tech Utility、Brutalist Experimental。选定后，色板和字体栈随之锁定，Agent 无法自由发挥，产出的质量更加可控。

接着 Agent 开始工作，界面上会实时显示 Todo 进度条，让你清楚它正在做什么。生成的 HTML 在右侧沙盒 iframe 中即时预览，支持就地编辑，也能直接导出为 HTML、PDF、PPTX、ZIP 格式。

工作流中一个相当可靠的设计是：Open Design 会在磁盘上构建真实的项目目录，内含 seed 模板、布局库和自检清单。Agent 必须读取这些文件后才开始动手，生成完成后还会自动执行一轮五维自评审（设计理念、视觉层级、细节精度、功能性、创新性），对输出进行质量兜底。

需要指出的是，Open Design 的输出水平高度依赖于你所用 Agent 和模型的能力。如果你连接的模型本身在设计感上有所欠缺，最终的产出也会受到限制。它提供的是工作流规范和设计系统约束，而非直接提升模型设计能力。这就好比给初级设计师一套完整的设计规范，他可以做出及格线以上的作品，但距离惊艳仍有差距。

支持哪些 Agent

Open Design 启动时会自动扫描系统 PATH 中的编码 Agent CLI，目前已支持 16 个：

Image

检测到哪个即可直接使用，并支持一键切换。

即使一个 CLI 都没装，也完全不影响使用。Open Design 内置了兼容 OpenAI 的 BYOK 代理，填入 baseUrl + apiKey + model 即可——Anthropic、DeepSeek、Groq、OpenRouter、自托管 vLLM，甚至 Ollama 本地模型都可以接入。

149 套品牌设计系统

Image

这个数字相当惊人。

Open Design 内置了 149 套 Design System，涵盖 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小红书等一线品牌的设计语言。每一套都包含完整的颜色、排版、间距、组件和动效规范。

Image

在入口页选好一套系统后，Agent 就会严格按照这套规范出图。不是“借鉴一下风格”，而是将色值、字重、间距、圆角这些参数全部按规范卡死。

31 个可组合 Skill

Skill 是 Open Design 的核心概念，你可以把它看作“设计任务的模板”。每个 Skill 预定义了输出格式、工作流路径和质量检查点。

Image

目前内置 31 个 Skill，分为两大模式：

Prototype 模式（27 个）：生成单页 HTML 类产出

  • • web-prototype：通用单页落地页
  • • saas-landing：SaaS 营销页
  • • dashboard：后台管理界面
  • • pricing-page：定价页
  • • mobile-app：带 iPhone 15 Pro 设备外框的移动端原型
  • • social-carousel：1080×1080 社媒轮播图
  • • magazine-poster：杂志风格海报
  • • wireframe-sketch：手绘线框稿
  • • critique：五维自评审打分表
  • • finance-report：财务报表
  • • pm-spec：产品需求文档
  • • ……等等

Deck 模式（4 个）：横向滑动展示类

  • • guizang-ppt：杂志风格 Web PPT（默认）
  • • simple-deck：简洁演示
  • • weekly-update：团队周报

想要添加新 Skill 也很简单，只需一个文件夹，遵循 Claude Code 的 SKILL.md 规范，重启 daemon 后就会出现在选择器里。

媒体生成能力

Image

除了设计原型，Open Design 还集成了图像和视频生成功能：

  • • gpt-image-2（Azure / OpenAI）：海报、头像、信息图
  • • Seedance 2.0（字节跳动）：15 秒电影感文字转视频、图片转视频
  • • HyperFrames：HTML 转 MP4 动态图形

Image

Image

Image

内置 93 条可直接使用的 prompt 模板，并配有预览缩略图。生成的图像和视频会以 .mp4 / .png 文件形式出现在项目工作区中。

快速上手

环境要求不高：Node.js ~24、pnpm 10.33.x，支持 macOS / Linux / WSL2。

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

启动后终端会打印出 Web URL，浏览器打开即可。首次加载时会自动检测已安装的 CLI，默认选择 web-prototype + Neutral Modern 设计系统。选一个 Skill，选一套设计系统，输入一句需求，点击 Send。

日常管理命令：

pnpm tools-dev status    # 查看状态
pnpm tools-dev logs      # 查看日志
pnpm tools-dev stop      # 停止
pnpm tools-dev restart   # 重启

还能导入 Claude Design 的项目

这项功能很实用。如果之前使用 Claude Design 做过项目，导出 ZIP 后直接拖入 Open Design 的欢迎对话框，项目会被解析为真实项目，你的 Agent 可以接手继续编辑。

Open Design 的定位非常清晰：它并不是要做一个“AI 设计工具”，而是将编码 Agent 的能力平滑延伸到设计领域。无需额外付费，不用把数据上传到第三方云端，也不必被绑定在某个特定模型上。不过目前项目迭代极快——716 个 commit、222 个分支、130 个活跃 PR，社区热度高企的同时，API 和功能仍在频繁变动，生产环境使用时需要多加留意。

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