Open CoDesign：开源本地化的 AI 设计工具，让提示词直接变成产品原型

OpenCoworkAI/open-codesign · MIT License · 6548★ · TypeScript · 2026-04-18 创建

图1：Open CoDesign 核心界面——左侧输入提示词，右侧实时生成设计产物

痛点场景：为什么需要这个工具？

做过产品原型的人都熟悉这个循环：和产品经理对需求 → 用 Figma 拉页面 → 反复修改 → 粘贴文字描述给开发。哪怕是一个简单的落地页，也要花上半天时间。当 AI 设计工具出现后，很多人期待「说一句话，页面就出来」，但 Claude Design、v0、Lovable 这些工具都要求你把工作流搬到云端、把数据交给平台、用订阅制付月费。

Open CoDesign 解决的核心矛盾是：速度 vs 自主权。它把 AI 原型生成的能力带到本地桌面，同时支持 20+ 种模型，让用户既享受 AI 的效率，又保留对数据和工具的完全控制。

项目起源：开源社区的快速回应

Open CoDesign 于 2026 年 4 月中旬上线，距离 Anthropic 推出 Claude Design 仅数周。OpenCoworkAI 团队快速行动，用开源方式复刻并扩展了 Claude Design 的核心体验。项目的 MIT 许可证和完全本地化的设计策略，立刻吸引了对数据隐私有要求、或者不愿被单一平台绑定的开发者群体。

从 GitHub 数据看，项目在两个月内获得了 6548 颗星、697 次 fork、56 个 open issues，说明社区活跃度很高。v0.2.0（2026-05-09）引入了 Agentic Design 工作区概念，从单次提示生成升级为持久化的设计会话，这是与 Claude Design 拉开差异的关键一步。

类比解释：给设计师用的「AI 编程工具」

如果把 Claude Code 理解为「给程序员用的 AI 工具」，Open CoDesign 就像是「给设计师和 PM 用的同类产品」。它的操作逻辑和 Claude Code 几乎一致——左侧对话、右侧工作区、Agent 规划执行——但生成目标是 HTML 原型、PPT 幻灯片和 PDF 文档，而非代码文件。

打个更生活化的比方：传统 AI 绘画工具像是给你一台打印机，你告诉它画什么，它吐出来一张图片；而 Open CoDesign 像是一个设计师实习生——你描述需求，它给你一个可交互的网页，你还可以让它改颜色、调间距、加功能，它都能局部修改而不是重做。

核心功能：提示词 → 设计产物

项目支持四种主要输出格式：

• HTML 原型：自包含的单页应用，带 hover 状态、tab 切换、empty states 等细节
• PPT 幻灯片：通过 pptxgenjs 导出为 PowerPoint 文件
• PDF 文档：用于白皮书、报告等静态内容
• ZIP / Markdown：打包源码或文本，便于后续开发

15 个内置演示模板覆盖了落地页、仪表盘、PPT 演讲稿、定价页、移动端 App、聊天界面、日历、博客等常见场景，用户也可以完全自由描述需求。

Agent 的工作方式值得展开：生成过程中，左侧面板会实时显示 Todo 列表和工具调用记录，用户可以随时打断、重写局部、添加批注。生成完成后，每个可调参数都会以滑块或颜色选择器的形式暴露出来，非技术用户也能微调而不必重新写提示词。

图2：批注模式——点击任意元素落批注，Agent 只修改该局部区域

图3：Agent 面板——实时显示任务进度和工具调用，可随时打断

技术架构：Monorepo + Electron + 多模型路由

代码采用 pnpm workspace + Turborepo 管理，形成清晰的职责分离：

• apps/desktop：Electron 主壳，处理窗口管理、系统集成、文件读写
• packages/core：生成编排引擎，将提示词转化为设计产物
• packages/providers：多模型适配层，统一封装 Claude/GPT/Gemini/Ollama 等接口
• packages/runtime：沙箱渲染器，基于 iframe srcdoc + esbuild-wasm + import maps
• packages/exporters：按需加载的导出器（PPTX、PDF、ZIP）
• packages/ui：共享设计系统（Tailwind v4 tokens）
• packages/artifacts：产物 schema 定义

LLM 调用统一走 @mariozechner/pi-ai 库，这是一个 pi 体系的 AI 抽象层。工具层面则依赖 pi-coding-agent 的内置能力（read/write/edit/bash/grep/find/ls），设计侧叠加了 ask、scaffold、skill、preview、gen_image、tweaks、todos、done 等自定义工具。

前端技术栈：React 19 + Vite 6 + Tailwind v4 + CSS Variables + Zustand 状态管理 + Radix UI 组件 + Lucide 图标。类型安全要求极高：strict: true、verbatimModuleSyntax: true，禁止 any，commit message 必须符合 Conventional Commits 规范。

上手门槛：从安装到第一个原型 < 3 分钟

安装方式多样，用户可根据习惯选择：

• macOS：Homebrew 一行命令 brew install --cask opencoworkai/tap/open-codesign，或下载 DMG
• Windows：Scoop 或 winget（待微软审核），或下载 EXE 安装包
• Linux：AppImage / DEB / RPM 多格式，Flathub 也在规划中

首次启动后，在 Settings 页面选择模型来源：ChatGPT 订阅登录（直接用 Codex）、粘贴 API Key（Anthropic/OpenAI/Gemini 等）、或本地 Ollama。凭证保存到 ~/.config/open-codesign/config.toml。

需要注意的是，macOS Sequoia 15+ 用户需要运行 xattr -cr 绕过 Gatekeeper 未签名警告，Windows 用户会遇到 SmartScreen 提示——项目文档中有明确说明，一行命令解决。

局限与争议：硬币的两面

本地化的代价：虽然应用本身可以离线运行，但生成质量依赖强大的 LLM API。本地模型（如 Ollama）在没有 GPU 的机器上体验会明显下降，Ollama 只是兜底方案而非推荐选项。

Electron 的包袱：Electron 带来跨平台便利，但也意味着安装包体积较大（≥100MB），且 macOS 未签名安装流程对普通用户有一定门槛。

安全与隐私：BYOK 模式意味着凭证存在本地 TOML 文件中（文件权限 0600），这比其他云端工具好得多，但如果机器本身被攻破，文件内容直接可见。此外，通过 ChatGPT OAuth 登录时，OAuth token 的存储安全性也需要关注。

功能边界：目前仅支持 HTML/PPTX/PDF/ZIP/Markdown 输出，不支持 Figma/Sketch 原生格式，设计师的专业交付场景仍有局限。

行业意义：开源正在接管 AI 设计工具

Open CoDesign 的出现印证了一个趋势：每当闭源 AI 产品验证了用户需求，开源社区就会迅速跟进并加上「自主可控」的标签。2025 年的 Claude Code 效应正在设计工具领域重演。

从 GitHub 数据看，项目两个月内增长 6548★，月均超过 3000★，这个增速在设计工具类目中极为罕见。v0.2.0 的 Agentic Design 升级——从单次生成到持久会话——标志着它不再只是「AI 草图工具」，而是开始向「AI 设计 Agent」演进。

多模型支持策略也值得关注：其他竞品通常只绑定单一模型（Claude Design → Claude，v0 → GPT-4o），Open CoDesign 的 20+ 模型路由设计降低了用户切换成本，也让自己成为模型无关的「设计操作系统」。

对于中国开发者而言，Kimi、GLM、DeepSeek 等国产模型的支持意味着无需翻墙即可获得不错的生成效果，这是相比 Claude Design 等海外工具的本土化优势。

---

本报告基于 GitHub 公开数据生成，分析时间：2026-05-31