TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Impeccable 開源工具：把 AI 介面的千篇一律，抓成 62 條可驗收規則
Impeccable 是 jQuery UI 原作者 Paul Bakaus 的 Apache 2.0 開源專案，從 Anthropic 官方 frontend-design skill 出發，長成 24 個設計指令加上 62 條免模型偵測規則的工具包，一年內從 4 顆星漲到 11 萬顆星。實際跑偵測器看它抓到什麼，並拆解免費 skill 與每月 20 美元 Pro 的邊界、資料流向與權限注意事項。
用 AI 摘要這篇文章：
讓 AI 助手做一個產品官網，十次有八次會得到同一種畫面：Inter 字體、奶油色底、紫色漸層的標題、圓角卡片裡再疊一層圓角卡片，每個標題上面還壓著一個圓角小方塊圖標。這些畫面單看都稱得上「得體」，看多了就會膩，而且說不清到底哪裡怪。
驗收自動化的思路也延伸到回答品質。Ai2 的 XYBench 評測集把 AI 助理處理錯誤前提提問的表現拆成三層指標，讓「答案裡有沒有提到正確資訊」與「回答重心放對了沒」分開檢查，避免只看關鍵詞命中就放行。
2026-11-14，專門處理這個問題的開源專案 Impeccable 發布了 skill 與 CLI 的 4.9.1 版（UTC 當天凌晨上架）。同一天我用 GitHub API 查，它的星星數來到 109,988 顆，官方網站頁首直接掛著 110k。這個倉庫建立於 2025-11-16，差兩天滿一歲；而 Wayback Machine 在 2026-01-09 留下的快照裡，它只有 4 顆星。
它做的事情可以用一句話講完：把「跟 AI 溝通設計」從形容詞，變成動詞和規則。你對 agent 說「make it pop」，它只能照自己的預設猜；改說 /impeccable bolder the pricing cards，它會載入一份專為這個動作寫的指引，對準你指名的目標。改完之後，還有 62 條不需要 AI 的固定規則幫你掃一遍，把那些一眼露餡的 AI 介面套路列成清單。
一套詞彙給 AI，一套規則給機器
Impeccable 的自我定位是「給 coding agent 的設計詞彙」。README 裡自述它的起點是 Anthropic 官方開源的 frontend-design skill，這層血緣我到 anthropics/skills 倉庫核對過：該 skill 至今還在，內容是一份給模型的視覺設計指引，教你避開模板化的預設選擇。Impeccable 從這個起點長出自己的體系，現在是一個 Apache 2.0 授權的專案，作者 Paul Bakaus 是 jQuery UI 的原作者，個人網站上把自己的路線寫成「從 jQuery UI 到 Renaissance Geek」，如今以 Renaissance Geek 公司名義經營，隱私頁上的營運主體就是這家公司。
README 用一組對照圖說明價值：同一個模型、同一份需求（利古里亞海岸一間十四個房間的家庭旅館網站），沒有 Impeccable 時產出的是「得體的預設值」：奶油色頁面、細襯線體、藥丸按鈕；有 Impeccable 時，頁面圍繞一張夜景照片重排。這是官方自己的示範，效果宣稱照官方文件解讀。
安裝是一行指令：npx impeccable install。安裝程式會偵測你機器上的 coding 工具，問你要裝在單一專案還是全域，然後在 Claude Code、Cursor、Codex CLI、GitHub Copilot、Gemini CLI、Devin、Replit Agent 等 19 種工具裡放進同名 skill。裝好後在 agent 裡跑 /impeccable init，它會讀你的程式碼，只問它推不出來的事（產品給誰用、要做什麼、有什麼限制），寫成一份 PRODUCT.md，之後每個指令都讀這份檔案。
指令共 24 個（其中一個已是棄用別名），分五類。Steer 類的 bolder、quieter、typeset 調整畫面方向；Review 類的 critique 是打分數的 UX 檢視，audit 出技術品質報告，發現按 P0 到 P3 排序；Finish 類的 polish 是交付前最後一輪，harden 處理錯誤與邊界情況；live 類讓你在瀏覽器裡點選元素、即時輪替版本；剩下的負責 init 與 DESIGN.md 這類專案檔案。每個指令在官方文件站上有獨立頁面。
真正讓它跟一般 prompt 合集拉開差距的，是偵測器：62 條固定規則，不用模型、不用 API 金鑰，本機就能跑。官方給它三個執行位置：裝進 agent 當 hook，agent 每改一個 UI 檔案就自動掃一次，官方說多數 slop 是在這個位置被攔下的；在終端機或 CI 裡用 npx impeccable detect 直接掃，加 --github 可以把發現變成 GitHub Actions 的標注；或者裝 Chrome 擴充功能，把同樣的發現疊在任何網頁上。
我把一頁故意做壞的版面丟進去，掃出 14 項
規則數字光看沒有感覺，我實際用 npm 上的 4.9.1 版跑了一次。先跑 npx impeccable detect --list-rules，完整輸出共 62 條：31 條屬於 slop（AI 套路）、31 條屬於 quality（品質問題），其中 16 條標為 advisory，意思是不影響成敗、供人參考的觀察。
接著我寫了一個 18 行的 HTML 檔，把常見的 AI 介面習慣全塞進去：Inter 字體、奶油色底、紫色漸層標題、發光陰影、標題上方的圓角圖標方塊、卡片裡再塞一層卡片，加上一個假裝有即時資料的脈動小圓點。npx impeccable detect slop-sample.html 跑完，14 項命中：gradient-text 抓了兩次，dark-glow 抓了三次，overused-font 抓了兩次（Inter 一次、Fraunces 一次），再加上 icon-tile-stack、kicker-above-heading、nested-cards、cream-palette、ai-color-palette、pulsing-dot 和一條 low-contrast。這一頁可以重現，檔案內容就是上面那段描述，兩行指令就能對照。
有意思的是它說話的方式。overused-font 的說明不是「這字體不好看」，而是「Inter、Roboto、Fraunces、Geist、Plus Jakarta Sans、Space Grotesk 被用到失去辨識度，每一波 AI 介面都收斂到同一小撮字體」。low-contrast 直接給實測數字：3.7:1，需要 4.5:1。這是規則該有的樣子：可重複、可比較，不靠模型當下的心情。站上的 Slop 目錄頁還把「AI 味」分成年代：2022 年的紫色漸層與玻璃面板、2025 年的奶油色編輯風、2026 年的新粗獷派，官方的立場是這些習慣會隨模型換代，規則也跟著長。
兩個使用細節值得記住。第一，官方文件寫 JSX、TSX 這類原始碼檔只有 pattern 類規則會跑；純 HTML 的靜態掃描還能從字面 CSS 算對比（樣本頁那條 3.7:1 就是靜態算出來的），但漸層、圖片底這些要看渲染結果的檢查，得把目標指到網址（它會用你機器上已有的 Chrome 或 Edge 開頁面），實務上就是指向自己的 dev server 再掃一輪。我把樣本頁用本機伺服器跑起來再掃一次，渲染模式量到的東西就不同了：主要發現變成 10 項，另外多出一條 advisory 的對比檢查，量到的是圖標方塊上白字對漸層底的 4.3:1，同樣差一點不到 4.5:1 的標準；換到手機寬度 390×844 再掃一輪，這個簡單樣本的結果沒有變，真實有響應式斷點的專案才會在這裡分出 desktop 與手機版的差別。第二，exit code 有語意：0 是乾淨（advisory 可能仍在）、2 是有主要發現、1 是有目標掃不到，接 CI 時要把 1 當失敗處理。品牌字體被誤抓，可以 npx impeccable ignores add-value overused-font Inter --reason "Brand font"，規則對其他字體照樣生效；單一檔案想豁免某條規則，在檔案裡加一行註解就可以。專案裡有 DESIGN.md 時，偵測器還會拿它檢查字體、顏色、圓角與字級有沒有漂離設計系統。
一個口徑要說清楚：站上 Slop 目錄頁登載的模式總數是 68 個，分類是設計系統 4、視覺細節 9、字體排版 13、色彩對比 7、版面空間 12、動效 4、文案 5、圖像 4、一般品質 10，站方自己的算法是 62 條偵測規則加 6 條設計審查模式；CLI 4.9.1 實際輸出的是 62 條。引用數字時先認明自己在講目錄還是偵測器。
從 4 顆星到 11 萬顆星，只花了十個月
這個專案的成長曲線本身就是新聞。倉庫建立於 2025-11-16；Wayback Machine 的快照顯示，2026-01-09 它的星數是 4，03-07 是 821，06-02 是 33,380，09-01 是 64,636，2026-11-14 用 GitHub API 查是 109,988，附帶 6,555 個 fork。從一月快照到今天，漲了約 2.7 萬倍，設計類開源專案裡我沒有見過這個量級的曲線。
從公開資料看不出單一觸發點；README 只請大家追作者的 X 帳號看 release notes。官方首頁輪播的推薦語可以當側證：有人說「把設計思考裝進 coding 工作流、最被低估的工具」，有人說「別人問我前端設計都推薦它，我對設計很挑，它已是我每天的工具」。這些話是專案自己挑選陳列的，聽聽就好，但它們至少說明口碑傳播是成長的主要引擎這個假設有跡可循。
能確認的是節奏：官方 changelog 已累積 84 個 release，本週就出了 4.9.0 與 4.9.1。4.9.1（2026-11-14）的官方簡介是「從一個 world 開始，Live 從空資料夾就能啟動」，新增 world、walkthrough、foundations 等動詞，其中 impeccable world <id> 能把站上目錄的某個設計世界直接寫成專案的 DESIGN.md，但 changelog 明寫「需要登入帳號」，這條線連到後面的收費層。4.9.0 則修 Codex 的 hook 讓它看得見 shell 寫入的檔案，並讓每個發出去的設計方向都被公平檢視。
技術架構也在換代。2026-09-04 起，專案開始發布自帶的 Rust 引擎二進位檔（現行 0.1.24 版），skill 實際執行時跑的是這顆引擎，Node 只在 npx 安裝那一步需要。對使用者來說，這代表偵測速度與規則內容還在快速演進：所有數字以 2026-11-14 這天為準。
免費的是檢查，20 美元月訂買的是方向
定價結構是判斷這個專案走向最好的線索。定價頁寫得直白：skill 裝在 coding agent 裡免費。要付費的是 impeccable.style 網站上的帳號服務，分三層：
| 能力 | 免費 skill | Pro 每月 20 美元 | Team 每席位每月 50 美元 |
|---|---|---|---|
| 24 個設計指令與 PRODUCT.md／DESIGN.md 工作流 | 有 | 有 | 有 |
| 偵測器 | 62 條規則 | 再加 20 條 Pro 限定規則 | 同 Pro |
| Design Worlds 視覺方向庫 | 無 | 370 個起點 | 共用一套設計系統 |
| Ship Reviews 交付前審查 | 無 | 每月 50 點數，超出後 1 美元 1 點 | 點數各席位共用 |
| Loop for Mac（代理提問通知） | 無 | 有 | 有 |
| 支援管道 | 公開 Discord 與 GitHub issues | 一個工作天內首次回覆 | 同個營業日內首次回覆 |
定價頁也標了狀態：部分 Pro 項目掛著 Soon（live 編輯 dev server、Personas），Ship Reviews 標 Experimental，免費帳號則預告會有 14 天 Pro 試用。Pro 那 20 條額外規則長什麼樣、方向庫的品質如何，我沒有付費驗證，這裡只轉述定價頁的官方文字。
裝進 agent 之前，先看懂資料流向與權限
隱私頁（更新於 2026-11-10）值得逐段讀。官方寫明：專案檢查在本機執行，不會把你的專案檔案或偵測結果上傳到 Impeccable 的伺服器；你的 coding 工具自己送多少東西給模型商，是另一回事，取決於工具與你的設定。這是官方陳述，行為層我沒有抓封包驗證，但這份文件把網路請求逐條列出，比多數同類工具誠實：
- 版本檢查：至多每天一次向
impeccable.style/api/version確認新版，不帶專案內容，環境變數IMPECCABLE_NO_UPDATE_CHECK=1可關閉。 - 設計方向請求：向
/api/roll要視覺方向時，送出的是隨機產生的 roll key、輪次號碼與範圍描述（頁面用途、設計範圍、目標平台），官方明列「不含專案名稱、檔案路徑、prompt 或 brief」。想不靠這個 API，可以設定本地目錄供應選項。 - 選擇回報：可選的遙測，回報挑了哪一類卡片、頁面位置與目錄 ID，官方強調「從不送方向的名稱或描述」；
DO_NOT_TRACK=1或專案設定可關。
兩個權限事實要單獨講。第一，live 模式的 Apply 功能在最近一分鐘沒有 agent 連線時，會直接從 PATH 呼叫 codex（沒有 codex 才用 claude），並帶上 --dangerously-bypass-approvals-and-sandbox 這類跳過批准與沙箱的參數，讓它把暫存的修改寫回原始碼。README 自己標明了這段，在陌生的專案裡開 live 模式前請先讀完，環境變數可以把 Apply 限制在聊天連線內或整個關掉。第二，安裝程式提供的 design hook 在 Claude Code 裡會在 model approval 之外執行，也就是它跑的時候不需要模型那關同意，首次編輯甚至會自動下載引擎二進位檔；要停可以用設定一次關掉全部 hook。自動檢查是這個專案攔 slop 最有效的位置，但權限給出去之前，該知道給出去的是什麼。
誰該現在裝，誰先等一等
我的判斷是三種人價值不同（這段是編輯推論）：
已經在用 Claude Code、Cursor 或 Codex 做 web 介面，手上有一堆「能用但說不上好看」的頁面：先不用裝 skill，終端機跑一次 npx impeccable detect 掃現有目錄，看 62 條規則在自己專案裡命中多少。這一步零成本，命中清單本身就是一份帶理由的待修清單，跟 axe-core 一行指令掃 AI 生成網頁 是同一種用法。
團隊已經有設計系統：/impeccable document 產出 DESIGN.md 之後，偵測器會拿它檢查字體、顏色、圓角與字級漂移，比人工巡稿容易維持一致；也想直接餵現成設計系統檔的話，awesome-design-md 這類風格檔庫可以先當素材。
只做原生 App、後端，或不使用 AI coding 工具：目前無感。偵測器與 live 模式只吃 web 的 HTML 與 CSS；原生 App 有另一套對應 HIG 與 Material 3 的指引，但偵測器那一半明寫留在 web。想先理解為什麼 AI 產出的介面都長得像，可以看 Design Prompts 這類風格 prompt 庫，那是同一個問題的另一種解法。
兩件事我沒有驗證，決策時請把邊界放在心上：24 個指令的實際產出品質（我只實跑了偵測器，沒有把 skill 接進 agent 走完整工作流），以及 Pro 付費層那 370 個方向庫與 20 條額外規則值不值得 20 美元。另外這個專案接近每天發版，規則數、定價與指令清單都會漂移；已裝的人用 npx impeccable update 升級，之後要引用數字，請以官方 changelog 為準。
授權與專案狀態
Impeccable 採 Apache 2.0 授權，原始碼在 GitHub 的 pbakaus/impeccable。截至 2026-11-14：61 個開啟的 issue、本週兩個版本、引擎與 skill 分線發布，專案處於高度活躍狀態；隱私頁由 Renaissance Geek, Inc. 具名營運，Chrome 擴充功能與 VS Code 擴充功能同樣由 Renaissance Geek 發布，各有自己的安裝頁。免費層的 skill 與偵測器用 Apache 2.0 的條件使用；網站帳號服務走的是站方自己的服務條款，兩者要分開看。
