Impeccable：AI设计之王！让Claude Code/Cursor从此告别丑陋界面

发表于

你用 Claude Code 或 Cursor 写过前端吗？效果是不是这样的：Inter 字体、紫色渐变 hero、卡片里套卡片、纯黑文字配灰背景、modal 弹窗带着 bounce 动画？

这不是 bug——这是训练数据偏见。AI 模型见过的最好的网站数量，远不如它见过的平庸网站数量多。结果就是：代码能跑，但看起来像 2018 年的 Bootstrap 模板。

Impeccable 就是要解决这个问题。它是 jQuery UI 创始人 Paul Bakaus 开源的设计语言系统，通过 23 个命令和 7 套专业设计参考文件，让 AI 编程 agent 从”平均网站水平”进化到”专业设计师水平”。项目发布后在 GitHub 迅速蹿红，增长速度约 640 颗星/天，目前已超过 1,666 颗星。

为什么 AI 生成的前端总是”丑”？

这不是幻觉问题，也不是逻辑问题——是训练数据偏见。

网上有大量平庸的设计，AI 训练时全部吸收。更糟糕的是，”clean and modern” 在模型眼里是从千万个平庸网站里学来的，它对”好设计”的定义就是那些平均值的叠加。

你给 AI 再多”让它好看一点”的 prompt，也改变不了这个基线。真正有效的解决方案是：把专业设计知识以 AI 能理解的形式注入上下文。

这就是 Impeccable 做的事。

Impeccable 是什么

Impeccable 是一个专为 AI 编程 agent 设计的设计语言系统，安装后成为 agent 的内置设计知识库。它不生成图片，不做设计稿，而是直接指导 AI 在写代码时做出正确的设计决策。

核心技术组成：

  • 7 套专业设计参考文件：字体系统、色彩与对比度、空间布局、动效设计、交互设计、响应式设计、UX 文案
  • 23 个 slash 命令：覆盖从建立品牌上下文到 UI 审核的全流程
  • PRODUCT.md + DESIGN.md：基于 Google Stitch 格式的项目设计文档，AI 在每次生成代码前都会读取

与其他设计工具的核心差异：

对比维度 普通设计工具（Galileo/Figma AI） Impeccable
工作位置 生成图片，人类再实现 直接嵌入 AI coding agent 工作流
输入方式 描述需求 → 生成设计稿 在代码生成阶段注入设计规则
知识深度 通用设计建议 7 套专业设计参考文件
反馈方式 图片对比 代码 diff + 设计评分
流程成本 额外步骤，需人工翻译 零额外步骤，AI 自主遵循

23 个命令一览

Impeccable 将原来分散的多个 skill 合并为一个统一入口，通过 /impeccable <command> 调用：

命令 功能
/impeccable teach 交互式建立 PRODUCT.md（项目定位、受众、品牌调性）
/impeccable document 扫描代码提取或引导创建 DESIGN.md（色彩、字体、组件）
/impeccable polish 对现有页面做设计优化（对齐、间距、字体、颜色、动效、文案）
/impeccable audit 完整设计审核（可访问性、性能、主题化、响应式、反模式）
/impeccable critique 全面设计评审（含评分、用户画像测试、自动检测）
/impeccable craft 从零构建新页面（先定义结构再生成代码）
/impeccable live 浏览器实时预览模式，生成并可接受变体
/impeccable redo 对已有组件重新设计
/impeccable pin 将常用命令固定为独立快捷方式（如 /audit）

快速上手

安装（一行命令）

1
npx skills add pbakaus/impeccable

自动检测你的 AI 编程工具（Claude Code、Cursor、Codex 等），将文件写入正确目录。重载 agent 后输入 /impeccable 即可看到全部 23 个命令。

第一步：建立设计上下文

1
/impeccable teach

这会启动一个简短访谈，收集：

  • 定位：是品牌展示型（营销页/落地页）还是产品工具型（App/仪表盘）？
  • 受众：具体描述，而非”用户”
  • 品牌调性：三个词描述（如”温暖、技术感、有主见”）
  • 视觉参考：具体品牌名/产品，而非”简洁现代”
  • 反参考：明确排除哪些风格

AI 根据你的回答生成 PRODUCT.md，每次执行命令前都会自动读取。

第二步：获取视觉系统

1
/impeccable document

扫描你项目中的 CSS 变量、Tailwind 配置等，提取色彩和字体；或者在新项目中通过几个问题构建初始设计系统，生成 DESIGN.md。

第三步：优化现有页面

1
/impeccable polish the pricing page

对已有页面做设计提升。典型输出：

1
2
3
4
5
Visual alignment: fixed 3 off-grid elements
Typography: tightened h1 kerning, fixed widow on feature list
Color: replaced one hardcoded hex with --color-accent token
Interaction: added missing hover state on FAQ items
Motion: softened modal entrance to 220ms ease-out-quart

不是重写，是精修——让”能跑”变成”跑得好”。

设计质量对比：有没有 Impeccable 差多少

无 Impeccable 的 AI 输出：

  • 字体：系统默认或全篇 Inter，无层级
  • 色彩：#333/#666/#999 纯灰，品牌色是 #3b82f6
  • 间距：8px/12px/24px 随机，无 8px 网格系统
  • 布局：一切皆卡片，层层嵌套
  • 动效：无或全部 ease-in-out，偶尔 bounce
  • 对比度：次级文本经常达不到 WCAG AA

有 Impeccable 的 AI 输出：

  • 字体：模块化比例、故意的字体配对、OpenType 特性考量
  • 色彩：OKLCH 色域、调色中性、深色模式实现、对比度内置检查
  • 间距：一致的 8px 网格、用留白而非边框建立层次
  • 布局：真实构图思考，不是每个元素都是卡片
  • 动效：有意图的缓动曲线、交错动画、支持减少动画偏好
  • 文案：按钮标签、错误提示、空状态文字都像人写的

社区反馈：相当于”从 Bootstrap 3 到专业设计系统”的视觉升级。

关键要点

📌 使用 Impeccable 之前，你需要知道的三件事：

  1. Token 消耗真实存在：skill 文件每次会话占用约 8,000-15,000 token，在长会话中约占 10-15%，这是为设计质量付出的合理代价
  2. 先 teach 再用：没有 PRODUCT.md 的设计上下文，Impeccable 输出的仍然是”无品牌的设计”——teach 是最有价值的步骤
  3. Live Mode 是亮点：在浏览器里直接预览 AI 生成的三个变体，接受一个后代码自动写回源文件，体验非常流畅

总结

Impeccable 是 AI 编程时代第一个真正意义上的设计质量解决方案。它没有重新发明轮子——只是把几十年的专业设计知识编码成了 AI 能读懂的格式。

如果你用 Claude Code、Cursor 或其他 AI 编程工具做前端开发，Impeccable 值得作为默认安装的工具之一。免费的，不需要任何账号，五分钟就能看到效果。

👉 官网：https://impeccable.style/
👉 GitHub：https://github.com/pbakaus/impeccable