用 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、具体的参考——它才能产出好设计。SankiWork 打包的正是这些输入，这也是两者天然契合的原因（下文详述）。

从零把 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 的能力——正是 SankiWork 被设计来去编排的那类东西，而不是每个项目里重造一遍。

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 一份精选的设计上下文。逐个项目、用手去维护这份上下文，正是 SankiWork 帮你省掉的苦活。

在 SankiWork 里用 Gemini CLI 做设计

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

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

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

常见问题

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

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

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

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

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

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

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

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

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

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

6. 06 SankiWork 和 Google 有关联吗？ +

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

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

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