【impeccable】告别 AI 设计的千篇一律：前端精品化的 23 个指令与反模式指南
如果你在用 AI 助手写前端代码时，厌倦了千篇一律的 Inter 字体、紫蓝渐变和层层嵌套的卡片，Impeccable 提供了一个系统性的解决方案。它是一套为 AI 编码助手打造的前端设计技能，通过建立共享的设计词汇与明确的反模式规则，让 AI 产出更具质感、更少“AI 味”的界面。
主要特性
- 七大设计领域知识库：涵盖排版、色彩与对比度、空间设计、动效、交互、响应式布局以及 UX 写作。每次调用指令时都会加载这些参考文件，并附带一个品牌与产品的调节寄存器，用于调整默认输出。
- 23 条可执行指令：从
craft、shape到polish、audit、critique、distill、animate、bolder、quieter等，覆盖了从设计规划、实现、审查到最终打磨的完整流程。 - 反模式检测机制：包含 27 条确定性反模式规则（如避免滥用 Arial/Inter、避免在彩色背景上使用灰色文字、避免卡片嵌套卡片等），外加 12 条 LLM 批评规则。配套 CLI 和浏览器扩展可在没有 LLM 和 API Key 的情况下直接运行确定性检测。
- 广泛的工具支持：兼容 Cursor、Claude Code、OpenCode、Pi、Gemini CLI、Codex CLI、VS Code Copilot、Kiro、Trae、Rovo Dev、Qoder 等主流 AI 编码工具。
安装与使用
最推荐的安装方式是在项目根目录运行：
npx impeccable skills install
该命令会自动检测你使用的 AI 工具，并将编译好的技能文件写入对应位置（如 .claude/skills/、.cursor/skills/ 等）。安装后重启工具即可。
对于 Claude Code 用户，也可以直接通过以下命令安装：
/plugin marketplace add pbakaus/impeccable
安装完成后，所有操作都通过 /impeccable 发起。例如：
/impeccable audit blog # 审查博客相关页面
/impeccable critique landing # 对落地页进行 UX 设计评审
/impeccable polish settings # 上线前的最终打磨
/impeccable harden checkout # 为结账流程补充错误处理和边界情况
如果经常使用某个指令，可以通过 /impeccable pin audit 将其固定为 /audit 等快捷指令。此外，也可以直接描述需求：
/impeccable redo this hero section
独立 CLI 工具
除了 AI 助手插件，Impeccable 还提供了独立的命令行工具，用于在不调用 AI 的情况下扫描反模式：
npx impeccable detect src/ # 扫描目录
npx impeccable detect index.html # 扫描 HTML 文件
npx impeccable detect https://example.com # 扫描线上页面
npx impeccable detect --fast --json . # 仅正则匹配，输出 JSON
适用场景与用户
这套工具非常适合以下场景：
- AI 辅助编码时的设计把关：当你使用 Cursor、Claude Code 等工具生成前端代码时，通过
/impeccable audit或/impeccable polish快速修正模板化、同质化的设计问题。 - 项目收尾与质量提升：在交付前进行设计系统对齐、可访问性检查和最终打磨。
- 建立团队设计共识：23 个命令提供了一套人与 AI 共享的设计词汇，方便在团队中统一设计标准。
目标用户主要是与 AI 协作的前端开发者、全栈工程师，以及希望提升 AI 输出设计质量的独立开发者。
总结
Impeccable 的价值在于它不仅仅是一个提示词集合，而是一套结构化的前端设计技能体系。它将设计原则、反模式规则和可执行命令整合在一起，让 AI 助手从“能写代码”进阶到“能产出好设计”。无论是通过 23 条指令在 AI 工具中进行深度设计协作，还是使用独立 CLI 快速扫描代码中的反模式，它都为前端开发提供了实用的质量保障。对于追求界面质感、希望摆脱 AI 设计同质化的开发者来说，这是一个值得尝试的增效工具。
