返回项目

Open Design

如想要 Claude Design 那种「AI 出原型 / PPT / 落地页」的体验，但希望全部跑在本地、用自己已经装好的 Claude Code / Codex / Cursor / Gemini CLI 当设计引擎，并且能 BYOK 接自家的 API key，不想被某家 SaaS 锁住，可以采用这个仓库。

Open Design 是 Claude Design 的开源本地替代品。作者原文定位是：「The open-source alternative to Claude Design. Local-first, web-deployable, BYOK at every layer.」

它要解决的问题很直接：Claude Design 体验不错，但只能在 Anthropic 官方那一条云上跑，模型选不了、key 控不了、文件留不下。Open Design 把这套体验搬到本地。agent 跑在你自己的机器上，模型选你已经在用的那个，文件落到自己的目录，导出 HTML / PDF / PPTX / MP4 都不用过别人服务器。

工作方式

启动后做两件事：扫描你 PATH 上有哪些 coding agent CLI，加载本地的 Skills 和 Design Systems。

它自己不带 agent。检测到 Claude Code / Codex / Devin / Cursor Agent / Gemini CLI / OpenCode / Qwen / Copilot CLI / Hermes / Kimi 等 16 种 CLI 中任意一种，就把它当作设计引擎驱动起来，模型选择器里随时切换。一个 CLI 都没装也行，配 BYOK 走 OpenAI-compatible / Anthropic / Azure / Gemini 的 API 直连。

每个项目对应磁盘上一个真实目录，agent 在里面拥有 Read / Write / Bash / WebFetch，能直接 grep 你的设计稿、改文件、生成 .pptx 和 .zip。会话、消息、打开的标签都存在本地 SQLite，明天打开还在原位置。

核心能力

31 个 Skills 开箱即用

按场景分组：design / marketing / operation / engineering / product / finance / hr。Web 原型、SaaS landing、dashboard、移动端 app、邮件营销、social carousel、PPT、PM spec、运维 runbook、财报、入职清单都在里面。每个 Skill 是一个文件夹，加一个就丢一个文件夹进去重启就行，不需要写插件。

72 套品牌级设计系统

Linear、Stripe、Vercel、Apple、Anthropic、Cursor、Notion、Figma、Supabase、小红书……这些品牌的设计语言都已经被翻译成 9 段式 DESIGN.md，色彩、字体、间距、组件、动效、文案、品牌、反模式都在里面。切换设计系统下一次渲染就用新 token，不需要重新 prompt。

discovery form 锁方向

每次开新项目第一轮不是出代码，是弹一个表单：表面、受众、调性、品牌资料、规模、约束。30 秒打勾比来回拉扯 30 分钟便宜得多。这点是从 huashu-design 抄来的「初级设计师模式」：先批量问完，再画。

多媒体生成

不止做静态原型。同一个聊天界面下还能调 gpt-image-2（海报、头像、信息图）、Seedance（15 秒文生视频 / 图生视频）、HyperFrames（HTML→MP4 动效）。模板库里 93 个能直接抄的 prompt。

沙箱预览 + 多种导出

每个 artifact 在干净的 srcdoc iframe 里渲染，可以直接在文件工作区里改，导出 HTML / PDF / PPTX / MP4 / 项目 ZIP。

Claude Design 项目可导入

Anthropic 那边导出的 ZIP 拖到欢迎弹窗里，POST /api/import/claude-design 解析成本地项目，agent 接着改。

跟 Claude Design / Figma / v0 的区别

定位差异很清楚：

  • Claude Design：体验最完整但只跑在 Anthropic 云上，模型固定，BYOK 不开，文件不落本地
  • Figma + AI 插件：偏视觉稿，工程交付要再来一遍
  • v0：擅长生成 React 组件，但绑 Vercel 生态，设计系统不可换
  • Open Design：本地跑、agent 选你已有的、设计系统可自换、Apache-2.0 协议无传染

简单说：愿意付 Anthropic 订阅又不在意本地化就用 Claude Design，要自主权就用这个。

适用场景

  • 已经在用 Claude Code / Codex / Cursor / Gemini CLI 中任意一个，想让它顺手出原型 / PPT / 落地页
  • 公司有数据合规要求，设计稿不能过云
  • 已经在某家服务商有 API 额度（包括自部署 OpenAI-compatible），想直接复用
  • 想在统一界面里管原型 + 移动端 + 邮件 + PPT + 视频，而不是几个工具来回切
  • 喜欢 Skill / 设计系统都是文件这种"可以 fork 可以提 PR"的工作方式

不适用的情况

  • 完全不想自己装环境、不想下桌面 app、只想浏览器打开就用——直接 Claude Design 更省心
  • 团队里没人有 coding agent CLI 也不打算配 API key
  • 需要团队多人实时协作画稿——它本质单机本地优先，多人协作不是核心场景
  • 输出主要是高保真 Figma 文件——它走的是 HTML / PDF / PPTX 路线

安装

最快的方式是直接下桌面 app，不用 Node 不用 pnpm：

想从源码跑：

bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable
pnpm install
pnpm tools-dev run web

环境要 Node 24 和 pnpm 10.33。第一次启动会自动检测 PATH 上的 agent CLI、加载 Skills 和设计系统、创建本地的 .od/ 目录（SQLite + 项目工作区），全程不需要 od init。

License 说明

License 是 Apache-2.0，跟 AGPL 不同，没有传染性，商业使用、闭源集成、改造发行都没硬性束缚（保留版权声明即可）。这点比同类的 AGPL 项目对商业团队更友好。

源码仓库 官方网站

语言

TypeScript

分类

Vibe Coding

许可证

Apache-2.0

更新时间

5/8/2026

标签

claude-design-alternativeclaude-codecodexcursor-agentgemini-clidesign-systemprototypingbyoklocal-firsthtml-exportpptx-exportmulti-agent
~/安装方式

# source

$下载桌面应用：https://open-design.ai
$或从源码：git clone https://github.com/nexu-io/open-design.git
$corepack enable && pnpm install

# usage

$pnpm tools-dev run web
$首次启动自动检测 PATH 上的 agent CLI（Claude Code / Codex / Cursor 等）
$选 Skill + 选设计系统 + 填 30 秒 discovery form 后开聊
$导出 HTML / PDF / PPTX / MP4 / 项目 ZIP