生成式代码代理功能强大，但如果任其自由发挥，默认会产生视觉混乱：可预测的渐变、未校准的间距，以及臃肿过时的组件结构。Impeccable 是一套设计技能包，由 Paul Bakaus 创建，可直接在 Claude Code、Gemini CLI 和 Codex CLI（以及 Cursor 和 GitHub Copilot）中运行，以严格的美学限制运行，每个 harness 都重新编译了同一套规则。

通过应用有意的技能设计，你可以将代理从通用模式中拉出来，迫使它们生成精准且高视觉水准的 Web 体验。

什么是技能设计，为什么对 AI 代理很重要？

技能设计（skill design）是为非确定性 AI 模型构建确定性护栏的实践。你无需反复让代理“让它更好看”或“提升性能”，而是注入一个已编译的 DESIGN.md 和功能性指令，让代理在每次迭代中都必须遵守。

Impeccable 在 Anthropic 的 frontend-design 技能基础上构建，添加了 23 个共享设计词汇的命令，以及 58 条用于检测反模式的确定性规则（默认 Inter 字体、紫-蓝渐变、嵌套卡片、彩色背景上的灰色文字、每个标题上的圆角图标等）。它将 AI 从一个试图猜测你美学的初级开发者，转变为你所定义的视觉规则的严格执行者。

如何为现代 Web 应用实施 Impeccable 限制

集成此工作流时，精确性至关重要。Impeccable 会尊重你现有的设计系统，而不是覆盖它：运行时，它会扫描你的代码库（令牌、组件、Tailwind 配置），并从你自己的 DESIGN.md 中加载品牌规则，而不是强加通用美学。因此，如果你的身份基于极简美学，正确的方式是在该文件中自行声明——有限的绿色和粉色调色板、#0c1624 的深色基础背景、排版和语调——这样后续每个命令在生成任何内容前都会先读取它。Impeccable 不会替你决定美学；它提供词汇和机制，让你的美学在每次迭代中都能得到一致的尊重。

承担繁重工作的命令

Impeccable 公开了 23 个命令，这些命令充当与代理的共享词汇——每个命令都指定了一种特定的设计干预类型。其中对生产流程最有用的三个：

  • /audit — 生产质量检查。针对当前代码运行确定性反模式检测器（58 条精选规则：通用渐变、默认 Inter 字体、嵌套卡片、可预测的阴影等），并报告发现，但暂不修改任何内容。这是修改代码前的诊断步骤。
  • /normalize — 修正系统内部的不一致：间距、边框半径、排版大小或颜色使用偏离了 DESIGN.md 中定义的令牌。当代理的多次会话随着时间推移引入细微偏差时非常有用。
  • /polish — 最终质量检查。在现有系统内应用修正（不发明新系统），消除检测到的“AI 痕迹”，并在交付结果前重新运行检测器，直到发现为零。

Claude Code 或 Cursor 中的典型流程如下：/impeccable audit 用于诊断，/impeccable normalize 用于将现有内容与你的令牌对齐，/impeccable polish 作为提交前的最终检查——每个命令都会读取相同的 DESIGN.md/PRODUCT.md，以免超出你的品牌。

这三个只是起点：还有另外 20 个命令（/typeset、/distill、/colorize、/layout、/bolder、/quieter、/overdrive 等），涵盖排版、颜色、布局和动效。你可以在 官方仓库 README 中查看完整列表、安装文档和源代码。

实施示例：你自己的品牌规则

Impeccable 不强制前端架构（不决定你是否使用 Angular zoneless、信号或使用什么动画引擎）——这由你决定。它所做的是持续读取你定义的视觉规则。一个带有严格品牌限制的 DESIGN.md 示例可能如下所示：

# 说明性示例 — 并非 Impeccable 的实际模式，
# 它使用 Markdown 格式的 DESIGN.md/PRODUCT.md（Google Stitch 规范）
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calm, precise, no hype"
  anti_references: "Avoid pure white. Do not generate generic gradients. Reject all aggressive or weapon-related iconography, and avoid generating or showing hands in visual assets."

Enter fullscreen mode Exit fullscreen mode

任何动效引擎或架构决策（GSAP、Lenis、使用 Signals 的 Angular 等）仍然是你的技术栈决策——Impeccable 只是防止代理在你实施时重新引入通用视觉模式。