Impeccable：51K Star 的开源设计语言，让 AI 编码代理告别千篇一律的前端

每个让 AI 写过前端页面的人都知道这个问题：模型产出的页面一眼就能认出来。Inter 字体铺满全屏，紫色到蓝色的渐变标题，卡片套卡片，彩色背景上飘着灰字。这些视觉特征在不同项目间高度一致，因为所有模型都在同一批 SaaS 模板上训练过。Impeccable 就是为解决这个问题而生的。这个开源项目在 GitHub 上发布不到五个月就积累了超过 51,000 个 star，日均增长超过 400。

解决的是什么问题

AI 编码代理（Claude Code、Cursor、GitHub Copilot 等）在生成前端代码时，缺乏设计语言的约束。模型知道怎么写 HTML/CSS，但不知道什么时候该用衬线体、什么时候该留白、什么配色搭配在什么场景下成立。结果是所有 AI 生成的页面共享同一套"安全但平庸"的视觉模板。

Impeccable 的核心思路是把专业设计师的决策过程编码成一套结构化的词汇体系，让 AI 代理能理解"层次""对比""克制"这些设计概念，并通过命令行直接操控。它的定位是给 AI 编码工具用的"设计操作系统"，把设计师的专业判断转化成 AI 代理可以理解和执行的指令。

项目的创建者

Paul Bakaus 的履历决定了这个项目的质量上限。他创建了 jQuery UI（2007），这是 jQuery 官方的 UI 组件库，影响了整整一代前端开发者的交互模式。在 Google 期间，他担任 Chrome DevTools 的产品负责人，后来主导了 AMP 和 Web Stories 项目。他还开发过一个浏览器游戏引擎 Aves Engine，被 Zynga 收购。

这意味着 Impeccable 背后的人同时具备三个领域的深度经验：前端框架构建（jQuery UI）、浏览器底层理解（Chrome DevTools）、以及大规模内容发布工程（AMP/Web Stories）。这些经验直接影响了他设计 Impeccable 的方式。

架构：一个 Skill，23 个命令，60 条规则

Impeccable 的技术架构分为四层。

第一层：设计上下文初始化

运行 /impeccable init 时，系统会询问项目类型：是品牌页面（marketing、landing、portfolio）还是产品界面（app UI、dashboard、tool）。根据回答，它会生成 PRODUCT.md 和 DESIGN.md 两个文件，记录受众定位、品牌调性、配色方案、字体选择和组件偏好。后续所有命令都读取这两个文件作为上下文基础。

这个初始化步骤解决了 AI 编码中最常见的设计偏差：模型不知道这个页面是给谁看的，于是默认套用通用 SaaS 模板。

第二层：23 个设计命令

Impeccable 定义了一套设计操作词汇表，通过 /impeccable <command> <target> 的格式调用：

命令之间可以链式调用。典型工作流是 audit 诊断问题 → layout 修正布局 → typeset 调整字体 → polish 最终收尾。每个命令都接受可选参数来聚焦特定区域，比如 /impeccable audit header 只审查页头。

第三层：60 条确定性检测规则

这是 Impeccable 最具技术含量的部分。它内置了一套确定性的检测规则系统，不依赖 LLM，不需要 API key，直接在本地运行。检测规则覆盖两个维度：

AI 设计坏味道（AI slop）检测：

• 侧边栏边框风格
• 紫色渐变背景
• 弹跳/弹性缓动动画
• 暗色主题中的发光效果
• 过度使用的字体（Arial、Inter、系统默认字体）
• 彩色背景上的灰色文字
• 嵌套卡片（card inside card）
• 每个标题上方的圆角方形图标块

通用设计质量检测：

• 文本行长度超出可读范围
• padding 过于拥挤
• 触摸目标尺寸过小
• 跳过的标题层级
• 纯黑/纯灰配色（应始终带色相偏移）

这套规则系统支持 CLI 独立运行：

npx impeccable detect src/                    # 扫描目录
npx impeccable detect index.html              # 扫描单个 HTML 文件
npx impeccable detect https://example.com     # 扫描在线页面
npx impeccable detect --json .                # CI 友好的 JSON 输出

JSON 输出模式让检测规则可以集成到 CI/CD 管线中，作为自动化设计质量门禁。

第四层：Design Hook 机制

在 Claude Code、GitHub Copilot、Cursor、Codex 等支持的平台上，Impeccable 会安装一个 provider 原生的 hook。当开发者直接编辑 UI 文件时，hook 自动运行检测规则，将结果反馈到 agent 流程中。Cursor 模式更激进：它会在错误的写入操作落地之前拦截。

Hook 的安装位置因平台而异：Claude Code 使用 .claude/settings.local.json，GitHub Copilot 使用 .github/hooks/impeccable.json，Cursor 使用 .cursor/hooks.json，Codex 使用 .codex/hooks.json。

多平台支持

Impeccable 支持 13 个 AI 编码工具：Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、OpenCode、Pi、Kiro、Trae、Rovo Dev、Qoder、Mistral Vibe。

支持新平台的方式在工程上做了很好的抽象。项目使用 config-driven factory 架构：每个 provider 定义为 scripts/lib/transformers/providers.js 中的一个配置对象，添加新 provider 只需新增一个配置条目。Skill 源文件 skill/SKILL.src.md 使用 {{model}}、{{config_file}}、{{command_prefix}} 等占位符，在构建时根据 provider 配置替换为对应值。

安装方式有三种，优先级从高到低：CLI 安装器（npx impeccable install）、Git submodule、以及直接从仓库复制文件。

设计上下文文件

Impeccable 在运行过程中会在 .impeccable/ 目录下写入工作文件。目录中混合了临时文件（截图、缓存、预览状态）和共享项目工件（配置文件、设计规范、审查报告）。README 中提供了完整的 .gitignore 配置，区分哪些文件需要提交到版本控制、哪些不需要：

需要提交的文件：

• .impeccable/config.json：统一共享配置
• .impeccable/design.json：共享设计规范
• .impeccable/critique/*.md：审查报告

需要忽略的文件：

• .impeccable/config.local.json：开发者本地覆盖
• .impeccable/*.png：审查截图
• .impeccable/live/：实时迭代会话和预览状态

与 Anthropic 官方 Skill 的关系

Anthropic 自己发布了一个 frontend-design skill，是 Claude Code 上最早广泛使用的设计技能，累计安装量达到 277,000 次。Impeccable 从这个 skill 出发，在其基础上扩展了 7 个领域特定的参考文件（排版、OKLCH 色彩/对比度、空间设计、动效、交互、响应式、UX 写作），以及确定性检测规则和实时浏览器迭代循环。

社区的评价倾向于将两者配合使用：Anthropic 的 frontend-design 作为通用基线，Impeccable 作为更强的设计驱动层，再加 Vercel 的 web-design-guidelines 作为可访问性和 UX 质量门禁。

为什么能在五个月内到 51k star

Impeccable 在 2026 年 2 月 28 日发布。第一个版本包含增强版 frontend-design skill 和 17 个命令。此后三周内发布了五个主要版本：v1.1 统一了技能架构并加入 VS Code Copilot 支持；v1.2 加入 Kiro 支持；v1.3 加入 OpenCode 和 Pi 支持；v1.5 增加了 /typeset、/arrange、/overdrive 三个命令和自动设计上下文收集。

开发节奏极度紧凑，每次更新都直接回应社区反馈。截至 7 月底，命令数从 17 增加到 23，检测规则从 44 条增加到 60 条，支持的 AI 工具从 10 个扩展到 13 个。仓库已有 40 位贡献者和 3,000 次 fork。

开源协议为 Apache 2.0。

数据来源：GitHub 仓库 pbakaus/impeccable、官网 impeccable.style