#Impeccable — AI 设计技能护栏

Impeccable 是一个开源的 AI 设计技能系统，适用于 Cursor、Claude Code、Gemini CLI 等主流 AI 编码代理。与传统设计技能"列出好设计的规则"不同，Impeccable 的核心理念是阻断坏设计——通过系统化的模式检测和拦截，在 AI 输出到达用户之前就过滤掉平庸的、模板化的、AI 味明显的设计。

#核心理念：阻断坏设计

大多数设计技能的工作方式是"告诉 AI 什么是好的"——列举排版规则、配色原则、布局模式。问题是 AI 模型的上下文窗口有限，规则越多越容易被忽略。

Impeccable 反其道而行之：不教 AI 怎么做好，而是阻止它做坏。它维护一份"坏设计模式库"（Bad Design Patterns），每个模式都有明确的检测规则和拦截策略。AI 生成的每一行设计代码都必须通过这层过滤。

#安装

#方式一：CLI 安装器（推荐）

# 一键安装到当前项目的 .claude/skills/ 目录
npx impeccable install

#方式二：网站下载

访问 impeccable.dev，下载 SKILL.md 文件，手动放入项目的 .claude/skills/ 目录。

#方式三：手动克隆

git clone https://github.com/nicholasgriffintn/impeccable.git
cp -r impeccable/skills/impeccable .claude/skills/impeccable

#初始化

安装后运行初始化命令，让 Impeccable 分析你的项目并生成适配配置：

/impeccable init

初始化会：

1. 检测项目技术栈（React、Vue、Next.js 等）
2. 分析现有设计系统的约束条件
3. 生成项目特定的拦截规则
4. 输出一份设计质量基线报告

#命令分类（23 个）

Impeccable 的 23 个命令分为六大类，覆盖从创建到加固的完整设计生命周期。

#Create（创建）— 3 个命令

从零生成设计时，强制 AI 避开已知的平庸模式。

#Evaluate（评估）— 4 个命令

对已有设计进行多维度审查，发现 AI 平庸模式。

#Refine（精炼）— 5 个命令

在不改变功能的前提下提升设计品质。

#Simplify（简化）— 4 个命令

减少视觉噪音，让设计更干净。

#Harden（加固）— 4 个命令

确保设计在边界情况下仍然可靠。

#System（系统级）— 3 个命令

项目级的设计系统管理。

#完整工作流示例

以下是一个登录页面从"能用"到"精致"的完整优化流程：

#第一步：创建

/impeccable page
> 创建一个 SaaS 产品的登录页面，包含邮箱/密码表单和社交登录按钮

Impeccable 会在生成时就避免居中卡片、默认 Inter 字体、纯白背景等 AI 平庸模式。

#第二步：评估

/impeccable evaluate

输出示例：

设计评分：7.2/10

严重问题：
- 表单输入框缺少 focus 状态的可见指示器（a11y 违规）
- 社交登录按钮图标与文字间距不一致

改进建议：
- 密码输入框建议增加"显示密码"切换
- 错误状态缺少 aria-live 声明

#第三步：精炼

/impeccable typography
> 优化登录页面的排版层级

/impeccable spacing
> 统一登录页面的间距系统

#第四步：加固

/impeccable a11y
> 确保登录页面通过 WCAG AA

/impeccable edge
> 添加空状态、加载状态、错误状态处理

#第五步：检查

/impeccable report
> 生成登录页面的最终审查报告

#常用命令组合

#与其他设计技能的对比

#常见陷阱

#1. 只用 evaluate 不用 refine

评估发现问题后，必须用精炼命令实际修复。evaluate 只诊断，不治疗。

#2. 跳过 init 直接使用命令

/impeccable init 会检测你的技术栈并生成适配配置。跳过它可能导致拦截规则与项目不匹配。

#3. 过度依赖单一命令

/impeccable refine 是通用精炼，但排版问题用 typography、配色问题用 color 效果更好。根据问题类型选择专项命令。

#4. 忽视 harden 类命令

创建和精炼让设计"好看"，加固让设计"可靠"。响应式、无障碍、边界情况是生产环境的必修课。

#5. 在非设计代码上运行

Impeccable 针对 UI/设计代码。在纯逻辑代码、API 路由、数据库模型上运行不会产生有价值的结果。

#下一步

• Taste Skill — 反 AI 平庸设计框架，三旋钮配置 + Pre-Flight Check
• 前端通用 Skills — 跨框架的 UI 设计、Web 规范和工具链
• React 生态 Skills — React 专属 Skills
• Vue 生态 Skills — Vue 专属 Skills
• 前端开发最佳实践 — 完整的前端开发指南
• 前端场景实战指南 — 实战案例