Impeccable

Impeccable 是什麼？

Impeccable 是一款給 AI 程式開發代理的開源設計技能。它安裝到 Claude Code、Codex、Cursor、GitHub Copilot 等開發工具，為代理提供設計指引、一套具名的設計指令詞彙，以及一個自動檢查器，檢查 AI 生成的前端常重複出現的介面模式。

Impeccable 設計技能定位為讓代理具備設計專業：從零打造介面、改善現有介面，並忠於既有設計系統。其儲存庫把這個套件概括為 1 個技能、24 個指令、瀏覽器即時迭代，以及 61 條針對 AI 生成前端設計的確定性偵測規則。

官網將 Paul Bakaus 列為創作者；新安裝會下載由 Renaissance Geek, Inc. 簽署的引擎，該公司也被列為 Impeccable Chrome 擴充功能的開發者。根據專案 README，Anthropic 的 frontend-design 是首個被廣泛使用的 Claude 設計技能，而 Impeccable 以它為起點。

「Impeccable」也是普通單字，一些不相關的企業也在使用；本頁介紹的是從 pbakaus/impeccable 儲存庫發布的設計技能。

依 2026 年 10 月 5 日擷取的紀錄，該儲存庫顯示 76.3k 顆星，採用 Apache-2.0 授權條款。同日，擴充功能的商店頁面顯示 60,000 位使用者。

核心功能

一切都透過主要技能 /impeccable 執行，後接指令或白話請求；audit、polish、critique 等指令皆不需另外安裝。

指令類別

指令參考文件將其分成六類：建立（2）、評估（2）、精修（8）、簡化（3）、強化（4）和系統（5）。

• 建立：impeccable 接收對要製作或改善內容的描述；shape 把想法轉成可實作的設計需求說明。
• 評估：audit 找出實作問題並排定修正優先序；critique 找出拖累設計的地方。
• 精修：animate、bolder、colorize、delight、layout、overdrive、quieter 和 typeset 各自加強一項品質，例如動態效果、色彩或字型排版。
• 簡化：adapt、clarify 和 distill 涵蓋其他裝置、更清楚的下一步和更少雜亂。
• 強化：harden、onboard、optimize 和 polish 處理失敗狀態、首次執行、速度和收尾修飾。
• 系統：init、document、extract、generate 和 live 管理脈絡、設計紀錄、共用元件和變體。

常用指令可釘選為捷徑，如 /impeccable pin critique；它把請求轉交主要技能，因此該技能的改進仍會生效。

PRODUCT.md 與 DESIGN.md 裡的專案脈絡

Impeccable 會就你的使用者及其目標詢問一次，把脈絡存進 PRODUCT.md，並在之後設計工作前先讀取。document 指令讀取介面，把色彩、字型排版和元件規則記入 DESIGN.md，讓下一個頁面或代理遵循相同決定。更新 Impeccable 會取代其自身安裝的檔案，不會動到專案的 PRODUCT.md 和 DESIGN.md。

AI 垃圾設計與品質問題偵測器

AI 垃圾設計偵測器是不需語言模型就能運作的部分。其目錄列出 61 條偵測規則，另有 6 種模式保留給設計審查。檢查會找出低對比度、文字溢出、常見 AI 設計模式，以及偏離已記錄設計系統等問題。

• 終端機掃描：npx impeccable detect 接受資料夾、檔案或 URL；掃描 URL 時，預設在瀏覽器中以 1280 × 800 繪製頁面。
• 機器可讀結果：JSON 參數供指令碼與 CI 使用，結束代碼代表沒有主要發現（0）、有主要發現（2）或目標無法掃描（1）。
• 原始碼涵蓋範圍：HTML 掃描納入連結的本機 CSS，JSX、TSX、Vue、Svelte、Astro 和樣式表檔案則接受原始碼檢查。
• 設計系統檢查：若有本機 DESIGN.md，其中記錄的字型、色彩、圓角和字級也會受檢。
• 範圍精準的例外：刻意的選擇（例如被標為過度使用的品牌字型）可依數值忽略，規則本身仍維持啟用。

設計掛鉤

設計掛鉤在代理處理 UI 檔案時執行偵測器，讓發現在變更仍處於脈絡中時送達。Claude Code 和 Codex 每次編輯後收到針對性回饋，並在代理結束本輪時再獲得一次更廣的檢查；GitHub Copilot 在支援的編輯後執行完整偵測器；在 Cursor 中，一項發現可以擋下擬議的寫入，直到代理修改為止。

即時模式與 generate

即時模式標示為 beta，可讓你在執行中頁面上選取一部分，就地比較三種變體，或用「引導」功能調整整個頁面；你接受的版本會成為原始碼的一部分。若你已能說出元素和方向，generate 指令會從聊天中啟動類似比較，例如 generate 3 個大膽的價格卡片變體。

設計方向與設計稿

面對新工作，Impeccable 參考經人工審查的設計方向（各有自己的視覺規則），並與從你的產品中擷取的想法相互權衡。有圖像生成時，它可以先出設計稿（comp-led）；沒有時，Impeccable 直接在程式碼中建構（code-led），往往看起來較一致，但通常沒那麼大膽。

使用指南

開始使用

開始使用需要開發工具、專案資料夾，以及 Node.js 22.18 或更新版本；空專案或剛用鷹架工具建立的應用程式皆可。

1. 在專案根目錄的終端機執行 npx impeccable install，選擇開發工具，以及安裝到這個專案還是所有專案，然後重新載入該工具。
2. 在代理聊天中執行 /impeccable init，回答關於專案服務對象的問題，接著閱讀產生的 PRODUCT.md，修正它誤解的地方。
3. 若已有視覺系統，先執行 /impeccable document。
4. 用 /impeccable hooks on 開啟自動檢查，然後完成開發工具的掛鉤核准或工作區信任步驟。
5. 用日常用語描述第一項任務，例如 /impeccable polish 價格頁面，或要求建立新頁面並說明它給誰用。
6. 打開結果，也在窄螢幕上試試它的主要任務，並審查程式碼變更。

更新與團隊共用版本

以安裝程式設定的環境用 npx impeccable update 更新，npx impeccable check 檢查是否有較新版本；從外掛市集安裝的則透過開發工具的外掛管理員更新。團隊也可改為把一個記錄的版本作為 Git 子模組，連結到各自的開發工具。

Impeccable 使用情境與範例

• 打磨已能用的頁面：polish 在現有設計範圍內細修間距、字型排版、標籤和互動狀態。
• 上線前檢查頁面：針對指定頁面執行 audit 會審查無障礙、效能、回應式表現與其他實作問題。
• 從需求說明開始：你描述頁面、受眾及訪客應能完成的事；在先出設計稿的流程中，你在開始實作前核准構圖。
• 為提取要求把關：CLI 回傳建置流程可據以處理的發現與結束代碼，因此提取要求中的 UI 變更可被自動檢查。
• 把重複模式整理成系統：extract 把重複出現的 UI 模式抽取成共用元件與樣式，供後續頁面重用。

適用人群

• 剛接觸設計或 AI 開發工具的人：不需設計經驗或設計詞彙；你描述自己在做什麼、給誰用，以及哪裡感覺不對。
• 轉向寫程式的設計師：在 2026 年 7 月一次訪談中，創作者估計設計師現在至少佔使用者群的一半。
• 已有既定視覺風格的團隊：Impeccable 用專案現有的色彩、元件和規則建構與精修，讓新頁面看來屬於同一產品。

兩種情況較不適合：

• 原生行動開發：掛鉤檢查網頁程式碼，並略過 PRODUCT.md 中宣告為 ios、android 或 adaptive 的專案；原生介面審查則建議改用 audit。
• 期待一次提示就拿到完成的設計：創作者曾表示，它永遠不會是一次到位的設計工具。

支援平台

支援的開發工具包括 Claude Code、Codex、Cursor、GitHub Copilot、Gemini CLI、OpenCode 和 Pi 等。

作為一款 Claude Code 設計技能，Impeccable 從安裝程式得到的不只是技能檔案：在 Claude Code、Cursor、Codex、GitHub Copilot 和 Grok Build 上，安裝程式還會為目前專案加入該平台原生的掛鉤清單。

即時模式適用於執行中開發伺服器上的網頁或本機靜態 HTML，支援的框架包括基於 Vite 的應用程式、Next.js、SvelteKit、Astro 和 Nuxt。在開發工具之外，Chrome 擴充功能會在 DevTools 中加入 Impeccable 面板，顯示你選擇檢查的頁面的設計問題。

價格套餐

Impeccable 的公開技能、指令、CLI 和偵測引擎免費，並以 Apache 2.0 授權條款開源；實際產生的費用來自周邊的工具：

• 開發工具與模型用量：你的開發工具或模型供應商可能依用量收費（包括圖像生成），這些費用獨立於 Impeccable。
• 圖像生成：Codex 內建的生成會計入 Codex 用量上限，而 OpenAI API 備援方案向你自己的 API 專案計費，每張設計稿或每次修改都可能多出一次請求。

隱私權政策還描述了 Impeccable Pro 的候補名單，會保存登記的電子郵件，在 Pro 準備好時通知大家。已查核的頁面上並未公布任何 Pro 功能或價格。

Impeccable 替代方案

在獨立的前端設計技能整理中，另有兩款代理技能與 Impeccable 一同出現。

Anthropic 的 frontend-design 就是 Impeccable 以之為起點的那款前端設計技能；它自述為在打造新 UI 或重塑現有 UI 時提供獨特且有意圖的視覺設計指引。Impeccable 的 README 把其新增部分概括為單一的安裝流程、24 個指令和 61 條確定性偵測規則，CLI 與瀏覽器擴充功能執行這些規則時無需 LLM 和 API 金鑰。

taste-skill 是一組 MIT 授權的可攜代理技能，目標是在版面、字型排版、動態效果和間距上勝過範本感重的 UI；其儲存庫還包含用於網頁、行動裝置與品牌套件參考看板的圖像生成技能。

注意事項

• 僅限網頁介面：偵測器檢查網頁介面，並把原生 iOS 或 Android 工作導向 audit；即時模式同樣無法附加到原生 iOS 或 Android 介面。
• 即時模式仍是 beta：文件說它已可試用，但不常見的專案設定仍可能需要疑難排解。
• 已回報的原始碼寫入錯誤：2026 年 9 月的一份公開問題回報指出，在一個 Next.js 16 與 React 19 專案中，即時模式把無效的 TSX 寫進原始碼，只靠 git diff 和 TypeScript 檢查才發現。另一份針對 4.4.0 版的回報則說，多行 JSX 元素無法定位，且一個備援的捨棄再還原步驟可能刪除原本的元素。
• 掃描乾淨不等於設計評斷：乾淨的結果只代表這些檢查沒有找到可回報的問題；評斷整體設計要用 critique 指令。
• 掛鉤取決於你的工具：例如 Codex 要在你審查並信任 Impeccable 的 PostToolUse 和 Stop 掛鉤後才執行它們；沒有回饋可能代表編輯沒有問題、處於安靜模式，或掛鉤未啟用。
• 設計稿轉成程式碼會流失細節：圖像到程式碼的轉換是有損的，因此設計稿的部分特色與細節會改變或流失，文件也提醒使用者預期幾輪提示與審查。
• 上線初期的回饋：在公開發布前後的一則開發者論壇討論串中，幾位留言者認為公布的前後對照範例比原版更差，其中一人指出某個儀表板失去大部分有用資訊。創作者稱這些範例做得倉促並將其移除，還寫道詞彙不會讓使用者或 LLM 成為出色的設計師。

隱私與資料處理

• 專案檢查在本機執行，不會把專案檔案或偵測結果上傳到 Impeccable 伺服器，不過你的開發工具可能把提示、檔案、螢幕截圖和其他脈絡傳給它自己的 AI 供應商。
• 版本檢查通常每天最多執行一次，不傳送任何專案內容，可用 IMPECCABLE_NO_UPDATE_CHECK=1 關閉。
• 請求設計方向時會傳送隨機抽選鍵、範圍和可選篩選條件，但不傳送你的專案名稱、檔案路徑、提示或需求說明。可選的選擇回報可用 IMPECCABLE_NO_TELEMETRY=1 或 DO_NOT_TRACK=1 停用，但不會停止目錄或預覽圖請求。
• 圖像生成器搭配 OPENAI_API_KEY 執行時，會把圖像提示和任何參考圖片傳給 OpenAI，這些提示可能包含專案細節。
• 官網在首頁使用 Google Analytics，在每個頁面使用 PostHog，記錄頁面瀏覽、點擊、複製的指令和你選擇的安裝方式。
• Chrome 擴充功能在本機處理頁面快照和發現，但會要求存取所有網址的權限，以便檢查你選擇的網站。

FAQ

Q1. Impeccable 是免費的嗎？

是的。公開的技能、指令、CLI 和偵測引擎依 Apache 2.0 授權條款免費提供。你的開發工具、模型供應商或圖像生成產生的用量費用由這些供應商另外計費。

Q2. 偵測器需要 AI 模型或 API 金鑰嗎？

不需要。偵測器和設計掛鉤以程式碼形式執行，不需 AI 模型或 API 金鑰；只有代理所做的設計工作才會用到它的模型。

Q3. 何時該用 generate 而不是 live？

能說出想要的元素和方向時用 generate；想在瀏覽器工作階段中自己挑選元素、加上註解或引導整個頁面時，用即時模式。

Q4. 能用在 iOS 或 Android 應用程式上嗎？

只能部分使用。偵測器、掛鉤和即時模式都以網頁介面為目標，因此文件建議原生介面審查改用 audit 指令。