Open Design —— 一次诚实的初体验（Bug、修复与任意模型配置）

本指南是对 Open Design 一次刻意诚实的初体验——既有开箱即用的部分，也有你会遇到的粗糙之处，全程实录而非剪辑掩盖。它还介绍了一个真正实用的技巧：通过兼容 OpenAI 的服务商，低成本接入任意模型。内容基于 Sasha（ИИШНЫЙ）在他的实操视频中记录的动手评测，并针对本篇图文指南做了改编，同时更新到了当前版本。可观看上方视频看实时演示，或继续阅读图文版。

Open Design 工作区：描述你想构建的东西，选择一个模式，剩下的交给你的 agent。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台——一个 agent 原生的 Claude Design 替代方案。所谓“AI 紫色糊状物”问题（每个生成的 UI 看起来都一样）正是这类工具想要解决的，而 Open Design 的答案是运行在你已经在用的编码 agent 之上，而不是自带一个模型。它会检测你机器上的 Claude Code、Codex、Cursor、Gemini、OpenCode 等，并以此作为引擎。用 Sasha 的话说：它之所以在第一周就收获数万个 GitHub star，是因为它免费、开源，且不被绑定在某一家服务商上。

• 开源，Apache-2.0——可克隆、可阅读、可自托管。
• 本地运行——你的项目就是你自己机器上的文件夹。
• 任意 agent、任意模型——包括通过任意兼容 OpenAI 的服务商使用你自己的 API key。
• 内置丰富的设计技能与设计系统库。
• 不止原型——还有幻灯片、图片，甚至视频。

第 1 步——安装并配置

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

打开它打印出的本地 URL（端口是动态的——不要写死）。想要零配置？从 open-design.ai/download 获取桌面应用。首次启动时，设置页会检测你机器上的 agent CLI——Sasha 用的是 Codex——并允许你设置默认模型、添加媒体服务商（MiniMax、OpenAI GPT Image 等）、连接数据源、切换语言并挑选主题。

第 2 步——通过兼容 OpenAI 的服务商使用任意模型

这是 Sasha 评测中最有价值的一点。除了被检测到的 CLI，Open Design 还允许你为任意兼容 OpenAI 的 API 自带 key——这意味着你可以经由 OpenRouter 这样的聚合器路由，使用几乎任意模型，往往还更便宜：

1. 在你的服务商处创建一个 API key 并复制它。
2. 在 Open Design 设置中，选择 OpenAI 服务商类型（OpenRouter 及类似聚合器都使用 OpenAI API）。
3. 粘贴 key，关键是要修改 base URL 为你服务商的端点（例如 OpenRouter 的 base URL），然后选择你想要的模型。
4. 保存——现在生成就会经由该服务商路由。

Sasha 踩到的一个坑：模型选择是全局切换的，而非按项目，所以如果切换后媒体生成出问题，那是因为图片服务商跟着模型一起被切换了。请显式设置你的媒体服务商 key。

第 3 步——构建一个原型（连粗糙之处一并呈现）

创建一个项目，写下你的需求简介，选择高保真，然后发送。Open Design 会先运行一个探索表单——它会根据你的提示调整问题（目标平台、面向谁、调性、动画、约束），接着是视觉方向选择器（字体 + 配色），然后开始构建。输出是一个实时、可交互的原型，自带控件——Sasha 生成的应用让你可以直接在页面上切换动画、更换强调色。

在预览中渲染的一个真实生成原型——一个暗色、富电影感的代理公司落地页。

Sasha 在镜头前展示的诚实告诫（以及应对方法）：

• 它可能默认选错技能。如果你想要一个移动应用，它却开始构建一个“checkpoint/blog”，就明确告诉它：“使用 mobile-app / front-end 技能。”在生成前先设定好技能。
• Inspect 需要 data-oid 标签。画布上的 Inspect 工具需要产物被打上标签；如果它说无法选中元素，就让 agent “用 data-oid 标签重新构建原型”，然后重新加载。
• 它还年轻，且发布很快。预期会偶有故障（编辑后导航消失等）——这个项目几乎每天更新，所以要勤拉取。

第 4 步——画布上的工具（真正的看点）

一旦打好标签，编辑循环就是它的亮点。Inspect 让你悬停在任意元素上，直接调整颜色、尺寸和样式。Edit 让你就地改写文字（改一个词无需往返聊天）。Comment/picker 让你选定一块区域、绘制并向 agent 发送一条说明（“把这个菜单做成带进度条的滚动轮播”）。这是一个快速、可视化的反馈循环，用终端里的纯 agent 很难复现。

插件中心：浏览注册表、导入插件，并为你的团队做好准备。

完成后，Share 可导出为 PDF、PPTX、独立 HTML 或 markdown——或一键部署到 Vercel。Sasha 的诚实结论：对于演示文稿和引流页，它已经是一个方便的迷你构建器；对于复杂的应用/网站原型，则要做真正的迭代。考虑到它才发布一周且持续更新，根基已经很扎实。

小贴士

• 接入 OpenRouter（或任意兼容 OpenAI 的服务商）以使用更便宜或不同的模型——记得修改 base URL。
• 在生成前显式设定技能，以免它默认选错模板。
• 如果 Inspect 选不中元素，就要求打上 data-oid 标签，然后重新加载。
• 多依赖 Inspect/Edit/Comment 做快速可视化微调，而不是在聊天里重新提示。
• 勤拉取——这个项目几乎每天都在发布修复。

常见问题

我能用 Claude 以外的模型，并且花更少的钱吗？ 可以。把 Open Design 指向任意被检测到的 CLI，或为任意兼容 OpenAI 的服务商（例如 OpenRouter）自带 key——设置好 key 和 base URL 即可——这就打开了几乎任意模型的大门。

Inspect/edit 选不中元素——为什么？ 产物需要 data-oid 标签。让 agent 带着这些标签重新构建原型，然后重新加载预览。

它能用于生产环境吗？ 它还处于早期、迭代很快。对于幻灯片和引流页它已经很棒；对于复杂应用，请把输出当作一份你需要打磨的扎实初稿。

它免费吗？ 该应用在 Apache-2.0 下开源，本地运行免费。你只需为所连接的那家 agent 和服务商的模型与媒体用量付费。

---

这份文字指南基于 Sasha（ИИШНЫЙ）的实操评测。观看上方完整视频，并订阅 ИИШНЫЙ 以获取更多诚实、未剪辑的 AI 工具测评。