Open Design：免费开源的 Claude Design 替代品
基于 Code A Program 的演示：在 Open Design 里搭建一个完整的 AI 写作工具落地页——挑选一个编码 agent（哪怕是免费的），用提示词生成设计，再用画布上的编辑打磨，最后导出或一键部署到 Vercel 或 Cloudflare。
Open Design 把一个想法变成原型、网站、幻灯片，甚至 HTML 视频——全部在你自己的机器上本地运行。在这个演示里，Code A Program 安装了桌面应用、接入了一个编码 agent，为一个名为 Draft 的 AI 写作工具搭建了一个精致的落地页，然后无需离开工作区就完成了打磨与部署。可观看 Code A Program 的完整视频，或继续阅读下方的图文版。
在本地运行的 Open Design：一个由你完全掌控的开源、agent 原生设计工作区——不被绑定在单一模型上。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台——Claude Design 和 Figma 的免费替代品。它不把你绑定在某个模型厂商上，而是运行在你已经使用的编码 agent 之上，所以你可以自带 agent、自带 key。
- 开源，Apache-2.0——读每一行代码、自托管，或者直接下载桌面应用。
- 本地运行——项目就存在你机器上你自己的文件夹里，而不是别人的云端。
- 自带 agent——支持 21+ 编码 agent，包括 Claude Code、Codex、Cursor、Gemini、OpenCode 等等；由你决定用哪个 CLI 来驱动生成。
- 不止于原型——网站、原型、幻灯片、图像生成，甚至 HTML 视频，全都在一个工作区里完成。
- 开箱即用——内置 129 套设计系统和 460+ 插件，让你永远不必从一张白纸开始。
如果你用过 Claude Design，会立刻感到熟悉——Open Design 保留了同样从容的体验，然后在上面加上你自己选择的模型。
第 1 步 —— 选择你的 agent 和模型
从 open-design.ai 下载桌面应用，安装它，回答几个简短的引导问题。这就把你带进了主聊天界面。
在右上角选择你的 AI agent 提供方。对于本地 CLI 提供方，你可以选择 Claude Code、Codex CLI、Gemini CLI（它有免费额度）、OpenCode 等。在演示中，Code A Program 使用 OpenCode 搭配 GLM 5.2 模型，因为它在前端工作上一直表现不错——但关键在于灵活性：你不会被锁定在某一个模型或平台上。
第 2 步 —— 写你的提示词
聊天框有一个附加文件选项用于参考材料，还有一个插件区。Open Design 内置 460+ 插件，涵盖构建与测试助手、3D 模型、移动端和桌面端设备外框等——所以当你需要 3D 元素或设备外壳时，加个插件就行，而不必和提示词较劲。
插件库：460+ 插件，涵盖构建、测试、3D 模型、设备外框等等——按你的设计所需添加。
现在粘贴一段需求。演示里的提示词要求做一个面向名为 Draft 的 AI 写作助手的精致落地页，采用克制的石板黑、象牙白和电光橙配色，一个带实时文字生成动画的醒目编辑风英雄区、一个可交互的写作画布、一个三步工作流、一个成果展示区、一个双档定价表、一个 FAQ，以及一个有力的最终行动号召——同时明确避免卡片、渐变、玻璃拟态和千篇一律的机器人图像。
还有一个值得知道的手段：你可以基于来自 Apple、Airbnb、BMW、IBM 或 Spotify 等品牌的流行设计系统来做设计。Code A Program 在这次演示里跳过了它，但当你想匹配某种特定观感时，它就在那里。
第 3 步 —— 看它构建并自我检查
提交提示词，Open Design 就开始准备项目。大约一分钟后，它可能会问几个追问问题——回答它们能得到更好的结果，或者点全部跳过让它继续。
在演示中，落地页本身大约在六分钟内完成。之后 Open Design 会把剩下的时间花在跑自我检查上——校验结构、审视布局、检查动画，并在标记构建完成前修掉一些小问题。完成后，点击演示图标即可在新标签页打开这个网站。
生成的结果：一个带实时打字动画的编辑风英雄区、工作流、成果、定价、FAQ 和页脚——在平板和手机上都自适应。
结果包含一个带 AI 打字动画的英雄区、流畅的滚动效果、一个可交互的编辑器区、一条工作流条带、一个客户成果区、按月/按年的定价、一个 FAQ，以及一个干净的页脚。切换到平板和手机视图，确认响应式设计经得起考验。
第 4 步 —— 用画布工具栏精修
右侧工具栏就是你打磨的地方，无需为琐碎改动浪费 token：
- Screenshot——抓取网站的一张图片。
- Comment——选中任意元素（比如英雄区标题）并描述一个改动，例如把某个词改成橙色主题色。可以批量攒几条评论一次提交，也可以直接发一条到聊天。
- Marker——高亮页面上的任意区域并分享给 agent。
- Element edit——直接更改选中元素的字体、宽度、颜色等等，让简单的微调永远不必整体重新生成。
你还能用到缩放控制以及所有未处理评论的总览。在演示里，那个 “actually” 文字就在工具栏里当场被改成了橙色。
第 5 步 —— 导出与部署
工具栏上方是下载选项——把项目导出为 PDF、图片、ZIP 或 HTML。这里还有存为模板，让你可以把这个设计当作未来项目的起点复用。
分享菜单才是有意思的部分。在那里你可以：
- 一键部署到 Vercel——用一个访问令牌连接你的 Vercel 账户，然后点部署。
- 用同样的方式部署到 Cloudflare。
- 在编辑器中打开，比如 Cursor 或 VS Code，或者在 Gemini CLI、Codex、Claude Code 这类 CLI 工具里打开。Open Design 会把生成的 HTML 连同它的 Skills 文件夹一起交给你，于是你可以把这个设计转成一个 Next.js 项目——或者你喜欢的任何框架。
在设置里，你可以添加全局规则（例如“始终使用 TypeScript”）、像 Claude 的记忆功能那样存下有用的记忆，并配置媒体提供方——用于配音和音效的 ElevenLabs key，以及用于图像生成的 Nano Banana、OpenAI 或 OpenRouter。你还可以添加技能（有一个用于自动化浏览器任务的 agent-browser 技能，以及若干前端技能）、接入 MCP 服务器，并更改默认的项目位置。
让它更好用的小贴士
- 免费模型足够起步。整个演示站点都是用免费的 Gemini 档位生成的，效果依然很棒；当你想在正式工作上追求更高质量时，再上付费模型。
- 在提示前先加好插件，尤其当你知道自己会用到 3D 模型或设备外框时。
- 为改动选对工具——元素编辑器和评论能处理小改动，无需整体重建。
- 把出彩的布局存为模板，让下一个项目赢在起跑线。
常见问题
Open Design 免费吗？ 是的——它在 Apache-2.0 下开源，本地运行免费。你只需为所连接的 agent 和媒体提供方的模型/API 用量付费，而且可以使用像 Gemini 那样的免费档位。
它支持哪些编码 agent？ 21+ 个 agent，包括 Claude Code、Codex CLI、Cursor、Gemini CLI 和 OpenCode。你从右上角菜单选择提供方。
它和 Claude Design 有什么不同？ 同样熟悉的手感，但它开源、本地优先、agent 可插拔——你不会被锁定在某一个模型或平台上，而且你可以按自己的方式导出或部署项目。
我能不离开应用就完成部署吗？ 可以——分享菜单一键部署到 Vercel 或 Cloudflare（你提供提供方的访问令牌），或者把代码交给 Cursor、VS Code 或某个 CLI agent。
要拿到好结果，我必须用付费模型吗？ 不必——对大多数落地页和前端设计来说，免费模型就已经足够能干了；只有当你想要更进阶的结果时，才切到付费模型。
这份图文指南基于 Code A Program 的演示。观看上方完整视频，并订阅 Code A Program 以获取更多实操向的 AI 工具视频。