### [Impeccable：50.9K Stars！专治AI生成界面的「AI味」，让Claude Code、Cursor真正懂设计的开源设计语言](https://www.willai.cc/article/4411)

**Published:** 2026-07-27T06:50:25

**Author:** hiyoho

**Excerpt:** 项目简介 Impeccable 是由前 Google 开发者布道师 Paul Bakaus 开源的一套「让 AI 编码工具更擅长设计」的设计语言系统——它以 1 个 Skill + 23 个设计命令 + 60 条确定性检测规则 + 设计钩子

![Impeccable 官方封面](https://admin.hiyoho.com/wp-content/uploads/2026/07/impeccable_cover.jpg)

## 项目简介

**Impeccable** 是由前 Google 开发者布道师 Paul Bakaus 开源的一套「让 AI 编码工具更擅长设计」的设计语言系统——它以 1 个 Skill + 23 个设计命令 + 60 条确定性检测规则 + 设计钩子的形式，接入 Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot 等十余种 AI 编程工具，专治 AI 生成前端界面千篇一律的「AI 味」（Inter 字体、紫蓝渐变、卡片套卡片……）。项目 2025 年 11 月发布，目前已斩获 **50,900+ Stars**，今日仍在 GitHub 趋势榜上持续攀升。

![Impeccable GitHub 仓库卡片](https://admin.hiyoho.com/wp-content/uploads/2026/07/impeccable_github_card.png)

## 安装要求和过程

### 环境要求

-   Node.js 环境（使用 npx 安装，无需全局依赖）
-   任意受支持的 AI 编程工具：Claude Code、Cursor、Codex CLI、Gemini CLI、GitHub Copilot、OpenCode、Grok Build、Trae、Qoder 等 13+ 种
-   CLI 与浏览器扩展的检测器**无需 API Key** 即可运行

### 快速安装

```
# 方式一：CLI 一键安装（推荐，在项目根目录执行）
npx impeccable install

# 非交互式安装：指定工具与作用域
npx impeccable install --providers=claude,cursor --scope=project

# 更新到最新版本
npx impeccable update

# 方式二：作为 Claude Code 插件安装
/plugin marketplace add pbakaus/impeccable

# 方式三：Git Submodule 方式
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
```

安装后重载你的 AI 编程工具即可。首次使用建议先运行 `/impeccable init`，它会引导生成 `PRODUCT.md` 与 `DESIGN.md`，把品牌与产品设计上下文固化到项目里。

## 核心功能

-   **23 个设计命令，给 AI 一套共享设计词汇**：`/impeccable craft`（完整设计流程）、`critique`（UX 审查）、`audit`（技术检查）、`polish`（发布前终检）、`bolder/quieter`（视觉强化/降噪）、`animate`（动效）、`colorize`（配色）、`typeset`（字体排印）等，覆盖从规划到打磨的全链路；
-   **60 条确定性「AI 味」检测规则**：精准狙击 AI 生成界面的通病——默认 Inter/Arial 字体、紫蓝渐变、纯黑纯白灰、卡片嵌套卡片、弹跳缓动动画等，同时检查行宽、触控热区等通用可用性指标，规则引擎零 LLM、零 API 成本；
-   **设计钩子（Hooks）自动拦截**：在 Claude Code、Copilot、Codex、Cursor、Grok Build 上写入代码时自动运行检测器，发现严重设计问题可直接阻断坏代码写入，把关口前移；
-   **PRODUCT.md / DESIGN.md 上下文固化**：通过 `init` 与 `document` 命令把品牌调性、产品定位写成文档，让 AI 每次生成都带着你的设计基因而非「出厂默认审美」；
-   **独立 CLI + 实时浏览器迭代**：`npx impeccable detect src/` 可脱离 AI 工具独立扫描目录/文件/URL（支持 `--json` 输出接入 CI），`/impeccable live` 支持在浏览器里对界面变体做可视化迭代。

## 典型使用场景

1.  **Vibe Coding 项目去「AI 味」**：用 Claude Code/Cursor 快速搭出的产品原型总是长着一张「AI 脸」？安装后运行 `/impeccable init` + `/impeccable craft landing`，让落地页拥有独特的品牌气质，摆脱紫渐变 + Inter 字体的流水线审美；
2.  **发布前的设计质量门禁**：在 CI 中挂上 `npx impeccable detect --json .`，60 条规则自动检查行宽、对比度、触控区、动效缓动等问题；配合 `/impeccable polish` 做上线终检，把设计审查从「靠感觉」变成「有清单」；
3.  **无设计师团队的 UX 自助审查**：小团队没有专职设计师？`/impeccable critique checkout` 可对结账流程做启发式 UX 审查，`/impeccable harden` 补齐错误态与边界场景，相当于给团队配了一位 AI 设计顾问。

## 推荐理由

我把 Impeccable 装进 Claude Code 用了几天，最大的感受是：**它治的不是「AI 不会写前端」，而是「AI 写的前端都长一个样」**。以前让 AI 改设计只能反复喊「好看一点、高级一点」，现在有了 `bolder`、`quieter`、`distill` 这样的精确词汇，沟通成本断崖式下降——这正是「给人和 AI 建立共享设计语言」的价值。60 条确定性规则不烧 token、不用 API Key，钩子还能在坏代码写入前直接拦截，工程化程度远超一般的提示词合集。项目基于 Anthropic 官方 frontend-design skill 扩展，作者 Paul Bakaus 是 jQuery UI 创始人之一，设计与工程功底都过硬。Apache-2.0 协议，13+ 种 AI 编程工具通吃，做 AI 辅助开发的前端同学强烈建议装上。

## 下载地址

-   官网与文档：[https://impeccable.style](https://impeccable.style)
-   GitHub 仓库：[https://github.com/pbakaus/impeccable](https://github.com/pbakaus/impeccable)
-   npm 包：[https://www.npmjs.com/package/impeccable](https://www.npmjs.com/package/impeccable)

_项目信息：50,900+ Stars | 2,998 Forks | JavaScript | Apache-2.0 许可证_

**Tags:** AI, AI开源项目, AI编程, Anti-AI-slop, Apache许可, Claude Code, Codex, Coding Agent, Cursor, Impeccable

**Categories:** 开源项目

---