Impeccable

Impeccable 是一个为 AI 编码代理提供前端设计指导的 Skill。它包含 23 个命令、59 个确定性检测器规则，并支持实时浏览器迭代，帮助 AI 生成更高质量的前端设计。

为什么选择 Impeccable？

Anthropic 的 frontend-design 是第一个广泛使用的 Claude 设计技能。Impeccable 由此衍生。每个模型都在相同的 SaaS 模板上训练。如果跳过指导，每个项目都会出现相同的模式：全部使用 Inter 字体、紫蓝渐变、卡片嵌套、彩色背景上的灰色文字、标题上方圆角方形图标。Impeccable 增加了一次性设置流程、23 个命令和 59 个确定性检测器规则。

核心能力

23 个命令

所有命令通过 /impeccable 访问：

使用 /impeccable pin <command> 创建独立快捷方式（例如 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 上，它在不良写入落地前阻止。

工作方式

1. 初始化：在项目根目录运行 /impeccable init。这会设置包含设计上下文的 PRODUCT.md 和 DESIGN.md。
2. 选择命令：运行 /impeccable <command> <target>，例如 /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

反模式

该技能包含明确应避免的指导：

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

CLI 检测器

Impeccable 包含一个独立 CLI，无需 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/       # 原始扫描，忽略项目配置/上下文

支持的工具

• Cursor
• Claude Code
• GitHub Copilot
• Gemini CLI
• Codex CLI
• Grok Build
• OpenCode
• Pi
• Kiro
• Trae
• Rovo Dev
• Qoder
• Mistral Vibe

注意事项

• 使用命令前，请先运行 /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 块（包含文件模式，参见官方网站）。

效果预览

访问 Neo Mirai 案例研究，查看真实项目在使用 Impeccable 命令前后的对比。