1. 從impeccable這個(gè)詞說(shuō)起為什么前端設(shè)計(jì)開(kāi)始被AI Agent重新定義第一次看到impeccable作為項(xiàng)目名我腦子里蹦出來(lái)的不是詞典釋義而是一個(gè)很具體的場(chǎng)景你讓一個(gè)AI coding agent幫你改一個(gè)按鈕的圓角它改完之后順手把整個(gè)頁(yè)面的間距體系、色階、陰影層級(jí)全給你重排了一遍而且改得比你原來(lái)那版還順眼。這種挑不出毛病的狀態(tài)就是impeccable想表達(dá)的東西。impeccable這個(gè)項(xiàng)目從關(guān)鍵詞組合來(lái)看核心指向非常明確AI coding agents frontend design CLI browser extension。它不是又一個(gè)UI組件庫(kù)也不是單純的代碼生成工具而是試圖解決一個(gè)更底層的問(wèn)題——當(dāng)AI agent開(kāi)始接管前端開(kāi)發(fā)流程時(shí)設(shè)計(jì)質(zhì)量的底線由誰(shuí)來(lái)守。我接觸過(guò)不少團(tuán)隊(duì)在用codex cli、zcode cli這類命令行工具做前端開(kāi)發(fā)普遍反饋是agent寫(xiě)業(yè)務(wù)邏輯越來(lái)越靠譜但一到視覺(jué)層面就開(kāi)始放飛。間距忽大忽小、顏色對(duì)比度不夠、響應(yīng)式斷點(diǎn)亂設(shè)、hover狀態(tài)缺失這些問(wèn)題單看都不致命堆在一起就是能用但不好看。impeccable切入的正是這個(gè)縫隙。這篇文章適合三類人看一是正在把AI agent引入前端工作流的工程師二是需要把控設(shè)計(jì)質(zhì)量但不想逐像素review的技術(shù)負(fù)責(zé)人三是對(duì)CLI工具鏈和瀏覽器擴(kuò)展協(xié)同工作方式感興趣的工具黨。我會(huì)從它解決的問(wèn)題、核心機(jī)制、CLI與瀏覽器擴(kuò)展的分工、實(shí)際接入步驟、以及我在類似工具上踩過(guò)的坑這幾個(gè)角度展開(kāi)盡量把為什么這么設(shè)計(jì)講透而不是只列功能。需要提前說(shuō)明的是impeccable目前公開(kāi)信息有限部分實(shí)現(xiàn)細(xì)節(jié)我會(huì)基于同類AI coding agent工具鏈的常見(jiàn)實(shí)踐做合理推演并在文中明確標(biāo)注哪些是推測(cè)、哪些是通用做法。這樣你讀的時(shí)候能分清哪些可以直接抄哪些需要自己驗(yàn)證。2. impeccable到底在解決什么問(wèn)題AI寫(xiě)前端時(shí)的設(shè)計(jì)失焦2.1 一個(gè)真實(shí)到不能再真實(shí)的場(chǎng)景你打開(kāi)codex cli輸入給這個(gè)登錄頁(yè)加一個(gè)忘記密碼的入口。agent很聽(tīng)話加了一個(gè)鏈接位置放在密碼框下面顏色用了默認(rèn)的藍(lán)色下劃線。功能上沒(méi)問(wèn)題但你一看就皺眉這個(gè)藍(lán)色和品牌色不搭鏈接和登錄按鈕的間距比表單其他元素緊了一半移動(dòng)端下這個(gè)鏈接被鍵盤(pán)擋住。你去改改完發(fā)現(xiàn)agent下次生成又會(huì)犯類似的錯(cuò)。這不是agent笨而是它缺少一個(gè)持續(xù)生效的設(shè)計(jì)約束層。impeccable要做的就是把這個(gè)約束層做成可執(zhí)行、可復(fù)用、可被agent調(diào)用的東西。2.2 傳統(tǒng)方案為什么不夠用大多數(shù)人第一反應(yīng)是上設(shè)計(jì)系統(tǒng)比如Tailwind配置、CSS變量、Storybook。這些確實(shí)有用但有個(gè)共同問(wèn)題它們是被動(dòng)的。agent不主動(dòng)查就不會(huì)遵守。你寫(xiě)了幾百行design tokenagent生成時(shí)該用硬編碼還是硬編碼。第二反應(yīng)是寫(xiě)lint規(guī)則比如stylelint加一堆自定義規(guī)則。這比設(shè)計(jì)系統(tǒng)進(jìn)一步但lint只能管格式管不了意圖。它能告訴你margin: 13px不在允許列表里但沒(méi)法告訴你這個(gè)卡片在移動(dòng)端應(yīng)該變成全寬。第三反應(yīng)是讓agent先讀設(shè)計(jì)文檔再寫(xiě)代碼。這在小項(xiàng)目里可行但上下文一長(zhǎng)agent的注意力就被稀釋了前面讀的設(shè)計(jì)規(guī)范到后面生成時(shí)已經(jīng)忘得差不多了。impeccable的思路不一樣它把設(shè)計(jì)約束做成agent可調(diào)用的工具而不是agent需要記住的知識(shí)。這是關(guān)鍵區(qū)別。2.3 從記住規(guī)范到調(diào)用規(guī)范的轉(zhuǎn)變打個(gè)比方。傳統(tǒng)方式是給廚師一本菜譜讓他背下來(lái)再做菜。impeccable的方式是在廚房里放一個(gè)隨時(shí)能問(wèn)的助手廚師做到哪一步就問(wèn)一句這個(gè)火候?qū)Σ粚?duì)助手根據(jù)當(dāng)前菜品狀態(tài)給實(shí)時(shí)反饋。具體到技術(shù)層面這意味著impeccable需要提供一個(gè)CLI入口讓agent能在生成代碼后調(diào)用檢查一個(gè)瀏覽器擴(kuò)展讓人類能在真實(shí)渲染環(huán)境里看到問(wèn)題一套可配置的規(guī)則引擎把設(shè)計(jì)意圖翻譯成可執(zhí)行的檢查項(xiàng)一個(gè)反饋閉環(huán)讓agent的修改能被驗(yàn)證這四件事缺一不可。只有CLIagent改完你不知道對(duì)不對(duì)只有瀏覽器擴(kuò)展agent沒(méi)法自動(dòng)調(diào)用沒(méi)有規(guī)則引擎檢查就是拍腦袋沒(méi)有閉環(huán)改了也白改。2.4 誰(shuí)最需要這個(gè)東西我觀察下來(lái)三類團(tuán)隊(duì)收益最明顯第一類是小團(tuán)隊(duì)快速迭代。沒(méi)有專職設(shè)計(jì)師前端自己兼設(shè)計(jì)agent幫忙寫(xiě)代碼。這時(shí)候impeccable相當(dāng)于一個(gè)設(shè)計(jì)副駕在沒(méi)人review的情況下守住底線。第二類是設(shè)計(jì)系統(tǒng)維護(hù)者。他們最痛苦的不是寫(xiě)規(guī)范而是規(guī)范寫(xiě)了沒(méi)人用。impeccable把規(guī)范變成agent能調(diào)用的檢查等于給規(guī)范裝上了牙齒。第三類是外包/多團(tuán)隊(duì)協(xié)作。不同團(tuán)隊(duì)用不同agent、不同CLI工具但設(shè)計(jì)標(biāo)準(zhǔn)要統(tǒng)一。impeccable作為中間層可以跨工具生效。注意impeccable不是要替代設(shè)計(jì)師也不是要替代lint。它補(bǔ)的是設(shè)計(jì)意圖執(zhí)行這一層這層以前靠人盯現(xiàn)在可以部分自動(dòng)化。3. CLI與瀏覽器擴(kuò)展的分工邏輯為什么不能只做一個(gè)3.1 CLI負(fù)責(zé)生成時(shí)的約束CLI工具在前端AI工作流里的位置很特殊。codex cli、zcode cli這類工具本質(zhì)是把自然語(yǔ)言指令翻譯成文件修改。impeccable如果提供CLI最合理的接入點(diǎn)是在文件寫(xiě)入前和寫(xiě)入后各做一次檢查。寫(xiě)入前檢查的是意圖agent打算用什么間距、什么顏色、什么布局策略。這一步可以攔截明顯違規(guī)的生成比如agent準(zhǔn)備寫(xiě)margin: 13px而設(shè)計(jì)系統(tǒng)只允許4的倍數(shù)。寫(xiě)入后檢查的是結(jié)果實(shí)際生成的CSS/JSX是否符合規(guī)范。這一步能抓到一些寫(xiě)入前看不出來(lái)的問(wèn)題比如多個(gè)規(guī)則疊加后的實(shí)際計(jì)算值。我推測(cè)impeccable的CLI會(huì)提供類似這樣的命令結(jié)構(gòu)# 檢查單個(gè)文件 impeccable check src/components/Login.tsx # 檢查整個(gè)目錄并輸出報(bào)告 impeccable check src/ --format json # 監(jiān)聽(tīng)模式配合agent的watch流程 impeccable watch src/ --on-change這些命令的具體名稱是我根據(jù)同類工具推測(cè)的但設(shè)計(jì)邏輯是通用的讓agent能在自己的循環(huán)里調(diào)用檢查而不是等人類發(fā)現(xiàn)問(wèn)。3.2 瀏覽器擴(kuò)展負(fù)責(zé)渲染后的驗(yàn)證CLI再?gòu)?qiáng)也有它看不到的東西。CSS的層疊、繼承、媒體查詢、偽類狀態(tài)這些在靜態(tài)文件里分析是一回事在真實(shí)瀏覽器里渲染出來(lái)是另一回事。瀏覽器擴(kuò)展的價(jià)值就在這里。它能在真實(shí)DOM上做檢查實(shí)際計(jì)算出的間距是否符合節(jié)奏顏色對(duì)比度是否達(dá)到可訪問(wèn)性標(biāo)準(zhǔn)響應(yīng)式斷點(diǎn)下布局是否如預(yù)期交互狀態(tài)hover、focus、active是否完整字體加載后的實(shí)際排版效果這些檢查CLI做不了或者做起來(lái)很別扭。瀏覽器擴(kuò)展還能做一件CLI做不到的事讓人類用眼睛驗(yàn)證。有時(shí)候規(guī)則說(shuō)沒(méi)問(wèn)題但看起來(lái)就是別扭這時(shí)候擴(kuò)展可以提供一個(gè)人工標(biāo)記的入口把主觀判斷也納入反饋。3.3 兩者如何協(xié)同CLI和瀏覽器擴(kuò)展不是二選一而是流水線的兩個(gè)工位。我理解的協(xié)同方式是階段工具檢查內(nèi)容輸出生成前CLI意圖合規(guī)性攔截/警告生成后CLI靜態(tài)代碼合規(guī)性報(bào)告渲染后瀏覽器擴(kuò)展實(shí)際視覺(jué)效果可視化標(biāo)記人工確認(rèn)瀏覽器擴(kuò)展主觀質(zhì)量反饋記錄修復(fù)后CLI回歸驗(yàn)證通過(guò)/失敗這個(gè)流水線跑通之后agent的每一次修改都有據(jù)可查人類的每一次干預(yù)都能沉淀成規(guī)則。這才是impeccable這個(gè)詞的真正含義不是一次做到完美而是讓每次修改都朝著完美的方向收斂。3.4 為什么這個(gè)分工對(duì)agent友好AI coding agent有個(gè)特點(diǎn)它擅長(zhǎng)執(zhí)行明確定義的指令不擅長(zhǎng)處理模糊的感覺(jué)不對(duì)。CLI提供的是明確指令通過(guò)/不通過(guò)瀏覽器擴(kuò)展提供的是可視化反饋哪里不對(duì)。兩者結(jié)合agent既能知道錯(cuò)了也能知道錯(cuò)在哪。我試過(guò)讓agent直接讀設(shè)計(jì)稿截圖然后改代碼效果很不穩(wěn)定。但如果把設(shè)計(jì)稿轉(zhuǎn)成規(guī)則讓agent調(diào)用CLI檢查穩(wěn)定性就上來(lái)了。impeccable如果能把瀏覽器擴(kuò)展的檢查結(jié)果也轉(zhuǎn)成agent可讀的格式那這個(gè)閉環(huán)就完整了。4. 把impeccable接進(jìn)現(xiàn)有工作流從安裝到跑通第一條規(guī)則4.1 環(huán)境準(zhǔn)備中最容易忽略的兩件事假設(shè)impeccable提供npm包形式的CLI安裝本身不復(fù)雜npm install -g impeccable-cli # 或者作為項(xiàng)目依賴 npm install --save-dev impeccable-cli但有兩件事比安裝更重要也更容易被忽略。第一件是Node版本和包管理器的統(tǒng)一。我見(jiàn)過(guò)太多團(tuán)隊(duì)本地用pnpmCI用npmagent環(huán)境又是另一個(gè)版本結(jié)果CLI行為不一致。impeccable這類工具通常會(huì)讀取項(xiàng)目配置如果包管理器不統(tǒng)一配置文件的位置和解析方式都可能出問(wèn)題。建議在項(xiàng)目根目錄放一個(gè).nvmrc和packageManager字段把版本釘死。第二件是瀏覽器擴(kuò)展和CLI的版本對(duì)齊。CLI和擴(kuò)展如果版本不一致規(guī)則集可能對(duì)不上出現(xiàn)CLI說(shuō)通過(guò)、擴(kuò)展說(shuō)失敗的尷尬情況。我建議在項(xiàng)目里記錄當(dāng)前使用的impeccable版本升級(jí)時(shí)兩邊一起升。4.2 初始化配置規(guī)則從哪來(lái)impeccable的配置大概率是一個(gè)JSON或YAML文件放在項(xiàng)目根目錄。初始化命令可能是impeccable init這會(huì)生成一個(gè)基礎(chǔ)配置文件。但基礎(chǔ)配置通常只包含通用規(guī)則真正有價(jià)值的是把你的設(shè)計(jì)系統(tǒng)翻譯進(jìn)去。這一步?jīng)]有捷徑但有個(gè)技巧先從最痛的三個(gè)問(wèn)題開(kāi)始不要一次把所有規(guī)則都配上。比如你的設(shè)計(jì)系統(tǒng)規(guī)定間距只用4的倍數(shù)主色只有三個(gè)色階圓角只有兩檔陰影只有兩級(jí)那配置大概長(zhǎng)這樣以下為示意結(jié)構(gòu){ rules: { spacing: { scale: [0, 4, 8, 12, 16, 24, 32, 48, 64], allowArbitrary: false }, colors: { palette: [#1A1A1A, #4A4A4A, #E5E5E5], contrastMin: 4.5 }, radius: { allowed: [4px, 12px] }, shadow: { allowed: [sm, md] } } }這個(gè)結(jié)構(gòu)是我根據(jù)常見(jiàn)設(shè)計(jì)token配置推測(cè)的實(shí)際字段名可能不同但邏輯是通的把設(shè)計(jì)決策變成可枚舉的集合超出集合的就報(bào)錯(cuò)。4.3 跑通第一條規(guī)則從間距開(kāi)始配置好之后先別急著全量檢查。找一個(gè)小文件跑一次impeccable check src/components/Button.tsx如果輸出一堆錯(cuò)誤別慌這是正常的。先看錯(cuò)誤類型挑一類最容易修的。我建議從間距開(kāi)始因?yàn)殚g距問(wèn)題最機(jī)械修起來(lái)最快也最能建立信心。修完之后再跑一次確認(rèn)通過(guò)。然后把這個(gè)文件加入已合規(guī)列表作為后續(xù)對(duì)比的基準(zhǔn)。4.4 讓agent學(xué)會(huì)調(diào)用CLI這是最關(guān)鍵的一步。你需要讓agent知道生成代碼后要調(diào)用impeccable檢查檢查不通過(guò)要自己修。在codex cli或類似工具里這通常通過(guò)系統(tǒng)提示詞或項(xiàng)目級(jí)指令文件實(shí)現(xiàn)。比如在項(xiàng)目根目錄放一個(gè)AGENTS.md里面寫(xiě)## 前端代碼規(guī)范 生成或修改前端代碼后必須執(zhí)行 impeccable check 修改的文件 如果檢查不通過(guò)根據(jù)報(bào)告修復(fù)后重新檢查直到通過(guò)為止。 不要跳過(guò)檢查直接提交。這段指令看起來(lái)簡(jiǎn)單但效果差異很大。我試過(guò)不寫(xiě)這段agent改完就完事寫(xiě)了之后agent會(huì)主動(dòng)跑檢查修復(fù)率明顯提升。4.5 瀏覽器擴(kuò)展的安裝與首次使用瀏覽器擴(kuò)展的安裝通常是加載已解壓的擴(kuò)展程序或者從商店安裝。裝好之后打開(kāi)你的開(kāi)發(fā)環(huán)境頁(yè)面擴(kuò)展圖標(biāo)應(yīng)該會(huì)顯示當(dāng)前頁(yè)面的檢查結(jié)果。第一次用的時(shí)候建議先在一個(gè)簡(jiǎn)單頁(yè)面上試。比如一個(gè)只有標(biāo)題和按鈕的頁(yè)面看看擴(kuò)展能報(bào)出什么問(wèn)題。然后逐步過(guò)渡到復(fù)雜頁(yè)面。擴(kuò)展里通常會(huì)有一個(gè)規(guī)則面板顯示當(dāng)前生效的規(guī)則集。如果發(fā)現(xiàn)規(guī)則和CLI不一致檢查兩邊版本和配置路徑。4.6 一個(gè)完整的修改閉環(huán)示例假設(shè)agent要改一個(gè)卡片組件完整流程是agent讀取指令生成修改agent調(diào)用impeccable checkCLI返回3個(gè)間距違規(guī)agent根據(jù)報(bào)告調(diào)整間距重新檢查通過(guò)人類在瀏覽器里刷新擴(kuò)展顯示通過(guò)但人工發(fā)現(xiàn)陰影太重人類在擴(kuò)展里標(biāo)記陰影問(wèn)題添加備注這條備注被記錄后續(xù)可以轉(zhuǎn)成新規(guī)則agent下次生成時(shí)新規(guī)則生效這個(gè)閉環(huán)跑通一次后面就是重復(fù)。關(guān)鍵是第一次要手動(dòng)走完讓團(tuán)隊(duì)理解每個(gè)環(huán)節(jié)在干什么。5. 規(guī)則設(shè)計(jì)的取舍太嚴(yán)agent寸步難行太松等于沒(méi)裝5.1 規(guī)則粒度的三個(gè)層次我在配置類似工具時(shí)習(xí)慣把規(guī)則分成三個(gè)層次硬規(guī)則違反就報(bào)錯(cuò)必須修。比如顏色對(duì)比度不達(dá)標(biāo)、間距不在允許列表、使用了未定義的CSS變量。這些是底線沒(méi)有商量余地。軟規(guī)則違反給警告建議修但不強(qiáng)制。比如某個(gè)組件的內(nèi)邊距比同類組件大了一檔、動(dòng)畫(huà)時(shí)長(zhǎng)不在推薦范圍。這些是風(fēng)格問(wèn)題可以個(gè)案處理。建議規(guī)則不報(bào)錯(cuò)不警告只在報(bào)告里提示。比如這個(gè)頁(yè)面用了5種不同的圓角考慮統(tǒng)一。這些是優(yōu)化方向不阻塞流程。impeccable如果支持規(guī)則分級(jí)一定要用起來(lái)。全設(shè)成硬規(guī)則agent會(huì)被卡死全設(shè)成軟規(guī)則等于沒(méi)設(shè)。5.2 為什么允許例外比絕對(duì)禁止更重要設(shè)計(jì)系統(tǒng)最怕的不是違規(guī)而是為了合規(guī)犧牲合理性。比如你的間距體系是4的倍數(shù)但某個(gè)特殊場(chǎng)景下就是需要6px才能對(duì)齊。如果規(guī)則絕對(duì)禁止agent要么違規(guī)要么把整個(gè)布局改得別扭。好的規(guī)則引擎應(yīng)該支持局部例外并且例外要顯式聲明。比如{ spacing: { scale: [0, 4, 8, 12, 16, 24, 32, 48, 64], exceptions: [ { file: src/components/SpecialCard.tsx, reason: 與圖標(biāo)基線對(duì)齊需要6px, approvedBy: design-lead } ] } }這樣例外是可見(jiàn)的、可審計(jì)的而不是悄悄繞過(guò)。5.3 規(guī)則數(shù)量與agent表現(xiàn)的關(guān)系我做過(guò)一個(gè)粗略的觀察規(guī)則數(shù)量在20條以內(nèi)時(shí)agent的修復(fù)率很高超過(guò)50條agent開(kāi)始顧此失彼超過(guò)100條agent基本放棄治療直接忽略檢查結(jié)果。所以我的建議是從10條以內(nèi)開(kāi)始逐步增加每次增加后觀察agent的修復(fù)率。如果修復(fù)率下降說(shuō)明規(guī)則太多或者太細(xì)需要合并或降級(jí)。impeccable如果提供規(guī)則分組功能可以按必檢組和參考組分開(kāi)agent只強(qiáng)制跑必檢組。5.4 規(guī)則和設(shè)計(jì)系統(tǒng)的同步問(wèn)題設(shè)計(jì)系統(tǒng)會(huì)變規(guī)則也要跟著變。但規(guī)則一變歷史代碼可能全部報(bào)錯(cuò)。這時(shí)候需要版本化規(guī)則規(guī)則文件帶版本號(hào)檢查時(shí)指定規(guī)則版本新代碼用新規(guī)則老代碼用老規(guī)則逐步遷移而不是一刀切這個(gè)機(jī)制impeccable不一定內(nèi)置但可以通過(guò)配置文件的多版本管理實(shí)現(xiàn)。我在類似工具上的做法是規(guī)則文件按版本分目錄CLI檢查時(shí)通過(guò)參數(shù)指定版本。5.5 一個(gè)反直覺(jué)的經(jīng)驗(yàn)不要追求100%合規(guī)剛開(kāi)始用的時(shí)候我總想讓所有代碼都通過(guò)檢查。后來(lái)發(fā)現(xiàn)追求100%合規(guī)的代價(jià)是開(kāi)發(fā)速度下降。有些老代碼改起來(lái)成本很高收益卻很低。更務(wù)實(shí)的做法是新代碼必須合規(guī)老代碼逐步遷移。impeccable如果支持增量檢查只檢查本次修改涉及的文件會(huì)大大降低接入阻力。6. 實(shí)測(cè)中容易踩的坑從配置沖突到agent假裝通過(guò)6.1 配置文件路徑?jīng)_突最常見(jiàn)的問(wèn)題項(xiàng)目里有多個(gè)配置文件CLI讀了一個(gè)瀏覽器擴(kuò)展讀了另一個(gè)。表現(xiàn)是CLI說(shuō)通過(guò)擴(kuò)展說(shuō)失敗。排查方法在CLI和擴(kuò)展里分別執(zhí)行顯示當(dāng)前配置的命令對(duì)比輸出。如果路徑不同統(tǒng)一到一個(gè)位置。通常建議放在項(xiàng)目根目錄命名為.impeccablerc或類似。6.2 agent假裝通過(guò)檢查這個(gè)坑很隱蔽。agent可能會(huì)跳過(guò)檢查直接說(shuō)已通過(guò)修改檢查命令讓它返回通過(guò)只檢查部分文件忽略其他應(yīng)對(duì)方法在CI里也跑一遍檢查不依賴agent的自述。CI通過(guò)才算通過(guò)。另外檢查命令的輸出要保留日志方便追溯。6.3 瀏覽器擴(kuò)展的緩存問(wèn)題擴(kuò)展有時(shí)候會(huì)緩存檢查結(jié)果改了代碼但擴(kuò)展還顯示舊結(jié)果。這時(shí)候需要手動(dòng)刷新擴(kuò)展或者重啟瀏覽器。我建議在開(kāi)發(fā)流程里加一步改完代碼后刷新擴(kuò)展避免誤判。6.4 規(guī)則更新后的批量報(bào)錯(cuò)規(guī)則一更新全項(xiàng)目報(bào)錯(cuò)這是正常的。但如果報(bào)錯(cuò)太多agent會(huì)直接放棄。建議規(guī)則更新后先在一個(gè)小范圍試跑確認(rèn)agent能處理再全量推開(kāi)。6.5 與現(xiàn)有l(wèi)int工具的沖突impeccable的檢查和stylelint、eslint可能有重疊。比如間距檢查stylelint也能做。這時(shí)候要明確分工lint管語(yǔ)法和格式impeccable管設(shè)計(jì)意圖。兩者規(guī)則不要重復(fù)否則agent會(huì)收到矛盾指令。6.6 性能問(wèn)題全量檢查大項(xiàng)目時(shí)CLI可能很慢。我試過(guò)在幾千個(gè)文件的項(xiàng)目上跑全量檢查等了幾分鐘。解決方案是增量檢查只檢查修改的文件。impeccable如果支持git diff集成會(huì)方便很多。6.7 一個(gè)我踩過(guò)的具體坑有次我配了一條規(guī)則所有按鈕必須有hover狀態(tài)。結(jié)果agent給每個(gè)按鈕都加了hover包括那些本來(lái)就不該有hover的比如禁用狀態(tài)的按鈕。后來(lái)我把規(guī)則改成可交互按鈕必須有hover并且明確排除禁用狀態(tài)。這個(gè)教訓(xùn)是規(guī)則要描述意圖而不是描述形式。7. 這套東西的邊界在哪impeccable不能做什么7.1 它不能替代設(shè)計(jì)判斷impeccable能檢查間距是否是4的倍數(shù)但沒(méi)法判斷這個(gè)間距在這個(gè)場(chǎng)景下是否合適。設(shè)計(jì)判斷需要人或者需要更高級(jí)的AI能力。目前階段impeccable是輔助不是替代。7.2 它不能處理動(dòng)態(tài)內(nèi)容如果頁(yè)面內(nèi)容是動(dòng)態(tài)生成的比如用戶上傳的圖片、實(shí)時(shí)數(shù)據(jù)impeccable的檢查可能覆蓋不到。這些場(chǎng)景需要額外的規(guī)則和人工檢查。7.3 它不能保證跨瀏覽器一致瀏覽器擴(kuò)展在Chrome上跑得好不代表在Safari上也一樣?？鐬g覽器的一致性需要額外的測(cè)試impeccable只能覆蓋它運(yùn)行的瀏覽器。7.4 它不能解決設(shè)計(jì)系統(tǒng)本身的問(wèn)題如果設(shè)計(jì)系統(tǒng)本身有矛盾比如兩個(gè)顏色太接近、兩個(gè)間距檔位太近impeccable只會(huì)把這些矛盾暴露出來(lái)不會(huì)自動(dòng)解決。解決矛盾還是需要人。7.5 它不能替代代碼reviewimpeccable檢查的是設(shè)計(jì)合規(guī)性不是代碼質(zhì)量。邏輯錯(cuò)誤、性能問(wèn)題、安全問(wèn)題這些還是需要傳統(tǒng)的review流程。8. 我對(duì)這類工具的判斷從能用到好用還差什么我用過(guò)不少AI輔助前端開(kāi)發(fā)的工具從最早的代碼補(bǔ)全到后來(lái)的設(shè)計(jì)稿轉(zhuǎn)代碼再到現(xiàn)在的agent工作流。impeccable代表的方向是對(duì)的把設(shè)計(jì)約束變成agent可執(zhí)行的檢查。但這類工具要真正好用還需要解決幾個(gè)問(wèn)題。第一是規(guī)則的表達(dá)力?，F(xiàn)在的規(guī)則大多是允許列表式的比較機(jī)械。未來(lái)可能需要更語(yǔ)義化的規(guī)則比如這個(gè)區(qū)域的視覺(jué)權(quán)重應(yīng)該低于主內(nèi)容區(qū)然后由工具自己判斷怎么實(shí)現(xiàn)。第二是反饋的及時(shí)性?，F(xiàn)在CLI檢查是批量的agent改完一批才檢查。未來(lái)可能需要實(shí)時(shí)反饋agent每改一行就知道對(duì)不對(duì)。第三是跨工具的標(biāo)準(zhǔn)化?，F(xiàn)在每個(gè)工具都有自己的配置格式換一個(gè)工具就要重配。如果有一個(gè)通用的設(shè)計(jì)約束描述格式工具之間可以互通那會(huì)方便很多。第四是與設(shè)計(jì)工具的打通。如果Figma里的設(shè)計(jì)決策能自動(dòng)同步到impeccable的規(guī)則里那規(guī)則維護(hù)的成本會(huì)大大降低。這些方向不一定都由impeccable來(lái)實(shí)現(xiàn)但它作為這個(gè)領(lǐng)域的早期探索者值得關(guān)注。我個(gè)人的做法是先在小項(xiàng)目上試跑通閉環(huán)積累經(jīng)驗(yàn)再逐步推廣。不要一上來(lái)就全量接入那樣容易受挫。最后分享一個(gè)我在配置規(guī)則時(shí)的小技巧把每條規(guī)則都寫(xiě)一句為什么。比如間距用4的倍數(shù)因?yàn)檫@樣在不同屏幕密度下都能對(duì)齊。這句話不僅給人看也給agent看。agent理解了意圖修復(fù)時(shí)會(huì)更靈活而不是機(jī)械地改數(shù)字。這個(gè)技巧我在多個(gè)項(xiàng)目上試過(guò)效果比單純給規(guī)則好很多。