说实话，当 Coding Agent 这个词开始流行的时候，大家想的都是"让 AI 写代码"。但你有没有想过——如果 Agent 不仅能写代码，还能做设计呢？不是那种"帮你生成一个按钮"的玩具级别，而是真正能产出原型、落地页、仪表盘、PPT，甚至视频的设计引擎。这就是 Open Design 在做的事，一个在 GitHub 上拿到了 79K Star 的开源项目，Apache-2.0 协议，TypeScript 全栈。

从"写代码"到"做设计"：Agent 能力的边界在哪？

我第一次听到"Coding Agent 做设计"这个概念时，内心是拒绝的。设计这件事，审美、排版、色彩搭配、用户心理——这些怎么能交给一个只会处理 token 的模型？但 Open Design 改变了我的看法。它不是让 AI 替你做设计决策，而是把设计工作流变成了可编程的任务：你用自然语言描述需求，Agent 负责把需求翻译成可渲染的设计产物。

这跟传统的设计工具完全不同。Figma 是画布 + 组件库，你得自己拖拽。v0 是生成 React 组件，Lovable 是全栈生成，但它们的输出都是代码。Open Design 的野心更大——它要的是设计成品：可以演示的原型、可以发布的落地页、可以分享的幻灯片、可以直接播放的视频。

核心能力：六种设计产物，一个 Agent 搞定

Open Design 的核心能力可以用一个词概括：全形态设计生成。我逐个试了一下：

1. 原型（Prototype）

输入"做一个电商商品详情页的原型"，Agent 会在几秒钟内生成一个完整的可交互原型。不是静态截图，是带页面跳转、状态切换的真实原型。生成质量跟 Framer 的模板有得一拼，但速度上快了一个数量级。

2. 落地页（Landing Page）

这是我觉得最实用的功能。我用它给一个 SaaS 产品生成了一个 landing page，包含了 hero section、feature grid、pricing table、testimonials、CTA——典型的 SaaS landing page 结构。关键是对齐、间距、字体层级这些细节处理得很到位，不用手动调。生成的 HTML 直接可以部署。

3. 仪表盘（Dashboard）

输入"做一个数据仪表盘，包含用户增长趋势、收入漏斗、活跃用户分布"，Agent 会生成带图表的 dashboard。虽然数据是 mock 的，但布局和可视化选择非常专业。它不会犯那种"用饼图展示时间序列"的低级错误。

4. 幻灯片（Slides）

生成 PPT 是一个惊喜功能。描述一个产品发布会的主题和要点，Agent 会生成一套风格统一的幻灯片，包含标题页、过渡页、内容页、结束页。配色和排版比我自己用 Keynote 做的要好——这话我说得心服口服。

5. 图片（Images）

可以生成 icon、插图、banner 等设计素材。虽然质量不如 Midjourney，但胜在风格一致性——同一个项目的图片素材会保持统一的视觉语言。

6. 视频（Video）

这是最让我惊讶的能力。你可以描述一个产品 demo 的脚本，Agent 会生成一个带字幕、过渡效果的视频。不是那种 AI 生成视频的"恐怖谷"效果，而是基于设计素材的动态演示，实用价值很高。

导出格式：HTML / PDF / PPTX / MP4

生成的设计产物不是"只能在 Open Design 里看"的孤岛。它支持多种导出格式：

这个导出策略很聪明——不锁定用户。你可以在 Open Design 里生成，然后在任何地方使用。

BYOK 模式：支持 20+ CLI 工具

Open Design 采用 Bring Your Own Key（BYOK） 模式，支持 20 多个 CLI 工具。这意味着你可以选择自己喜欢的模型和 API provider：

# 使用 Claude Code 作为后端
open-design --provider claude --model claude-sonnet-4-20250514

# 使用 Codex CLI
open-design --provider codex --model o4-mini

# 使用本地 Ollama
open-design --provider ollama --model qwen3:32b

支持的 CLI 包括但不限于：Claude Code、Codex CLI、Cursor、Windsurf、Aider、Continue、Cline、Hermes Agent 等。这个设计意味着你不被任何单一模型绑定，可以随时切换——甚至可以根据任务复杂度选择不同的模型。

跟 Figma / v0 / Lovable 的对比

这是大家最关心的问题。我从几个维度做了对比：

Figma vs Open Design

Figma 是设计师的主力工具，但它是画布驱动的——你得自己拖拽、对齐、调整。Open Design 是自然语言驱动的——你描述需求，Agent 生成成品。Figma 更适合精细调整和团队协作；Open Design 更适合快速原型和从零到一的生成。

v0 vs Open Design

Vercel 的 v0（约 20K Star）生成的是 React 组件代码，本质上是一个 UI 代码生成器。Open Design 生成的是设计成品——不是代码，是可以导出为多种格式的设计产物。v0 适合前端开发者；Open Design 适合设计师和产品经理。

Lovable vs Open Design

Lovable（约 15K Star）是一个全栈应用生成器，从设计到代码一条龙。Open Design 专注于设计层，不做应用逻辑。两者定位不同：Lovable 要替代的是整个开发流程；Open Design 要替代的是设计流程。

本地优先架构：你的数据不出本机

Open Design 采用本地优先（Local-first）架构。这意味着：

这个架构选择在当前"隐私焦虑"的时代非常明智。很多设计师不愿意用 AI 工具，就是因为担心设计稿泄露。本地优先直接消除了这个顾虑。

# 项目结构
my-design-project/
├── .open-design/
│   ├── config.json        # 项目配置
│   └── providers.json     # API keys（本地存储）
├── prototypes/
│   └── e-commerce/
│       ├── index.html     # 可交互原型
│       └── assets/
├── landing-pages/
│   └── saas-v2/
│       ├── index.html
│       └── style.css
└── exports/
    ├── presentation.pptx
    └── demo-video.mp4

实际体验：我用它做了一个完整的产品设计

为了做深度测试，我用 Open Design 完成了一个真实项目的设计全流程：

第一步：落地页设计。描述了产品的核心卖点和目标用户，Agent 生成了一个包含 hero、features、pricing、FAQ 的完整落地页。质量大概在 8/10 分，需要微调一些文案和间距，但整体结构和配色已经很专业了。

第二步：产品原型。描述了三个核心页面的交互流程，Agent 生成了可点击的原型。页面间的跳转逻辑基本正确，但有些细节（比如表单验证状态）需要手动补充。

第三步：投资演示 PPT。描述了市场规模、产品优势、商业模式等要点，Agent 生成了 12 页的 pitch deck。这一步让我最满意——排版比我自己做的好太多了。

第四步：产品 demo 视频。描述了一个 60 秒的产品演示脚本，Agent 生成了一个带字幕和过渡效果的视频。质量尚可，适合放在 landing page 上，但不适合正式发布会。

整个过程耗时约 40 分钟。如果是我自己做这些（不算写代码，纯设计），至少需要 2-3 天。效率提升是 10 倍以上。

局限性：它还不能替代设计师

说句公道话，Open Design 目前的能力还不能完全替代专业设计师：

但话说回来，它也不需要完全替代设计师。它最大的价值是快速生成初稿——让你在 10 分钟内看到一个设计方向，然后在此基础上迭代。这比从零开始画要高效太多。

谁应该用 Open Design？

经过深度测试，我认为 Open Design 最适合这几类人：

79K Star 不是白拿的。Open Design 真正做到了"让 Coding Agent 变身设计引擎"。虽然它还有改进空间，但在 2026 年的今天，它是 AI 设计工具中最务实、最全面的选择。

🔗 GitHub: nexu-io/open-design  |  官网: open-design.ai