Impeccable:给 AI 编程助手补上一堂设计课

今天给大家推荐的项目是 Impeccable。它是一套给 AI 编程助手用的设计指导工具包，让你在动手写代码之前，先跟 AI 把界面该长什么样聊清楚。

它的核心是一个 skill 加 24 条命令。你用 /impeccable craft 让它先定方案再做界面，用 /impeccable audit 检查无障碍与响应式问题，用 /impeccable polish 收尾打磨。最大的亮点在于，它还附带 61 条确定性检测规则，不需要大模型、不需要 API Key，直接在命令行里扫出问题。对普通人来说，这意味着不懂设计，也能做出看着不廉价的页面。

❝

项目名称：Impeccable
主要语言：JavaScript、Rust
Stars：73.8k
Forks：4.4k
项目链接：https://github.com/pbakaus/impeccable

AI 写的页面，为什么都长一个样

打开一个 AI 生成的落地页：紫色到蓝色的渐变背景，居中的大标题，下面三个图标配三行小字，卡片里再套一层卡片。换个项目重来一遍，还是这套模板。

这不是模型偷懒。所有模型都学过同一批 SaaS 官网模板，你不给方向，它自然就把那套默认印象吐出来。项目作者在 README 里把这类现象称作 AI slop（AI 生成的同质化设计），并列出了最常见的几种：所有地方都用 Inter 字体、卡片里嵌套卡片、彩色背景上放灰色文字。

Impeccable 的应对方式很直接：把这些反模式写成可检测的规则。检测器能识别侧边色条、紫色渐变、回弹缓动、深色光晕这类 AI 常见套路，也能查出正文行宽过长、内边距过挤、触摸目标过小、标题层级跳跃这类基础质量问题。

核心亮点：把设计判断变成可执行的命令

一个 skill 管住整套流程

功能：安装后所有操作都走 /impeccable <命令>，24 条命令覆盖建站、评审、打磨三类场景。

适合场景：从零做一个新页面，或者改造手上已有的旧界面。

与常见方案的不同：多数设计类 skill 只给一段提示词，Impeccable 把流程拆成了可复用的动作。shape 负责定方向，craft 负责落地，critique 负责挑毛病。

你的收益：不必每次重写一遍“请做得好看一点”，一句 /impeccable polish settings 就能针对具体页面动手。

61 条规则不依赖大模型

功能：npx impeccable detect src/ 扫描目录，也可以直接扫单个文件或线上 URL。

适合场景：提交代码前的自查，或者接入 CI 做自动化检查。

与常见方案的不同：检测是确定性的，同样的代码永远给同样的结果，不消耗 token，也不需要联网调模型。加上 --json 就能拿到机器可读的输出。

你的收益：设计检查变成一道可以重复执行的工序，而不是凭感觉判断。

边写边查的钩子机制

功能：在 Claude Code、GitHub Copilot、Codex、Cursor、Grok Build 里安装后会注册原生钩子。AI 改动 UI 文件时自动跑检测，并把发现回传给模型。

与常见方案的不同：Cursor 的处理方式是在写入前拦截，问题代码根本不会落到磁盘上；其余工具是改完再提示，让模型在上下文还在的时候自己修正。

你的收益：问题在你看到渲染结果之前就暴露出来，省掉反复返工。

在浏览器里逐个元素调

功能：/impeccable live 启动可视化变体模式，针对页面上具体的元素反复试验，generate 还能自动生成候选方案。

你的收益：调整按钮、间距这类细节时，不必改代码、刷新、再看，直接在浏览器里比较。

技术实现：一个 Rust 引擎，多种前端接入

Impeccable 分成两层。

交互层是各家 AI 工具里的 skill 和命令。安装器 npx impeccable install 会先探测你机器上装了哪些工具，比如 ~/.claude、.cursor、.grok，再把对应格式的技能包和钩子清单写进去。项目仓库为 Claude Code、Cursor、Gemini CLI、Codex、Trae、Qoder 等工具各自维护了构建产物，目前覆盖 17 种。

核心引擎用 Rust 写成，放在 crates/ 目录下，按职责拆成检测、浏览器、HTML 处理、实时模式、打包等模块。检测器既能扫源码，也能通过浏览器打开页面读渲染后的布局。仓库同时包含 VS Code 扩展和浏览器扩展，用于在生产站点上做只读检查。

值得一提的细节是它不依赖 Node 运行时。npx 只是个壳，真正的引擎二进制会按需下载一次，缓存到 ~/.impeccable/bin/，之后钩子和 skill 都直接调用它。这样写的好处是启动快、环境依赖少，代价是首次使用需要联网。

限制也写在文档里：live 模式只作用于本地开发服务器或静态 HTML，不支持注入已部署的生产站点，官方也不建议为此关闭浏览器安全策略。检测器扫不出问题，只能说明没有命中已知规则，不等于界面真的没有缺陷，它替代不了人在真实设备上的实际查看。

值得一试吗

Impeccable 最值得关注的地方，是把“界面好不好看”这件偏主观的事，拆成了可以执行的命令和可以重复运行的规则。它适合经常用 AI 写前端、但自己设计经验有限的开发者，也适合想把设计检查纳入团队流程的工程团队。

如果你只是偶尔改改页面，装它可能有点重。但如果你长期面对 AI 生成的、千篇一律的界面，这套工具能帮你把审美这件事变得具体一些。

项目地址：https://github.com/pbakaus/impeccable

资料来源

• GitHub Trending（Daily）：https://github.com/trending?since=daily
• 项目仓库：https://github.com/pbakaus/impeccable
• 项目官网与文档：https://impeccable.style
• 检测器文档：https://impeccable.style/docs/detector
• 自动检查文档：https://impeccable.style/docs/hooks
• 项目作者：Paul Bakaus（https://www.paulbakaus.com）