Claude Design 落幕了……最好的免费 Claude Design 替代方案(无限量、开源)
搭建 Open Design 并用 Gemini CLI 驱动它,让高保真 AI 设计生成运行在 Gemini 免费额度上——一个开源、本地优先的工作空间,无需为 agent 付费即可使用。
本指南将向你展示如何用 Gemini CLI 作为驱动生成的 agent 来运行 Open Design——这样原型、落地页和 UI 都从同一个工作空间产出,同时依托 Gemini 慷慨的免费额度。它遵循 Sandeep Singh 在他的实操演示中走过的路径,并经过改写和更新以契合当前版本。可观看上方视频获取实时版本,或继续往下阅读。
成本这件事才是重点。Open Design 本身免费且开源;你唯一需要“付费”的是你自带的 agent 和模型。带上 Gemini CLI,用你的 Google 账号认证,这笔账单实际上就降到了零。
Open Design 工作空间——开源、本地优先,由你连接的任意编码 agent 驱动。
什么是 Open Design?
Open Design 是一个开源、本地优先的设计平台,它运行在你已经在用的编码 agent 之上,而不是把你锁定在某一个模型供应商上。它是“自带 agent”模式:Claude Code、Codex、Cursor、Gemini、GitHub Copilot、OpenCode 以及 21 种以上的其他 agent 都能各自驱动生成。你挑选 agent;Open Design 负责设计层面。
有几点让它值得一看:
- 开源,Apache-2.0 —— 克隆它、自托管它、逐行读它的代码。
- 本地运行 —— 你的项目保存在你自己机器上的文件夹里,而不是别人的云端。
- 可插拔 agent —— 支持 21 种以上的编码 agent,包括 Gemini CLI;由你选择哪一个来驱动生成。
- 不止于原型 —— 原型、实时产物、幻灯片、杂志版式、图像生成,乃至视频,全都来自同一个工作空间。
- 内置起点 —— 品牌化的设计系统和模板开箱即带,让你永远不必面对空白画布。
它凭自身实力立足:一个本地、与模型无关的设计工作空间。它能与 Gemini CLI 这类免费 agent 干净利落地配合,则是让它真正可以免费使用的额外加分。
开始之前
你有三种方式安装 Open Design。挑一个适合你的:
| 方式 | 适合谁 | 要求 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。只需下载并打开。 |
| 从源码运行 | 想阅读或修改代码的开发者 | Node ~24,pnpm 10.33.x |
| 装进你的 agent | 习惯在终端里工作的人 | 已有的编码 agent CLI |
如今推荐走桌面应用这条路——无需 Node、无需 pnpm、无需克隆。Sandeep 直接从最新版本下载适用于他平台的安装包(macOS 上的 .dmg,Windows 上的 setup.exe)。
第 1 步 —— 安装 Open Design
方案 A —— 桌面应用(推荐,零配置)
前往 open-design.ai 并点击 Download desktop。提供 macOS(Apple Silicon 和 Intel)、Windows(x64)以及 Linux(AppImage)版本。安装后,应用会自动检测你 PATH 上已有的每一个编码 agent CLI,并为你加载内置的 skills 和设计系统。首次启动时你会进入连接界面,在那里选择本地 CLI 或粘贴你自己的 API key。
方案 B —— 从源码运行
如果你更愿意从仓库运行,只需要寥寥几条命令:
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web
然后打开它打印出的本地 URL——端口是动态分配的,所以请使用终端里实际出现的地址,而不是某个固定地址。你需要 Node ~24 和 pnpm 10.33.x;Corepack 会为你选定锁定的 pnpm 版本。
方案 C —— 装进你的编码 agent
若想完全不打开 GUI 就使用 Open Design——把它作为 agent 内部的 skill 或 MCP 服务器调用——运行:
od mcp install <agent>
# <agent> = gemini | claude | codex | cursor | copilot | opencode | …
然后,在 agent 内部,只需提问:Use open-design to generate a landing page with a modern minimal design system。
把 Gemini CLI 连接为你的 agent
这一步让整个工作流变免费。Open Design 不自带模型——它驱动你指向的任意 CLI——所以你带上 Gemini CLI,让它的免费额度来干活。
为什么选 Gemini CLI?正如 Sandeep 所说,有两个理由:Gemini 模型实力不逊于其他模型,而且免费额度很慷慨。用 Google 账号登录,你每天就能免费获得大量请求配额;Gemini API key 的免费额度则要小一些。对于持续的设计工作,应当用 Google 账号登录。
- 安装 Gemini CLI。按照 Gemini CLI 主页上的安装命令操作(macOS 和 Linux 上用 Homebrew,其他平台用文档中说明的安装程序)。任何终端都行。
- 运行
gemini并认证。启动它,在提示时信任工作文件夹,然后选择 Sign in with Google。浏览器会打开进行两次点击的 Google 登录并报告成功。重启 Gemini CLI;你应该会看到正在使用的模型以及配额用量为0%。 - 让 Open Design 指向它。重启 Open Design 并打开 Settings。Gemini CLI 此时会作为可用 agent 出现——选中它,Test the connection,你应该会收到一个
OK。保存,你就可以开始设计了。
你也可以在这里粘贴自己的 API key 而不使用本地 CLI,并且如果之后想做媒体生成,还可以为图像、视频和音频模型添加各自独立的 key。不过,对于免费、近乎无限的设计工作,Gemini CLI 登录就够了。Settings 里的一切之后都可以更改,所以第一遍尽量保持简单。
探索工作空间
Open Design 让你的工作以项目为单位:每个项目都在它自己的文件夹里,切换文件夹即切换项目。在一个项目内部,你可以创建原型、实时产物、幻灯片、图像,乃至视频和音频——不只是 UI。
设计系统库——可预览并嵌入任意项目的品牌化起点。
内置的设计系统库为你提供可预览和复用的品牌化起点,让你在能开始之前不必卡在定义 token 上。你也可以自带设计系统、导入现有的 Claude Design 项目,或从零开始让 Open Design 推断出合理的默认值。
模板:原型、幻灯片、图像和视频起点——按类型筛选并 fork 即可开始。
模板库的覆盖范围超出品牌系统,延伸到原型、幻灯片,以及图像和视频生成。按类型筛选,fork 任意一个作为你的起点。在安装任何东西之前,你可以在网页上浏览完整的插件库:open-design.ai/plugins。
动手做点东西
连接好 Gemini CLI 后,构建流程与 Sandeep 在视频里跑的那套相同:
- 创建一个项目。给它命名,选一个契合你想要外观的设计系统,并选择 High fidelity,这样你看到的是真东西而非线框图。
- 写下需求简介。不要用推荐的提示语之一,而是描述你想要什么——Sandeep 要的是一个落地页。你也可以附上一张你喜欢的版式截图,让 Open Design 遵循那个主题。
- 回答澄清问题。agent 会提出聪明的追问:单一落地页还是落地页加定价页、响应式界面、面向谁、视觉调性(Sandeep 选了现代、极简、Linear/Vercel 那种感觉),以及任何品牌色或字体。你可以把字段留空,或让它替你定一个方向。
- 选一个视觉方向并生成。从提议的方向中选一个,发送,几秒后带有你所要求板块的、已设好样式的落地页就出现了。
- 通过提示语来迭代。想换个 logo、补一个缺失的图标,或扩展一下 FAQ?只需描述这个改动并发送。如果某次编辑把别的东西弄乱了,再来一条提示语就能把它推回原位。
满意之后,打开设计文件、检视源代码、如果愿意可手动编辑图层,然后导出——PDF、PPTX、一个压缩包,或部署到 Vercel。
免费这部分是真的:Sandeep 做了两个原型并经过多次迭代,事后查看他的 Gemini 用量时,只花掉了大约每日额度的 2%。每天都在刷新的大额每日配额,让你几乎可以连续不断地设计,而不必盯着计量表。
小贴士
- 用你的 Google 账号登录 Gemini CLI,而不是用 API key——每日免费额度要大得多,这正是让此工作流实际上免费的原因。
- 从高保真开始,当你想判断真实的设计时;只在想快速勾勒结构时才退回到线框图。
- 用 Gemini CLI 中的
stats查看你的用量,看看相对于你的每日额度,设计工作实际花费有多么微乎其微。 - 你的设计始终跟着项目文件夹走——通过对正确的目录运行 Open Design 来组织你的工作。
- 你无需先有设计系统才能开始。从内置的某一个开始、导入一个 Claude Design 项目,或让 Open Design 推断默认值。
常见问题
它真的免费吗? 实际上是的。Open Design 在 Apache-2.0 下开源,所以软件本身不花一分钱。唯一的成本是你自带的 agent 和模型——而通过 Google 账号认证的 Gemini CLI,你动用的是大额的每日免费额度。在视频中,两个原型加上迭代只用掉了当天配额的大约 2%,而该配额每天都会刷新。
它支持哪些编码 agent? 21 种以上的 agent,包括 Gemini、Claude Code、Codex、Cursor、GitHub Copilot 和 OpenCode。Open Design 会检测你机器上已安装的 CLI,并让你选一个作为默认。
我必须用 Gemini CLI 吗? 不必。Gemini CLI 是通往免费、高配额配置的路径,但你可以连接任何受支持的 agent,或为某个 agent,又或为图像、视频和音频模型粘贴你自己的 API key。
开始之前我需要先有设计系统吗? 不需要。Open Design 自带品牌化的设计系统和模板作为起点,你也可以导入现有的设计系统,或让它推断出合理的默认值。
这篇书面指南基于 Sandeep Singh 的实操演示。观看上方完整视频,并订阅 Sandeep Singh 以获取更多实用的 AI 工具教程。