👉 这是一个或许对你有用的社群

🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料： 

• 《项目实战（视频）》：从书中学，往事上“练”

• 《互联网高频面试题》：面朝简历学习，春暖花开

• 《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题

• 《精进 Java 学习指南》：系统学习，互联网主流技术栈

• 《必读 Java 源码专栏》：知其然，知其所以然

👉这是一个或许对你有用的开源项目

国产Star破10w的开源项目，前端包括管理后台、微信小程序，后端支持单体、微服务架构

RBAC权限、数据权限、SaaS多租户、商城、支付、工作流、大屏报表、ERP、CRM、AI大模型、IoT物联网等功能：

• 多模块：https://gitee.com/zhijiantianya/ruoyi-vue-pro

• 微服务：https://gitee.com/zhijiantianya/yudao-cloud

• 视频教程：https://doc.iocoder.cn

【国内首批】支持 JDK17/21+SpringBoot3、JDK8/11+Spring Boot2双版本 

• 反向定位：把 AI 设计工具的「钱袋」和「数据」还给你

• 横向对比：和 Claude Design / v0 / Lovable 9 维度硬刚

• 3 个研发场景：什么时候它顶用

• 4 个亮点功能

• 接入 5 步：装包 → 配模型 → 选模板 → 改细节 → 导出

• 12 个设计技能：你的系统该用哪个？

• 最后说一句

---

反向定位：把 AI 设计工具的「钱袋」和「数据」还给你

后端做 demo / 给运营出落地页这件事，最近一年彻底变了——从 Figma 拼图、找前端排期，变成了打开一个 AI 设计工具，丢一段提示词，几秒钟就出一个沙盒原型。

主流方案有 Claude Design、v0 by Vercel、Lovable、Bolt.new、Figma AI 等。能用是能用，但都有同样的两个限制：

• 订阅锁定 ：每月固定费用，或者按生成次数收费；

• 数据云端 ：你的 prompt、生成结果、用户数据全都过他们的服务器；

• 模型固定 ：只能用平台默认的 LLM，想换 GPT-4 / Gemini / Qwen 不行。

这次推荐的是一个完全反过来定位 的开源项目——把「钱袋」和「数据」还给用户：

Your prompts. Your model. Your laptop. — 提示词、模型、笔记本，全是你自己的。

先看它怎么生成 ——从一条空白提示词开始，Agent 自己规划、生成、检查，几秒钟交给你一个带 hover 状态、tabs、empty states 这些细节都到位 的完整结果：

它不是「另一个 AI 设计工具」——它是「不要订阅、不要云端、不要绑模型」的反潮流 ：

• 本地优先 ：桌面应用，prompt 和生成结果只在本机；

• Bring Your Own Key ：填你自己的 API Key（OpenAI / Anthropic / 智谱 / Ollama 都行），按你自己用量付费；

• 一键导入 Claude Code / Codex 配置 ：已经在用 CLI AI 工具的开发者零成本接入；

• 5 种导出格式 ：HTML / PDF / PPTX / ZIP / Markdown，下载即用。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：https://github.com/YunaiV/ruoyi-vue-pro

• 视频教程：https://doc.iocoder.cn/video/

横向对比：和 Claude Design / v0 / Lovable 9 维度硬刚

把它放到 SaaS 主流方案里面对面比——9 个维度一字排开：

	本工具	Claude Design	v0 by Vercel	Lovable
开源	✅ MIT	❌ 闭源	❌ 闭源	❌ 闭源
桌面原生	✅ Electron	❌ 仅 Web	❌ 仅 Web	❌ 仅 Web
支持自带 Key	✅ 任意提供商	❌ 仅 Anthropic	❌ 仅 Vercel	⚠️ 有限制
本地 / 离线	✅ 本地应用	❌ 云端	❌ 云端	❌ 云端
模型支持	✅ 20+（Claude / GPT / Gemini / Ollama…）	Claude only	GPT-4o	Multi-LLM
版本历史	✅ 本地 SQLite 快照	❌	❌	❌
数据隐私	✅ 状态全留本地	❌ 云端处理	❌ 云端	❌ 云端
可编辑导出	✅ HTML / PDF / PPTX / ZIP / Markdown	⚠️ 有限制	⚠️ 有限制	⚠️ 有限制
价格	✅ 应用免费，只付模型 token	💳 订阅制	💳 订阅制	💳 订阅制

9 项里它独占 6 项关键差异 ——开源、桌面原生、自带 Key、本地离线、版本历史、价格。剩下 3 项（模型支持、数据隐私、导出）也都吊打三家闭源 SaaS。

判断很简单 ：

• 公司数据敏感 （金融、政企、内部报表）→ 「数据隐私 + 本地离线」两项决定了只能选本地优先方案 ；

• 个人 / 小团队、本来就有 Claude Code / GPT 订阅 → 「自带 Key」一项就让你零成本复用，省一份订阅费 ；

• 想用国产模型（智谱 / 通义 / Kimi）省成本 → 「20+ 模型支持」是唯一答案，SaaS 都绑死单家；

• 团队协作 + 共享设计资产为主 → 仍建议 Figma + AI 插件，本地桌面工具不擅长协作。

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：https://github.com/YunaiV/yudao-cloud

• 视频教程：https://doc.iocoder.cn/video/

3 个研发场景：什么时候它顶用

场景 1：给运营 / PM 快速出落地页

「这个活动周一上线，给我个 demo 页」——以前要排前端 1-2 天，现在丢一段产品描述给 AI，5 秒出落地页 （效果就是开篇那个 GIF 演示的）。

痛点：找前端排期慢、改一版要重排。 收益：填 prompt → AI 出落地页 → 滑块微调 → 导出 HTML，活动页交付从 1-2 天压到 1 小时。

场景 2：管理后台 dashboard 原型

新需求要做一个数据看板，UI 给不上，自己粗排个版又难看——选「仪表板」技能模块 + 描述指标，AI 直接出 dashboard 原型。

收益：选「仪表板」技能模块 + 描述指标 → 出 dashboard 原型，UI 设计稿可省，前端按 HTML 直接还原。

场景 3：技术分享 PPT

要做一个 30 分钟分享，PPT 还没做？丢分享大纲给 AI，选「幻灯片演示」技能模块，导出 PPTX 即可。

用法：丢分享大纲 → 选「幻灯片演示」→ 导出 PPTX。 收益：从「写大纲到能讲」原本一晚上，现在两小时。

4 个亮点功能

亮点 1：不用重写整段提示词，点元素加批注就行

哪里要改，点一下那个元素、落一个批注 ，模型就只改这一块——不用把整段 prompt 拆了重写。SaaS 通常只能「重发一次完整 prompt」，等于每次小调整都要从头来。

亮点 2：AI 自动生成可调参数，拖滑块就改

模型生成时会把真正值得调的颜色、间距、字体等参数主动暴露出来 ——颜色不对？拖颜色滑块。字体过大？拖字号滑块。比写 Prompt 快 10 倍 ，不用为了换个色调跟模型聊半天。

亮点 3：每次迭代都会留下来，本地版本快照

设计结果保存在本地 SQLite ——最近几个版本之间可以即时切换、对比。不满意上一版？一键回滚。这是 SaaS 都做不到的版本管理 ——它们顶多给你「重新生成」按钮，没有「回到 3 个版本前」的能力。

亮点 4：看着 Agent 干活，全程可见可中断

Todo 清单 / 工具调用 / 实时进度 全部可见——Agent 正在读哪个文件、调了什么 API、当前在第几步全都看得见，而且随时可以打断 。SaaS 通常是黑盒，你不知道它正在干什么、Token 怎么用掉的；这个工具每一步都看得见——对企业用户来说，这是「可审计、可追责」的合规基线 。

接入 5 步：装包 → 配模型 → 选模板 → 改细节 → 导出

第 1 步：装包

到 GitHub Releases 下载对应平台安装包，按官方文档说明：

• Windows 11 x64 ：官方推荐用通用版 open-codesign-0.1.4-setup.exe（x64 版在部分环境下会闪退）；

• macOS Sequoia 15+ ：装完执行 xattr -cr "/Applications/Open CoDesign.app" 解除系统隔离标识，这是 macOS 对未签名 / 自分发应用的默认拦截。

第 2 步：配模型

打开后会自动识别本机已有的 Claude Code / Codex 配置：

最爽的设计 ——已有 CLI 配的开发者不用重新填 Key ，工具直接读 ~/.claude/ 就好。

第 3 步：选模板生成原型

15 个内置示例随便选一个——「落地页 / 仪表板 / 幻灯片」三类用得最多——选好后几秒钟出沙盒原型 ，浏览器实时预览。

第 4 步：增量丰富细节

直接告诉 AI：「落地页中每个超链接帮我生成对应的页面」。

Agent 面板会逐步显示生成进度 ——读到哪个超链接、生成什么页面、用了哪个技能模块全部可见，几秒后扩展页全部就位（页面导航、页脚、详情页一并补全）。

第 5 步：按需导出

右上角导出菜单 5 选一：HTML（前端直接发布）/ PDF（归档）/ PPTX（演示）/ ZIP（含资源打包）/ Markdown（写文档）。导出后文件保存在本地 Downloads 目录，不出本机 ——这是「本地优先」承诺的最后一公里。

12 个设计技能：你的系统该用哪个？

通用 AI 工具最大的痛是：生成的设计很容易"差不多就那样" ——配色塑料感、排版松散、留白随心情。本质原因是 LLM 没有「设计纪律」，只是把语言能力外推到 CSS。

Open CoDesign 解决这件事的方式是内置 12 个设计技能模块 ——幻灯片、仪表盘、落地页、SVG 图表、玻璃拟态、编辑风排版、Hero 区块、定价页、页脚、聊天界面、数据表格、日历——同时叠加一层内置设计约束 ，让模型在「自由生成 CSS」之前先按设计系统的规则推理。

按研发同学常做的系统类型 对照选：

技能	你做这类系统时选它
幻灯片演示	技术评审 / 架构方案讲解 / 项目立项 PPT
仪表板	内部监控页 / 数据中台首页 / 运维概览大屏
落地页	运营活动页 / 新功能官宣 / 注册引流页
定价页	SaaS 套餐对比 / 企业版报价页
聊天 UI	客服系统 / IM 应用 / AI Agent 对话界面
数据表格	后台管理列表 / 复杂报表 / 工单系统
日历	排程系统 / 会议室预订 / OA 日程视图
SVG 图表	监控大屏组件 / 数据可视化模块
英雄区	官网首页大图 / 产品介绍页头部
页脚	官网 footer / 后台 footer 模板化
玻璃拟态	高端品牌官网 / 现代化 UI 升级
编辑排版	技术博客 / 长文档页 / 知识库文章

这些技能怎么"自动参与"？ 每次生成时，模型先判断当前需求适合哪些技能（比如「会议室预订系统」自动召回「日历 + 数据表格」），然后围绕布局意图 / 设计系统一致性 / 对比度（WCAG 标准） 三个维度推理。

真正写 CSS 之前 ，这层推理就完成了。结果是：任意模型（GPT、Claude、Qwen、Ollama 都行）都能拿到「像样」的设计 ，模型水平差异不会直接传到设计稿里。

想教模型自己的风格？ 在项目里加一个 SKILL.md 文件——把团队的设计规范、品牌色、字体喜好写进去，模型生成时会自动遵循。比写一长串 Prompt 优雅得多 ，相当于给 AI 一份团队设计 Bible。

实操建议 ：拿不准选哪个？先「落地页 / 仪表板 / 幻灯片」三选一 ——这三类覆盖 80% 研发同学的需求，剩下的等遇到具体场景再去查。

最后说一句

AI 设计工具的演进不是「模型谁更强」——主流模型差距不大；真正的分水岭是「数据走向哪、钱袋归谁、模型谁选」 。这个工具的反向定位是把这三件事全部还给开发者 。好的开源工具不是功能比 SaaS 多，是把 SaaS 默认拿走的那部分主权还回来 。

仓库：github.com/OpenCoworkAI/open-codesign ｜ 官网：opencoworkai.github.io/open-codesign/

---

欢迎加入我的知识星球，全面提升技术能力。

👉 加入方式，“长按”或“扫描”下方二维码噢：

星球的内容包括：项目实战、面试招聘、源码解析、学习路线。

文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）