精通 Impeccable：用 AI 设计前端架构技能
掌控 Impeccable：AI 前端架构的技能设计
生成式代码智能体很强大，但如果放任不管，默认情况下它们会制造视觉上的混乱：千篇一律的渐变色、未经校准的间距，以及臃肿过时的组件结构。Impeccable 是一套由 Paul Bakaus 创建的设计技能包，直接运行在 Claude Code、Gemini CLI 和 Codex CLI（以及 Cursor 和 GitHub Copilot）中，为每个工具环境编译同一套规则集，从而施加严格的审美约束。通过有意识的技能设计，你可以让智能体远离通用模式，迫使它们生成精确、视觉水平高的 Web 体验。
什么是技能设计？为什么对 AI 智能体很重要？
技能设计（skill design）是一种为不确定性 AI 模型构建确定性轨道的实践。你不再无休止地要求智能体“让它看起来更好”或“优化性能”，而是注入一份编译好的 DESIGN.md 文件以及功能指令，让智能体在每一次迭代中都必须遵守。Impeccable 建立在 Anthropic 的 frontend-design 技能之上，并加入了 23 个共享设计词汇的命令，以及 58 条用于检测反模式的确定性规则（比如默认使用 Inter 字体、蓝紫色渐变、嵌套卡片、彩色背景上的灰色文字、每个标题上的圆角图标等）。它把 AI 从一个试图猜测你审美的初级开发者，变成了你定义视觉规则的严格执行者。
如何在现代 Web 应用中实施 Impeccable 的约束
集成这个工作流时，精确性决定一切。Impeccable 尊重你现有的设计系统，而不是覆盖它：运行时，它会扫描你的代码库（包括令牌、组件、Tailwind 配置），从你自己的 DESIGN.md 中加载品牌规则，而不是强加一套通用审美。
因此，如果你的品牌调性基于极简美学，正确的做法是在 DESIGN.md 里自己声明这份调性——限定绿和粉的色盘、深色背景统一用 #0c1624、字体和语气风格——这样后续每条命令在执行生成之前都会先读取它。Impeccable 不会替你决定那种审美；它给你一套词汇表和机制，让你的审美在每一次迭代中都能得到一致尊重。
干重活的命令
Impeccable 提供了 23 条命令，它们像是你和 AI agent 之间共享的一套词汇——每一条都对应一种特定的设计干预。其中三条对生产流程最有用：
/audit—— 生产级质量检查。它对当前代码执行确定性反模式检测器（58 条精筛规则：通用渐变、默认的 Inter 字体、嵌套卡片、可预测的阴影等），并报告发现结果，但暂时不改动任何代码。这是接触代码之前的诊断步骤。/normalize—— 修复系统内部的不一致：间距、圆角、字号或颜色使用上偏离了你在DESIGN.md中定义的 token。当 agent 经过多次会话、随时间引入微小偏差时特别有用。/polish—— 最终的质量打磨。它在现有系统内应用修正（不发明新系统），消除检测到的“AI 痕迹”，并在交付结果前重新运行检测器，直到结果为零发现。
在 Claude Code 或 Cursor 中，一个典型的工作流是这样的：
/impeccable audit → 诊断
/impeccable normalize → 将已有内容对齐你的 token
/impeccable polish → commit 前的最终抛光
每条命令都会读取同一个 DESIGN.md / PRODUCT.md，确保不偏离你的品牌标准。
这三条只是起点：另外还有 20 条命令（/typeset、/distill、/colorize、/layout、/bolder、/quieter、/overdrive 等），覆盖排版、色彩、布局和动效。完整的命令列表、安装文档以及源代码，都可以在仓库的官方 README 中找到。
📐 实现示例：你自定义的品牌规则
Impeccable 并不强制前端架构——它不会替你决定是否用 Angular zoneless、Signals 还是哪个动画引擎，这些都由你掌控。它真正做的事情是：始终如一地读取你定义的视觉规则。下面是一个示例 DESIGN.md，里面写了严格的品牌约束：
# 仅为示意——并非 Impeccable 的真实规范
# 真实场景使用 Markdown 格式的 DESIGN.md / PRODUCT.md（Google Stitch 规范）
brand :
background_base : "#0c1624"
allowed_accents : ["green", "pink"]
voice : "冷静、精准、无炒作"
anti_references : "避免纯白色。不使用通用渐变色。拒绝任何激进或与武器相关的图标，杜绝在视觉资源中生成或显示手部。"