生成式程式碼代理功能強大，但若任其發揮，預設會產生視覺混亂：可預測的漸層、未經校準的間距，以及笨重過時的元件結構。Impeccable 是一套設計技能套件，由 Paul Bakaus 打造，可直接在 Claude Code、Gemini CLI 與 Codex CLI（以及 Cursor 和 GitHub Copilot）中運作，以同一套規則針對每個 harness 強制執行嚴格的美學限制。

透過刻意的技能設計，你可以引導代理遠離通用模式，強制產生精準、高視覺層級的網頁體驗。

什麼是技能設計，以及為什麼對 AI 代理很重要？

技能設計（skill design）是為非確定性 AI 模型建構確定性軌道的實踐。與其不斷要求代理「讓它看起來更好」或「提升效能」，不如注入一個已編譯的 DESIGN.md 與功能性指令，讓代理在每次迭代時都必須遵守。

Impeccable 建構在 Anthropic 的 frontend-design 技能之上，並新增 23 個指令，搭配共享設計詞彙，以及 58 條確定性反模式偵測規則（預設 Inter 字體、紫藍漸層、巢狀卡片、彩色背景上的灰色文字、每個標題上的圓角圖示等）。它將 AI 從「試圖猜測你美學的初級開發者」，轉變為嚴格遵守你所定義視覺規則的實作者。

如何為現代網頁應用程式實作 Impeccable 限制

整合此工作流程時，精準度至關重要。Impeccable 會尊重你現有的設計系統，而非覆蓋它：執行時，它會掃描你的程式碼庫（tokens、元件、Tailwind 設定），並從你自己的 DESIGN.md 載入品牌規則，而非強制執行通用美學。因此，如果你希望保留極簡風格，正確的做法是自己宣告該風格——例如限定綠色與粉紅色調、#0c1624 深色背景、字體與語氣——讓後續每個指令在產生內容前都能讀取。Impeccable 不會為你決定美學；它提供詞彙與機制，讓你的美學能在每次迭代中一致地被尊重。

負責繁重工作的指令

Impeccable 提供 23 個指令，作為與代理的共享詞彙——每個指令都對應特定設計介入類型。以下三個對生產流程最實用的指令：

  • /audit — 生產級品質檢查。針對目前程式碼執行 58 條反模式偵測器（通用漸層、預設 Inter 字體、巢狀卡片、可預測陰影等），並回報發現，但不立即修改程式碼。這是在修改程式碼前的診斷步驟。
  • /normalize — 修正系統內部的不一致：間距、邊框半徑、字體大小或偏離 DESIGN.md 中定義 token 的色彩使用。當代理多次會話累積小偏差時特別有用。
  • /polish — 最終品質檢查。在現有系統中套用修正（不發明新系統）、移除偵測到的「AI 痕跡」，並在交付前重新執行偵測器，直到零發現。

在 Claude Code 或 Cursor 中的典型流程如下：/impeccable audit 診斷、/impeccable normalize 讓現有內容符合你的 token、/impeccable polish 作為提交前的最終檢查——每個指令都會讀取相同的 DESIGN.md/PRODUCT.md，以確保不偏離你的品牌。

這三個指令只是起點：還有其他 20 個指令（/typeset、/distill、/colorize、/layout、/bolder、/quieter、/overdrive 等）涵蓋排版、色彩、版面與動效。你可以在 官方儲存庫 README 查看完整列表、安裝文件與原始碼。

實作範例：你自己的品牌規則

Impeccable 不會強制前端架構（不決定你是否使用 Angular zoneless、signals 或哪種動畫引擎）——這完全由你決定。它只會持續讀取你所定義的視覺規則。一個包含嚴格品牌限制的 DESIGN.md 範例如下：

# Ejemplo ilustrativo — no es el esquema real de Impeccable,
# que usa DESIGN.md/PRODUCT.md en formato Markdown (spec Google Stitch)
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calma, precisa, sin hype"
  anti_references: "Evitar el blanco puro. No generar degradados genéricos. Rechazar toda iconografía agresiva o relacionada con armas, y evitar generar o mostrar manos en los recursos visuales."

Enter fullscreen mode Exit fullscreen mode

任何動效引擎或架構決策（GSAP、Lenis、Angular with Signals 等）仍由你自行決定技術堆疊——Impeccable 只會避免代理在實作過程中重新引入通用視覺模式。