Impeccable:设计词库(1)

如果你最近用过各种编程 Agent 写前端页面，大概率有过这种体验：代码跑通得飞快，组件结构也算规整，但浏览器一刷新，扑面而来的就是一股浓浓的“AI 味”——满屏的 Inter 字体、熟悉的紫到蓝渐变、卡片套着卡片，还有每个小标题上方都顶着一个圆角方块图标。你心里清楚这页面不够好，想让它改，却发现自己卡在了提示词上：跟它说“再好看一点”或者“make it pop”，它只能靠猜，往往越改越像另一个套路模板。最近在 GitHub 上狂揽超 10 万 Star 的开源项目 Impeccable（项目主页），切中的正是这个痛点。它给自己的定义很直接：“The design vocabulary for your coding agent”——给你的编程助手装上一套真正的设计词汇表，让你能用 polish、bolder 这样的词去引导方向，用 critique、audit 去评审把关，在代码上线前把那些粗糙的“AI slop”抓出来。

一、AI 设计的“千篇一律”与 Villa Castagneto 的对照实验

为什么我们一眼就能认出某个页面是 AI 写的？因为在没有任何额外设计指导的情况下，各大编程 Agent 做出来的界面，总会在不同模型、不同项目之间反复掉进同一批视觉套路里。 Impeccable 的文档里直接点名了这些高频重灾区：不管什么业务，永远是 Inter 字体包打天下；配色动不动就拉一道紫到蓝的渐变；布局上是无穷无尽的“卡片套卡片”；在彩色背景上硬塞灰色的字；以及每个小标题正上方，非要规规矩矩地摆一个圆角方块图标。这些写法单独看都没报错，合在一起就是我们常说的“AI slop”（AI 味的粗糙设计）——体面、安全，但毫无灵魂，看多了让人审美疲劳。
为了让你直观感受到“默认套路”和“有设计指导”之间的差距，项目 README 放了一个很有画面感的对比案例。实验条件控制得很严格：使用同一个模型（README 中写作 Fable 5.1），给同一份需求——为利古里亚海岸一家拥有 14 间客房的家庭旅馆“Villa Castagneto”做一个页面。
在没有 Impeccable 介入的时候，模型交出了一份标准的“体面的默认款”：奶油色的背景上，排着细衬线标题外加一点斜体点缀，底下摆着两个药丸形状的按钮，再往下就是圆角卡片，卡片里装着扁平风格的矢量插画。如果你在网上随便搜一个独立开发者的落地页模板，大概就是这个长相。它没有明显的错，但你也完全感受不到“利古里亚海岸”和“14 间客房的家庭旅馆”该有的气息。
而换上 Impeccable 之后，同一个模型做出来的页面完全换了一副骨架。整张页面围绕着一张核心大图展开——那是从海面上望过去、夜色中矗立在悬崖上的别墅，采用满版的版画风夜景呈现；标题换成了窄体的奶油色加朱红色搭配，页面底部则放上了一条克制的月份条。从“扁平插画加药丸按钮”到“悬崖夜景版画加底部月份条”，中间差的不是模型写 HTML/CSS 的能力，而是有没有人替你把模糊的审美诉求，翻译成模型听得懂、执行得准的设计约束。除了这个旅馆页面，项目里还展示了另一个叫 Neo Mirai 的案例，呈现了一个会议网站是如何从最初的草图一路打磨到最终上线的。

二、Impeccable 是什么：沟通词库、评审员与“AI 味”检测器

面对前面提到的那些毛病，Impeccable 没有去重新训练一个大模型，而是把自己做成了编程 Agent 的一套设计技能与工具链（项目的 GitHub 话题标签里就明确标着 agent-skills、ai、anti-slop、design、slop）。拆开来看，它靠三个核心卖点来解决“不会说、没人审、抓不准”的问题。

1. Words for what you want：把你心里的感觉变成精准动作

平时我们跟 Agent 沟通设计，最容易词穷。一句“make it pop”（让它更出彩一点），本质上是把设计决策推给了随机数，Agent 只能靠猜来堆砌阴影、渐变或者字号。
Impeccable 的做法是提供一套专门的设计动作词汇。比如当你觉得定价卡片太温吞时，不用再绞尽脑汁编形容词，直接敲下：

/impeccable bolder the pricing cards
当你运行这条命令时，它并不是简单地把“bolder”这个单词塞进提示词里完事，而是会在背后加载一份专门为这一动作编写的手册，并且把注意力牢牢锁定在你指定的单一目标（这里的定价卡片）上。同理，你还可以用 polish、quieter、harden 等词去微调不同区域。有了这套词库，你和 Agent 之间就有了共同的“黑话”，沟通成本直线下降。

2. A reviewer：随叫随到的设计评审与体检官

写后端代码我们有单元测试、有 Linter，但前端界面写出来好不好用、规不规范，往往只能靠肉眼扫。Impeccable 把这件事拆成了两个评审角色：critique 和 audit。

• critique（设计批评）：它像一个懂交互的设计师坐在你旁边，按照可用性启发式原则给当前的界面设计打分，并且帮你排好修改的优先级，告诉你哪里最值得先动手。
• audit（全面审计）：它更像一个严格的质检员，专门检查无障碍（Accessibility）、性能、主题适配以及响应式布局。检查完之后，它会把发现的所有问题按照从 P0（阻塞级问题）到 P3（细节打磨）进行分级，让你一眼看清哪些是上线前必须修掉的硬伤，哪些是可以后面慢慢调的细节。

3. A slop detector：不靠大模型的 62 条确定性铁律

这是整个项目里非常讨巧、也极具工程味的一个设计。既然“紫到蓝渐变”、“卡片套卡片”、“圆角方块图标”这些毛病如此固定，为什么还要费劲调大模型去猜呢？
Impeccable 直接内置了一个“slop detector”（粗糙设计检测器）。它完全不需要调用 LLM，也不需要配置任何 API Key，而是靠 62 条确定性规则直接对代码进行扫描。除了抓出前面提到的那些典型 AI 套路之外，它还会精准标出诸如“内边距太挤”、“标题层级跳级”这类实打实的质量问题。不耗 Token、结果稳定、指哪打哪，在上线前跑一遍，就能把最显眼的“AI 味”先过滤掉一层。

三、为什么这么火：踩中痛点的 10 万 Star 项目

如果你去看一眼 GitHub 上的 pbakaus/impeccable 仓库页，数据相当惊人：总 Star 数已经来到约 101.6k（在周报快照中，总 Star 为 99,363，单周新增 Star 就高达 12,017），此外还有 6.0k 个 Fork 和 2,622 次提交。仓库的编程语言标注为 Rust，采用宽松的 Apache-2.0 开源许可证。
一个聚焦在“前端设计词库与反 AI 粗糙感”上的工具，为什么能在短时间内攒下十万级别的关注度？
从它解决的问题来看，这刚好撞上了当下开发者的集体痛点。过去一两年，各种编程 Agent 已经帮大家解决了“把功能代码写出来”的问题，但随着越来越多用 AI 生成的页面被推向线上，“同质化”和“廉价感”成了所有独立开发者和前端团队绕不开的槛。大家都看腻了千篇一律的紫蓝渐变和套娃卡片，却又不是每个人都具备专业设计师的词汇量和审查眼光。
Impeccable 的聪明之处在于，它没有强迫开发者去学一套复杂的图形设计理论，也没有要求你离开熟悉的终端和 IDE。它把高深的设计直觉拆解成了开发者最习惯的三种东西：像调 CLI 一样明确的动词命令（bolder、quieter）、像看 Bug 报告一样的 P0–P3 分级评审（critique、audit），以及像跑代码静态检查一样的 62 条确定性规则。再加上它务实的定位——不承诺“一句话生成完美全站”，而是老老实实告诉你它“对已存在的界面最强”——这种接地气的工程化思路，自然很容易在技术社区里一传十、十传百。

四、整体怎么运转：从建立档案到“窄目标”精细打磨

很多提示词工具之所以不好用，是因为它们每次干活都是“失忆”的——不知道你的产品卖给谁，也不知道你现有的视觉规范是什么。Impeccable 在工作流设计上，首先解决的就是这个“上下文对齐”的问题。

第一步：建立项目与视觉档案（PRODUCT.md 与 DESIGN.md）

当你把 Impeccable 装进项目后，每个项目只需要运行一次初始化命令：
/impeccable init
（如果你用的是 Codex，对应的命令写法是 $impeccable init。)
运行之后，它不会像填调查问卷一样追着你问几十个问题，而是先自己去读你项目里的代码。读完代码后，它只问那些从代码里推断不出来的事情——比如这个产品具体是给谁用的、核心要做什么、有哪些客观约束。把这些搞清楚之后，它会在项目里生成一份 PRODUCT.md。从这往后，你运行的每一个 Impeccable 命令，都会先去读这份文件，确保改出来的东西不会偏离产品定位。
如果你的项目已经有一套现成的界面，还可以运行：
/impeccable document
这条命令会把你现有的视觉系统梳理并记录进一份 DESIGN.md 文件里，相当于给项目建好了视觉规范账本。

第二步：“命令 + 窄目标”的迭代循环

档案建好之后，日常的使用方式非常符合直觉，基本公式就是“命令 + 目标”。比如：

• 评审引导流程：/impeccable critique the onboarding flow
• 让落地页更克制、安静一些：/impeccable quieter the landing page
• 打磨设置页面：/impeccable polish settings
• 强化结账流程的稳健度：/impeccable harden checkout

当然，如果你一时想不起某个特定命令，直接用自然语言跟它描述“redo this hero section”（重做这个首屏区域）也是完全支持的。
这里有一条非常关键的使用心法：Impeccable 官方明确指出，它在面对已存在的界面时表现最强——也就是让你指向一个具体的页面或组件去迭代打磨；虽然它也能用来从零做新页面，但那属于“更难的模式”。而且在给目标的时候，窄目标的效果远比宽泛目标好，盯住一个具体区块细看，永远胜过粗略地扫视整张页面。如果你刚把工具装好不知道从哪试起，官方给出的最佳起步建议就是先挑一个具体的组件下手，比如直接敲一句：
/impeccable critique the pricing cards
先看它怎么挑你定价卡片的毛病，你立马就能摸准它的脾气。

五、兼容的工具与安装入口

现在的开发者手里往往不止一个 AI 编程工具，有人习惯在终端里跑 Claude Code，有人常驻 Cursor，也有人混用好几种 Agent。Impeccable 在兼容性上铺得非常广，几乎把目前主流的编程助手和 IDE 都覆盖了。
根据 README 列出的清单，它目前兼容的工具包括（共 19 款）：

• 主流终端与 IDE 助手：Claude Code、Cursor、Codex CLI、GitHub Copilot、Gemini CLI、OpenCode
• 自主 Agent 与云端环境：Devin、Replit Agent、Grok Build、Google Antigravity
• 更多新兴编辑器与框架：Kiro、Trae、Rovo Dev、Qoder、Mistral Vibe、Pi、Hermes Agent、DeepSeek Harness、Veto

无论你主力用哪一款，安装入口都统一收敛到了一条极简的命令上。你只需要打开终端，切换到你的项目根目录下，运行：
npx impeccable install
装好之后，重新加载一下你的编码工具，接着在 Agent 对话框里跑一次 /impeccable init（Codex 用户使用 $impeccable init），整套设计词库和评审工具就正式接管你的项目了。至于 npx impeccable install 在不同编辑器底层具体生成了哪些配置文件结构，README 在这一概览层级未做说明，我们会在后续的技术深挖部分继续拆解。

六、它的来历：从 Anthropic 的一个技能包长出来的独立项目

如果仔细看 Impeccable 的交互方式，你可能会觉得它和 Claude 生态里的“Skill（技能）”概念很神似。这并不是巧合。
Impeccable 的作者是 Paul Bakaus。根据项目介绍，Impeccable 最早正是发源于 Anthropic 的 frontend-design skill（前端设计技能）。从最初让模型学会如何避免通用套路、写出更有设计感的前端代码，一步步演化成今天这样一个拥有独立站点、支持 19 种编程 Agent、配备 62 条确定性检测规则、沉淀了 2,600 多次提交并拿到 10 万+ Star 的开源项目，Paul Bakaus 把原本单点的提示词技巧，做成了一套跨平台的完整工程方案。

本部分小结

作为系列的第一篇，我们一起摸清了 Impeccable 的全貌：它是作者 Paul Bakaus 基于 Anthropic 的 frontend-design skill 演化而来的开源项目（Apache-2.0 协议，目前超 101.6k Star）。它直面当下 AI 生成界面“千篇一律”（Inter 字体、紫蓝渐变、套娃卡片等）的痛点，通过一套精准的设计词汇（如 bolder、polish）、双层评审机制（按启发式打分的 critique 与按 P0–P3 分级的 audit），以及不依赖 LLM 的 62 条确定性规则检测器，帮你在上线前筛掉粗糙的“AI slop”。在使用上，它通过 npx impeccable install 和 /impeccable init 建立起项目的 PRODUCT.md 与 DESIGN.md 档案，并提倡“对准已有界面的窄目标”进行高频迭代。

下一部分预告

• 第 2 部分：我们将掀开引擎盖，对 24 条命令、上下文文件、检测器、实时模式 进行技术深挖，看看这些手册和规则在底层究竟是怎么配合运转的。
• 第 3 部分：我们将回到实战视角，聊聊具体的使用场景、上手指南以及它目前的局限，帮你判断什么时候该重度依赖它，什么时候还得靠自己拍板。