用 Gemini CLI 做设计。

Gemini CLI 到底是什么

Gemini CLI 是 Google 为终端发布的开源（Apache-2.0）AI agent。它读取你的代码仓库、编辑文件、运行 shell 命令、抓取网页，还能用 Google 搜索为答案做事实接地——从自然语言任务出发去规划并验证，而不只是补全几行。同一个引擎也驱动 VS Code 里的 Gemini Code Assist agent。

对设计工作而言，有两个特性突出。它的模型原生多模态，所以你把一张截图交给它，它是对着真实布局在推理。它的上下文窗口可达 1M token，大到能一次装下你的整套设计系统、组件库和参考集，而不必把它们摘要掉。

• 上下文文件: Gemini CLI 读取 GEMINI.md 作为持久项目上下文——这正是写入设计约定、token 与审阅清单的天然位置。个人与团队设置可叠加其上。
• 内置工具 + MCP: 它开箱自带文件、shell、网页抓取和 Google 搜索工具，并支持 MCP server（在 ~/.gemini/settings.json 里配置）以引入外部上下文，比如一个实时 Figma 文件。
• 免费起步: 用个人 Google 账号登录即可获得相当慷慨的 Gemini 免费额度；你也可以自带 Gemini API key 或用 Vertex AI。

• 厂商：Google
• 凭证：Google 账号（免费额度）或来自 AI Studio 的 Gemini API key（BYOK）或 Vertex AI
• 许可：Apache-2.0，开源

为什么多模态模型与超大上下文适合做设计

Gemini CLI 在设计上的优势来自两个模型特性——但和所有 agent 一样，审美仍需你来提供。

• 强多模态理解: 因为 Gemini 模型原生多模态，agent 能很好地读参考截图——把它渲染出的产出对照一张图来比对，而不是从文字描述里猜。
• 1M token 上下文窗口: 大上下文意味着整套设计系统、token 和许多参考状态能一次性塞进去，于是 agent 复用你真实的基础元件，而不是另造一次性样式。
• GEMINI.md 里的约定: 一份 GEMINI.md（加上 Figma MCP server）把 agent 指向你的 token、组件和真实规格，让它对着品牌工作，而不是默认观感。

结论和每个 agent 教给我们的一样：Gemini CLI 默认并没有审美。只有当你给它约束——一套设计系统、一个审美 skill、具体的参考——它才能产出好设计。Open Design 打包的正是这些输入，这也是两者天然契合的原因（下文详述）。

从零把 Gemini CLI 配置成能做设计

下面是从一台干净机器，到一个能构建并验证 UI 的 Gemini CLI 的完整路径。

# 1. 安装 Gemini CLI（需 Node 20+）
npm install -g @google/gemini-cli
# 或免安装运行：npx https://github.com/google-gemini/gemini-cli

# 2. 在你的项目里启动，首次运行时认证
cd your-project
gemini            # 用 Google 账号登录，或设置 GEMINI_API_KEY

# 3. 生成项目上下文
/init             # 为本项目生成 GEMINI.md

# 4. 接入 Figma MCP server（可选，用于设计交付）
#    在 ~/.gemini/settings.json 的 "mcpServers" 下添加

• 把设计规则写进去: 把你的 token、基础元件和约定放进 GEMINI.md 并让 Gemini 指向它们，这样产出会贴合品牌，而不是退回到泛泛的样子。
• 加上浏览器验证: 接入 Playwright 或浏览器 MCP，让 Gemini 在真实浏览器里渲染，并跨断点检查产出，而不仅仅确认构建通过。

截图转 UI 的工作流

用 Gemini CLI 做设计、杠杆最高的回路，是把一张参考图变成能跑、且响应式的 UI，并迭代到匹配为止——靠多模态模型把产出对照参考来比对。

1. 从你手上最清晰的视觉参考开始——并且要包含多种状态（桌面与移动、hover、空态、加载态），而不只是一张主视觉。
2. 提示要具体；即便是强模型，含糊的提示也只会产出泛泛的 UI。
3. 把你的设计系统与约定放进 GEMINI.md，并告诉 Gemini token 与标准基础元件在哪里。
4. 跑一个 dev server，让 Gemini 在真实浏览器中渲染，并切到各断点检查结果。
5. 通过让 Gemini 把它的实现对照截图来迭代——而不只是确认能构建通过。

用 @ 引用一张图片把它附到提示里，然后用具体约束给出提示：

gemini
# 在提示里：
> @reference-desktop.png @reference-mobile.png
  用 React + Vite + Tailwind + TypeScript 实现这个设计。
  复用 GEMINI.md 里我现有的设计系统组件和 token。
  匹配间距、布局和层级；做成响应式。
  在浏览器中渲染，并迭代到 UI 在各断点上都与参考一致。

提示保持小而聚焦，好的迭代就提交、坏的就回退（回退时告诉 Gemini 一声），让每一轮都建立在干净的基础上。

GEMINI.md、MCP 与扩展

三个扩展点让 Gemini CLI 在持续的设计工作中真正好用，而且它们都能干净地映射到一套开放的设计工作流上。

• GEMINI.md 上下文: 项目规则放在仓库根目录的 GEMINI.md（还有全局与团队层）。它是你设计约定的长期归宿，每次运行都会读取。
• MCP server: 在 ~/.gemini/settings.json 下配置 MCP server——这是把设计上下文和外部工具（最相关的是 Figma MCP server）引入进来的可移植方式，跨 agent 通用，而不只服务于 Gemini。
• 扩展与内置工具: Gemini CLI 的扩展，以及它内置的 Google 搜索、文件、shell、网页抓取工具，让它能在不离开终端的情况下收集参考、跑完验证回路。

这些都是可移植、跨 agent 的能力——正是 Open Design 被设计来去编排的那类东西，而不是每个项目里重造一遍。

Gemini CLI vs Codex vs Claude Code vs Cursor 做设计

做设计没有唯一赢家——每个 agent 各有所长，有经验的团队会把它们叠着用。一个公允的总结：

社区反复得出的结论是：审美来自人。它们在没有 skill、参考和约束时都会退回到一个泛泛的样子。那才是真正要解决的问题——而它是“设计工具”形状的，不是“模型”形状的。

常见坑，以及如何避开“AI 味”观感

对 AI 生成设计最常见的抱怨，是它看着很泛——柔和渐变、悬浮面板、过大的圆角、夸张阴影，一股“Inter 字体加紫色”的味道，“一看就是 AI 做的”。其他被反映的问题还包括移动端布局错乱、指令文字泄漏进 UI 文案里。这些都不是 Gemini CLI 独有的；它们是任何 agent 在缺少精选设计上下文时都会发生的事。

• 加一个审美 skill: 一个精选的设计 skill 会逼 agent 选定一个真实方向，而不是用默认那套。
• 在真实浏览器里验证: 用多模态模型跨断点渲染并自检，这样布局就不会在移动端悄悄崩掉。
• 提供 token 和参考: 真实的设计 token 和参考截图，是对产出质量影响最大的那个杠杆。
• 把规则写进 GEMINI.md: 把“不要 hero 卡片、最多两种字体、品牌优先层级”这类规则，放在 agent 每次都会读到的地方。

注意到没有：每一条缓解措施都是在给 agent 一份精选的设计上下文。逐个项目、用手去维护这份上下文，正是 Open Design 帮你省掉的苦活。

在 Open Design 里用 Gemini CLI 做设计

Open Design 就是上面这套工作流一直在要的那一层开源设计层。它把 Gemini CLI 当作一等适配器，外面裹上一个精选的 skill 与设计系统库、一条结构化的渲染流水线，以及一个本地桌面端 UI——让那份让 Gemini 变好用的设计上下文，从第一次运行就在那儿，而不是每次都手工拼。两者都开源、都本地优先，这让搭配水到渠成。

1. 安装 Open Design，选 Gemini CLI 作为你的 agent。
2. 用你的 Google 账号或 Gemini API key（BYOK）认证——凭证留在你的机器上，绝不经我们代理。
3. 挑一套设计系统和一个 skill，然后生成审美一致的演示稿、原型和落地页。
4. 每一份产物和 DESIGN.md 都存在你自己的 repo 里，而不是某个托管云。

同一个 Gemini CLI agent、同一把密钥——外面再加一套真实、可移植、开源的设计工作流。它本地优先、Apache-2.0 授权，所以你的工作和凭证没有任何东西会离开你的机器。

常见问题

1. 01 Gemini CLI 真的能做设计吗？ +

   能——只要上下文里有一个审美 skill、一套设计系统和真实参考图，Gemini CLI 就能产出生产级、响应式的 UI，而它的强多模态模型会把产出对照参考做验证。缺了这份上下文，它就容易退回到泛泛的样子，而这正是 Open Design 补齐的缺口。

2. 02 用 Gemini CLI 做设计要付费吗？ +

   不一定——用 Google 账号登录就有相当慷慨的免费额度，你也可以自带 Gemini API key（BYOK）或用 Vertex AI。无论哪种方式，Open Design 都不会代理你的凭证。

3. 03 Gemini CLI 在设计上具体强在哪？ +

   两点：它的模型强多模态，能很好地读参考截图；它的 1M token 上下文能一次装下整套设计系统和参考集。这都有帮助——但审美仍来自你提供的设计系统、skill 和参考。

4. 04 前端设计选 Gemini CLI 还是 Claude Code？ +

   两者都很强。Claude Code 以具体、懂代码库的设计决策著称；Gemini CLI 的优势是多模态理解加超大上下文和免费额度。很多团队两个都用——Open Design 让你切换 agent 时无需改动设计工作流。

5. 05 怎么把 Gemini CLI 连到 Figma？ +

   在 ~/.gemini/settings.json 的 mcpServers 下加上 Figma MCP server。Gemini 就能拉取真实的设计上下文——组件、变量、布局数据——让生成的代码贴合源设计，而不是近似。

6. 06 Open Design 和 Google 有关联吗？ +

   没有。Gemini CLI 是 Google 的产品；Open Design 是一个独立的开源项目，把它作为一等适配器来支持。Gemini 是 Google 的商标。

7. 07 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先、Apache-2.0。你的文件、产物和 DESIGN.md 都留在你自己的 repo 里，你的 Google 凭证由你的 agent 直接使用，绝不经 Open Design 的服务器中转。