乐于分享
好东西不私藏

前Google高手做了一套反AI审美工具,18个命令治好你的AI设计脸盲症

前Google高手做了一套反AI审美工具,18个命令治好你的AI设计脸盲症

码间AI楠哥 · 前沿工具解读

你的 AI 写代码很强,但做出来的页面是不是都长这样:

Inter 字体、紫色渐变、到处都是圆角卡片、深色背景带发光效果、弹窗一关又弹一个。

恭喜你,你中了”AI 设计脸盲症”。

Paul Bakaus——Google 前 Web 性能团队负责人——受不了了。上周他发了 Impeccable 2.0,一个开源的 AI 设计技能包。核心理念很简单:AI 模型都从同一批模板学的设计,所以它们犯的错也一模一样。Impeccable 命名这些错误,检测它们,并教会 AI 避开它们。

PART 01

PART 01 问题:AI 的设计从哪来,就长成啥样

大模型的设计审美,本质上是训练数据的均值。

网上什么样的网页最多?Bootstrap 模板、Material Design、Tailwind 默认配置。AI 从这些”大多数”里学到了什么?

  • 字体永远是 Inter 或 Roboto
  • 配色永远是青色 + 紫色 + 霓虹点缀
  • 布局永远是等宽卡片网格
  • 标题上面永远放一个圆角大图标
  • 动效永远是弹跳缓动(bounce easing)
  • 深色模式永远带发光描边

这不是 AI 不行,是 AI 太”行”了——它精准地复现了互联网上最平庸的设计共识。

Paul Bakaus 管这个叫 “monoculture”(设计单一化)。Impeccable 的使命就是打破它。

PART 02

PART 02 方案:一个技能包 + 18 个设计命令

Impeccable 不是一个新工具,而是一套设计技能包(skill),直接装进你现有的 AI 编程工具里。

支持的工具:Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、OpenCode 等等。

安装方式超简单:

npx skills add pbakaus/impeccable

装完之后,你的 AI 编程助手就多了 18 个设计命令:

创建类

  • /impeccable — 生成有辨识度的、生产级的界面
  • /shape — 先设计后编码,先做用户调研再写代码

评估类

  • /critique — 从 UX 视角评估设计质量
  • /audit — 技术质量检查(无障碍、性能、响应式)

打磨类

  • /typeset — 改善字体排版
  • /layout — 改善间距和视觉节奏
  • /colorize — 有策略地加颜色
  • /animate — 加有意义的动效
  • /delight — 加惊喜感
  • /bolder — 把无聊的设计变大胆
  • /quieter — 把过火的设计调淡

简化类

  • /distill — 去繁就简
  • /clarify — 改善文案表达
  • /adapt — 跨设备适配

加固类

  • /polish — 上线前最终打磨
  • /optimize — UI 性能优化
  • /harden — 生产环境加固

系统类

  • /impeccable teach — 为项目设置设计上下文
  • /impeccable extract — 提取可复用组件到设计系统

这些命令可以串联使用:

/audit                          # 全站扫描问题

/audit blog                     # 只审计博客页面

/polish checkout-form           # 打磨结账表单

/audit /polish blog             # 审计 + 打磨一条龙

PART 03

PART 03 杀手锏:25 条反模式检测

Impeccable 最实用的功能不是那 18 个命令,而是反模式检测器

它定义了 25 条确定性规则,专门抓 AI 常犯的设计错误。不需要 LLM,纯正则 + 静态分析,扫一遍代码就知道哪里有问题。

字体反模式

  • 使用 Inter、Roboto、Arial 等过载字体
  • 用等宽字体假装”技术感”
  • 全站只用一个字体家族
  • 字号层级太平,看不出层次

颜色反模式

  • 灰色文字放在彩色背景上(看不清)
  • 纯黑 #000 或纯白 #fff(永远要带色调)
  • AI 经典配色:深色背景 + 青色 + 紫蓝渐变 + 霓虹点缀
  • 用渐变色当文字(花哨不高级)
  • 默认深色模式 + 发光描边

布局反模式

  • 所有东西都包卡片
  • 卡片里面套卡片
  • 等宽等高的卡片网格无限复制
  • “大数字 + 小标签”的 Hero 指标模板
  • 什么都居中
  • 全站用同一个间距值

动效反模式

  • 动画布局属性(width、height、padding)
  • 弹跳缓动(2026 年了还 bounce)

# 直接扫描项目

npx impeccable detect ./src

# 扫描线上页面

npx impeccable live https://your-site.com

PART 04

PART 04 核心洞察:字体选择的”反反射”流程

Impeccable 里最让我拍案叫绝的,是它的字体选择流程

它要求 AI 在选字体之前,必须执行以下步骤:

第一步:写出品牌的 3 个具体关键词。不是”现代”、”优雅”这种废话,而是”温暖 + 机械 + 有态度”、”冷静 + 临床 + 谨慎”、”快 + 密集 + 不屑”。

第二步:写下你第一个想到的 3 个字体。然后——全部否决。因为 AI 的第一选择一定是训练数据里的高频字体,而高频 = 平庸。

第三步:带着品牌关键词去字体目录(Google Fonts、Pangram Pangram、Future Fonts 等)找一个像”物理对象”的字体——博物馆展品的说明文字、手绘店铺招牌、70 年代主机终端手册、大衣内侧的织物标签。

第四步:交叉验证。优雅不一定是衬线体,技术不一定是等宽体,温暖不一定是 Fraunces。如果最终选择符合直觉模式,回到第三步。

这个流程的核心思想:打破反射性选择,强迫模型做它不自然会做的事。

这个”反反射”流程太牛了。不只适用于字体——任何 AI 生成内容的”同质化”问题,都可以用类似方法解决:先让 AI 列出它的默认选项,然后强制否决,迫使它走得更远。

PART 05

PART 05 实测验证:AI 输出的多样性到底提升了多少

Paul Bakaus 建了一套内部评估框架,让同样的设计需求在有/无 Impeccable 的情况下,分别用 GPT-5.4 和 Qwen 3.6 Plus 跑一遍,然后测量输出落入”设计单一化”的程度。

结果:有 Impeccable 的情况下,字体和颜色的多样性显著提升,整体质量更高

关键机制叫 anti-attractor(反吸引子)程序:强制模型先枚举出它的反射性默认选项,然后明确拒绝它们,再做选择。

在 15 个细分领域上验证有效。

简单说:Impeccable 让 AI 从”做安全的设计”变成”做有个性的设计”。

PART 06

PART 06 我的判断

三个观点:

第一,Impeccable 解决的是真问题。 AI 生成的前端代码审美趋同不是假象,是训练数据偏差的必然结果。18 个命令 + 25 条反模式检测,是从规则层面纠正这种偏差。

第二,”先设计后编码”的理念值得关注。 /shape 命令在写代码之前先做用户调研、生成设计 brief,然后 /impeccable craft 根据 brief 实现。这比”让 AI 直接写代码”有效得多——方向对了,执行才有意义。

第三,这东西对非设计师特别有用。 你不需要懂设计,只要知道怎么用 18 个命令,AI 就能帮你产出专业级的设计。命令本身就是设计知识的封装。

安装方式:

npx skills add pbakaus/impeccable

开源地址:github.com/pbakaus/impeccable(Apache 2.0)

关注码间AI楠哥,追踪 AI 开发工具最前沿。

THANKS FOR READING

⚡ 爱马仕 · Hermes Agent 技术分享