技能包

Impeccable:給編碼代理的前端設計語言和檢測規則

適合要讓編碼代理按產品事實做前端設計的任務;先在專案根目錄安裝,再用 /impeccable init 寫入 PRODUCT.md,檢測規則不需要 API key。

官方來源 · Impeccable

安裝

npx impeccable install

適合誰

需要給 AI 編碼代理補上設計指導時,再看 Impeccable。官方概括是:Design guidance for AI coding agents. 1 skill, 23 commands, live browser iteration, and 61 deterministic detector rules for AI-generated frontend design。

適合已經有前端專案、並願意先寫下穩定產品事實、再讓後續命令按這些事實工作的人。它不是只調顏色的主題包。正文列出可與 Cursor、Claude Code、Gemini CLI、Codex CLI、Grok Build、Hermes Agent、Veto 以及 every other supported tool 一起用,不要把這份名單理解成唯一支援範圍。

頁面:

https://github.com/pbakaus/impeccable

3 分鐘完成第一次嘗試

官方路徑只有這一段,先在專案根目錄執行:

npx impeccable install

然後在你的 AI coding tool 裡執行 /impeccable init。前置條件:目前目錄就是專案根;你接受 init 會把產品事實寫入 PRODUCT.md。不要發明其他安裝程式或未寫出的技能目錄。

第一次先做唯讀核對,不要急著寫檔。向代理確認:init 會把哪些事實記進 PRODUCT.md,以及這些事實和視覺方向有什麼區別。成功訊號是代理說出 audience、purpose、operating context、constraints、voice 和 evidence,並說明 later commands 不應把這些與 surface-level visual direction 混為一談。

確認無誤後再執行 /impeccable init。成功訊號是專案裡出現 PRODUCT.md,內容覆蓋上述欄位。

使用案例

案例一:先固化產品事實。/impeccable init records durable product truth in PRODUCT.md。把「我們在給誰做、產品做什麼、有哪些硬約束、聲音是什麼」交給代理,讓它寫入該檔。這是改檔操作,執行前先確認可以建立或覆蓋 PRODUCT.md。頁面沒有給出檔案範本全文,不要編造章節名以外的結構。

案例二:用確定性規則檢查前端設計。正文寫 61 deterministic detector rules,另有 LLM-only critique checks。The CLI and browser extension run the deterministic rules with no LLM and no API key。適合在改完一版介面後,先跑不帶模型的規則檢查,而不是一上來做生成式點評。能核對的是:這次檢查聲明不使用 LLM、也不索要 API key。23 條命令的具體名字頁面沒有列出,不要發明。

使用界線

安裝必須從專案根目錄開始,然後才是 /impeccable init。不要把兩步拆成兩套互相競爭的主安裝程式。

PRODUCT.md 記的是耐久的產品事實,不是視覺風格說明書。

CLI 與瀏覽器擴充功能跑確定性規則時不需要 LLM 和 API key;LLM-only critique 是另一類檢查,不要混成同一步。

用戶端按原文列出,且包含 every other supported tool,不要寫成只支援其中某一個。未寫出的命令名、規則明細和即時瀏覽器操作步驟都不要補。