如果你用过 AI 生成前端界面，一定见过这些「经典」组合：Inter 字体、紫色渐变、卡片套卡片、彩色背景上的灰色文字。这不是巧合——所有 LLM 都从相同的模板中学习，没有指导时就会产出这些可预测的错误。

Impeccable 是一个开源项目，它提供了一套设计语言（Design Language），专门用来「调教」你的 AI 助手，让它生成更专业、更有设计感的前端界面。

为什么 AI 生成的 UI 总是「千篇一律」？

大语言模型的训练数据来自互联网，而互联网上的设计趋势是高度趋同的。当模型没有明确的指导时，它会倾向于：

  • 选择最「安全」的字体（Inter、Arial、系统默认）
  • 使用最常见的配色（紫色渐变、纯黑纯灰）
  • 过度使用卡片布局
  • 忽略无障碍设计原则

这就像让一个只会做家常菜的人去开餐厅——没有专业指导，只能做出最基础的菜品。

Impeccable 的解决方案

Impeccable 的核心是一个扩展的技能包（Skill），包含：

七大设计领域参考

领域覆盖内容
排版字体系统、字体配对、模块化比例、OpenType 特性
颜色与对比OKLCH 色彩空间、带色调的中性色、暗色模式、无障碍
空间设计间距系统、网格、视觉层次
动效设计缓动曲线、错开动画、减少动效偏好
交互设计表单、焦点状态、加载模式
响应式设计移动优先、流式设计、容器查询
UX 写作按钮文案、错误信息、空状态

17 个实用命令

安装后，你可以在 AI 对话中使用这些命令：

  • /audit — 技术质量检查（无障碍、性能、响应式）
  • /critique — UX 设计评审（层次、清晰度、情感共鸣）
  • /normalize — 对齐设计系统标准
  • /polish — 发布前的最终打磨
  • /distill — 精简到本质
  • /animate — 添加有目的的动效
  • /colorize — 引入策略性色彩
  • /bolder — 放大无聊的设计
  • /quieter — 收敛过于大胆的设计
  • /delight — 添加愉悦时刻

每个命令都可以接受参数，聚焦特定区域：/audit header、/polish checkout-form。

明确的反模式指导

Impeccable 不仅告诉 AI 该做什么，还明确告诉它不该做什么：

  • 不要使用过度使用的字体（Arial、Inter、系统默认）
  • 不要在彩色背景上使用灰色文字
  • 不要使用纯黑或纯灰（总是带一点色调）
  • 不要把所有东西都包在卡片里，或卡片嵌套卡片
  • 不要使用弹跳/弹性缓动（感觉过时）

如何安装

Impeccable 支持主流的 AI 编程工具：

Cursor：

cp -r dist/cursor/.cursor your-project/

Claude Code：

# 项目级
cp -r dist/claude-code/.claude your-project/
# 或全局
cp -r dist/claude-code/.claude/* ~/.claude/

Gemini CLI：

cp -r dist/gemini/.gemini your-project/

实际效果

项目官网 impeccable.style 展示了多个案例研究，对比使用 Impeccable 前后的设计变化。从「模板感十足」到「专业设计师水准」，差距肉眼可见。

小结

Impeccable 的价值在于：它把设计专业知识编码成 AI 能理解的指令。你不需要成为设计专家，只需要知道该用哪个命令。

项目由 Paul Bakaus 创建，基于 Anthropic 原始的 frontend-design 技能扩展而来，采用 Apache 2.0 开源协议。

GitHub: github.com/pbakaus/impeccable

如果你的 AI 助手生成的界面总是「差点意思」，不妨试试 Impeccable——它可能就是那个让设计从「能用」变成「好用」的关键。