GitHub 飙至 18k Star：Open Design 本地优先开源设计平台，用代码代理驱动设计

Anthropic 在 4 月 17 日推出了 Claude Design，基于 Opus 4.7，主打“输入一句话，直接出设计成品”——不是草图，也不是线框图，而是能交付的 HTML 页面、PPT 和移动端原型。效果确实炸裂，瞬间出圈。

但 11 天后，nexu-io 团队就把它的开源替代品 Open Design 搬上了 GitHub，至今已狂揽近 18k Star。

开源项目简介

Open Design 是 Claude Design 的开源替代品。不过它不自带 AI 模型，核心思路是把你电脑上已经装好的 Coding Agent 变成设计引擎。

你输入一句需求，比如“帮我做一份杂志风的官网”，它先弹出一个简洁的表单来锁定需求——目标平台、受众、调性、品牌上下文等。然后 Agent 从 5 套视觉方向里选一个，拉出一份实时的 Todo 计划，并在你的电脑上创建真实的项目目录。接着，它读模板、写 CSS、生成 HTML，最后在沙盒 iframe 里渲染出来。整个过程，你随时可以介入纠偏。

输出不是截图，是完整的单文件 HTML，可直接导出为 HTML、PDF、PPTX、ZIP。

用户手中有什么 Agent 它就用什么 Agent：Claude Code、Codex、Cursor、OpenCode 等等，哪个在就用哪个。它内置了 19 个可组合 Skill 和 71 套品牌级 Design System，本质上可以看作把你手上最强的 Coding Agent 接入设计工作流的中间层。

开源地址：github.com/nexu-io/open-design

工作原理

Open Design 的架构分两层：浏览器里跑一个 Next.js Web 界面，你电脑本地跑一个 Node daemon 服务。

核心流程是这样的：

你输入需求后，daemon 把 SKILL.md 设计能力描述和 DESIGN.md 品牌风格规范拼装进提示词栈，然后通过 stdio 调用你机器上的 Coding Agent CLI 去执行。Agent 拿到的是真实文件系统权限，它真的在你的电脑上读模板文件、grep CSS 里的 hex 色值、写 brand-spec.md，再生成 HTML 和图片。这不是虚拟沙盒，也不是内存模拟。

Agent 跑完一轮，daemon 把产出的 HTML 塞进沙盒 iframe 供你实时预览。你可以在界面上直接编辑文件，也可以一键导出 HTML、PDF、PPTX、ZIP。

你有什么 Agent 它就用什么 Agent

Daemon 启动时自动扫 PATH，检测你装了哪些 CLI。不绑定任何一家模型，每一层都是 BYOK。

Claude Design 只能用 Opus 4.7，而 Open Design 直接调用你手上最强的那个 agent。

反 AI 味的提示词工程

这个项目在提示词层面花了不少心思，防止 AI 生成那种一眼假的设计。

开工之前，先弹一个初始化问题表单，让你选 surface、受众、调性、品牌上下文。30 秒勾选完，比来回改需求高效得多。输出之前还有一轮五维自评审——AI 自己给自己打分，低于 3 分的维度需要重做。

另外还有一份 slop 黑名单：暴力紫渐变、通用 emoji 图标、手绘 SVG 真人脸、Inter 当 display 字体……全部明令禁止。没有真实数据就写破折号，绝不编造数字。

71 套 Design System + 19 个 Skill 开箱即用

71 套品牌设计系统，Apple、Stripe、Vercel、Airbnb、Tesla、Notion、Cursor、Figma，从下拉框直接选，切换后下一次渲染就用新 token。

19 个 Skill 覆盖了网页原型、杂志风 PPT、Dashboard、移动端原型、定价页、邮件营销、社媒轮播图等场景。

怎么跑起来

三条命令：

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install && pnpm dev:all

最简单的办法是把 开源项目 直接丢给你的 Agent，让它自己装。跑起来后打开 localhost:3000，选一个 Skill、选一套 Design System、写需求，回车就行。

它会先弹问题表单让你锁定需求，然后 agent 开始干活，实时 todo 卡片流入 UI，最后在沙盒 iframe 里渲染成品。支持导出 HTML、PDF、PPTX、ZIP。

如果你平时对用 AI 做设计、产出可直接交付的页面感兴趣，把 Coding Agent 和设计工作流直接打通，这种本地优先、全链路解耦的思路或许能带来不一样的效率提升。在云栈社区也常有关于这类 Agent 编排与工具链整合的讨论，欢迎带着你的实践来一起聊聊。