技能介绍

Impeccable 是 Paul Bakaus 做的一套专业设计语言，专为 AI 编码代理设计：包含 23 个命令、59 条确定性检测规则，并支持实时浏览器迭代，目标是让 AI 生成的前端界面更具品牌感、性能更好、并且符合 UX 标准。

它明确定位为 Anthropic 的 frontend-design 技能的衍生作品。作者的判断是：每个模型都在相同的 SaaS 模板上训练，如果跳过指导，每个项目都会出现同样的模式——全部使用 Inter 字体、紫蓝渐变、卡片嵌套、彩色背景上的灰色文字、标题上方圆角方形图标。Impeccable 对此给出的补丁是一次性设置流程、23 个命令和 59 个确定性检测器规则。

适用场景

  • 用 AI 代理写完页面后，想系统检查可访问性、性能与响应式问题；
  • 觉得生成出来的界面「一眼 AI」，需要有人指出具体哪里平庸并给出改法；
  • 项目已经有一定的设计系统，想让代理在写代码前先遵守它；
  • 需要一份设计评审，从层次、清晰度、情感共鸣几个角度给意见；
  • 发布前做最后一轮清理：对齐设计系统、补齐边缘情况、准备上线；
  • 想在 CI 或本地命令行里直接跑反模式扫描，不接 AI 工具。

核心能力

23 个命令

所有命令通过 /impeccable 访问：

↔ 左右滑动查看完整表格
命令功能
/impeccable craft完整的先塑形再构建流程，支持视觉迭代
/impeccable init一次性设置：收集设计上下文，写入 PRODUCT.md 和 DESIGN.md，配置实时模式，推荐下一步
/impeccable document从现有项目代码生成根目录的 DESIGN.md
/impeccable extract将可复用组件和 token 提取到设计系统中
/impeccable shape在编写代码前规划 UX/UI
/impeccable critiqueUX 设计评审：层次、清晰度、情感共鸣
/impeccable audit运行技术质量检查（可访问性、性能、响应式）
/impeccable polish最终清理、设计系统对齐和发布准备
/impeccable bolder增强平淡的设计
/impeccable quieter降低过于大胆的设计
/impeccable distill精简到本质
/impeccable harden错误处理、国际化、文本溢出、边缘情况
/impeccable onboard首次运行流程、空状态、激活路径
/impeccable animate添加有目的的运动
/impeccable colorize引入战略性色彩
/impeccable typeset修复字体选择、层次、大小
/impeccable layout修复布局、间距、视觉节奏
/impeccable delight添加愉悦时刻
/impeccable overdrive添加技术上卓越的效果
/impeccable clarify改进不清晰的 UX 文案
/impeccable adapt适配不同设备
/impeccable optimize性能改进
/impeccable live视觉变体模式：在浏览器中迭代元素

使用 /impeccable pin 可以创建独立快捷方式（例如 pin audit 创建 /audit）。

59 个确定性检测规则

检测器可捕获 59 个确定性问题，涵盖 AI 垃圾（侧标签边框、紫色渐变、弹跳缓动、暗色发光）和通用设计质量（行长度、拥挤的内边距、小触摸目标、跳过的标题等）。运行无需 LLM 和 API 密钥。

设计上下文初始化

/impeccable init 会先询问表面是品牌（营销、落地页、作品集）还是产品（应用 UI、仪表盘、工具），然后写入每个后续命令都会读取的设计上下文。

设计钩子

在支持的 AI 工具（Claude Code、GitHub Copilot、Codex、Cursor、Grok Build）中，设计钩子会在直接编辑 UI 文件时运行 Impeccable 设计检测器，并把发现反馈进代理流程。在 Claude Code、GitHub Copilot、Codex 和 Grok Build 上，它在编辑后显示发现；在 Cursor 上，它会在不良写入落地前阻止。

内置反模式清单

  • 不要使用过度使用的字体（Arial、Inter、系统默认）；
  • 不要在彩色背景上使用灰色文字；
  • 不要使用纯黑/灰色（应加色调）；
  • 不要将一切包裹在卡片中或卡片嵌套卡片；
  • 不要使用弹跳/弹性缓动（过时感觉）。

效果预览

真实项目在使用 Impeccable 命令前后的对比，见作者提供的案例研究：

用AI设计与审计前端界面预览

Neo Mirai 案例研究：https://impeccable.style/cases/neo-mirai

工作方式

  1. 初始化：在项目根目录运行 /impeccable init。这会设置包含设计上下文的 PRODUCT.md 和 DESIGN.md。
  2. 选择命令：运行 /impeccable ，例如 /impeccable critique landing。
  3. 处理：Skill 根据设计上下文和内置规则分析目标，生成建议、代码修改或报告。
  4. 输出：你将获得改进后的代码、检测报告、设计评审等。

你需要提供

  • 包含 HTML/CSS/JS 文件的项目目录，或单个 HTML 文件，或一个 URL；
  • 运行命令时指定目标（例如 blog、landing、checkout）；
  • 可选：设计上下文（通过 /impeccable init 收集）。

你会获得

  • 设计质量改进（视觉、布局、色彩、字体）；
  • 确定性检测报告（可访问性、性能、响应式）；
  • 设计评审（层次、清晰度、情感共鸣）；
  • 代码强化（错误处理、国际化、边缘情况）；
  • 实时浏览器预览（使用 live 命令）。

使用示例

/impeccable audit blog           # 审计博客中心和文章页面
/impeccable critique landing     # UX 设计评审
/impeccable polish settings      # 发布前最终清理
/impeccable harden checkout      # 添加错误处理和边缘情况

或者直接使用描述：

/impeccable redo this hero section

命令行检测器（无需 AI 工具即可运行）：

npx impeccable detect src/                   # 扫描目录
npx impeccable detect index.html             # 扫描 HTML 文件
npx impeccable detect https://example.com    # 扫描 URL（使用 Puppeteer）
npx impeccable detect --json .               # 输出 CI 友好的 JSON
npx impeccable detect --no-config src/       # 原始扫描，忽略项目配置/上下文

注意事项

  • 使用命令前，请先运行 /impeccable init 设置设计上下文。
  • 设计钩子会在支持的工具上自动安装。对于 Codex，安装后需要打开 /hooks 并批准项目钩子。
  • 对于 Cursor：在 Cursor 设置 → Beta 中切换到 Nightly 频道，并在 Cursor 设置 → Rules 中启用 Agent Skills。
  • 对于 Gemini CLI：安装预览版本（npm i -g @google/gemini-cli@preview），运行 /settings 并启用 "Skills"，然后运行 /skills list 验证。
  • 对于 Trae：有两个版本，配置目录不同。复制后需要重启 Trae IDE 以激活技能。
  • 检测器也可以作为独立 CLI 运行，如上所示。
  • 为避免将生成的文件提交到 Git，请参考 Impeccable 文档添加推荐的 .gitignore 块（包含文件模式，参见官方网站）。
  • 页面导语写的是「60 条确定性检测规则」，正文详述为 59 条，此处以详述的 59 条为准。

支持的工具：Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、OpenCode、Pi、Kiro、Trae、Rovo Dev、Qoder、Mistral Vibe。