開源前端設計工具 Impeccable 3.5：按模型專治「AI 味」，支援程式碼即時直改

讓大模型寫個網頁介面，很多人第一眼就看得出來：又是那套熟悉的米黃底色、細邊框大陰影，加上拉得極開的字母間距。

大家都在用 AI 寫前端，但模型其實根本不懂審美。開源前端設計工具 Impeccable 的團隊測了數千次生成結果，發現 74% 的頁面都在用 AI 預設的米白背景，76% 亂用極端字間距，90% 以上甚至連最基礎的對比度要求都達不到。Anthropic 的 frontend-design 和舊版 Impeccable 自己也沒能逃過這些通病。

Impeccable 釋出了 3.5 版本。他們決定不再給所有模型塞同一份提示詞，而是針對每家模型的具體毛病，逐個對症下藥。

專治各家模型的審美毛病

Impeccable 3.5 最聰明的地方，是在構建階段為不同模型編譯專屬的約束規則。比如針對 GPT-5.5 和 Codex，團隊專門寫了針對它們高頻設計缺陷的規則，這些規則別的模型根本看不到。

團隊通過挖掘約 190 個樣本的偏見，直接禁止了一長串典型的 AI 設計套路：暖中性色調裡的米色背景全面停用，全大寫的小標題、帶編號的模組標記、超過三種字型通通被砍，還設立了硬性的對比度底線。

新版本還會分辨新老專案。如果是現有程式碼庫，它先讀取現有的設計規範和元件，優先保留原有風格；如果是從零起步的全新專案，它會從 129 個精心挑選的錨點顏色中抽取種子，再手動圍繞它生成完整配色，不會讓每次冷啟動都退化到千篇一律的安全色。

瀏覽器裡直接改，改完寫回原始碼

除了審美規則，這次另一個重頭戲是進入 Beta 階段的 Live 模式。以前你讓 AI 改介面，往往是在對話方塊和編輯器之間來回複製，現在可以在頁面上直接操作。

在新的 Steer 欄裡輸入或直接語音說出修改要求，Agent 會直接閱讀整個頁面並在原地修改。你也可以單獨點選一個元素，用自然語言微調，甚至直接在瀏覽器裡改文案，點一下應用，後臺的子 Agent 就會把修改直接寫回原始碼檔案。

為了讓這些檢查跑得足夠快，團隊徹底拋棄了重量級的 jsdom，換成了自研的 CSS 級聯解析器。在 160 個 HTML 檔案的測試集上，耗時從 6.8 秒暴降到 0.34 秒，速度提升了約 20 倍。體積縮小後，41 條反模式檢測規則可以直接內嵌在技能裡實時執行。

目前 Impeccable 完全免費開源，支援 Claude Code、Codex 和 Cursor 等主流開發環境。只要在終端跑一條不帶引數的命令，它還會自動掃描你的程式碼庫和 git 狀態，告訴你下一步最該執行什麼操作。

為什麼重要

很多開發者抱怨 AI 生成的 UI 能用但很難看，修起來反而比自己寫還費勁。Impeccable 3.5 給出了一條很實際的路徑：不要指望大模型突然頓悟美學，而是用工程化的規則去卡死那些廉價感。

對獨立開發者和前端工程師來說，這個工具非常值得放進 Cursor 或 Claude Code 裡。特別是 Live 模式，把改字、調樣式變成了所見即所得的互動，還能無縫寫回程式碼，大大縮短了除錯迴圈。冷啟動自帶的 129 個配色種子，也讓一人專案告別了千篇一律的「AI 味」。

我們認為，Impeccable 這種「按模型定製提示詞與編譯規則」的思路，比同行通用的通用提示詞要聰明得多。每個大模型的訓練偏差完全不同，通用約束往往兩頭不討好。不過這也意味著維護成本成倍增加，未來主流模型一旦頻繁迭代權重，這套反模式規則就需要持續更新和測試，長期維護是一場硬仗。