一天一个开源项目

每日一个开源项目（第238篇）：Impeccable - 让每个 AI 编程工具都学会审美的设计引擎

Impeccable 是一套面向 AI 编程助手的设计语言工具，提供 24 个命令和 59 条确定性检测规则，覆盖从产品背景梳理、视觉系统构建到无障碍/性能审查的完整设计工作流。支持 Claude Code、Cursor、Codex、Gemini CLI 等十余种工具，核心引擎为独立二进制，无需 LLM 即可运行检测。Apache-2.0 协议，81.3k Stars。

·约 14 分钟阅读·AI 技术
开源项目ImpeccableAI Agent前端设计Claude CodeCursorSkillUI设计

引言

"The design language that makes your AI harness better at design."（让你的 AI 工具更懂设计的设计语言。）

这是"每日一个开源项目"系列的第238篇文章。今天的主角是 Impeccable——一套专为 AI 编程助手打造的设计语言工具。

AI 生成的前端界面有一个众所周知的通病：所有模型都在同样的 SaaS 模板上训练出来的，结果就是千篇一律的 Inter 字体、紫到蓝的渐变、卡片套卡片的布局、彩色背景配灰字、每个标题上方必有一个圆角方形图标。这些"AI 味"特征已经成为业内心照不宣的"一眼假"信号。

Impeccable 的解法是把设计判断力拆解成两套机制：一套是不依赖 LLM 的确定性检测规则（59 条），CLI 和浏览器扩展可以直接运行，不需要 API key；另一套是面向 LLM 的评审检查，用自然语言 Skill 命令驱动 AI 对设计进行深层次的 UX 审查和打磨。项目起点明确承认是从 Anthropic 的 frontend-design Skill 发展而来，81.3k Stars，Apache-2.0 协议，由 Paul Bakaus 创建。

你将学到什么

  • Impeccable 如何用"确定性规则 + LLM 评审"两条轨道解决 AI 设计同质化问题
  • 24 个命令覆盖的完整设计工作流：从 init、craft 到 polish、audit
  • PRODUCT.md 与 DESIGN.md 的分工：产品事实与视觉系统为何要分开记录
  • comp-first 与 code-first 两种构建路径的权衡
  • 核心引擎二进制 + 轻量启动器脚本的多工具适配架构

前置知识

  • 基础前端开发经验（HTML/CSS/JS）
  • 使用过 Claude Code、Cursor 或类似 AI 编程工具
  • 对"AI 生成设计的同质化"现象有基本感知

项目背景

项目简介

Impeccable 的官方定位："The design language that makes your AI harness better at design."项目直指问题根源：所有模型都在相同的 SaaS 模板上训练，导致 AI 生成的设计出现相同的"tells"（特征标记）——全局 Inter 字体、紫蓝渐变、卡片嵌卡片、彩色背景配灰字、标题上方的圆角图标方块。

项目的叙事起点很诚实："Anthropic's frontend-design was the first widely-used design skill for Claude. Impeccable started from there."（Anthropic 的 frontend-design 是首个被广泛使用的 Claude 设计技能，Impeccable 由此起步。）

作者与背景

  • 作者: Paul Bakaus（GitHub 用户名 pbakaus）
  • License: Apache-2.0
  • 技术栈: Rust（核心引擎）+ Bun/Node（CLI 安装与适配）+ 浏览器扩展 + VS Code 插件
  • 引擎分发方式: 自包含二进制文件，首次运行时下载至 ~/.impeccable/bin/

项目数据

  • ⭐ GitHub Stars: 81,300+
  • 🍴 Forks: 4,900+
  • 👀 Watchers: 214
  • 📄 License: Apache-2.0

主要功能

核心作用

没有 Impeccable 时 AI 生成前端的常见症状：
  所有模型训练数据同源 → 设计输出高度趋同
  ↓ Inter 字体滥用、紫蓝渐变、卡片套卡片、彩色背景配灰字
  ↓ 开发者凭感觉手动调整，没有系统化的检测和打磨流程
  ↑ "一眼假"的 AI 设计特征难以根除
 
Impeccable 的做法：
  59 条确定性规则 + LLM 深度评审，两条轨道并行
  ↓ CLI/浏览器扩展直接检测，不依赖 LLM，无需 API key
  ↓ Skill 命令驱动 AI 完成从产品背景梳理到最终打磨的完整流程
  ↑ 设计判断力被结构化为可复用、可审计的规则与流程

使用场景

  1. 用 AI 编程工具开发前端，想摆脱"AI 味"设计的开发者

    • 用确定性规则快速揪出紫蓝渐变、卡片嵌套等典型 AI slop 特征

  2. 需要在上线前做无障碍、性能、响应式审查的团队

    • audit 命令提供技术质量检查，覆盖无障碍、性能、响应式三大维度

  3. 想要系统化记录产品背景与视觉系统的团队

    • init 生成 PRODUCT.md 记录产品事实，document 从现有代码生成 DESIGN.md

  4. 需要在浏览器中实时迭代视觉方案的设计师/开发者

    • live 模式支持浏览器内实时生成和挑选设计变体

  5. 跨多个 AI 编程工具协作、需要统一设计语言的团队

    • 一套引擎适配 Claude Code、Cursor、Codex、Gemini CLI、Grok Build 等十余种工具

快速开始

推荐安装：

npx impeccable install

更新：

npx impeccable update

作为 Git 子模块集成（适合需要锁定版本的团队）：

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

命令行直接检测（无需 Skill，无需 LLM）：

npx impeccable detect src/
npx impeccable detect https://example.com
npx impeccable detect --json .

在 AI 工具内通过 Skill 调用：

/impeccable init
/impeccable audit blog
/impeccable polish settings

核心特性

1. 统一的 Skill 入口与 24 个命令

所有能力通过 /impeccable <command> <target> 统一调用，涵盖从规划到上线的完整设计生命周期：

命令作用
init一次性设置，收集产品背景写入 PRODUCT.md，配置实时模式
craft"先定型再构建"的完整设计流程，含视觉迭代
document从现有项目代码生成根级 DESIGN.md
extract提取可复用组件和设计令牌到设计系统
shape写代码前先规划 UX/UI
critiqueUX 设计评审：层级、清晰度、情感共鸣
audit技术质量检查：无障碍、性能、响应式
polish最终打磨、设计系统对齐、上线准备检查
bolder / quieter放大过于平淡的设计 / 削弱过于张扬的设计
distill精简至本质
harden错误处理、国际化、文本溢出、边界情况
onboard首次使用流程、空状态、激活路径
animate添加有目的性的动效
colorize / typeset / layout调整色彩 / 字体层级 / 布局间距
delight添加愉悦感瞬间
clarify改进不清晰的 UX 文案
adapt / optimize适配不同设备 / 性能优化
live / generate浏览器实时迭代元素，自动生成变体

还支持 /impeccable pin <command> 创建独立快捷方式（例如 pin audit 生成 /audit）。

2. 59 条确定性检测规则

分为两大类：AI slop 类（侧边标签边框、紫色渐变、弹跳缓动、暗色光晕等 AI 生成特征）与通用设计质量类（行长、紧凑内边距、过小触控目标、标题层级跳跃等）。这套规则由 CLI 和浏览器扩展直接运行，不依赖 LLM，不需要 API key——这意味着检测本身是确定性的、免费的、可以在任何 CI 流程里跑。

3. PRODUCT.md 与 DESIGN.md 的职责分离

  • PRODUCT.md：记录"持久性的产品事实"——受众、目的、运营背景、约束、语调和证据，由 init 生成，明确要求与"表层视觉方向"区分开
  • DESIGN.md：记录现存或新建的视觉系统，由 document 从现有项目代码生成

4. 核心引擎 + 轻量启动器的多工具适配架构

核心是自包含的"引擎二进制文件"，首次运行时下载到 ~/.impeccable/bin/；Claude Code、Cursor、Codex 等各工具通过小型启动器脚本调用该引擎。Node.js 只在 npx 安装环节用到，并非运行时依赖。支持 Hook 机制，在文件编辑后或 Stop 事件时自动触发设计检测。

5. 反模式清单

文档直接列出应避免的具体做法：避免过度流行的字体（Arial、Inter、系统默认字体）、避免彩色背景配灰字、避免纯黑/纯灰色（应始终带色调）、避免把所有内容套进卡片或卡片嵌套卡片、避免弹跳/弹性缓动动画。

深入剖析

两条轨道的分工：确定性规则解决"能检测什么"，LLM 评审解决"该怎么改"

Impeccable 架构上最值得关注的设计是把"设计判断力"拆成两条独立轨道，而不是让单一的 LLM 调用承担所有工作：

如果所有检测都依赖 LLM：
  每次检测都要调用模型 → 成本和延迟不可控
  ↑ 无法在 CI 流程中免费、确定性地跑
  ↑ 结果可能因模型版本/提示词差异而不稳定
 
Impeccable 的两条轨道：
  59 条确定性规则 → CLI/浏览器扩展直接运行，不依赖 LLM
  ↓ 免费、确定性、可嵌入 CI，专门捕捉"AI slop"的固定特征
  LLM-only 评审检查 → 由 Skill 命令驱动，负责更主观的 UX 判断
  ↓ 处理"层级是否清晰""情感是否共鸣"这类无法用固定规则捕捉的问题
  ↑ 两条轨道互补，而不是用一套机制硬扛所有场景

这个分工背后的逻辑很清楚：AI 生成设计的"同质化特征"（紫蓝渐变、卡片套卡片）本质上是模式识别问题，规则引擎比 LLM 更适合、更便宜地解决；而"这个设计是否有说服力""文案是否清晰"这类问题需要语境理解，交给 LLM 更合适。把两者分开，既保证了检测的可重复性，又没有牺牲深层评审的灵活性。

PRODUCT.md 与 DESIGN.md 分离：防止"产品事实"被"视觉趋势"污染

项目明确要求 PRODUCT.md 记录的"持久性产品事实"要与"表层视觉方向"区分开，访客模式和视觉方向在每个具体页面/场景中单独选择，而不写入 PRODUCT.md。这是一个容易被忽视但很关键的设计决策：

如果产品背景和视觉方向混在一个文件里：
  每次视觉风格调整都可能污染产品定位描述
  ↑ AI 在后续迭代中可能把"当前流行的视觉趋势"误判为"产品本质要求"
 
Impeccable 的分离策略：
  PRODUCT.md 只记录受众/目的/约束/语调等不随视觉趋势变化的事实
  ↓ DESIGN.md 单独记录视觉系统，可以随时推翻重建
  ↑ AI 在做设计决策时，不会把"暂时的视觉选择"误当成"产品的不可变约束"

这种分离让"产品是什么"和"产品现在看起来是什么样"成为两个可以独立演化的概念——这对于一个需要被 AI 反复读取和参照的文档体系来说，是避免长期语义漂移的关键设计。

comp-first 与 code-first：按内容类型选择构建路径，而非一刀切

文档区分了两种构建路径："先出完整效果图再按图施工"（comp-first）与"直接写代码，把方向契约写入开发态并在完工时核验"（code-first）。原文的权衡表述是："Comp-first composes bolder and takes longer; code-first is leaner and faster."（先出图路线更大胆但更费时；直接编码路线更精简更快）。

值得注意的是，App 界面和文档类页面无论如何都采用 code-first，理由是"they come out better built than pictured"（这类内容实际构建出来比先画图效果更好）。这反映出一个实用主义判断：不是所有设计任务都值得先出效果图再实现——结构化程度高、交互逻辑明确的界面类型（App、文档）直接编码反而更可靠，而需要大胆视觉表达的场景才值得先用效果图探索方向。

从 Anthropic frontend-design 到独立项目：诚实承认起点而非掩盖传承

Impeccable 的文档开篇就承认自己是从 Anthropic 的 frontend-design Skill 发展而来的——这是一个值得肯定的开源协作细节。很多项目在吸收了其他项目的设计思路之后，很少在文档里系统说明"这个想法最初来自哪里"。Impeccable 把这条脉络摆在明面上，既是对原创者的尊重，也让用户更容易理解这个项目在整个"AI 设计 Skill"生态里的位置——它不是凭空出现的，而是在已有的、经过验证的设计模式基础上，扩展出了确定性规则引擎、多工具适配、浏览器实时迭代等更完整的工程化能力。

多工具适配：核心引擎与适配层解耦，而非为每个工具重写一遍

项目支持 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、Hermes Agent、OpenCode、Trae、Rovo Dev、Qoder、Mistral Vibe 等十余种工具，但核心逻辑只有一份——自包含的引擎二进制文件。各工具只需要一个小型启动器脚本来调用这个引擎，Hook 配置则按各工具自身的机制单独适配（不同工具的 Hook 配置文件格式各异）。这种"核心能力一份实现，适配层按需扩展"的架构，避免了在十余种工具生态中重复实现同一套设计检测逻辑的维护负担。

项目地址与资源

官方资源

相关资源

  • Anthropic frontend-design Skill — Impeccable 设计思路的起点
  • 支持的工具生态：Claude Code、Cursor、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、Hermes Agent、OpenCode、Trae、Rovo Dev、Qoder、Mistral Vibe

总结与展望

核心要点

  1. 确定性规则 + LLM 评审双轨机制：59 条规则免费、确定性地捕捉 AI slop 特征，LLM 评审负责更主观的 UX 判断，两者互补而非互相替代
  2. PRODUCT.md 与 DESIGN.md 职责分离：产品事实与视觉系统分开记录，避免视觉趋势污染产品定位的长期语义
  3. comp-first / code-first 按内容类型选择：App 和文档类界面直接 code-first 更可靠，需要大胆视觉表达的场景才值得先出效果图
  4. 诚实承认设计思路起点：从 Anthropic frontend-design 发展而来，而非掩盖传承直接宣称原创
  5. 核心引擎与多工具适配层解耦：一份引擎逻辑，十余种工具通过轻量启动器复用，避免重复实现维护负担

适用人群

  • 用 AI 编程工具开发前端、想摆脱"AI 味"设计的开发者：确定性规则可以快速定位典型同质化特征
  • 需要系统化走完设计全流程的团队：从产品背景梳理到无障碍/性能审查，24 个命令覆盖完整生命周期
  • 同时使用多种 AI 编程工具的团队：一套引擎适配十余种工具，设计语言可以跨工具保持一致
  • 关注 AI 工具生态设计模式演进的开发者：可以参照其确定性规则引擎与 LLM 评审分轨的架构思路

一句话评价

Impeccable 没有试图用一个更聪明的 LLM 调用解决"AI 设计千篇一律"的问题，而是把能确定性检测的部分交给免费、可重复的规则引擎，把需要语境理解的部分留给 LLM 评审——这种"分工而不是堆算力"的思路，可能比单纯依赖更强模型更现实。

欢迎访问 PrimeSkills —— 一个精心策划的 AI Agent 与技能市场，所有内容均经过真实企业级工作流验证。没有噱头，只有真正有效的东西。

更多实用知识和有趣产品，欢迎访问我的个人主页

← 返回博客列表