AI

Impeccable：給 Coding Agent 的設計詞彙表，在「AI 味」介面上線前就抓出來

Monday

本內容僅供參考，詳細使用規則與工具安全性與否，建議要進行相關安全性測試與評估

你一定看過這種網頁：全站 Inter 字型、紫到藍的漸層背景、卡片裡面再包卡片、彩色底上配灰色字、每個標題上面都有一個圓角方形的圖示——一眼就看得出是 AI 生成的。這種「AI slop」已經多到有了專屬的名詞。Impeccable（pbakaus/impeccable）想解決的就是這件事：它是給 Coding Agent 的「設計詞彙表」，讓你能用設計師的語言指揮 Agent 改介面，並在上線前自動抓出 AI 味。專案約 97.1k stars，在 10 月 29、30 日的 AI 開源趨勢報告中，與 hallmark 一起被列為「反 AI slop」設計工具的代表。

1. 專案背景與定位

Impeccable 由 Paul Bakaus 開發，Apache-2.0 授權，最初是從 Anthropic 的 frontend-design Skill 延伸而來。官方標語是：「你的 Coding Agent 的設計詞彙。用 polish 和 bolder 引導、用 critique 和 audit 審查，在 AI slop 上線前抓住它。」

README 說它在改善既有介面上表現最好，也能從零建立新頁面。支援 19 種 Agent，包括 Claude Code、Cursor、Codex CLI、GitHub Copilot、Devin、Replit Agent、Gemini CLI、OpenCode、Kiro、Pi、Hermes Agent 等。

2. 技術架構與核心設計

  • 24 個設計指令，分成五類：
    • 引導（9 個）：bolder、quieter、distill、colorize、typeset、layout、animate、delight、overdrive
    • 審查（2 個）：critique（帶評分的 UX 審查）、audit（技術品質報告，以 P0–P3 排序）
    • 收尾（6 個）：polish、harden、clarify、adapt、optimize、onboard
    • 即時迭代（2 個）：live、generate
    • 規劃與設定（4 個）：shape、init、document、extract
  • 脈絡檔案：init 會產生描述產品與使用者的 PRODUCT.md，document 則把既有的視覺系統整理成 DESIGN.md，讓 Agent 理解「這個產品應該長什麼樣」。
  • 確定性偵測器：62 條規則，不需要 LLM 或 API 金鑰；可掃描目錄或 URL（對比度、過小文字等規則需要渲染後的頁面），支援 JSON 輸出與 GitHub Actions 註解，有發現時以 exit code 2 回報。
  • Agent hook：在 Claude Code、Cursor、Codex、Copilot、Grok Build、Hermes Agent 上，Agent 每次修改 UI 檔案都會自動掃描。
  • Live 模式：在執行中的開發伺服器上加一層覆蓋介面，點選元素、試不同變體，選定後直接寫回原始碼；支援 Vite、Next、SvelteKit、Astro、Nuxt 與純 HTML。
  • Chrome 擴充功能：在線上網頁直接疊加偵測結果。
  • 安裝：npx impeccable install 後執行 /impeccable init，也可透過 Claude Code marketplace、VS Code 擴充功能、git submodule 或手動複製。

3. 社群熱度與生態採用

約 97.1k stars、5.7k forks、2,600 commits，open issue 只有 41 個。README 提供了一個前後對照案例：同一個模型、同一個虛構民宿網站，套用 Impeccable 前後的設計差異，另有一個研討會網站的案例研究。它和本月介紹過的 diagram-design、PPT Master 一樣，代表 Agent Skill 正在從「能不能做」進入「做得好不好看」的競爭階段。

4. 局限性與潛在風險

  • Hook 的執行權限：README 特別提醒，在 Claude Code 中，已安裝的 command hook 即使在模型自己的指令被拒絕時仍會執行；Codex、Grok Build、Hermes 則需要額外的信任或核准步驟。安裝前應了解 hook 會做什麼。
  • Live 模式只限本機：只能用在本機的 checkout，官方明確警告不要注入到已部署的網站，也不要為了它削弱正式環境的 CSP。
  • 會執行專案腳本：套用文案修改時，可能以你的權限執行 package.json 中的 impeccable:manual-edit-validate 腳本。
  • Telemetry 與目錄擷取：開始新設計時會從官方目錄擷取視覺方向；關閉 telemetry 只會停止匿名的選擇紀錄，不會停止這個擷取。官方表示專案名稱、檔案、程式碼與 PRODUCT.md 不會被送出。
  • 部分安裝方式功能不完整：手動複製與 VS Code 擴充功能不包含設計 hook，手動複製也沒有 subagent。
  • 範圍越小效果越好：官方建議針對局部元件，而不是整頁一次審查。
  • 「好設計」仍有主觀成分：規則可以抓出明顯的 AI 味，但品牌個性與使用者體驗最終仍需要設計師判斷。

5. 應用價值與適用場景

最適合已經大量用 Agent 寫前端、卻苦於產出千篇一律的團隊：沒有專職設計師的新創，可以用 critique 與 audit 做第一輪設計審查；有設計師的團隊，則能把設計規範寫進 DESIGN.md，讓 Agent 照著做，並用偵測器在 CI 中把關。Live 模式也很適合設計師與工程師一起快速比較不同變體。

Monday 的觀點與架構建議

  • Impeccable 最聰明的地方是把「設計品味」拆成可下指令的詞彙：bolder、quieter、distill 這些詞，正是設計師平常給回饋的方式。當人和 Agent 共用同一套詞彙，溝通成本會大幅下降。
  • 「LLM 負責生成、確定性規則負責檢查」的分工，和本月的 OpenCodeReview、e2e 是同一個模式：讓不穩定的部分有穩定的護欄。
  • 導入建議：先執行 init 與 document 建立 PRODUCT.md 和 DESIGN.md；把偵測器接進 CI；審慎評估 hook 的權限，並只在本機使用 Live 模式。
  • 回顧整個十月，我們從 Ponytail 的「少寫程式碼」、Superpowers 的「工程紀律」、到今天的「設計品味」，可以看到一條清楚的主線：Agent 的下一個瓶頸不是能力，而是品味與判斷——而這些，正在被一點一點地寫成 Skill。

參考來源