前 Chrome 团队工程师下场做"前端质检"：Paul Bakaus 的 impeccable 想颠覆什么

【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable

当整个互联网开始批量生产"AI 味"网页——紫色渐变、嵌套卡片、侧边高亮条、Inter 字体全家桶——真正有资格站出来说"不"的，是那个亲手把 Chrome DevTools 交到全球开发者手里的人。

Paul Bakaus，jQuery UI 之父、前 Google Chrome DevTools 产品与开发者关系负责人，带着他的新项目 impeccable 回来了。这个开源项目在 GitHub 上已经积累了 4 万+ Star，其背后公司 Renaissance Geek 完成了由 a16z 领投的种子轮，并作为内置设计层随新版 GitHub Copilot App 一起分发。本文结合 impeccable 仓库源码与全网情报，拆解这位"老 Web 人"想颠覆的究竟是什么。

从 jQuery UI 到 Chrome DevTools：一个总在"工具落后于技术"时出手的人

Paul Bakaus 的履历有一条非常清晰的主线：他总是出现在"新技术已经到来、但工具尚未跟上"的节点。

2007 年，他创建了 jQuery UI——那个让拖拽、排序列表、日期选择器第一次走进普通网页的交互库，也是"让一代网页设计师第一次能交付丰富 Web UI"的工具。2010 年，他联合创办 Aves Engine（早期浏览器内游戏引擎），随后被 Zynga 收购。2013 年他加入 Google，负责 Chrome DevTools 的产品与开发者关系，正是"网页设计师在手机上预览自己网站"这个能力被普及的时代。之后他辗转 AMP、Web Stories、Google for Creators，又在 Koji、Spotter 负责创作者产品。

他自己在个人网站上这样总结："2007 年以来，我总出现在新技术已经到来、而它的工具还没有跟上的地方。" 这句话几乎是为 impeccable 量身定做的注脚：AI 编程时代来了，但"让 AI 生成高质量界面"的工具远没有跟上。

痛点从哪来：AI 把产量拉高了，却把工艺拉低了

impeccable 的诞生逻辑，藏在仓库 README 的开头：

Every model trained on the same SaaS templates. Skip the guidance and you get the same handful of tells on every project: Inter for everything, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, the rounded-square icon tile above every heading.

翻译过来就是：每个大模型都训练在同一批 SaaS 模板上。不给引导，你得到的永远是同一套"标志性配方"——全站 Inter 字体、紫到蓝渐变、卡片套卡片、彩色背景上放灰字、标题上面永远顶着一个圆角方块图标。

而在 Paul 的署名文章Impeccable by Design中，他把这个判断推到了更深一层：slop（劣质 AI 产出）是一个移动靶。2022 年的 slop 是紫色渐变和发光按钮，人们让模型回避这些模式后，2026 年的 slop 变成了暖米色背景上的 Instrument Serif 斜体标题——"今天的解药，明天人人都在用时就成了新的 slop"。因此他的结论是：品位不能被封装成提示词，但那些与品位无关的"机械性破绽"（层级扁平、间距偷懒、对比度崩坏、模型在无人掌舵时的默认构图）是可以被确定性规则抓住的。

"无可挑剔"的工程哲学：规则必须可执行、可追溯、无 LLM 也能跑

impeccable 最反直觉的一点是：一个"设计审美"项目，核心引擎却是Rust。

仓库 docs/ENGINE.md 清楚地说明了架构：所有 skill 命令最终都落到{{scripts_path}}/impeccable <verb>，由一个随 skill 分发的自包含二进制执行，"There is no Node at runtime"（运行时不需要 Node）。整个 Cargo workspace 从 crates/cli（动词路由）、crates/detect（文件扫描、忽略、正则引擎）、crates/html（静态 HTML 引擎）、crates/browser（Chrome 发现、CDP、快照、视觉检测）到 crates/core（全部规则逻辑）都是离线可构建、Apache-2.0 的。

关键设计在于确定性（deterministic）：README 明确写道，"The CLI and browser extension run the deterministic rules with no LLM and no API key"——检测反模式不需要大模型、不需要 API Key，纯代码即可判定。规则注册表集中在 crates/foundation/src/registry.rs，规则数据则随构建产物输出为 crates/live/assets/antipatterns.json。以最著名的两条"AI 味"规则为例：

{ "id": "side-tab", "name": "Side-tab accent border", "category": "slop", "description": "Thick colored border on one side of a card — the most recognizable tell of AI-generated UIs." }, { "id": "ai-color-palette", "name": "AI color palette", "category": "slop", "description": "Purple/violet gradients and cyan-on-dark are the most recognizable tells of AI-generated UIs." }

规则还分成了两级：IMMEDIATE_TIER_RULES（crates/foundation/src/registry.rs）覆盖"值得当场打断编辑"的机械性问题——broken-image、text-overflow、low-contrast、gray-on-color、gradient-text、dark-glow、design-system 漂移等；而关于配色品味、排版节奏的判断则推迟到会话结束时的深度审查（Stop 事件全量规则扫描）。这体现了 impeccable 的一个重要立场：机器只裁决"客观错误"，品位留给人和模型协商。

不是"给你审美"，而是"给你一套设计语言"

impeccable 的定位不只是检测器，而是一套完整的设计工作流。打开 skill/SKILL.src.md（构建时会被注入到 16 种 AI 编程助手的源文件），可以看到它的核心设计：

• 持久化产品事实：/impeccable init通过结构化访谈生成 PRODUCT.md，只记录"产品是什么、给谁用、成功标准"，明确禁止在 init 阶段谈视觉方向——把"产品事实"和"表面视觉"分开，是它避免模型混淆上下文的根基。
• 23 条设计命令：shape（先规划后写码）、critique（UX 评审）、audit（技术审计）、polish（上线前精修）、bolder/quieter（音量调节）、distill（去繁存简）、live（浏览器内实时迭代）……每条命令对应一类问题，构成人与 AI 共享的"设计词汇表"。
• Craft Floor 质量底线：skill/reference/craft-floor.md 是所有 UI 编辑前必须加载的"绝对禁令清单"——对比度底线、零偏移彩色光晕是装饰、嵌套卡片永远错误、每个区块都加 eyebrow 标签是禁用的、emoji 不能冒充图标系统……这些是检测器抓不到、但模型最容易系统性违反的"工艺反射"。
• Live Mode 实时迭代：在浏览器里点选元素、生成变体、对比取舍、把修改写回源码——Paul 称之为"更主动的人机界面"的早期实验。

项目自己的设计系统（DESIGN.md）本身就是这份理念的自我证明：名为 "Neo Kinpaku" 的日式金箔漆器系统，全面使用 OKLCH 色彩空间、完整的字号阶梯（8px 到 88px）、"金箔承载品牌、铜绿承载状态"的配色法则，并且明确写下"禁止紫色渐变、霓虹青、玻璃拟态、通用 AI 工具辉光"——它把自己的反模式规则用在了自己身上。

名人项目 vs 社区项目：impeccable 的独特路径

一个"前 Chrome 工程师 + a16z 背书"的项目，很容易被当成又一个名人光环下的玩具。但 impeccable 的社区路径恰恰说明了它为什么值得认真对待：

• 开源优先，长尾分发：项目从一个开源 skill 起步，如今通过npx impeccable install、Claude 原生 marketplace、Git 子模块、VS Code 插件等 5 种方式分发，支撑 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、Hermes、DeepSeek Harness 等十几个 harness。README 中明确维护了每种工具的安装与钩子适配表。
• 真正把"设计门禁"装进了 CI/CD：npx impeccable detect src/ --json可以直接进 CI，退出码语义明确（0 无主要问题、2 有主要问题、1 扫描目标不可达）；钩子（hook）机制则让检测器在 Claude Code、Cursor、Codex 等工具里"编辑即检测"——Cursor 甚至用 preToolUse 在坏改动落地前直接拦截。
• 社区治理成熟：AGENTS.md 规定 issue-first 的贡献流程，外部贡献必须先讨论再提 PR，防止无人维护的"名人仓库"陷阱。
• 数据驱动的迭代：项目用tests/oracle/（1120 个 golden 快照）将每个动词的可观察行为"字节级"锁定，防止规则改动悄悄破坏已有行为。

回头看，impeccable 想颠覆的其实不是某个具体工具，而是 AI 编程时代的一个默认假设："AI 生成的东西，质量就这样了。"Paul 的回应是——AI 确实把创作的门槛和下限都抬高了，但"优秀"从来不是一蹴而就的，它来自清晰的意图、持续的迭代、判断力和工艺；而工具的责任，是把人放回创作的最后一公里。正如他在文章里写下的那句宣言："AI raised the floor. Time to raise the ceiling."（AI 抬高了地板，现在该抬高天花板了。）

前端质检这件事，Chrome 时代他用 DevTools 回答过一遍；AI 时代，他用 impeccable 回答了第二遍。

【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable