GitHub 地址：https://github.com/pbakaus/impeccable

简介

Impeccable​ 是一个专为 AI 编码助手（Claude Code、Cursor、Gemini CLI 等）打造的前端设计技能包（Skill）。它由前 Google 开发者布道师 Paul Bakaus 创建，旨在解决 AI 生成前端代码时普遍存在的“模板味”和“设计偏误”问题。

如果你厌倦了 AI 总是生成 Inter 字体、紫色渐变、卡片嵌套卡片的“AI 味”界面，Impeccable 就是你的解药。它通过一套精确定义的设计词汇表和20+ 条斜杠命令，将专业的 UI/UX 设计原则注入 AI 的决策过程，让生成的代码不仅功能完整，更具备高级的视觉质感和一致的设计系统。

主要功能

1. 20+ 精准设计命令（Design DSL）

Impeccable 提供了一套类似“领域特定语言”的命令集，让你能用设计师的语言指挥 AI：

• 诊断类：/audit（全面质量审计）、/critique（UX 深度评审）

• 质量类：/normalize（对齐设计系统）、/polish（上线前最后打磨）

• 增强类：/typeset（专业排版）、/arrange（布局与留白）、/animate（微交互）、/colorize（色彩策略）

• 强度类：/bolder（增加视觉冲击）、/quieter（降低视觉噪音）

• 系统类：/teach-impeccable（项目级设计上下文初始化）

2. 7 大设计参考模块

它不只是提示词，更是一套完整的设计知识库，覆盖了：

• Typography（字体排版）：字体配对、层级、可读性

• Color & Contrast（色彩与对比）：调色板生成、无障碍访问（WCAG）

• Spatial Design（空间设计）：留白、布局节奏、网格系统

• Motion（动效）：微交互、过渡动画、时序

• Interaction（交互）：悬停状态、反馈、可访问性

• Responsive Design（响应式）：断点、移动优先、流体布局

• UX Writing（UX 文案）：微文案、语气、清晰度

3. 反模式（Anti-Patterns）防御

Impeccable 明确教导 AI “什么不该做”，有效规避了 AI 训练数据中的常见糟粕：

• 禁止滥用 Inter 字体和紫色渐变

• 禁止卡片过度嵌套导致的视觉臃肿

• 禁止低对比度的文本（如灰色文字放在彩色背景上）

• 禁止无意义的过度动效

4. 多平台原生支持

它深度适配主流 AI 开发工具，不再是简单的 Prompt 拼接，而是作为原生 Skill​ 集成：

• Claude Code：通过插件市场或 CLI 一键安装

• Cursor：自动注入到 .cursor/配置

• Gemini CLI / Codex CLI：通过 npx skills工具链安装

• VS Code：通过扩展集成

安装与配置

推荐安装方式（自动）

在终端运行以下命令，它会自动检测你本地的 AI 工具并完成配置：

npx skills add pbakaus/impeccable

各平台手动配置

• Claude Code：

  • 插件市场：/plugin marketplace add pbakaus/impeccable

  • 或手动复制到：~/.claude/skills/

• Cursor：

  • 复制 impeccable文件夹到项目或全局的 .cursor/目录

• Gemini CLI / Codex CLI：

  • 复制到 ~/.gemini/skills/或 ~/.codex/skills/

项目级初始化

在项目根目录运行 /teach-impeccable命令，AI 会引导你填写项目特定的设计规范（如品牌色、间距基数），并生成 .impeccable.md文件。此后所有在该项目的设计生成都会自动遵循此规范。

如何使用

基础工作流：三步变专业

1. 生成：用自然语言描述需求（如“创建一个 SaaS 仪表盘页面”）。

2. 审计：运行 /audit，让 AI 检查可访问性、响应式、一致性等问题，并生成修复建议。

3. 精修：根据审计报告，组合使用命令如 /normalize（统一规范）→ /polish（打磨细节）→ /animate（添加动效）。

命令组合实战

• 快速美化：生成页面后，直接使用 /distill + /bolder + /typeset，一键去除冗余、增强视觉层次并优化排版。

• 生产就绪：上线前运行 /audit + /harden + /polish，确保代码在性能、错误处理和视觉细节上达到交付标准。

关键技巧

• 聚焦参数：大多数命令支持 [scope]参数，如 /polish #header只精修头部组件。

• 强度控制：使用 /quieter让过于花哨的界面变得克制，或用 /bolder让过于保守的界面更具表现力。

应用场景实例（无代码）

场景一：SaaS 登录页的“一键去 AI 味”

痛点：你用 AI 生成了一个功能完整的 SaaS 注册页，但看起来像“另一个 AI 模板”，缺乏品牌感和专业度，转化率低。

Impeccable 方案：

1. 打开生成的页面文件，在 Claude Code 中输入 /audit。AI 会输出一份报告，指出“按钮对比度不足”、“间距系统混乱”等问题。

2. 输入 /normalize，AI 会自动将杂乱的 CSS 变量统一为你的品牌色和 8px 间距系统。

3. 输入 /polish，AI 会微调对齐、修复像素级细节，并确保移动端体验流畅。

4. 结果：原本粗糙的页面在 5 分钟内变成了拥有统一设计语言、通过 WCAG 无障碍标准的生产级界面，显著提升了用户的第一印象信任度。

场景二：团队设计系统的“自动化守门员”

痛点：团队没有专职设计师，不同成员用 AI 生成的组件风格各异（按钮圆角不一样、颜色不统一），维护成本高。

Impeccable 方案：

1. 在项目初始化时，由 Tech Lead 运行 /teach-impeccable，将团队的设计 Token（主色、字体、圆角值）写入 .impeccable.md。

2. 将此文件加入 Git 版本控制。

3. 所有成员在生成新组件时，只需在提示词后加上 /normalize。

4. 结果：无论谁生成的代码，都会自动对齐团队设计系统，实现了“无设计师”状态下的高质量 UI 一致性。

场景三：遗留项目的“视觉重构助手”

痛点：接手一个老旧的 jQuery 项目，界面风格停留在 2010 年，需要现代化重构但缺乏设计资源。

Impeccable 方案：

1. 选中一个待重构的旧页面，输入 /critique。AI 会从 UX 角度指出信息架构和视觉层级的问题。

2. 输入 /adapt，AI 会将其重构成移动优先的响应式布局。

3. 输入 /colorize和 /typeset，AI 会应用现代的色彩策略和排版比例。

4. 结果：你无需具备深厚的设计功底，就能将陈旧页面系统性地升级为符合现代审美的界面，且整个过程是可重复、可验证的。

总结

Impeccable 的本质是将“设计决策”编码化。它让开发者无需成为设计师，也能通过精准的命令语言，指挥 AI 产出具备专业级审美的前端代码。它不仅是技能包，更是 AI 时代前端开发的设计规范执行引擎。

GitHub 地址：https://github.com/pbakaus/impeccable