Open Design

🟢 Open Design 是什么？如何用本地 Agent 一键生成网页、PPT 和视频？

Open Design 诞生于 2026 年 4 月——当月 Anthropic 的 Claude Design 首次证明”LLM 能真的做设计而不是写文案”，但它闭源、付费、锁 Anthropic 模型、跑在云端。Open Design 把这套能力做开放：本地优先、Apache-2.0、BYOK、可换 Agent、可自部署。

Open Design 核心功能快览

Open Design 由 nexu-io 维护（open-design.ai），Apache-2.0 开源、桌面端优先，支持 21+ 编码 Agent（Claude Code / Cursor / Codex / Gemini CLI 等）通过 SKILL.md 技能 + DESIGN.md 设计系统驱动工作流，四步从 Brief → 视觉方向 → Artifact → 交付，输出网页/PPT/视频，数据全留本地，本身免费仅付模型 API 费。

产品关键信息系统化一览：

维度	信息
出品方	nexu-io（GitHub: nexu-io/open-design）
许可证	Apache-2.0 开源
上线时间	2026 年 4 月
社区热度	GitHub 16,804 stars（2025 年 5 月整月，首周 14,000，日均 ~1,400）
支持 Agent	21+​ 编码 Agent（Claude Code / Codex / Cursor / Gemini CLI / OpenCode / Qwen 等）
内置技能	259+​ SKILL.md 可复用技能
设计系统	142+​ DESIGN.md 品牌规范（Linear / Stripe / Apple / Vercel 等）
产物形态	网页原型、仪表盘、Deck 演示文稿、图片、视频、HyperFrames
导出格式	HTML / PDF / PPTX / MP4 / ZIP
费用	产品免费，仅付你自选模型供应商的 API 费（BYOK）
官网	https://open-design.ai/

应用场景举例：

• 产品经理：30 秒答完需求问卷 → 挑一套视觉方向 → 拿到可点可跑的网页原型给老板过
• 设计师：把 Figma 导出或品牌截图拖进 Web UI → Agent 提炼成 DESIGN.md → 后续所有生成自动对齐品牌
• 前端/全栈：Brief 直接出 HTML + CSS 真实组件，不是画布像素，可接手继续开发
• 小团队：daemon 跑在内网一台机，全员 CLI 指向它，共享设计产出

💡 专家视角（gitpicks.dev）：”Claude Design 卖的是 hosted elegance，Open Design 卖的是 local control——两者没有谁更好，只是受众不同。对有数据合规要求的团队、厌倦订阅的独立开发者、想在 vibe coding 流里嵌设计的同学，后者更对味。”

---

🟢 Open Design 的主要功能和特点

1. 桌面端原生 + 本地 Daemon

设计在本地发生，本地文件 / Figma 导出 / 代码仓库直接可读，Agent 有终端全部能力，产物落项目目录，不上任何厂商云。

2. Agent 原生（Agent-native）

不造 Agent，接 Agent——自动检测 PATH 上已装的 CLI，也支持任何 OpenAI / Azure / Google 兼容端点走 BYOK 代理。换 Agent = 改一行 daemon 配置，SKILL.md 和 DESIGN.md 不受影响。

3. 技能即文件夹

每个技能是一个带 SKILL.md的目录，拖进 skills/即加载，Agent 可读可执行。259+ 技能覆盖原型 / 仪表盘 / Deck / 图 / 视频。

4. 设计系统即 DESIGN.md

142+ 套品牌级规范内置；你把截图或 Figma 导进去，Agent 提炼成 DESIGN.md存 design-systems/<your-brand>/，以后所有 Skill 按这品牌渲染，不用反复提示。

5. 四步闭环：Detect → Discover → Direct → Deliver

• Detect：守护进程启动自动扫系统里有哪些 Agent，一键接入
• Discover：30 秒交互式问卷，锁定用途 / 受众 / 品牌上下文
• Direct：5 套预置视觉方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）里挑，色板字体间距自动带入
• Deliver：Agent 读全量 context 出真实可运行文件，沙盒 iframe 实时预览，可导出 HTML/PDF/PPTX/MP4

6. 真实代码渲染

输出的是真实 CSS + 真实字体 + 真实组件，不是画布像素，工程可直接接手——这点跟 Claude Design / v0 的”图层面板式输出”思路不一样，更偏”设计即代码”。

7. BYOK + 自托管

daemon 能在任何跑 Node 24 的地方启，落地页是静态 Astro，可扔 Cloudflare Pages / Vercel / Netlify；团队常把 daemon 固定内网一台机，大家 CLI 指过去。

---

🟢 如何使用 Open Design？（详细操作指南）

方式 A：桌面客户端（最省事）

1. 访问 https://open-design.ai/，下载 macOS / Windows 桌面包
2. 安装后首次启动，daemon 会自动扫你机器上已有的 Agent CLI（Claude Code / Cursor / Codex…），没装会提示
3. 在设置里填你要用的模型 API Key（Anthropic / OpenAI / Google / DeepSeek / Moonshot / OpenRouter 都行）
4. 新建项目 → 30 秒问卷 → 挑视觉方向 → 等流式生成 → 沙盒预览 → 导出

方式 B：源码本地跑（开发者向）

git clone https://github.com/nexu-io/open-design.git
cd open-design
# 需要 Node 24 + pnpm
pnpm install
pnpm tools:dev

然后浏览器打开本地端口，daemon 会随起。

方式 C：Docker Compose 一键部署

仓库里有 docker-compose.yml，适合团队内网共享 daemon。

方式 D：Vercel / Cloudflare Pages 部署 Web 层

落地页是 Astro 静态构建，直接推就行；daemon 另起一台 Node 24 机器跑，前端 Web 层指向它。

把品牌迁进去的实操（官方推荐流）：

把品牌截图或 Figma 导出拖进 Web UI → Agent 提炼出 DESIGN.md→ 存 design-systems/<your-brand>/→ 以后所有生成自动按这品牌走，无需再提示。

⚠️ 注意：Windows 安装包目前未签名，会弹 SmartScreen 警告——开源桌面端的常态，不是毒。

---

🟢 Open Design 官方地址与获取方式

渠道	地址
官网	https://open-design.ai/（含中文页 https://open-design.ai/zh/）
GitHub	https://github.com/nexu-io/open-design
Discord 社区	https://discord.gg/qhbcCH8Am4
Twitter/X	https://x.com/nexudotio
桌面端下载	官网首页 → Download（macOS / Windows）
中文文档	官网右上角切 zh，FAQ 很全

---

🟢 Open Design vs 同类型竞品对比

维度	Open Design​	Claude Design​	v0 (Vercel)​	Figma Make / 类似”AI 生成设计”​
定位	Claude Design 开源平替，Agent-native 设计工作台	Anthropic 官方，云端 AI 设计	React/Next 系 AI 界面生成	设计工具内嵌 AI
开源	✅ Apache-2.0	❌ 闭源	❌ 商业产品	❌ 闭源
本地优先	✅ 桌面端 + daemon 全本地	❌ 云端	❌ 云端	❌ 云端
模型绑定	❌ BYOK，21+ Agent 任选	✅ 锁 Anthropic	✅ 锁 Vercel/合作模型	各家自定
品牌系统	✅ 142+ DESIGN.md，可截图/Figma 自提	基础	靠 prompt / style 库	Figma 变量体系
产物性质	真实 CSS/组件，可工程接手	设计稿	React 代码	画布图层
导出格式	HTML / PDF / PPTX / MP4	设计稿	代码	设计文件
费用	产品免费，仅付 API	订阅 + 用量	订阅	订阅
适合谁	要数据主权/厌订阅/多 Agent 流的开发者&设计师	想开箱即用、愿付订阅的团队	前端/Next 系产品	已有 Figma 工作流

选型建议：

• 要数据不离本地 + 不绑模型 + 不付订阅​ → Open Design
• 要最省事、Anthropic 生态内、愿意付费​ → Claude Design
• 要React/Next 产品页秒出​ → v0
• 要在设计工具里继续画​ → Figma Make

---

🟢 典型应用场景与实际体验

场景 1：独立开发者做落地页

我（作者视角）试的流程：Brief 写”给一款 Markdown 笔记 App 做 LP，受众是开发者”，Discover 问卷 30 秒勾完，Direct 选 Tech Utility，Deliver 出来是真实 HTML + Inter 字体 + 代码高亮区块，沙盒里能点。把 DESIGN.md 按我老项目的截图提了一版，第二次生成直接对齐——“越用越懂你”这个官方 slogan 是真的，因为 SKILL.md + DESIGN.md 会沉淀。

场景 2：设计团队品牌规范化

把 team 的 Figma 导出拖进去，Agent 吐出 DESIGN.md（色板 / 字体 / 间距 / 半径），存 design-systems/team/后，产品 / 运营同学用 Open Design 出 Deck 和 LP，不再每版都重新 brief 品牌，设计师审核 DESIGN.md 就行。

场景 3：前端把设计流嵌进 vibe coding

Cursor / Claude Code 本来就在跑，Open Design daemon 接同一套 CLI，Brief → 代码级产物 → 前端直接 npm run dev接着写，跳过了”设计稿 → 切图 → 还原”那一段。

体验上的取舍（真实感受）：

• ✅ 拿到的是真代码不是像素，工程友好
• ✅ 换 Agent 不丢技能资产，这点比 v0 锁 Vercel 舒服
• ⚠️ UI 糙，没 Claude Design 那种”Anthropic 式精致”
• ⚠️ Windows 未签名会吓到人
• ⚠️ 必须本地有至少一个 Agent CLI，纯网页托管沙盒还在路线图、不是现在

---

🟢 Open Design 能为用户带来的价值

• 钱：产品本身 0 订阅，API 费你本来就付（Claude/OpenAI 账号通用），没有”Claude Design 订阅 + API 费”双层叠加
• 数据：合规敏感行业（金融/医疗/政企）能过内部审查，产物在项目目录，不出机
• 资产沉淀：SKILL.md + DESIGN.md 跟着仓库走，人走了资产不走，换 Agent 不重做
• 工作流打通：跟你已经用的 Claude Code / Cursor / Codex 是同一套 CLI，不用学新东西
• 输出形态宽：网页 / Deck / 仪表盘 / 图 / 视频一把出，HyperFrames 还能直接转营销视频

---

🟢 最近 3–6 个月重大动态（2026.4–2026.6）

• 2026 年 4 月：项目正式对外，定位”Claude Design 开源平替”，Apache-2.0，桌面端优先
• 2026 年 5 月：GitHub 整月 16,804 stars，首周 14,000，日均 ~1,400，成为当月设计×AI 赛道增速最猛的开源项目之一；CSDN、aistool、ai.fly63 等中文站陆续收录测评
• 路线图（docs/roadmap.md）下一季方向：
  • 更多 Agent 适配器
  • 更丰富模板族（3D / 视频 / 音频）
  • 面向设计团队的可选共享 daemon 模式（解决”纯本地”对团队协作的摩擦）

---

🟢 常见问题 FAQ

Q1：Open Design 收不收费？

产品本身 Apache-2.0 免费，无订阅。你只付自己 BYOK 那家的 API 费（Anthropic / OpenAI / Google / DeepSeek / Moonshot 等），直接走你自己的账号。

Q2：一定要装桌面端吗？能不能纯网页用？

目前不行，设计哲学是本地优先，最少要一个本地 daemon + 一个 Agent CLI。托管沙盒在路线图但不优先——”落你仓库里的 artifact，胜过存在别人数据库的文档”。

Q3：和 Claude Design 到底差在哪？

Claude Design 闭源 + 锁 Anthropic + 云端 + 订阅；Open Design 开源 + BYOK 任选 21+ Agent + 本地 + 免费。能力同源（都是 2026.4 那波”LLM 做设计”范式），分发不同。

Q4：团队怎么共享？

daemon 跑内网一台机（任何 Node 24 环境），大家 CLI 指向它；Web 层 Astro 静态页可扔 Vercel / CF Pages。

Q5：不会写 SKILL.md 能用吗？

能。259+ 内置技能拖可用，DESIGN.md 也能让 Agent 从截图自动提，普通用户不碰 md 也能跑四步闭环。

Q6：Windows 安装包报毒正常吗？

正常，开源桌面端未签名的通病，SmartScreen 会拦，放行即可。

---

🟢 总结

Open Design 不是”又一个 AI 画图工具”，它是把 2026 年 4 月 Claude Design 踩出来的”LLM 直接出设计稿”那条路，用”开源 + 本地 + BYOK + Agent-native”重新发了一遍。对已经用 Claude Code / Cursor / Codex 的开发者、对数据主权敏感的团队、对”订阅疲劳”的独立作者来说，它是目前少数能把 AI 设计流接进自己机器、自己模型、自己仓库的方案。代价是 UI 糙一点、首次配置重一点——但这正是它跟 Claude Design 的分工：一个卖优雅托管，一个卖主权控制。

如果你本来就在 vibe coding 流里，Open Design 基本是”顺手装一下”的级别；如果你是纯设计师没碰过 CLI，建议等下一季的共享 daemon 模式成熟再入。

---

📌 本文最新更新日期：2026 年 6 月 28 日

---

参考文章或数据来源

1. Open Design 官方站（含中文）– https://open-design.ai/zh/
2. aistool – Open Design AI 工具详情 – https://aistool.org/open-design.html
3. ai.fly63 – Open Design 开源 AI 设计工作台介绍 – https://ai.fly63.com/open-design
4. CSDN –《【AI工具推荐】Open Design – Claude Design 的开源替代品》– https://blog.csdn.net/lwf006164/article/details/161054137
5. GitPicks – Open Design: The Local-First Alternative to Claude Design– https://gitpicks.dev/featured/open-design-local-first-claude-design-alternative

引用总结：本文产品定位与功能数据主要来自 Open Design 官网 与 GitHub 仓库，功能参数（21+ Agent / 259+ 技能 / 142+ 设计系统）交叉验证自 aistool 与 ai.fly63 ，GitHub star 增速 16,804 / 首周 14,000 / 日均 1,400 来自 GitPicks ，中文测评视角补充自 CSDN 。Data as of 2026-06-28。