用 AI 做前端设计的时候，我不太满意模型自己的设计能力。我自己用 Codex 比较多，GPT 在 UI 和 UX 上的表现一直不太理想。

市面上有不少前端设计规范的 skill，它们大多给出一些 know-how，指导 Agent 写出更好的设计代码。但这类 skill 有两个绕不开的问题：

  • 太具体的 skill 只适合新项目。给出具体的字体、配色规范，用在已经有自己设计风格的项目上，同质化会比较严重；
  • 太通用的 skill 又很难真正指导 Agent。笼统的建议对一个设计能力不强的模型没有约束力，两三轮对话之后上下文变长，这些信息就不会再被遵循了。

前端设计 skill 很容易卡在两头：太具体、太通用、上下文不足

我认为一个好的设计 skill，应该能基于任何场景动态地给出精确的建议。比如我觉得某个表格的排版总是差点意思，这时候最依赖的是一个更强的模型，它能基于现有的上下文给出判断，精细化地指导当前的模型怎么操作。

为什么让 Gemini 当顾问，而不是当 Agent

在我之前的实践里，Gemini 的设计能力是最好的，不论 UI 还是 UX，它在理论知识和写代码上都有更好的设计洞察。但 Gemini 不适合做 Agent 的机座模型，它的指令遵循性比较差。如果大家在 Antigravity 或者 Cursor 里用过 Gemini，应该有体会：两三轮之后它就没办法正常执行任务了。也是因为在 Agent 时代掉队，很多人把 Gemini 叫作北美豆包。

所以我的做法是：不让 Gemini 驱动 Agent，而是让它当外部的设计顾问。Agent 负责读项目、做实现，Gemini 只负责判断视觉质量。

Gemini 当外部设计顾问：Agent 读项目做实现，CLI 分流设计任务，Gemini 判断视觉质量

Gemini 单次生成的 HTML 设计效果，相对其他模型会更惊艳，尤其是在少提示词的情况下，不用刻意指引，它就能做出比较好的设计，创造力更强。给大家看几个它做的页面。

比如这个落地页，它很有创意地用了手写的字体加上一个小点，这是其他模型比较少做的处理，很没有 AI 味。

Gemini 设计的落地页，标题是手写字体加一个小点

这个类似演唱会的网站，下面是不同场次的信息。

Gemini 设计的演唱会网站，按场次列出演出信息

这个类似游乐园的网站，它比较懂得怎么处理抽象的符号，在材质和光影上也更有心得。

Gemini 设计的游乐园风格网站

还有这个宠物页面，我觉得也做得挺不错的。

Gemini 设计的宠物主题页面

但单个 HTML 做得好，解决不了日常更高频的需求：我们更多时候是在已有的系统里做精细化调整。Gemini 生成一个 70 分的 HTML，想让它改成 80 分，它给出的又会是一个完全不同的新页面，因为它不在 Agent 里面，每次都是一次独立的对话。我真正想要的效果是：Gemini 能精确地指导我现有的 Agent（比如 Codex）去改代码，而不是它自己去改。它只要输出优化建议就够了。

Gemini Designer skill 的结构

这两天我不断摸索怎么优化这个流程，最后把 Gemini Designer skill 改了一版。现在它是一个 CLI，内置了提示词和四个命令：advise、direction、html 和 svg。

advise 是最高频的一个，它可以给 Codex、Claude Code 这类 Agent 的机座模型提供精细化的设计建议。调用时可以传现有的文件和参考图：-f 指定 HTML 等外部文件，-i 传参考图。

gemini-designer advise \
  "给这个页面提视觉建议" \
  -f ./design.html \
  -i ./current.png \
  -o page-advice.md

advise 命令的用法和参数

给大家看一个实际对话。我刚让 Codex 生成了一个十页的 PPT，现在想优化它，就在对话里用斜杠调用 Gemini Designer，让它给一些设计建议。

在 Codex 对话里调用 Gemini Designer 优化 PPT

Codex 会调用 CLI 命令，把原始的 HTML 文件带上。Gemini 返回一个 markdown 文件，里面是文字版的设计建议：它指出代码块缺乏信息层级、架构图关系表现力不足、所有页的阅读节奏比较平淡，然后给出可以落地的优化建议，具体到要调整哪个模块、加什么样式，还会附上伪代码。Codex 读完这个 markdown 之后再去改 HTML，效果会比我口述「你这个做得不好，一点一点改」好很多。

Gemini 返回的建议 markdown：问题排查、可执行的优化建议和伪代码

这里面还有一层约束：skill 的描述里要求 Agent 尽可能复用系统里已有的组件，而不是重新做一套；如果项目里有 design.md、globals.css 这类设计规范文件，Agent 会主动把它们一起传给 Gemini，让 Gemini 按照系统现有的风格来发挥。这样等于把 Gemini 的设计知识注入 Codex，可以用比较低的成本做出比较好的设计。

另外三个命令：

  • direction：新项目开始时生成整个项目的设计意象，也就是最大方向的设计参考。之后每个设计的实现路径可以不同，但整体给人的感觉是一致的；
  • html：让 Gemini 直接画出实际的设计稿，可以是一个完整的页面，也可以是页面里的不同组件，小的精细化改动仍然交给 Codex 完成；
  • svg：Gemini 在 SVG 方面非常在行。前面落地页的手写字体效果就是它用 SVG 实现的，类似的还有花体字墨迹走过的加载动画、iPhone 的 Hello 效果。这类普通 CSS 样式很难实现的设计感，可以单独走 svg 命令。

direction 和 html 命令：一个找方向，一个出草案

使用边界

总结一下这个 skill 的边界：

  • Gemini 不驱动 Agent，每次都是独立对话，没有记忆，也不会修改项目内的文件；
  • 已有 UI 的优化，大部分情况用 advise，让主 Agent 去修改，效果比较好。也就是 Gemini 给判断，Agent 做实现；
  • 建议类的输出（设计意象 markdown、HTML 草稿），人可以先介入确认。我自己会先读一遍 Gemini 给的建议，觉得有道理再让 Codex 执行；觉得写得不好，就把我的意见告诉 Codex，Codex 会带上我的意见再调用一次 Gemini，重新生成一份设计建议。

使用边界：Gemini 没有记忆、已有 UI 用 advise、Gemini 给判断 Agent 做实现、建议类输出先确认

安装方式

这个 skill 在 GitHub 上开源。最简单的安装方式是把仓库链接丢给 Codex、Claude Code 或者任何 Agent，让它自己完成安装：

https://github.com/oil-oil/gemini-designer

也可以在终端直接安装：

npx skills add oil-oil/gemini-designer

Gemini Designer 仓库的安装说明

安装完成后需要配置一个外部的 API Key。我目前默认接的是 zenmux 这个平台，大家可以让 Codex 把 skill 里的端点修改成自己已有的 Gemini 端点，自己有哪个 Gemini 就用哪个，模型统一使用 Gemini 3.1 Pro。

另外我最近还在测试 GLM 5.2 的设计效果能否替代 Gemini。目前 GLM 的套餐比较难抢，速度会比 Gemini 慢一点，也没有视觉识别，在精细化调整的时候效果暂时不如 Gemini Designer。后续有新的可用效果我再分享。