保罗·巴考斯推impeccable 用61条确定性规则拦截AI前端缺陷
AI技术投降派
消除AI界面的结构性硬伤可通过确定性规则引擎实现自动化拦截，但解决美学上限与品位问题仍须依赖人类设计师的主观决策。
AI-assisted summary of AI味的61条死法，jQuery UI之父出手了 — original source. Check the original for full context.
Source published:
Key ideas
- jQuery UI 之父保罗·巴考斯开源了针对前端“AI味”的治理项目 impeccable，上线 11 个月内获得 8.2 万颗 Star 并完成 a16z 投资建司。 (0:00)
- impeccable 采用双层架构：上层通过 24 个设计指令与 PRODUCT.md/DESIGN.md 约束大模型思路，下层采用不依赖 LLM 的 Rust 确定性引擎运行 61 条硬规则并输出 Exit Code 阻断 CI。 (1:52)
- 针对 AI 页面泛滥的紫蓝渐变、米色斜体、卡中卡以及滥用 Inter 等套路，第三方盲测将 impeccable 评为修复存量老页面硬伤的首选工具。 (3:40)
Detailed notes
## Background 该视频由 Bilibili UP 主“AI技术投降派”于 2026 年 11 月 2 日发布。视频简介指出当前 AI 生成页面陷入严重的“千页一面”（如滥用紫蓝渐变、卡中卡与 Inter 字体），为此 jQuery UI 之父保罗·巴考斯开源了获八万多星的项目 impeccable，通过 Rust 引擎与 61 条确定性死规则把“AI味”量化为可接入 CI 的缺陷报告，确立了“可判定的交给机器，不可判定的留给人”的设计分工。
## TL;DR 内容深入解析了前端老将保罗·巴考斯针对泛滥的界面“AI味”所开源的工具 impeccable。该项目采用双层架构，上层通过 24 个设计总监级指令与两个记忆文件规范 AI 的生成逻辑，下层则完全不依赖模型，纯靠 Rust 引擎与 61 条确定性规则在代码层拦截卡片嵌套、滥用字体及劣质间距等硬伤。回顾其发展史，impeccable 虽曾登上 Hacker News 并因改版视觉过于平淡等问题饱受争议，但凭借作者坦诚认错的态度、独立的实测优势与 a16z 的投资，成功证明了其在修补老旧页面硬伤上的工业价值。这项工程向行业明确传达了关键启示：剔除代码垃圾不等于拥有高级审美，机器负责查出量化硬伤，而设计的品位与上限仍归人类所有。
## Atmosphere & style 视频展现出一种兼具极客犀利与行业老将沉淀的技术解说氛围，开篇对当下 AI 换汤不换药式“设计垃圾”的吐槽辛辣过瘾。叙事节奏明快且极具实操感，从直击行业痛点的讽刺，无缝过渡到底层代码与 CI 机制的硬核拆解，再到不避讳社区差评与争议的客观剖析。整个过程听起来既有工程师直面技术本质的严谨清醒，又充满在狂热 AI 浪潮下守卫专业审美边界的哲学思辨。
## Bulletin - [00:00](https://www.bilibili.com/video/BV1EvJR6iEwo?t=0s) jQuery UI 之父保罗·巴考斯开源了针对前端“AI味”的治理项目 impeccable，上线 11 个月内获得 8.2 万颗 Star 并完成 a16z 投资建司。 - [01:52](https://www.bilibili.com/video/BV1EvJR6iEwo?t=112s) impeccable 采用双层架构：上层通过 24 个设计指令与 PRODUCT.md/DESIGN.md 约束大模型思路，下层采用不依赖 LLM 的 Rust 确定性引擎运行 61 条硬规则并输出 Exit Code 阻断 CI。 - [03:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=220s) 针对 AI 页面泛滥的紫蓝渐变、米色斜体、卡中卡以及滥用 Inter 等套路，第三方盲测将 impeccable 评为修复存量老页面硬伤的首选工具。
## Key takeaways - [00:00](https://www.bilibili.com/video/BV1EvJR6iEwo?t=0s) jQuery UI 创始人保罗·巴考斯在离开 Google 后开源 impeccable，旨在解决 AI 前端页面高度趋同的“AI味”顽疾。 - [00:35](https://www.bilibili.com/video/BV1EvJR6iEwo?t=35s) 所谓“AI味”本质上是大模型统计训练数据的平均值，从过去的“暗底+紫蓝渐变+亮青字”机械演变成了当前的“米色底+衬线斜体标题”，依然换汤不换药。 - [01:52](https://www.bilibili.com/video/BV1EvJR6iEwo?t=112s) 项目核心设计为双层架构：上层教导 AI 如何思考，下层通过 Rust 引擎量化并检测代码硬伤。 - [02:05](https://www.bilibili.com/video/BV1EvJR6iEwo?t=125s) 上层包含 24 个专业设计指令（如评审、做减法、更大胆等），并由 PRODUCT.md 与 DESIGN.md 两个上下文文件强制约束 AI 的业务与样式决策。 - [02:30](https://www.bilibili.com/video/BV1EvJR6iEwo?t=150s) 下层 Rust 引擎内置 61 条无模型、离线的确定性规则，按 9 大类别归档，涵盖卡中卡、用滥字体（Inter/Geist）、亲密性布局等具体硬伤。 - [03:05](https://www.bilibili.com/video/BV1EvJR6iEwo?t=185s) 检测机制采用三层梯度推进，第一层直接做静态代码解析，第二层运行无头渲染检查溢出与遮挡，极少数主观项才交由大模型评审。 - [03:25](https://www.bilibili.com/video/BV1EvJR6iEwo?t=205s) 检测结果附带规则编号与退出码（Exit Code），能无缝接入 GitHub Actions 等 CI/CD 流程直接阻断不合规代码合并。 - [03:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=220s) impeccable 早期在 Hacker News 遭遇大量差评，但后续凭借 X 生态与智能体技能市场引爆，月下载量超 76 万次并获得 a16z 投资。 - [04:15](https://www.bilibili.com/video/BV1EvJR6iEwo?t=255s) 面对 Hacker News 上对官网前后改版辨识度低等尖锐批评，作者坦诚承认早期案例与官网硬伤并下架重构，挽回了开发者口碑。 - [04:55](https://www.bilibili.com/video/BV1EvJR6iEwo?t=295s) 在独立机构针对 8 款同类工具的横评中，impeccable 凭借精准的 Audit 审计与移动端遮挡、假内容识别能力，被列为修复既有页面的首选技能。 - [05:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=340s) 项目划定了极其清醒的设计分工边界：去掉平庸垃圾代码（slop）不等于拥有高级品位，可判定的硬伤交给机器，不可判定的品位留给人。
## Detailed walkthrough ### [00:00](https://www.bilibili.com/video/BV1EvJR6iEwo?t=0s) 什么是“AI味”：从紫蓝渐变到米色系换汤不换药
当前由 AI 生成的前端页面往往有一种让人一眼看穿的“通病”：滥用紫蓝渐变、无脑卡片套卡片、字体清一色采用 Inter。针对这些泛滥的设计缺陷，GitHub 上诞生了一个现象级开源项目——impeccable。该项目上线仅 11 个月便斩获了 82,000 颗星，其作者正是 2007 年打造了 jQuery UI、巅峰时期统治全球 14% 网站界面组件的前端老将保罗·巴考斯（Paul Bakaus）。在离开 Google 之后，他单枪匹马开发了这款定位为“给 AI 智能体的设计语言”的工具。
在 2026 年，开发者社区曾有一篇爆款热帖系统总结了界面的各种 AI 顽疾：卡片边缘硬加彩色装饰条、标题上方突兀地顶着圆角图标块、毫无意义的玻璃拟态（Glassmorphism），以及机械化、毫无节奏感的等宽间距。impeccable 直接将这些设计恶习列为了“通缉令”。在它的规则清单中，典型的“AI色版”被明确定义为“紫渐变加深色底配亮青文字”；不仅如此，清单中甚至包含了最新的“米色系”。这是因为前几年公众集中抨击紫蓝渐变后，AI 随即转向了“米色底搭配衬线斜体标题”，本质上依然是换汤不换药的机械复刻。针对这种现象，作者犀利地指出：“今天的解药明天就成了新的 slop。”AI 生成之所以沦为“病态”，正是因为它们只是大模型训练数据的统计平均值，而非针对眼前具体业务场景的设计解答。
- **作者背景**：保罗·巴考斯（Paul Bakaus），2007 年写出 jQuery UI，巅峰期覆盖全球 14% 的网站组件库，前 Google 员工。 - **项目规模**：11 个月斩获 82,000 颗 Star，单月 npm 下载量超 76 万次。 - **典型 AI 味特征**： - 卡片套卡片（卡中卡）； - 边缘彩色装饰线； - 标题上方的圆角图标块； - 滥用玻璃拟态； - 颜色上从老款的“暗底 + 紫渐变 + 亮青字”，演变为 2026 年新款的“米色底 + 衬线斜体标题”。
---
[01:52](https://www.bilibili.com/video/BV1EvJR6iEwo?t=112s) impeccable 的双层架构与 61 条确定性规则
与市面上现存的同类设计技能相比，impeccable 最核心的区别在于其独特的“双层架构”设计：上层教 AI 怎么思考，下层用确定性规则量化硬伤。
上层是专门提供给大模型读取的技能库（Skills），包含 24 个精炼的操作命令，词汇全盘继承自专业设计总监的日常工作语言，例如“评审”、“做减法”、“更大胆”、“更收敛”。同时，系统通过两个持久化记忆文件来锁定设计上下文：`PRODUCT.md` 记录产品的事实（受众是谁、业务约束是什么），`DESIGN.md` 记录设计系统的基准决策（规范了什么字体、多大圆角等）。后续所有的 AI 生成指令，都必须无条件服从这两个文件的设定。
下层则是该项目的核心杀手锏：一个由 Rust 编写的高性能检测引擎。该引擎内置了 61 条确定性规则，完全不依赖任何大语言模型、无需联网、也无需 API Key，仅需一行 CLI 命令即可扫描代码。
```mermaid flowchart TD accTitle: impeccable 双层架构图 accDescr: 展示 impeccable 的上层思考指引与下层 Rust 确定性检测引擎的协作流程
subgraph UpperLayer["上层：技能层（教 AI 怎么想）"] CMD["24个设计指令<br/>（做减法 / 更大胆 / 评审）"] P_MD["PRODUCT.md<br/>（受众、业务约束）"] D_MD["DESIGN.md<br/>（字体、圆角、设计系统）"] end
subgraph LowerLayer["下层：Rust 引擎（量得出的硬伤）"] R1["Level 1：静态代码直读<br/>（无需开浏览器）"] R2["Level 2：无头渲染检查<br/>（溢出、遮挡、对比度）"] R3["Level 3：模型辅助评审<br/>（极少数主观设计判断）"] end
UpperLayer --> LowerLayer LowerLayer --> CI["输出规则编号与 Exit Code<br/>（直接阻断 CI 代码合并）"] ```
这 61 条规则归纳为 9 大类别，每一条都打在痛点上： - **视觉类**：“卡中卡”永远判定为错误；卡片边缘强加彩色装饰条，抓到即告警。 - **字体类**：明确点名 Inter 与 Geist 属于“被用滥的字体”；大标题使用衬线斜体、或者正文全大写排版，均直接亮红灯。 - **颜色类**：标准的 AI 默认色板（紫渐变搭配暗底亮青文字）直接拒收。 - **布局类**：间距单调、处处等距被视为严重硬伤；标题离上一段文本的距离竟然比离自己正文内容的距离还要近，会被判定为亲密性布局错误。
在运行时，检测分为三层梯度推进：第一层直接静态解析代码，连浏览器都无需启动；第二层进行真实环境渲染，检测元素的尺寸溢出与视区遮挡；只有极少数确实需要设计主观判断的规则，才会交给大模型评审。每次检测不仅返回具体的规则编号，还附带标准的进程退出码（Exit Code），能无缝嵌入 GitHub Actions 等 CI/CD 流程，在代码合并前自动拦截“AI味”代码。针对文档细节，作者视频中指出：“仓库说 61 条，官网数出来是 65 条，两边数字打架，以仓库为准。”
---
[03:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=220s) 从无人问津到 a16z 投资，以及 Hacker News 上的两极口碑
回顾 impeccable 的增长历程，它并非一蹴而就。该项目于前一年 11 月创建，在最初的两个月里几乎无人问津，直到次年 1 月中旬也才积累了 56 颗 Star。1 月份该项目曾登上 Hacker News 获得 103 分，但评论区充斥着负面评价，未能掀起波澜。真正的爆发点出现在今年 3 月，项目在一周内从 2,000 星暴涨至 8,400 星，实现日均新增 1,000 星。这一波爆发并非源自技术论坛，而是得益于 X（原 Twitter）上的开发者生态与智能体技能市场。
随着热度提升，3 月 30 日团队发布了 npm 包；4 月份的大版本迭代中，项目正式由原名 `frontend-design` 更名为 `impeccable`；6 月中旬突破 40,000 颗 Star，并于同月获得硅谷顶级风投机构 a16z 的投资，正式成立公司运营。
然而，伴随高光而来的还有极其尖锐的批评。在 Hacker News 获得 103 分的那篇帖子里，评论区几乎是一边倒的质疑： - 有开发者对着官网改版前后的效果对比辛辣嘲讽，直言：“我得看三遍才分清哪边是改过的。” - 有人指出优化后的界面“反而变平淡了，丧失了辨识度”。 - 还有用户扒出官网曾挂出过 100 美元的付费占位广告。
面对漫天质疑，保罗·巴考斯选择亲自下场逐条回复。他坦承当时的案例展示过于仓促、本不该对外发布，甚至承认早期官网落地页自身就存在字体混用与页面滚动异常等硬伤，最终主动将争议内容全数下架重构。这种坦诚面对技术硬伤的认错态度，为项目挽回了至关重要的社区口碑。
与主观争议相对的，是第三方权威评测给出的硬核成绩。在独立机构针对 8 款同类技能进行的同题横向实测中，impeccable 被评为“修已有页面的首选”。其内置的审计（Audit）命令仅耗时 2 分钟便能输出精准打分，并且能精准识别出诸如移动端真机遮挡、假 Logo 以及捏造的用户证言（Testimonials）等细节硬伤，并在报告中标记“需要人工输入，严禁 AI 编造”。在社区内部，甚至流传着一句高评价标准：“如果只装一个设计技能装官方的，装两个的话第二个就装它。”
归纳起来，关于 impeccable 可以提炼为三句话： 1. **规则是真的硬**：61 条无模型的确定性检测可以直接进入 CI，彻底将主观的“AI味”量化为带编号的缺陷报告。 2. **边界是真的清**：保罗·巴考斯非常清醒地认识到，去掉垃圾代码不等于自动获得高级审美，正如视频中所总结的作者态度：“去掉 slop 不等于有品位，引擎只抓弱层级、懒惰间距、坏对比这类硬伤，品位那部分还是人的。” 3. **争议也是真的在**：它在修复老旧页面硬伤上的工业实力有目共睹，但在“从零生成全新美学”的高维上限上，专业设计师群体并不盲目买账。
这套体系留给行业最深刻的设计哲学，莫过于其清晰的职能划分：“把品位拆开，可判定的部分交给机器，不可判定的部分留给人。”
## Notable quotes > [03:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=220s) 把品位拆开，可判定的部分交给机器，不可判定的部分留给人。 — AI技术投降派
> [03:40](https://www.bilibili.com/video/BV1EvJR6iEwo?t=220s) 去掉 slop 不等于有品位，引擎只抓弱层级、懒惰间距、坏对比这类硬伤，品位那部分还是人的。 — 保罗·巴考斯
> [00:00](https://www.bilibili.com/video/BV1EvJR6iEwo?t=0s) 今天的解药明天就成了新的 slop。 — 保罗·巴考斯
## Mentioned impeccable, 保罗·巴考斯, jQuery UI, Google, Rust, Inter, Geist, Hacker News, a16z, X, GitHub Actions, npm
## Video description 紫蓝渐变、卡片套卡片、什么字体都用Inter——你让AI做的页面，为什么都长一个样？
GitHub上一位老将看不下去了。保罗·巴考斯，2007年写出jQuery UI的男人，前端圈最早的"组件库之父"。近二十年后，他开源了impeccable：一套专治"AI味"的开源技能，八万多颗星。
它最狠的一点：不跟你聊审美玄学，直接把"AI味"拆成61条机器能查的死规则。卡中卡"永远算错，没有例外"；Inter和Geist被点名列入"用滥字体"；紫渐变配暗底亮青，一眼AI。61条规则按九大类归档，一个Rust引擎跑确定性检测，不用模型、不靠猜，npm一行命令直接进CI，把"有没有AI味"从个人感受变成编号报告。
架构分两层：上层是给AI读的技能，24个命令全是设计总监嘴里的操作词——评审、做减法、更大胆、更收敛；还有两个记忆文件，PRODUCT.md记住产品是什么，DESIGN.md记住设计系统定了什么，AI每次动手前先读它。下层就是那61条规则的检测引擎。一句话：上层教怎么想，下层量得出来。
当然争议也是真的。黑客新闻上那帖103分，评论区以差评为主，有人对着官网改版前后对比说"我得看三遍才分清哪边是改过的"。但另一边，独立机构拿八款同类技能同题实测，impeccable被评为"修你已有页面"的首选；npm近一年下载219万次。从零生成的美学上限，设计师未必买账；修老页面的硬伤，它确实能打。
可判定的交给机器，不可判定的留给人。这可能是AI时代设计分工最清醒的一句话。
开源地址：github.com/pbakaus/impeccable
[Source](https://www.bilibili.com/video/BV1EvJR6iEwo)