👉 这是一个或许对你有用的社群
🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：
👉这是一个或许对你有用的开源项目
国产Star破10w的开源项目，前端包括管理后台、微信小程序，后端支持单体、微服务架构
RBAC权限、数据权限、SaaS多租户、商城、支付、审批工作流、大屏报表、ERP、CRM、WMS、MES、HRM、EAM、OA、FMS、PMS、AI大模型、AI工作流、AI Agent、IoT物联网、IM实时聊天等功能：
- 多模块：https://gitee.com/zhijiantianya/ruoyi-vue-pro
- 微服务：https://gitee.com/zhijiantianya/yudao-cloud
- 视频教程：https://doc.iocoder.cn
【国内首批】支持 JDK25 + SpringBoot4、JDK17/21+SpringBoot3、JDK8/11+Spring Boot2三版本 QUOTE
先把问题问清楚，再让 AI 按设计规范动手。
今年四月，Anthropic 把 Claude Design 推上了 X 的热搜。用自然语言生成设计稿，一份融资 PPT、一个 SaaS 落地页、一套移动端原型，几秒钟就出来了。
然后大家发现，这东西要钱，绑账号，数据走云端，模型锁死在 Claude，不开源，也没法自部署。
差不多同一时间，GitHub 上出现了一个叫 Open Design 的项目，nexu-io 团队做的。README 第一句话很直接，说这就是 Claude Design 的开源替代，本地运行，自己带模型，Apache-2.0。
— 官网首屏，The 1st Collaborative AI Design Agent Workspace
— 仓库首页实时截图，Star 与 Fork 计数同时可见
先把最容易误会的地方说清楚。Open Design 本身不包含任何 AI 模型 。
它是一个设计工作流框架，把你电脑上已有的 AI 编码工具接进来，让它们按预设的设计流程干活。你装了 Claude Code，它就用 Claude Code 当引擎。装了 Gemini CLI 或 Cursor Agent，一样。目前支持 16 种 CLI，启动时自动扫你的 PATH。
一个 CLI 都没有也行，走 BYOK 模式，填 API Key，支持 Anthropic、OpenAI、Azure OpenAI、Google Gemini 四个接口。
— 工作区入口，左边是项目，中间是输入框
所以一句话概括它，是一个把 AI 编程助手改造成设计师的工具集。
这个设计有代价。它不保证产出质量的下限，因为质量取决于你接进来的那个引擎和那个模型。同一个需求，你挂 Claude Code 和挂一个本地小模型，出来的东西差得远。它保证的是流程一致性，不是结果一致性。
ruoyi-vue-pro
基于 Spring Boot + MyBatis Plus + Vue & Element & Ant Design 实现的后台管理系统 + 用户小程序，RBAC权限、数据权限、SaaS多租户、商城、支付、审批工作流、大屏报表、ERP、CRM、WMS、MES、HRM、EAM、OA、FMS、PMS、AI大模型、AI工作流、AI Agent、IoT物联网、IM实时聊天等功能
项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/
打开界面先看到两个选择器，选技能和设计系统，然后输入你要什么。
比如输入「帮我做一个种子轮融资 PPT，杂志风格」。
这时候 AI 不会直接开始画。它会先弹一个表单，问你四件事，目标受众是谁、风格偏哪个方向、有没有品牌色、内容大概几页。
— 生成前先弹表单，把需求问清楚再动手
这个思路来自另一个开源项目 huashu-design 里的「Junior Designer 模式」。核心想法很朴素，先把问题问清楚，比直接乱猜一遍再反复改要省事得多。
为什么这一步值得单独做一个环节，我想了想，道理在于生成的成本和返工的成本不对等。一次生成的成品如果方向错了，你改的不是某一个色值，是整个版式重来。而问四个问题的成本只有几十秒。把不确定提前消化掉，后面每一轮迭代都建立在同一个前提上。
填完表单，如果没有品牌色，它会让你选一个视觉风格方向，一共五档。
选定之后，调色板和字体栈就绑死了，AI 不会自由发挥。
— 每种风格方向都绑定一套调色板与字体说明
然后它开始干活。界面上会冒出一张 Todo 卡片，实时显示进度，跟 Claude Code 跑起来那种感觉一样，一步一步打勾。
— Todo 卡片逐步打勾，进度看得见
生成完，结果在沙盒 iframe 里直接渲染出来，能交互，能下载成 HTML 或 PDF，也能打包成 ZIP。
— 沙盒 iframe 内的设计稿预览
它真正卖的不是生成能力。生成这件事随便哪个模型都能做，它卖的是那套「先把问题问清楚再动手」的工序。
yudao-cloud
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element & Ant Design 实现的后台管理系统 + 用户小程序，RBAC权限、数据权限、SaaS多租户、商城、支付、审批工作流、大屏报表、ERP、CRM、WMS、MES、HRM、EAM、OA、FMS、PMS、AI大模型、AI工作流、AI Agent、IoT物联网、IM聊天等功能
项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/
Prototype 模式 27 个，产出单页 HTML 设计稿。覆盖面挺宽，从网站落地页、SaaS 官网、后台管理界面，到手机端应用截图（带 iPhone 15 Pro 或 Pixel 机框）、三屏引导流程、游戏化应用、社媒轮播图、杂志海报、HTML 邮件，再到产品需求文档、工程值班手册、财务摘要、发票单据、看板快照、OKR 记录表。
Deck 模式 4 个，产出横向翻页的演示文稿。其中 guizang-ppt 是杂志风 PPT，WebGL 背景，单文件 HTML 导出，来自另一个开源项目 op7418/guizang-ppt-skill。
— guizang-ppt 生成的杂志风 PPT，单文件 HTML
— mobile-app 技能生成的移动端原型，三屏同框
每个技能就是一个文件夹，里面放 SKILL.md、模板文件和参考资料。想加新技能，按规范塞进去，重启守护进程就能用。
技术上说，每个技能是一份写给 agent 的说明书。SKILL.md 里写清楚这类产出该有哪些区块、用什么栅格、哪些地方不能省，模板文件给出骨架，参考资料补上行业惯例。agent 读完之后再动手，产出的东西就不会是一张白纸上的自由发挥。
设计系统是一套品牌 Markdown 文件，规定颜色、字体、间距、组件写法、品牌语气。每次生成前 AI 会把这份文件读进去，按规范写代码。
内置 72 套，覆盖的品牌你大概都认识。开发工具类的 Cursor、Vercel、Linear、Supabase，生产力类的 Notion、Figma、Miro、Raycast，金融类的 Stripe、Coinbase、Revolut，还有 AI 类的 Claude、Mistral、ElevenLabs，以及 Tesla、Nike、Spotify 这些消费品牌。
— 设计系统库，每套都标出四个品牌色
在库里每套显示四个品牌色，点进去能看完整的 DESIGN.md，配实时示例。想做一个 Notion 风格的产品主页，直接选 Notion 那套，字体间距色系它就知道了。
这套东西的本质是给 AI 的约束文件，不是素材库。素材是往里填，约束是往外限。
这个区别在实际使用中很明显。如果你只是给 AI 一句「做得像 Notion 一点」，它会去猜 Notion 是什么样，猜出来的往往是「浅色背景加圆角卡片」这种表面特征。而读了 DESIGN.md 之后，它知道的是具体的字号阶梯、行高比例、边框色值和语气用词。前者是印象，后者是规格。
72 套这个数量也有意思。它不是一个通用风格库，是一堆具体公司的具体做法，等于把别人已经调好的答案直接摊开给你抄。
Claude Design 只能用 Claude，没得选。Open Design 的守护进程启动时扫 PATH，自动识别你装了什么。
Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、GitHub Copilot CLI、Hermes，这些都在名单上。找到哪些就列进可选项，一键切换。免费用免费的，付费的用付费的，取决于你自己装了什么。
没有 CLI 也一样，填 API Key 走代理模式，支持标准 OpenAI 兼容接口。
这件事的意义不只是「多几个选择」。设计生成是个反复试的过程，同一个需求你可能要出五六个版本。能切模型意味着你可以用一个便宜的模型先跑草稿定方向，定下来之后再用强的模型精修细节。而在只能用一个模型的产品里，这个成本阶梯是不存在的。
除了 HTML 设计稿，聊天界面也能生成图片和视频，输出直接落到项目文件夹。
| |
| gpt-image-2（OpenAI / Azure） |
| Seedance 2.0（字节 Volcengine） |
| |
| |
|---|
| |
| |
| HTML 转 MP4，动态排版、数据图动画、Logo 结尾 |
项目里还附了 93 个现成提示词，43 个图片类、39 个视频类、11 个 HyperFrames 类。
app.sqlite 放项目列表、对话历史、消息记录。projects// 是每个项目的工作目录，也是 AI 读写文件的地方。artifacts/ 存手动保存的渲染结果。
关掉再开，项目还在，Todo 卡片还在，上次的进度也还在。
它还内置了一个只读 MCP 服务器。接进 Claude Code、Cursor、VS Code 之后，另一个项目里的 AI 能读到这边的产物。注意是只读，它的定位是让别人来读，不是让别人来改。
最省事是下桌面版。官网 open-design.ai 提供打包好的应用，macOS 是 Apple Silicon 版，Windows 是 x64 版，下载直接用，不用自己装运行时。
想从源码跑，环境要求是 Node 24 和 pnpm 10.33.x。
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm dev
跑起来之后终端会打印本地访问地址。第一次启动它会自动扫描你装了哪些 CLI，加载全部 31 个技能和 72 套设计系统，然后弹一个欢迎框。没有任何 CLI 的话，就在这一屏填 API Key。
pnpm tools-dev status
pnpm tools-dev logs
pnpm tools-dev stop
Open Design 做的事说简单也简单，把你已有的 AI 编码工具，接进一套精心设计的工作流里。
它没造模型，没造 agent，造的是中间那层工序。内置的提问环节、风格选择器、设计系统库和自检机制，才是它跟「直接让 AI 画个页面」的区别。
它也不是万能的。产出的东西是 HTML 原型，不是可以直接交付给开发的组件代码，中间还隔着一次工程化。设计系统覆盖的是风格，不是信息架构，页面该放什么内容还是得你自己想清楚。
项目还在快速更新，技能库和设计系统库都在扩。平时就用 Claude Code 或 Cursor 做开发的人，顺手让它把界面也做了，是挺自然的一件事。
GitHub 地址是 https://github.com/nexu-io/open-design。
欢迎加入我的知识星球，全面提升技术能力。
👉 加入方式，“长按”或“扫描”下方二维码噢：
星球的内容包括：项目实战、面试招聘、源码解析、学习路线。
文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）
