总阅读量:次

⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/opencodesignkaiyuanban-Claude-Design--bendiyouxiande-AI-shejishenqi/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

反向定位：把 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，下载即用。

横向对比：和 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 插件，本地桌面工具不擅长协作。

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/

文章目录
  1. 1. 反向定位：把 AI 设计工具的「钱袋」和「数据」还给你
  2. 2. 横向对比：和 Claude Design / v0 / Lovable 9 维度硬刚
  3. 3. 3 个研发场景：什么时候它顶用
    1. 3.0.1. 场景 1：给运营 / PM 快速出落地页
    2. 3.0.2. 场景 2：管理后台 dashboard 原型
    3. 3.0.3. 场景 3：技术分享 PPT
  • 4. 4 个亮点功能
    1. 4.0.1. 亮点 1：不用重写整段提示词，点元素加批注就行
    2. 4.0.2. 亮点 2：AI 自动生成可调参数，拖滑块就改
    3. 4.0.3. 亮点 3：每次迭代都会留下来，本地版本快照
    4. 4.0.4. 亮点 4：看着 Agent 干活，全程可见可中断
  • 5. 接入 5 步：装包 → 配模型 → 选模板 → 改细节 → 导出
    1. 5.0.1. 第 1 步：装包
    2. 5.0.2. 第 2 步：配模型
    3. 5.0.3. 第 3 步：选模板生成原型
    4. 5.0.4. 第 4 步：增量丰富细节
    5. 5.0.5. 第 5 步：按需导出
  • 6. 12 个设计技能：你的系统该用哪个？
  • 7. 最后说一句