Guoxudong.io
语言 / Language
简体中文
English
首页
博客
关于我
Quick Reference
浏览所有文章
Skill

Impeccable：终结 AI 生成「设计垃圾」的开源利器

6 分钟阅读
#AI #前端设计 #Claude Code #Cursor #设计系统 #开源

如果你最近在用 Claude Code、Cursor 或任何 AI 编码工具生成前端界面，大概已经见过这样的场景：Inter 字体、蓝紫渐变背景、嵌套在嵌套里的卡片、灰色文字压在彩色底上……开发者社区给这类输出起了个名字——AI Slop（AI 垃圾）。

问题不出在模型能力上。Claude、GPT、Gemini 完全知道 OKLCH 色彩空间是什么，也清楚 8px 基准网格和垂直排版节奏的意义。但它们几乎从不主动应用这些原则——因为没人要求。这是一个词汇鸿沟：开发者的意图与 AI 的执行之间，缺少一套共同语言。

Impeccable 就是为填补这条鸿沟而生的。

作者 Paul Bakaus 与他的「建桥」惯例

在深入技术细节之前，有必要了解这个项目背后的人。Paul Bakaus 的职业履历有一个鲜明规律：每当技术浪潮催生出新的工具鸿沟，他就出手造桥。

  • 创建了 jQuery UI，那套界面库在鼎盛时期覆盖了约 20% 的互联网站点
  • 打造了第一个无插件、完全运行在浏览器中的 HTML5 游戏引擎 Aves Engine，随后被 Zynga 收购
  • 在 Google 主导 Chrome DevTools 的产品方向，推动了 AMP 和 Web Stories 的落地，还成为 Google 史上第一任 Head of Creator Relations
  • 在 Spotter 担任 EVP of Product & Creator Tools，为 YouTube 创作者构建 AI 创作工具

Impeccable 延续了同一逻辑：AI 辅助编码制造了新的执行鸿沟，他再一次来填。

它究竟是什么？

很多人第一次看到 Impeccable 会产生误解——它不是组件库，不是 CSS 框架，也不是设计系统模板。

Impeccable is not a component library. It is not a design system. It is not a CSS theme. It is a vocabulary layer that sits between your intent and the AI’s execution.

—— emelia.io 对 Impeccable 的定位概括

这个定位很关键。Impeccable 的核心是一套语义化的引导系统，由三根支柱撑起：

graph TD
    A[Impeccable] --> B[增强 Skill
7 个领域参考文件]
    A --> C[23 条指令
完整的设计语言]
    A --> D[反模式库
明确告诉 AI 不该做什么]
    B --> E[typography / color / spatial
motion / interaction / responsive / ux-writing]
    C --> F[craft / teach / shape / audit
polish / bolder / animate ...]
    D --> G[Inter 字体滥用
紫色渐变泛滥
卡片嵌套卡片 ...]

支柱一：增强版 Skill

Anthropic 官方推出过 frontend-design skill，用于引导 Claude 产出更好的 UI 设计。Impeccable 在此基础上做了大幅扩展，增加了 7 个领域专项参考文件：

参考文件覆盖内容
typography字体系统、字体搭配、模数比例、OpenType 特性
color-and-contrastOKLCH 色彩空间、中性色染色、深色模式、无障碍对比度
spatial-design间距系统、栅格布局、视觉层级
motion-design缓动曲线、动画错排、减少动效偏好
interaction-design表单设计、焦点状态、加载模式
responsive-design移动优先、流式设计、容器查询
ux-writing按钮文案、错误提示、空状态文本

这些文件不是泛泛的设计建议，而是高密度的专业知识，直接"喂"给 AI，改变它的默认输出偏好。

支柱二：23 条设计指令

所有指令都通过 /impeccable 前缀访问，形成一套完整的设计工作流语言（以下列出核心指令，完整列表见官方文档）：

核心工作流指令

指令作用
/impeccable craft完整的形态→构建流程，含可视化迭代
/impeccable teach一次性设置：收集设计上下文，生成 PRODUCT.md 和 DESIGN.md
/impeccable document从现有代码反向生成 DESIGN.md
/impeccable shape编码前规划 UX/UI
/impeccable extract将可复用组件和设计 token 提取到设计系统中

审查与质检指令

指令作用
/impeccable critiqueUX 设计评审：层级、清晰度、情感共鸣
/impeccable audit技术质量检查：无障碍、性能、响应式
/impeccable polish上线前最终打磨，对齐设计系统
/impeccable harden错误处理、国际化、文字溢出、边缘情况

风格调节指令

指令作用
/impeccable bolder放大平淡的设计
/impeccable quieter收敛过于张扬的设计
/impeccable distill剥离到核心本质
/impeccable colorize引入战略性色彩
/impeccable typeset修正字体选择、层级和尺寸
/impeccable layout修正布局、间距和视觉节奏
/impeccable animate添加有目的的动效
/impeccable delight增添令人愉悦的细节
/impeccable onboard设计首次运行流程和空状态
/impeccable overdrive极限拉满

除上述 19 条外，还有 /impeccable live（实时预览迭代）、/impeccable carbonize、/impeccable likeness 等专项指令，共计 23 条。

支柱三：反模式库

这是 Impeccable 最有意思的部分——它明确告诉 AI 不该做什么，而不仅仅是提供正面引导。

AI 的训练数据充斥着大量同质化的前端模板，造成了根深蒂固的「审美偏见」。反模式库直接对抗这种偏见，比如：Inter 字体的过度滥用、千篇一律的蓝紫渐变、卡片里套卡片的信息堆砌、彩色背景上的灰色文字……

通过显式列出这些「雷区」，AI 在生成界面时会主动绕过这些陷阱。

「为产品而生的设计」

Impeccable 的一个核心主张值得单独拿出来谈：设计应该服务于具体业务，而不是泛泛的第一印象。

大多数 AI 工具会一次性生成一个看起来「差不多」的 mock。Impeccable 的做法不同——它先通过对话了解：目标受众是谁？品牌个性是什么？有哪些不希望参考的风格？整体审美方向如何？

这些信息被捕获并保存在 PRODUCT.md 和 DESIGN.md 中，之后的每一条指令都会自动加载这两个文件。结果是：输出的设计真正契合那个业务，而不是某个「通用 SaaS 产品的通用印象」。

sequenceDiagram
    participant Dev as 开发者
    participant AI as AI 工具
    participant Files as PRODUCT.md / DESIGN.md

    Dev->>AI: /impeccable teach
    AI->>Dev: 询问受众、品牌、审美偏好
    Dev->>AI: 提供上下文
    AI->>Files: 保存设计上下文
    
    Dev->>AI: /impeccable craft（后续任何指令）
    AI->>Files: 自动加载设计上下文
    AI->>Dev: 输出契合业务的界面设计

兼容性与安装

Impeccable 支持当下主流的 AI 编码工具：Cursor、Claude Code、Gemini CLI 和 Codex CLI。

安装方式从 impeccable.style 下载对应的预构建包，按照文档将 skill 文件放置到 AI 工具的配置目录中即可。GitHub 仓库 pbakaus/impeccable 提供了完整的源码和安装说明。

项目影响力

项目在 GitHub 上的增速颇为亮眼。Impeccable 在短短几天内就突破 10k star，目前已经突破 22k。对于一个定位如此垂直（专门解决 AI 设计质量问题）的工具性项目来说，这个数字说明它击中了大量开发者的真实痛点。

目前仓库有 15 位贡献者在持续迭代，项目也在积极响应社区反馈——最近的更新修复了 /impeccable live 指令在 SvelteKit 等框架中的多个 bug。

与官方 frontend-design Skill 的关系

Impeccable 与 Anthropic 官方的 frontend-design skill 并不是竞争关系，而是扩展与增强。

官方 skill 提供了一个基础的设计引导层；Impeccable 在这之上叠加了更深的专业知识（7 个领域文件）、更完整的工作流语言（23 条指令）和更明确的负向约束（反模式库）。如果把官方 skill 比作入门级设计提示词，Impeccable 就是配套了完整工具箱的专业版。

一点冷静的观察

Impeccable 的思路是正确的，但也有值得关注的地方：

项目还在快速迭代。命令数量从早期版本的 17 条增长到现在的 23 条，部分指令名称也发生了变化（早期版本使用无前缀的 /audit、/polish 等，现在统一改为 /impeccable 命名空间）。如果你依赖某个特定命令，需要关注更新日志。

效果强依赖提示遵循度。Impeccable 本质上是「更好的提示词系统」，AI 的实际输出质量仍然取决于模型对 skill 文件的遵循程度。在不同工具、不同模型版本下，效果可能存在差异。

不能替代设计判断力。即便有了 Impeccable，开发者还是需要具备基本的审美鉴别力——知道什么是好设计，才能有效使用 /impeccable critique 这类指令进行有意义的迭代。

总结

Impeccable 解决的是一个真实存在但长期被忽视的问题：AI 工具的设计能力不是不够强，而是缺少一套结构化的引导语言。它的价值不在于替你做设计决策，而在于提供词汇——让你能精确描述你想要什么、不想要什么，并将这些偏好持久化到整个项目生命周期中。

对于重度依赖 AI 编码工具的开发者来说，把 Impeccable 纳入工作流几乎没有什么成本，但潜在收益相当显著：从此告别千篇一律的 AI 界面，获得真正契合产品调性的设计输出。

参考资料