简介
Impeccable 是一款专为AI编码助手（如Claude Code、Cursor、Gemini CLI等）精心打造的前端设计技能包。它由前Google开发者布道师Paul Bakaus亲手创建，核心目标非常明确：彻底摆脱AI生成前端代码时那种挥之不去的“模板风格”和“设计偏差”。
你是否已经厌倦了AI频繁输出的Inter字体、紫色渐变以及卡片层层嵌套的界面？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“哪些做法应当避免”，从而有效规避训练数据中常见的各种设计缺陷：
- 禁止滥用Inter字体和紫色渐变
- 避免卡片过度嵌套导致的视觉臃肿
- 杜绝低对比度文本（例如在彩色背景上使用灰色文字）
- 抑制无意义且过度夸张的动效
4. 多平台原生支持
它深度适配主流的AI开发工具，并非简单的Prompt拼接，而是以原生技能包的形式无缝集成：
- 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文件。此后，在该项目内生成的所有设计都会自动遵循这套统一规范。
如何使用
基础工作流：三步走向专业
- 生成：用自然语言描述你的需求（例如“创建一个SaaS仪表盘页面”）。
- 审计：运行
/audit，让AI检查可访问性、响应式布局、一致性等问题，并生成修复建议。 - 精修：根据审计报告，组合使用多项命令，如
/normalize（统一规范）→/polish（打磨细节）→/animate（添加动效）。
命令组合实战
- 快速美化：生成页面后，直接使用
/distill + /bolder + /typeset，一键去除冗余元素、增强视觉层次并优化排版效果。 - 生产就绪：上线前运行
/audit + /harden + /polish，确保代码在性能、错误处理以及视觉细节方面均达到交付标准。
关键技巧
- 聚焦参数：大多数命令支持
[scope]参数，例如/polish #header表示只精修头部组件。 - 强度控制：使用
/quieter让过于花哨的界面变得克制内敛，或使用/bolder让过于保守的界面更具表现力和冲击力。
应用场景实例
场景一：SaaS登录页的“一键去AI味”
痛点：用AI生成了一个功能完整的SaaS注册页面，但看起来总像“另一个AI模板”，缺乏品牌辨识度和专业感，转化率堪忧。
Impeccable 方案：
- 打开生成的页面文件，在Claude Code中输入
/audit。AI将输出一份专业报告，指出“按钮对比度不足”、“间距系统混乱”等问题。 - 输入
/normalize，AI会自动将杂乱的CSS变量统一为你设定的品牌色和8px间距系统。 - 输入
/polish，AI会微调对齐方式、修复像素级细节，并确保移动端体验流畅。 - 结果：原本粗糙的页面在5分钟内，就变成拥有统一设计语言、通过WCAG无障碍标准的生产级界面，用户的第一印象和信任度将显著提升。
场景二：团队设计系统的“自动化守门员”
痛点：团队缺乏专职设计师，不同成员用AI生成的组件风格各异（按钮圆角不一致、颜色不统一），导致维护成本居高不下。
Impeccable 方案：
- 在项目初始化阶段，由Tech Lead运行
/teach-impeccable，将团队的设计Token（主色、字体、圆角值）写入.impeccable.md文件。 - 将此文件纳入Git版本控制。
- 所有成员在生成新组件时，只需在提示词后添加
/normalize。 - 结果：无论谁生成的代码，都会自动对齐团队设计系统，实现“无设计师”状态下的高质量UI一致性。
场景三：遗留项目的“视觉重构助手”
痛点：接手一个老旧的前端项目，界面风格停留在几年前，急需进行现代化重构，但缺乏设计资源支持。
Impeccable 方案：
- 选中一个待重构的旧页面，输入
/critique。AI会从UX角度指出信息架构和视觉层级方面的问题。 - 输入
/adapt，AI会将其重构为移动优先的响应式布局。 - 输入
/colorize和/typeset，AI会应用现代的色彩策略和排版比例。 - 结果：无需具备深厚的设计功底，就能将陈旧页面系统性地升级为符合现代审美的界面，整个过程可重复、可验证。
总结
Impeccable的本质，是将“设计决策”进行编码化。它让开发者无需成为专业设计师，也能通过精准的命令语言，指挥AI产出具备专业级审美的前端代码。它不仅仅是一个技能包，更是AI时代中，前端开发领域执行设计规范的强大引擎。
GitHub 地址：https://github.com/pbakaus/impeccable
