Impeccable:把 AI 前端味壓下去的一套設計技能

Impeccable 把前端設計的審美、反 AI 味規則、CLI 檢查與 Codex/Claude/Cursor 等 agent workflow 串在一起。它不是另一份漂亮提示詞,而是一套讓 AI 少做出模板感 UI 的工作語言。

如果你常讓 AI coding agent 做前端,應該看過那種很熟悉的畫面:Inter 字體、紫藍漸層、卡片包卡片、每個功能區塊上面都有一個圓角 icon tile。單看不一定壞,但看多了會有一種「這不是產品,是模型的安全答案」的味道。

Impeccable 設計檢查流程示意圖,從 AI default UI 轉成 design review
這張圖把文章的主軸壓成一個畫面:不是叫 AI 更用力,而是讓它有可重複的設計檢查語言。

Impeccable 針對的就是這件事。它不是單純叫 AI「做得更漂亮」,而是把前端設計拆成一套 agent 能反覆使用的語言:一個 skill、二十多個命令、參考文件、反模式 detector,還有可以放進 CI 或瀏覽器裡跑的檢查工具。

它在補的不是靈感,是判斷力

很多 AI 前端失手,不是因為它不會寫 CSS。真正麻煩的是,它很容易用同一套「看起來像 SaaS」的答案解所有題。Impeccable 的做法比較像是在 agent 旁邊放一位設計 reviewer:提醒它字體不要偷懶、色彩不要只靠紫色發光、卡片不要一層套一層、動畫不要用過時的彈跳效果。

官方 README 把它定位成「1 skill、23 commands、curated anti-patterns」。這個描述其實很準。它不是單一 prompt,而是一整套可以叫得出名字的工作動作,例如 critiquepolishdistillquieterclarifylayouttypeset。對長期用 Codex 或 Claude Code 做 UI 的人來說,有名字很重要。你不用每次重新解釋「幫我不要那麼 AI」,可以直接叫一個動作。

Impeccable 官方網站社群預覽圖,展示 design skills for AI harnesses 的定位
Impeccable 官方把它定位成 AI harness 的設計技能與反模式檢查工具。

我會先拿它處理三種場景

  • 草稿太像模板:critiquepolish 找出 AI slop,再讓 agent 針對具體區塊修。
  • 畫面太吵:quieter 把過度用力的顏色、陰影、動畫壓下來,但不要壓成無聊灰。
  • 內容與操作不清楚:clarify 改按鈕、錯誤訊息、empty state、說明文字,而不是只改版面。

這三個場景都很日常。尤其是「太像模板」這種問題,純靠一句「make it better」通常救不回來;你需要指出它到底哪裡像 AI。Impeccable 內建的 detector 與 command vocabulary,價值就在這裡。

最近版本對 Codex 更友善

我查到時,npm 上的 impeccable 最新版是 2.3.2,GitHub 最新 release 也有 CLI 2.3.2。比較值得注意的是 Skill 3.5.0:release note 明確提到它開始針對 GPT 和 Codex 編譯 harness-specific rules。這不是小修文字,意思是它不再只把同一份設計規則丟給所有 agent,而是開始承認不同模型會犯不同的 UI 錯。

同一個版本也把 detector 往更實用的方向推:官方 release note 提到 HTML/CSS engine 從 jsdom 換到 htmlparser2 與 CSS cascade resolver,並把 deterministic rules 推到 41 條。這種東西不浪漫,但對想把 UI 品質塞進 PR 檢查的人很有用。你可以讓模型寫畫面,也可以讓另一個不靠 LLM 的檢查器先抓出明顯壞習慣。

不是每個人都需要,但重度 agent 使用者會有感

如果你只是偶爾叫 AI 做一個設定頁,Impeccable 可能顯得有點重。它真正適合的是那些已經把 AI agent 放進前端工作流的人:會反覆產生頁面、重構 UI、做 landing page、寫 dashboard、改 onboarding,然後開始受不了模型每次都交出同一種安全美學。

Impeccable 官方網站展示 Live Mode 與設計迭代的頁面截圖
官方網站的 Live Mode 視覺,重點不是漂亮截圖,而是把設計修正變成可反覆操作的流程。

它也不會替你決定品牌。官方網站有一個我覺得重要的說法:既有專案會先讀你的 tokens、theme、components,再在那個系統內調整;空白專案才會從 seed color 與 mood 開始生成。這個分界很關鍵。設計技能如果不尊重既有產品,很容易變成另一種漂亮但不合身的外衣。

可以先看的幾個入口

  • GitHub repository:看 README、skill 結構、release note。
  • 官方網站:看 Live Mode、command list、案例與下載入口。
  • npm package:看 CLI 版本與 npx impeccable detect 用法。

站內如果你之前看過 mattpocock/skills 那篇,可以把 Impeccable 想成另一個方向:前者偏工程流程,後者偏設計判斷與前端審美。兩者都不是要把 agent 變聰明,而是讓它少靠運氣。

Impeccable 官方網站的 Neo Mirai 範例視覺,展示介面打磨前後的方向
官方案例圖可以看出 Impeccable 想處理的不是單一元件,而是整個畫面的密度、節奏與判斷。

資料來源與延伸閱讀

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *