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

摘要: 原创出处 http://www.iocoder.cn/Fight/huayuanxinghaiyaodongshouzheigekaiyuanshenqirang-AI-zhijiechutuchanpinjinglikeyixiabanle/ 「芋道源码」欢迎转载,保留摘要,谢谢!


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

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

一句话讲清这个桌面神器是什么

接手一个新需求想出 Landing page / Dashboard / 移动端原型——你手头通常没 PM 帮忙画。打开 Figma 拖组件、排版、调颜色、写交互……一整天没了。

没 PM 帮忙的独立开发者 / 创业者最痛——产品要上线了,原型还在自己手里熬夜画。

最近圈子里出了个 开源免费的桌面神器——你输入一句话,它给你一个能交互的完整产品稿:

  • Landing page——做产品官网、营销页;
  • 仪表盘 / Dashboard——admin 后台原型;
  • PPT 幻灯片——可以直接导出 PPTX;
  • 移动端原型——手机界面草稿。

整个过程跑在本地、用你自己的 API Key、不绑定某个模型或平台——和市面上 v0 / Lovable 这种”必须联网 + 必须付订阅”的工具完全相反。

Your prompts. Your model. Your laptop.

(来自官方 README)

它叫 Open CoDesign——开源版 Claude Design 平替。仓库 https://github.com/OpenCoworkAI/open-codesign、MIT 协议、当前 GitHub 5.4k+ Star。

先看 1 张图:左边输入提示词、右边实时出原型

打开软件,左边是提示词输入区,右边直接实时渲染——整体布局很干净,没多余装饰。

Open CoDesign 主界面

输入一条提示词之后,Agent 会自己规划、写代码、自检,最后交给你一个已经带 hover 状态、tabs、空状态等细节的完整结果。

不是草稿——是可以直接看、直接改的东西。

横向对比:和 Claude Design / v0 / Lovable 差在哪

市面上做类似事情的有 Claude Design、v0(Vercel)、Lovable——全是付费订阅、全是纯网页端。

核心差别 4 条:

  • 本地优先 + 凭证不出机器:app 跑在本地、凭证存本地配置文件(~/.config/open-codesign/config.toml,权限 0600);只有你选的模型 provider 会收到请求;真正的”离线”得用本地 Ollama,否则模型调用仍然走外网;
  • 支持 20+ 模型:Claude / GPT / Gemini / DeepSeek / Kimi / GLM / Ollama,任何 OpenAI 兼容接口都行;
  • 导出真文件:HTML / PDF / PPTX / ZIP / Markdown,不是截图、不是只能预览;
  • 免费 + 只花 token:软件免费,API 费用看你接什么模型——本地 Ollama 直接零费用。

4 个最戳人的设计点

设计点 1:批注模式——只改你点的那一块

生成出来后想改某个局部——不用重写整段提示词。直接点页面上的元素、留个批注,告诉 AI 改什么——它只修改那一块、其他地方不动。

批注模式:点击任意元素添加批注,模型只修改该区域

这个设计思路和代码 review 一样——不是推倒重来,是定点修改。改颜色、调布局、换文案,比重新输入提示词快 5 倍。

设计点 2:AI 自动暴露可调参数

生成完成后——AI 自动把”值得调的参数”暴露出来:颜色、间距、字体大小。直接拖滑块改,不用写提示词、也不用懂代码。

AI 自动生成可调参数面板,支持颜色拾取器和数值输入

对没 UI 团队的独立开发者特别友好——不用想”我该怎么描述我想要的颜色”、不用懂 CSS——直接拖。

设计点 3:设计历史本地全保留

每次生成的结果都存本地——最近几个版本之间随时切换、预览不重新加载。

改坏了想回退?直接切回上一个版本——比 Figma 历史还轻。

设计历史面板,展示本地保存的历届生成结果

设计点 4:Agent 过程可见、可打断

生成过程中有一个实时面板——能看到 Agent 在做什么:

  • 规划了哪些步骤;
  • 调了哪些工具;
  • 当前进度在哪。

中途觉得方向不对,可以直接打断——不会丢失之前的内容。

Agent 实时面板,显示 Todo 和流式工具调用过程

3 步装好:macOS / Windows / Linux 全平台

3 大主流平台都支持:

# macOS
brew install --cask opencoworkai/tap/open-codesign

# Windows(推荐 Scoop / 或者直接去 GitHub Releases 下安装包)
scoop bucket add open-codesign https://github.com/OpenCoworkAI/scoop-bucket
scoop install open-codesign

# winget 还在等 Microsoft 审核(截至发稿)——上线后 `winget install OpenCoworkAI.OpenCoDesign`

Linux 用户——去 GitHub Releases 下载对应的 AppImage / .deb / .rpm 包。

⚠️ macOS Sequoia 15+ 注意:因为 Gatekeeper 的变化,直接双击可能打不开,要走命令行解禁这一步——官方文档里有具体命令。

首次启动:进入设置页填 API Key 就能用。支持的 provider:

  • Anthropic——Claude 系列;
  • OpenAI——GPT 系列;
  • Google Gemini;
  • OpenRouter / SiliconFlow 等兼容接口。

如果你已经在用 Claude Code 或 Codex——有个一键导入功能,原有的 provider 和 key 配置可以直接带进来,不用重新填。

从 Claude Code 或 Codex 一键导入配置的演示

内置 15 个 Demo + 12 个设计技能

软件内置 15 个 Demo——直接选一个开始:Landing page / Dashboard / 幻灯片 / 定价页 / 移动端界面 / 聊天 UI / 活动日历 / 博客文章 / 收据单据 / 作品集……

还内置 12 个设计技能模块——覆盖:

幻灯片 / 仪表盘 / 落地页 / SVG 图表 / 玻璃拟态风格 / 编辑排版 / Hero 区块 / 价格页面 / 页脚 / 聊天界面 / 数据表格 / 日历

每次生成前——模型先判断当前需求适合哪些模块、再开始写代码。这样输出结果的质量更稳定。

自定义设计规范——在项目里放一个 SKILL.md,把你的风格要求写进去——模型会参考它生成。

v0.2 已发:从生成器升级成 Agent

截至发稿——v0.2.0 已发布(2026-05-09),主题叫 Agentic Design。

改动比较大的地方:

  • 每个设计有自己的工作区目录——历史记录写入 JSONL 文件、不再单次生成就结束;
  • 设计系统的品牌色、字体等信息可以写在 DESIGN.md 里——可编辑的文件持久保存,不再全靠模型”记住”;
  • 本地工具有权限控制——更安全;
  • provider 诊断——配错 Key 一看就知道。

再往后的规划:版本快照 + 并排对比、3 种风格并行探索、从代码库提取设计 token、Figma 图层导出(1.0 之后)。

适合谁用 / 不适合谁

✅ 适合:

  • 独立开发者 / 创业者——没 PM、没设计师配合,自己想快速出 Landing page / 产品原型;
  • 小团队后端 / 全栈——临时给新功能出个评审用的原型稿,不想求产品同事帮画;
  • 数据隐私敏感的人——本地运行解决”不想把方案细节传给云端”的顾虑;
  • 已经在用 Claude Code 的人——一键导入 Key,3 分钟跑起来;
  • 产品经理自己也能用——给自己减负,不用熬夜手动拖 Figma。

⚠️ 不适合:

  • 完全不懂提示词的纯小白——还是要会描述需求;
  • 想做高保真终稿设计——这是原型工具,不替代 Figma;
  • 离线无 API——除非用本地 Ollama,否则还是要一个能联网的 API。

我的判断

Open CoDesign 不是 Claude Design 简单换皮——它在解决一个商业网页应用普遍解决不了的问题:

「我想用 AI 出原型,但不想我的设计稿、品牌色、内部业务逻辑都被传到第三方云端。」

3 步快速决策——

  • 想体验 AI 出图最爽的那一档——直接 Claude Design 体验最好;
  • 数据敏感 / 想用任意模型 / 想要本地版——Open CoDesign + Ollama 是当下最干净方案;
  • 团队协作场景——目前还是 v0/Lovable 这类云端工具更顺手——Open CoDesign 主要是单机利器。

项目活跃度肉眼可见——近一个月提交记录密集,社区主要在 LINUX DO 和 GitHub Discussions。有问题或建议——直接开 issue 或到 Discussions 里说,作者说会看的。

GitHub:https://github.com/OpenCoworkAI/open-codesign

文章目录
  1. 1. 一句话讲清这个桌面神器是什么
  2. 2. 先看 1 张图:左边输入提示词、右边实时出原型
  3. 3. 横向对比:和 Claude Design / v0 / Lovable 差在哪
  4. 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. 3 步装好:macOS / Windows / Linux 全平台
  • 6. 内置 15 个 Demo + 12 个设计技能
  • 7. v0.2 已发:从生成器升级成 Agent
  • 8. 适合谁用 / 不适合谁
  • 9. 我的判断