从提示词到在线 URL —— 用 Open Design 编辑、检查并一键部署

本指南把一个原型从提示词一路带到线上网址：选择一套设计系统、生成、用画布上的 Edit 和 Inspect 工具微调，然后直接部署到 Vercel 或 Cloudflare Pages——全程无需离开 Open Design。内容基于 01Coder 在他的实操视频中演示的过程，并针对本篇图文指南做了改编，同时更新到了当前版本。可观看上方视频看实时演示，或继续阅读图文版。

Open Design 工作区：描述你想构建什么、选择一种模式，剩下的交给你的 agent。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台，它运行在你已经使用的编码 agent 之上——Claude Code、Codex、Gemini、Hermes 等等——或你自己的 API key。它以桌面应用形式发布（无需编译），把一座深厚的技能库与一座深厚的品牌级设计系统库结合在一起，让你从真实的美学出发，而不是从一张白纸开始。

• 开源，Apache-2.0——克隆它、自托管它，或者直接下载应用。
• 本地运行——你的项目保存在你自己的机器上。
• Agent 可插拔——随时在左下角切换 agent。
• 真实品牌的设计系统——Apple、Airbnb、ElevenLabs 以及更多。

第 1 步——安装并选一套设计系统

最简单的途径是从 open-design.ai/download 下载桌面应用（macOS 和 Windows；如果你更愿意从源码运行，也可用 Docker 或 pnpm）。启动后，左下角会显示当前激活的 agent（01Coder 用的是 Codex）——点击它即可切换。

创建一个 Prototype，给它起个名字，并从下拉菜单中选择一套设计系统——每一项都会把输出套上那个品牌的外观。如果你已经在 Claude Design 里做好了东西，可以在这里导入它的 ZIP。

插件库：直接从注册表安装技能——包括反 slop 的设计技能。

第 2 步——结合发现问答 + 视觉方向进行生成

写下你的需求并发送。Open Design 会问一组简短的发现问题（面向谁、设计基调、品牌背景、语言），然后给出一个视觉方向选择器——01Coder 选了一个“FT Magazine”杂志风方向。选一个，它就会在右侧构建出第一个版本。

第 3 步——用 Edit 和 Inspect 精细打磨

这里是你无需重新提示就能打磨的地方：

• Edit——点击任意元素并直接修改其内容。01Coder 把一个标签从“GitHub”缩短为“GH”，又改写了标题中的一个词，然后点击 apply content。你可以用同样的方式调整链接，左侧面板会按图层组织呈现这个产物。
• Inspect——用于视觉样式。第一次使用时，它会警告该产物没有 data-oid 标签；让 agent 添加它们（这正是 Open Design 可靠定位元素的方式），然后重新加载。现在点击任意元素（比如英雄区的 h1）就能调整颜色、背景和字号，调过头了还能重置。

对于更大的改动，回到聊天里进行直接的对话式编辑——Edit/Inspect 适合快速、精准的微调。

第 4 步——一键部署到在线 URL

准备就绪时，Share 菜单（右上角）可导出为 PDF、PPTX、ZIP 或独立 HTML——或者一键部署到 Vercel 或 Cloudflare Pages。像 01Coder 那样使用 Cloudflare：

1. 点击 deploy → Cloudflare，然后 get / create an API token。
2. 创建一个带 Cloudflare Pages 权限的自定义令牌，继续到摘要页，并创建它。
3. 把令牌粘贴进 Open Design，加上你的 account ID（从 Cloudflare 仪表盘复制），然后部署。
4. 打开它给你的链接——如果首次加载看起来不对劲，在它传播期间刷新一两次。

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

对上线结果不满意？回到聊天里迭代，再重新部署。

小贴士

• 从一套设计系统开始，这样第一遍就已经符合品牌调性。
• 在使用 Inspect 前让 agent 添加 data-oid 标签，然后重新加载预览。
• 文案用 Edit、样式用 Inspect、结构用聊天——为每种改动选对工具。
• Cloudflare 部署两样都需要：一个 API 令牌（带 Pages 权限）和你的 account ID。
• 首次部署后刷新，如果页面还没传播完成。

常见问题

我真的能从 Open Design 内部部署到一个公开 URL 吗？ 可以——Share 菜单一键部署到 Vercel 或 Cloudflare Pages（你提供服务商令牌；Cloudflare 还需要你的 account ID）。

data-oid 是什么，为什么 Inspect 要它？ 它是 Open Design 添加到元素上的一个属性，以便能可靠地定位它们。让 agent 添加它，重新加载，Inspect 就能用了。

我必须从源码运行吗？ 不必——下载 macOS 或 Windows 的桌面应用即可。如果你更喜欢，也可以选择从源码用 Docker 和 pnpm 运行。

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

---

这份文字指南基于 01Coder 的实操演示。观看上方完整视频，并订阅 01Coder 以获取更多 AI 产品深度内容。