简介

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文件。此后，在该项目内生成的所有设计都会自动遵循这套统一规范。

如何使用

基础工作流：三步走向专业

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一致性。

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

痛点：接手一个老旧的前端项目，界面风格停留在几年前，急需进行现代化重构，但缺乏设计资源支持。

Impeccable 方案：

1. 选中一个待重构的旧页面，输入/critique。AI会从UX角度指出信息架构和视觉层级方面的问题。
2. 输入/adapt，AI会将其重构为移动优先的响应式布局。
3. 输入/colorize和/typeset，AI会应用现代的色彩策略和排版比例。
4. 结果：无需具备深厚的设计功底，就能将陈旧页面系统性地升级为符合现代审美的界面，整个过程可重复、可验证。

总结

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

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