编程智能体做出来的页面为什么总是一个样？Inter 字体、紫蓝渐变、卡片套卡片、每个标题上方一个圆角图标块。开源设计 Skill Impeccable 要给智能体一套“设计词汇”：想让它改得更大胆、更安静、更精致，直接点名一个动词加一个目标；改完之后再用同一套规则评审，最后用 62 条确定性规则把 AI 味拦在发布之前。仓库为 pbakaus/impeccable，Apache-2.0 协议，截至 2026 年 10 月 29 日核对时，GitHub 页面显示约 9.3 万星。
同一模型、同一需求，前后差别在哪
README 用同一个例子讲清差别：同一个模型（Fable 5.1）、同一份需求——利古里亚海岸一家十四间客房的家庭旅馆 Villa Castagneto。不用 Impeccable，智能体给出的是“体面的默认答案”：米色页面、细衬线标题、斜体点缀、药丸按钮、圆角卡片里的扁平插画。用了它，页面围绕一张图展开：夜里从海上望过去的别墅，配浓缩的米色与朱红标题，底部还有一条月份带。
差别不在模型换了，而在智能体拿到了一套可执行的说法。README 的原话是：“Make it pop”只会让智能体猜；/impeccable bolder the pricing cards 这样一句，则会加载一份只为这一个动作写的 playbook，并指到一个具体目标上。相关阅读：本站昨天介绍过的另一套设计 Skill Hallmark v2：50 个主题加真机浏览器检查，让 AI 做出的页面不再像 AI 生成的，两者思路不同——Hallmark 靠主题与三层门禁，Impeccable 靠动词词汇加确定性检测。
先立规矩：init 写 PRODUCT.md，document 写 DESIGN.md
每个项目先跑一次 /impeccable init。它会读你的代码，只问那些推断不出来的事（产品给谁用、要做什么、有什么约束），然后写出 PRODUCT.md，之后每条命令都读它。再跑 /impeccable document，把现有视觉系统收进 DESIGN.md，改动就不会跑偏品牌。之后用法是“动词 + 目标”：
/impeccable critique the onboarding flow
/impeccable quieter the landing page
/impeccable polish settings
/impeccable harden checkout也可以直接描述意图（/impeccable redo this hero section），但 README 提醒：目标越窄效果越好，认真审一个区块胜过粗看一整页。常用命令可以用 /impeccable pin audit 固定成 /audit 快捷方式。Codex 里则打开 /skills 或输入 $impeccable。
24 个命令：转向、评审、收尾、实时迭代、规划
README 列出的 24 个命令分五组：
- 转向（Steer）：
bolder放大安全的设计、quieter收敛过 loud 的界面、distill删掉页面不需要的东西、colorize给灰界面上色、typeset修字体与层级、layout修间距与节奏、animate加过渡与交互反馈、delight加个性、overdrive上着色器、弹簧物理与滚动驱动效果。 - 评审（Review）：
critique按可用性启发式打分并排出修复优先级；audit出一份技术质量报告，覆盖无障碍、性能、主题与响应式，发现按 P0（阻塞）到 P3（打磨）分级。 - 收尾（Finish）：
polish是发布前的最后一遍；harden管报错、国际化、溢出与边界情况；clarify重写不清楚的文案；adapt管不同屏幕与设备；optimize修加载与渲染性能；onboard设计首次使用流程与空状态。 - 实时迭代（Iterate live）：
live在浏览器里点选元素、循环换方案；generate不用手动点选，直接为指定元素出方案。 - 规划与搭建（Plan and set up）：
shape在写代码前先规划体验；init写PRODUCT.md；document写DESIGN.md；extract把重复模式抽进设计系统。第 24 个craft是已废弃的别名。每个命令都有自己的文档页，见 impeccable.style/docs。
62 条规则的检测器：三种跑法，都不用大模型
Impeccable 最值得单独讲的是它的 slop 检测器：62 条确定性规则，专抓上面那些“机器味”与质量问题，比如挤在一起的内边距、漏掉的标题。README 强调它不用 LLM、不用 API key。三种跑法：
- 在智能体里：设计 hook 会扫描智能体改过的每个 UI 文件，在它宣称完工之前把发现交回去。README 说这是大部分问题被拦住的地方——没有 hook，检测器只在有人想起来时才跑。Claude Code、Cursor、Codex、GitHub Copilot、Grok Build 与 Hermes Agent 可用，安装程序会帮你装上。
- 在终端或 CI 里：CLI 不需要智能体，
npx impeccable detect src/扫目录，npx impeccable detect https://example.com扫渲染后的页面（用你已装的 Chrome 或 Edge），--json出机器可读结果，--github出 GitHub Actions 注解，--list-rules列出全部规则。退出码 2 表示有发现，1 表示目标扫不了。源文件只跑模式规则，需要渲染的规则（如低对比度、文字过小）要指到开发服务器上。 - 在浏览器里：Chrome 扩展把同样的发现叠加在任何 live 页面上。
规则可以按需关：品牌字体可以全局放行（npx impeccable ignores add-value overused-font Inter），单个文件可以用注释关一条规则。装 Skill 之前先做一次安全检查是个好习惯，参考本站的 NVIDIA 开源 SkillSpector：装 Agent Skill 之前，先给它做一次安全扫描。
Live 模式：在浏览器里点着改，改完写回源码
/impeccable live 会打开你正在跑的开发服务器并叠加一层覆盖：选中一个元素、挑一个方向，方案就在原地热替换，接受后写回源码。支持 Vite、Next、SvelteKit、Astro、Nuxt 与纯 HTML。README 划了两条线：Live 模式只改本地 checkout，不要把它注入已部署的站点、也不要为它放宽生产 CSP；应用文案修改时会跑 package.json 里可选的 impeccable:manual-edit-validate 脚本，在不熟悉的仓库里用之前先审一遍它。
安装与调用：一条命令，覆盖 18 种工具
从项目根目录运行：
npx impeccable install安装程序会识别你的编程工具，问你是只装当前项目还是全局装，并在支持的工具上提供设计 hook，README 建议接受它，装完重启工具。npx impeccable update 刷新已有安装。README 列出的支持工具包括 Claude Code、Cursor、Codex CLI、GitHub Copilot、Devin、Replit Agent、Gemini CLI、Grok Build、OpenCode、Google Antigravity、Kiro、Trae、Rovo Dev、Qoder、Mistral Vibe、Pi、Hermes Agent、DeepSeek Harness 与 Veto。三个工具在 hook 生效前还要多一步：Codex 里打开 /hooks 批准项目 hook（改动 hook 的更新后要再批一次），Grok Build 里跑 /hooks-trust 或用 --trust 启动，Hermes Agent 里跑一次 hermes plugins enable impeccable-design-hook。
也可以走插件：Claude Code 用 /plugin marketplace add pbakaus/impeccable 再安装；GitHub Copilot 装 VS Code 扩展（需 VS Code 1.109.3+、Copilot Chat 与受信任的工作区，只装 Skill、不装 hook）；Grok Build 用 grok plugin install pbakaus/impeccable#plugin --trust。团队要锁定版本，可以用 git submodule；没 Node 也能手动复制对应工具的 Skill 文件夹，但那样会跳过 hook 与子智能体。Node 只在 npx 时需要，Skill 本身跑的是随附的自包含引擎二进制。
怎么用才不翻车
README 的定位很明确：它在已有界面上最强——指着一个页面或组件去迭代；新建页面也能做，但要先看“从新页面榨出最多价值”的做法。先用 critique 给现有页面打分、排优先级，再决定动哪一块；新建时先把受众、用途与约束讲清楚，别让它替你编。另一套可对照的思路见本站的 Huashu Design 3.0：一句话交给 Agent，拿回一份能交付的设计。最后提醒一句：检测器抓的是“像 AI 生成的痕迹”，不是审美本身——规则过了，不等于设计就对了，P0 之外仍要人看一眼。
转自 GitHub 作者 pbakaus 的文章《Impeccable》，原文链接：https://github.com/pbakaus/impeccable
暂无评论内容