Claude Code操作版｜Impeccable 20個設計指令＋3份任務單

Impeccable是Paul Bakaus維護的第三方工具，不是Claude Code內建指令。內容依官方文件整理，沒有逐條實測，也沒有美感、速度或token節省保證。指令會依工具權限檢查或修改你的網頁專案，先保留可回復的版本（例如先git commit）。

初版：2026-10-14。2026-11-01依官方文件重新查證：20個指令都還在；安裝方式改成以官方現行說法為準，另補上新出現的指令。

安裝與起步

官方文件（2026-11-01查證）列了三種裝法，選一種就好：

• 推薦： 在專案資料夾的終端機執行下面這行，安裝器會問你用哪個工具、裝在這個專案還是所有專案。需要Node／npm。

npx impeccable install

• Claude Code外掛市集： 在Claude Code對話框輸入下面這行，再打開/plugin，選Discover，安裝Impeccable。

/plugin marketplace add pbakaus/impeccable

• 共用Skill版： 終端機執行npx skills add pbakaus/impeccable（沒有針對Claude Code的hook整合）。

裝好後重開工具，在對話裡執行/impeccable init，交代讀者、目的、限制；官方說它會把這些存成PRODUCT.md。安裝器可能寫入專案hook設定，依實際提示檢查並信任。本文沒有替你執行安裝。

兩個常見搞混的地方：

• npx開頭的是終端機指令，不要貼進聊天框；/impeccable開頭的是聊天框指令，不要輸入系統終端機。
• 輸入/impeccable可看所裝版本的指令表；沒出現就確認安裝範圍並重開工具。不同版本可能改名，本文用官方完整格式（/impeccable 指令名），不假設/typeset這類有獨立捷徑。

美感調整

格式：/impeccable 指令 ［頁面或範圍］，後面是「什麼時候用｜它做什麼」。

• /impeccable typeset ［頁面或範圍］：字級混亂｜調整字體與層級。
• /impeccable layout ［頁面或範圍］：版面擁擠｜整理間距與順序。
• /impeccable colorize ［頁面或範圍］：重點不明｜用配色區分用途。
• /impeccable bolder ［頁面或範圍］：畫面平淡｜加強視覺表現。
• /impeccable quieter ［頁面或範圍］：畫面太吵｜降低視覺干擾。
• /impeccable distill ［頁面或範圍］：資訊太雜｜刪去多餘元素。
• /impeccable animate ［頁面或範圍］：互動生硬｜補有用途的動態。
• /impeccable delight ［頁面或範圍］：體驗平板｜加入合適的小驚喜。
• /impeccable overdrive ［頁面或範圍］：需要亮點｜探索進階視覺效果。
• /impeccable polish ［頁面或範圍］：準備交付｜修整一致性與細節。

品質與交付

• /impeccable audit ［頁面或範圍］：品質不明｜先出問題報告，不改碼。
• /impeccable critique ［頁面或範圍］：方向不明｜檢視層級與理解障礙。
• /impeccable shape ［頁面或範圍］：還沒開工｜先釐清設計計畫。
• /impeccable adapt ［頁面或範圍］：手機難用｜調整不同裝置版面。
• /impeccable clarify ［頁面或範圍］：文案難懂｜說清狀態與下一步。
• /impeccable harden ［頁面或範圍］：邊界出錯｜補錯誤與文字溢出處理。
• /impeccable onboard ［頁面或範圍］：新手迷路｜改善首次使用流程。
• /impeccable optimize ［頁面或範圍］：網頁太慢｜查瓶頸並量測改動。
• /impeccable document ［頁面或範圍］：樣式沒記錄｜整理成DESIGN.md。
• /impeccable extract ［頁面或範圍］：元件重複｜抽出共用元件與樣式。

2026-11-01官方新列出的

官方指令表現在另外列了這幾個，本文沒有實測，用法以官方頁面為準：

• init：存下專案的讀者與目標（上面起步用的那個）
• generate：指定一個元素，產生幾個變化版本讓你比較
• live：在瀏覽器裡指著頁面元素，比較變化版本後選一個

任務單1：首頁改版

先準備：首頁路徑、讀者、希望完成的動作、既有品牌字體與配色。

/impeccable critique ［指定範圍］
讀者是［讀者］，希望完成［動作］。
先列現況與建議，把觀察和推測分開；未確認的地方標待確認。
這一輪先不要擴大到其他頁面。

確認要改的範圍後，另開下一步：

/impeccable typeset ［指定範圍］
採用剛才確認的方向，保留［既有規則與不可改項目］。
只處理［本輪範圍］。完成後列出改動檔案與實際檢查結果。
沒有跑過的檢查請寫未驗證，不要說全部通過。

驗收表：首屏資訊先後清楚；手機沒有截字；原有連結仍可操作。這是驗收要求，並非已完成測試。

任務單2：表單修整

先準備：表單路徑、必要欄位、可用測試資料、已知錯誤狀態。

/impeccable audit ［指定範圍］
讀者是［讀者］，希望完成［動作］。
先列現況與建議，把觀察和推測分開；未確認的地方標待確認。
這一輪先不要擴大到其他頁面。

確認要改的範圍後，另開下一步：

/impeccable harden ［指定範圍］
採用剛才確認的方向，保留［既有規則與不可改項目］。
只處理［本輪範圍］。完成後列出改動檔案與實際檢查結果。
沒有跑過的檢查請寫未驗證，不要說全部通過。

驗收表：必填與錯誤訊息可理解；鍵盤能完成操作；長文字與窄螢幕不溢出。這是驗收要求，並非已完成測試。

任務單3：設計交接

先準備：專案路徑、可修改元件範圍、現有樣式規則、保留項目。

/impeccable document ［指定範圍］
讀者是［讀者］，希望完成［動作］。
先列現況與建議，把觀察和推測分開；未確認的地方標待確認。
這一輪先不要擴大到其他頁面。

確認要改的範圍後，另開下一步：

/impeccable extract ［指定範圍］
採用剛才確認的方向，保留［既有規則與不可改項目］。
只處理［本輪範圍］。完成後列出改動檔案與實際檢查結果。
沒有跑過的檢查請寫未驗證，不要說全部通過。

驗收表：規範指向實際檔案；共用元件仍支援原有情境；沒有把假設寫成已驗證規則。這是驗收要求，並非已完成測試。

效率與限制

• 一次選一個跟問題相關的指令，先指定範圍，再檢查改動。
• audit產出問題報告，不是自動修完所有問題。
• optimize處理的是網頁載入、互動與渲染速度，要比較改前改後的量測；它不是幫你省AI的token。
• 設計品質仍取決於你給的任務資料、模型與實際審查。本篇沒有放自己的實測前後圖，也沒有官方代言。

本篇的三種文字

本篇以Claude Code為操作環境。/impeccable ...是已安裝第三方Skill的呼叫；後面的中文是任務範圍或補充要求。Claude Code原生內建指令另外整理，不會把原創中文提示詞加上斜線冒充內建功能。

官方來源

• https://github.com/pbakaus/impeccable
• https://impeccable.style/docs/
• https://impeccable.style/docs/typeset
• https://impeccable.style/docs/audit
• https://impeccable.style/docs/optimize

套件：pbakaus/impeccable，Apache-2.0授權。本文繁中用途說明與任務單為原創整理；指令以你安裝的版本與官方文件為準。