我用了一周 Open Design，说说它到底能做啥

最近在 GitHub 上老看到这个项目。

打开 Trending，有它。翻收藏夹，有它。连群里都有人在问”这个 Open Design 到底能不能用”。

我翻了一下自己的收藏记录——今年 5 月我写过一篇 AI 设计工具的合集文章，当时顺手收藏了它，才 24.6k 星。再打开一看，85k+ 了。三个月翻了三倍多，394 位贡献者，447 个插件。

我本来对这玩意儿挺怀疑的——又一个 AI 设计工具，估计又是花架子。但看了一下它的定位，我来了兴趣：

一个开源的 Claude Design 替代方案，用自然语言生成可运行的设计稿，而不是截图。

用嘴出图？而且直接出代码？这跟我理解的”设计”不太一样。

于是我花了一周，下载、安装、一个个功能测过来。这篇就是我的真实体验。

---

Open Design 到底是什么？

一句话说清楚：一个把编码代理当作设计引擎的开源设计工作空间。

你不需要打开 Figma 画矩形、调颜色、对齐图层。写一句话描述你想要什么，AI 帮你生成可以直接运行的 HTML 页面。

它的工作流程跟传统设计完全不同：

• 传统设计：打开设计软件 -> 拖拽组件 -> 调整样式 -> 导出设计稿 -> 交付给开发 -> 开发翻译成代码
• Open Design：写一段描述 -> AI 生成 -> 导出可运行代码

它不是”画图”，是”描述 - 生成 - 迭代”。

而且所有数据都跑在本地。你用自己的 API Key，调用自己的模型，生成的文件存在你自己的电脑上，不经过任何云服务。

---

我让它干了五件事

为了测试它到底几斤几两，我设定了五个场景，每个场景用一句话描述，看它怎么接招。

1. 网页原型生成

第一个测试最简单：“一个 SaaS 定价页面，三种套餐，支持年付/月付切换。”

等了大概 90 秒，它生成了一个完整的 HTML 文件。打开一看——三个卡片并排，价格、功能列表、CTA 按钮，还有一个年付/月付的切换开关。点击切换，价格真的会变。不是那种”看起来像”的 Demo，是能交互的代码。

最让我意外的是布局质量。栅格对齐、间距呼吸感、卡片阴影，这些东西如果是人工画，至少得调个半小时。它一次就出来了，而且审美在线。

适合快速出原型稿，给客户或者老板看，比 Axure 的线框图强很多。

2. 着陆页（Landing Page）

第二个测试更有挑战性：“一个 AI 写作工具的着陆页，要有英雄区、功能展示、客户评价、底部 CTA。”

这次等了大概两分钟。生成的结果是单页滚动式布局，英雄区有大标题和副标题，功能展示用了三列图标卡片，客户评价有头像和引用，底部是注册按钮。

作为着陆页，该有的结构都有了。但细节上能看出一些问题——客户评价区的头像用的是占位符，功能图标是 Emoji 而不是 SVG 图标，离”可以直接上线”还差一些打磨。

不过换个角度想，如果我把这个页面交给设计师，说”这是骨架，你来细化”，设计师的工作效率会高很多。它不是一个终点，但算是一个不错的起点。

适合做 MVP 和快速验证，不适合直接上线。

3. 仪表盘（Dashboard）

第三个测试我故意刁难它：“一个电商后台仪表盘，包含销售额折线图、订单柱状图、用户列表、实时数据卡片。”

这次等了差不多三分钟，因为它生成的内容确实复杂。打开后的页面长这样：

• 顶部：导航栏 + 搜索框
• 左边：侧边栏菜单
• 中间：四个数据卡片（总销售额、订单数、用户数、转化率）
• 下方：折线图和柱状图

重点是，图表是 Chart.js 渲染的，不是静态图片。鼠标悬停有 tooltip，折线有过渡动画。数据虽然是模拟的，但结构完整，把真实数据喂进去就能用。

对于需要快速搭建后台管理界面的团队来说，这个功能很实用。想象一下你写一个 API 接口文档，然后让 AI 一把生成对应的管理页面——省掉的不只是”设计时间”，而是整个”前端开发 + 设计对接”的时间。

适合需要快速出管理界面的后端或全栈开发者。

4. 幻灯片（Deck）

第四个测试：“生成一个关于 2026 年科技趋势的演示文稿，5 页。”

它内置了 15 种模板和 36 种主题，我选了一个偏科技感的深色主题。生成结果是一份 5 页的 HTML 幻灯片，有封面、目录、正文页、图表页、结尾页。

每页之间的过渡动画很流畅，排版也干净。可以导出为 PPTX，也可以在浏览器里直接演示。

但说实话，它不是 PowerPoint 那种”像素级精细”的幻灯片——PPT 的排版精细度需要人类手动调整，AI 生成的结果在复杂的版式上会显得有点”模板化”。

适合快速出汇报草稿，定好框架后再精修，最终版建议还是用 PPT 或 Keynote 过一遍。

5. HyperFrames 视频生成

这是 Open Design 最让我意外的功能。

它集成了 HeyGen 开源的 HyperFrames 视频框架——用代码生成动画视频，然后导出 MP4。

我测试了一个简单场景：“生成一个产品介绍动画，15 秒，展示产品从构思到上线的过程。”

它写了一段 HTML + CSS + GSAP 动画代码，然后通过无头 Chrome 渲染每一帧，最后用 FFmpeg 合成视频。整个过程大概 5 分钟，出来的是一段 15 秒的 MP4 动画，有文字渐入、图形变换、背景过渡。

这不是那种”AI 视频生成工具”做的魔幻风格视频，而是一种代码驱动的 Motion Graphics——像产品官网首页看到的精致动画，只不过现在你只需要写一段描述，剩下的交给 AI。

它还支持接入 Seedance 2.0、Veo 3、Sora 2 等视频生成模型，以及 Suno v5 和 Lyria 2 做音频。如果你要做产品演示视频、社交媒体短片，这个功能比从头学 After Effects 效率高得多。

想做产品动画但不会 AE？这个功能可能适合你。

---

对比分析：Open Design vs Figma vs Claude Design

vs Figma

Figma 是设计工具，Open Design 是设计引擎。这两个东西的定位完全不同。

Figma 的核心是让你”画”——拖拽组件、调整图层、精修像素。它给你的是控制力，你想要什么效果，就能做到什么效果。

Open Design 的核心是让你”说”——描述意图、生成结果、迭代修改。它给你的是效率，但代价是控制力的下降。

打个比方：Figma 是单反相机，你可以调光圈、快门、ISO，拍出想要的效果。Open Design 是手机拍照，傻瓜式操作，90% 的场景够用，但碰到极端场景你会发现它不够灵活。

所以不存在”替代”关系。如果你的工作流需要像素级控制，你离不开 Figma。但如果你只是需要快速出原型、做 MVP、给团队一个可交互的 demo，Open Design 的效率远超 Figma。

vs Claude Design

Claude Design 是 Anthropic 官方的设计工具，闭源、托管在云端。Open Design 是它的开源替代方案。

区别主要在三点：

数据隐私。 Claude Design 的数据在 Anthropic 的服务器上，对于很多企业来说这是个合规问题。Open Design 本地运行，数据完全自主可控。

模型选择。 Claude Design 只能用 Claude 的模型。Open Design 支持 25+ 编码代理，从 Claude Code 到 Cursor 到 Codex 到 Gemini，你随便换。而且它支持 BYOK（Bring Your Own Key），用你自己的 API Key 接入任何兼容 OpenAI 接口的模型。

成本。 Claude Design 是付费服务，Open Design 完全免费开源。你只需要支付 AI 模型的 API 费用——如果你用的是本地模型，连这个钱都省了。

vs Penpot

Penpot 是开源版 Figma——SVG 原生、支持协作、可以私有部署。但它本质上还是”画图”工具，只是画布从 Figma 的服务器移到了你自己的服务器。

Open Design 走的是另一条路——AI 原生、描述式生成。两者完全可以互补：Penpot 负责精细设计，Open Design 负责快速原型和代码生成。

---

设计系统 DESIGN.md：一个被低估的亮点

测试过程中，我发现 Open Design 有一个功能被很多人低估了——DESIGN.md 设计系统管理。

它允许你截取一个现有品牌的截图，AI 自动提取颜色、字体、间距、圆角等品牌规范，生成一个 DESIGN.md 文件。之后所有 AI 生成的设计，都会自动遵循这个品牌规范。

我测试了让它提取”善忘技术夹”公众号的配色风格，然后让它生成一个着陆页——结果生成的页面自动采用了我的配色方案，连字体都匹配了。

内置了 151 套设计系统，包括 Vercel、Linear、Stripe、Shopify、Airbnb、Notion 等知名品牌，以及 Claude、Cohere、Mistral 等 AI 公司的设计规范。如果你在做客户项目，直接套用对应的设计系统，品牌一致性就有了保障。

对于需要保持品牌一致性的团队来说，这个功能价值很大。你不需要在设计稿里反复检查”这个蓝色是不是我们品牌的蓝色”，AI 会自动帮你处理好。

---

安装与上手体验

说说我从下载到生成第一个设计稿的完整过程。

第一步：下载桌面应用

从 open-design.ai 或者 GitHub Releases 下载桌面版安装包。Windows 和 macOS 都有，下载后直接安装。我是 macOS 用户，安装过程大概 2 分钟。

第二步：配置编码代理

打开应用后，它会提示你配置一个编码代理。我装的是 Claude Code，直接在终端跑了一行：

od mcp install claude

它自动检测到我本地有 Claude Code，完成了配置。整个过程不到 30 秒。

第三步：配置 API Key

我用的是自己的 Claude API Key，在设置里填进去就行。如果你用的是 Cursor 或者 Codex，配置方式类似。

第四步：生成第一个设计稿

在输入框里写下”一个简约的个人主页，包含自我介绍、项目展示、联系方式”——等了大概一分钟，一个完整的 HTML 页面就出现在了预览区。

从下载到出第一个设计稿，我花了大概 10 分钟。

如果你不想装桌面应用，还有两种方式：

• 编码代理内安装：直接在终端跑 curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
• Docker 部署：从 deploy/ 目录跑 docker compose up -d，端口 7456

如果你是团队使用，Docker 部署方式更推荐，团队成员可以共用一套服务。

需要说明的是门槛问题。虽然官方说”零配置”，但我觉得对非技术用户来说，理解”编码代理”、“API Key”、“本地端口”这些概念还是需要一点学习成本的。如果你完全不懂命令行，建议让懂技术的朋友帮忙配置一次，后续使用就简单了。

---

适合谁用、不适合谁用

适合这些人

• 独立开发者 / 全栈工程师：需要快速出 MVP，不想在前端设计上花太多时间。Open Design 可以让你一个人搞定从设计到开发的全流程。
• 产品经理：写完了 PRD，需要快速出可交互原型给团队看。不用再等设计师排期，自己动手 10 分钟搞定。
• 前端工程师：需要一个设计稿作为起点，然后在此基础上继续开发。Open Design 生成的代码质量不错，可以直接作为基础代码。
• 营销团队 / 内容创作者：快速生成着陆页、幻灯片、产品介绍视频，不需要每次都找设计团队。

不适合这些人

• 需要精细像素级控制的设计师：如果你习惯在 Figma 里精调每一个像素、每一个阴影角度、每一个过渡曲线，Open Design 的控制力满足不了你。
• 纯视觉设计（海报、插画、VI 系统）：Open Design 擅长的是界面设计，不是平面设计。如果你需要做的是品牌视觉系统、海报、插画，它不适合。
• 对 AI 生成质量要求极高的人：AI 生成的代码在复杂的交互逻辑上偶尔会翻车，需要人工修正。如果追求”一次生成，完美交付”，会有些失望。

我的建议

不要把 Open Design 当成”Figma 替代品”，而是把它当成一个效率工具来用。

它在”快速原型”和”代码生成”这两个场景下，效率远超传统工具。但在”精细设计”和”创意探索”上，它不如 Figma 灵活。在正确的时间用正确的工具，才是效率的最大化。

---

写在最后

一周用下来，我对 Open Design 的评价是：一个不完美但方向很明确的工具。

生成的代码有时候需要手动调整，复杂的交互逻辑偶尔会翻车，对非技术用户的门槛也客观存在。但它的核心思路——用自然语言描述设计，直接生成可运行代码——是对的。

85k 的 GitHub Stars、394 位贡献者、447 个插件，这些数字说明这个项目的社区活跃度确实很高。

如果你现在有一个场景让你头疼——比如”下周要给客户看原型但还没开始做”、“PRD 写完了但 UI 排期要两周”、“产品演示视频需要做但不会 AE”——挑一个你最头疼的场景，用 Open Design 试试。哪怕只是试一次，也值了。

你用过哪些 AI 设计工具？踩过什么坑，或者发现了什么宝藏？评论区聊聊，我每条都会看。

---

善忘是一种境界 | 学习 | 分享 | 创造美好生活