1. 項(xiàng)目緣起為什么我們需要一個(gè)叫“impeccable”的東西第一次看到“impeccable”這個(gè)詞是在一個(gè)前端技術(shù)群里。有人甩了張截圖說(shuō)“這玩意兒把設(shè)計(jì)稿還原度干到了像素級(jí)”底下配了個(gè)命令行工具的界面。我當(dāng)時(shí)的第一反應(yīng)是又一個(gè)來(lái)卷前端還原度的工具但仔細(xì)看完演示之后我意識(shí)到它想做的事情比“還原設(shè)計(jì)稿”要大得多——它試圖用AI coding agents的能力把前端設(shè)計(jì)從“人對(duì)著設(shè)計(jì)稿手寫(xiě)CSS”變成“描述意圖agent直接產(chǎn)出可用的界面代碼”。這個(gè)項(xiàng)目的核心定位是面向前端設(shè)計(jì)場(chǎng)景的AI編碼代理工具鏈。它同時(shí)提供了CLI和瀏覽器擴(kuò)展兩種入口讓開(kāi)發(fā)者可以在終端里用命令行的方式驅(qū)動(dòng)AI完成前端代碼生成也可以在瀏覽器里直接對(duì)頁(yè)面進(jìn)行實(shí)時(shí)修改和調(diào)試。說(shuō)白了它想解決的是一個(gè)很具體的問(wèn)題前端開(kāi)發(fā)中從設(shè)計(jì)意圖到代碼實(shí)現(xiàn)之間的那道鴻溝。這道鴻溝有多大做過(guò)前端的人都清楚。設(shè)計(jì)師給一張F(tuán)igma稿你要量間距、取色值、判斷字體層級(jí)、處理響應(yīng)式斷點(diǎn)、考慮組件復(fù)用……一套流程下來(lái)一個(gè)中等復(fù)雜度的頁(yè)面少說(shuō)半天。而impeccable的思路是你告訴它你要什么它來(lái)生成第一版代碼你在這個(gè)基礎(chǔ)上調(diào)。這不是要取代前端工程師而是把前端工程師從重復(fù)勞動(dòng)里解放出來(lái)讓你把精力放在架構(gòu)、交互邏輯和性能優(yōu)化上。適合誰(shuí)來(lái)參考這篇內(nèi)容三類(lèi)人一是前端工程師尤其是經(jīng)常做設(shè)計(jì)稿還原的二是技術(shù)負(fù)責(zé)人在評(píng)估要不要把AI coding agents引入團(tuán)隊(duì)工作流三是對(duì)CLI工具和瀏覽器擴(kuò)展開(kāi)發(fā)感興趣的人想看看一個(gè)現(xiàn)代前端工具鏈?zhǔn)窃趺丛O(shè)計(jì)的。不管你之前有沒(méi)有用過(guò)類(lèi)似的AI編碼工具這篇內(nèi)容都會(huì)從實(shí)際使用的角度把impeccable的里里外外講清楚。2. 核心架構(gòu)拆解CLI與瀏覽器擴(kuò)展的雙入口設(shè)計(jì)2.1 為什么是“雙入口”而不是“單入口”impeccable最值得說(shuō)的設(shè)計(jì)決策就是同時(shí)做了CLI和瀏覽器擴(kuò)展兩個(gè)入口。這個(gè)選擇背后有很實(shí)際的考量。CLI入口面向的是批量操作和自動(dòng)化場(chǎng)景。比如你要初始化一個(gè)項(xiàng)目的前端骨架或者批量生成一組組件的代碼在終端里敲命令比在瀏覽器里點(diǎn)來(lái)點(diǎn)去效率高得多。而且CLI天然適合集成到CI/CD流程里你可以在構(gòu)建階段就讓agent生成或校驗(yàn)前端代碼。這一點(diǎn)和現(xiàn)在流行的codex cli、zcode cli等工具的思路是一致的——把AI能力嵌入到開(kāi)發(fā)者已有的工作流里而不是讓開(kāi)發(fā)者去適應(yīng)一個(gè)新平臺(tái)。瀏覽器擴(kuò)展入口面向的是實(shí)時(shí)調(diào)試和可視化修改場(chǎng)景。你在瀏覽器里看到一個(gè)頁(yè)面覺(jué)得某個(gè)按鈕的圓角不對(duì)、某個(gè)間距太擠直接通過(guò)擴(kuò)展喚起agent用自然語(yǔ)言描述你要改什么它當(dāng)場(chǎng)給你改。這個(gè)體驗(yàn)比“切到編輯器改代碼、保存、刷新瀏覽器”的循環(huán)要流暢得多。尤其是調(diào)樣式的時(shí)候這種即時(shí)反饋的價(jià)值非常大。兩個(gè)入口共享同一套核心引擎區(qū)別只在于交互方式和觸發(fā)時(shí)機(jī)。這種設(shè)計(jì)的好處是你不需要學(xué)兩套東西CLI里用的命令和參數(shù)在瀏覽器擴(kuò)展里也有對(duì)應(yīng)的操作方式。2.2 CLI的核心命令體系impeccable的CLI命令設(shè)計(jì)遵循了現(xiàn)代CLI工具的慣例同時(shí)針對(duì)前端設(shè)計(jì)場(chǎng)景做了專(zhuān)門(mén)優(yōu)化。以下是我在實(shí)際使用中總結(jié)的核心命令分類(lèi)命令類(lèi)別典型命令用途說(shuō)明項(xiàng)目初始化impeccable init在當(dāng)前目錄初始化配置文件建立與agent的連接代碼生成impeccable generate根據(jù)描述或設(shè)計(jì)稿生成前端代碼實(shí)時(shí)預(yù)覽impeccable preview啟動(dòng)本地預(yù)覽服務(wù)實(shí)時(shí)查看生成結(jié)果配置管理impeccable config查看和修改agent參數(shù)、模型選擇等會(huì)話(huà)管理impeccable session管理多輪對(duì)話(huà)上下文支持resume恢復(fù)這些命令的設(shè)計(jì)邏輯很清晰init負(fù)責(zé)建立環(huán)境generate負(fù)責(zé)核心工作preview負(fù)責(zé)驗(yàn)證config負(fù)責(zé)調(diào)優(yōu)session負(fù)責(zé)連續(xù)性。和codex cli的/compact、/model、/resume這些命令相比impeccable的命令更聚焦在前端設(shè)計(jì)這個(gè)垂直場(chǎng)景上沒(méi)有那么多通用性的命令但每個(gè)命令在前端場(chǎng)景下的參數(shù)都更豐富。舉個(gè)例子impeccable generate支持指定框架React、Vue、Svelte等、樣式方案Tailwind、CSS Modules、styled-components等、甚至響應(yīng)式斷點(diǎn)的具體數(shù)值。這些參數(shù)在通用AI編碼工具里通常需要你在prompt里描述而impeccable把它們做成了結(jié)構(gòu)化參數(shù)減少了溝通成本。2.3 瀏覽器擴(kuò)展的工作機(jī)制瀏覽器擴(kuò)展的運(yùn)作方式值得單獨(dú)說(shuō)一下。它本質(zhì)上是一個(gè)注入到頁(yè)面里的agent客戶(hù)端通過(guò)content script與頁(yè)面DOM交互通過(guò)background script與后端agent服務(wù)通信。當(dāng)你在擴(kuò)展里輸入一條修改指令比如“把這個(gè)卡片的陰影調(diào)淺一點(diǎn)邊框圓角改成8px”擴(kuò)展會(huì)做幾件事首先抓取當(dāng)前頁(yè)面的DOM結(jié)構(gòu)和相關(guān)CSS樣式然后把你的指令和頁(yè)面上下文一起發(fā)給agentagent返回修改后的樣式代碼擴(kuò)展再把這些代碼應(yīng)用到頁(yè)面上。整個(gè)過(guò)程在秒級(jí)完成你看到的就是頁(yè)面實(shí)時(shí)變化。這里有個(gè)技術(shù)細(xì)節(jié)擴(kuò)展需要精確識(shí)別你指的是哪個(gè)元素。impeccable的做法是當(dāng)你喚起擴(kuò)展時(shí)它會(huì)進(jìn)入一個(gè)“選擇模式”你點(diǎn)擊頁(yè)面上任意元素它就會(huì)鎖定那個(gè)元素作為操作目標(biāo)。這個(gè)交互和瀏覽器開(kāi)發(fā)者工具的元素選擇器很像學(xué)習(xí)成本幾乎為零。注意瀏覽器擴(kuò)展在操作頁(yè)面樣式時(shí)修改的是運(yùn)行時(shí)的CSSOM不會(huì)直接改動(dòng)你的源文件。如果你對(duì)修改結(jié)果滿(mǎn)意需要通過(guò)擴(kuò)展的“導(dǎo)出”功能把變更同步回代碼。這個(gè)設(shè)計(jì)是為了安全避免agent直接改壞你的源文件。3. 前端設(shè)計(jì)場(chǎng)景下的實(shí)操全流程3.1 環(huán)境準(zhǔn)備與初始化在開(kāi)始之前你需要確認(rèn)本地環(huán)境滿(mǎn)足基本要求。impeccable的CLI是基于Node.js的所以Node版本不能太低。根據(jù)我的實(shí)測(cè)Node 18 LTS及以上版本運(yùn)行最穩(wěn)定。如果你還在用Node 16建議先升級(jí)否則某些依賴(lài)包會(huì)報(bào)錯(cuò)。安裝CLI的方式很直接npm install -g impeccable-cli安裝完成后在終端輸入impeccable --version確認(rèn)安裝成功。如果提示命令找不到檢查一下npm的全局bin目錄是否在PATH里。這是新手最容易踩的坑尤其是在Windows上npm全局安裝的包有時(shí)候不會(huì)自動(dòng)加到PATH。接下來(lái)是初始化項(xiàng)目。進(jìn)入你的前端項(xiàng)目根目錄執(zhí)行impeccable init這個(gè)命令會(huì)做幾件事在當(dāng)前目錄創(chuàng)建.impeccable配置文件夾生成默認(rèn)的config.json并引導(dǎo)你完成agent連接配置。配置文件里最重要的幾個(gè)參數(shù)是model選擇使用的AI模型不同模型在代碼生成質(zhì)量上有差異framework指定你的前端框架這會(huì)影響生成代碼的語(yǔ)法和組件結(jié)構(gòu)styleStrategy樣式方案支持tailwind、css-modules、styled-components等designTokens設(shè)計(jì)令牌配置可以指定顏色、間距、字體等基礎(chǔ)變量我建議在init階段就把designTokens配好。原因很簡(jiǎn)單如果你不配agent生成代碼時(shí)會(huì)自己“猜”顏色和間距值猜出來(lái)的結(jié)果往往和你的設(shè)計(jì)系統(tǒng)不一致后期要一個(gè)個(gè)改。配好之后agent生成的所有代碼都會(huì)引用你的設(shè)計(jì)令牌一致性有保障。3.2 用自然語(yǔ)言生成第一個(gè)組件環(huán)境準(zhǔn)備好之后我們來(lái)實(shí)際生成一個(gè)組件。假設(shè)你要做一個(gè)用戶(hù)信息卡片包含頭像、姓名、職位和關(guān)注按鈕。在終端里執(zhí)行impeccable generate 創(chuàng)建一個(gè)用戶(hù)信息卡片組件包含圓形頭像、姓名、職位描述和關(guān)注按鈕。頭像在左側(cè)文字信息在右側(cè)按鈕在卡片底部右對(duì)齊。使用項(xiàng)目已有的設(shè)計(jì)令牌。agent收到指令后會(huì)先分析你的項(xiàng)目結(jié)構(gòu)讀取designTokens配置然后生成組件代碼。生成結(jié)果會(huì)直接寫(xiě)入你指定的文件路徑默認(rèn)是src/components/目錄下。這里有個(gè)實(shí)操心得指令越具體生成質(zhì)量越高。我試過(guò)只寫(xiě)“做一個(gè)用戶(hù)卡片”生成的結(jié)果雖然能用但布局和細(xì)節(jié)完全靠agent自由發(fā)揮大概率不符合你的預(yù)期。而把布局關(guān)系、元素位置、對(duì)齊方式都說(shuō)清楚之后一次通過(guò)率能到八成以上。生成完成后你可以用impeccable preview啟動(dòng)預(yù)覽服務(wù)在瀏覽器里看實(shí)際效果。預(yù)覽服務(wù)支持熱更新你修改指令重新生成頁(yè)面會(huì)自動(dòng)刷新。3.3 瀏覽器擴(kuò)展的實(shí)時(shí)調(diào)優(yōu)CLI生成的是第一版代碼真正讓頁(yè)面達(dá)到“impeccable”狀態(tài)的是瀏覽器擴(kuò)展的實(shí)時(shí)調(diào)優(yōu)環(huán)節(jié)。安裝擴(kuò)展后在瀏覽器里打開(kāi)你的預(yù)覽頁(yè)面點(diǎn)擊擴(kuò)展圖標(biāo)進(jìn)入選擇模式。點(diǎn)擊你想要調(diào)整的元素然后在擴(kuò)展的輸入框里描述修改需求。比如“把卡片的padding增加到24px”“頭像的邊框改成2px solid顏色用主色”“按鈕的hover狀態(tài)加一個(gè)輕微的陰影”擴(kuò)展會(huì)實(shí)時(shí)應(yīng)用這些修改。你可以連續(xù)發(fā)多條指令逐步把頁(yè)面調(diào)到滿(mǎn)意的狀態(tài)。這個(gè)過(guò)程很像在和一個(gè)設(shè)計(jì)師對(duì)話(huà)你說(shuō)需求它來(lái)執(zhí)行。調(diào)優(yōu)完成后點(diǎn)擊擴(kuò)展的“導(dǎo)出變更”按鈕擴(kuò)展會(huì)生成一個(gè)diff文件列出所有修改過(guò)的樣式屬性。你可以把這個(gè)diff應(yīng)用到源文件里或者讓CLI的agent根據(jù)diff自動(dòng)更新代碼。提示瀏覽器擴(kuò)展的修改是會(huì)話(huà)級(jí)的關(guān)閉頁(yè)面后就沒(méi)了。所以調(diào)優(yōu)過(guò)程中要養(yǎng)成隨時(shí)導(dǎo)出的習(xí)慣避免辛苦調(diào)了半小時(shí)的結(jié)果丟失。3.4 多輪對(duì)話(huà)與上下文管理前端開(kāi)發(fā)很少一次成型通常需要多輪迭代。impeccable的session管理功能就是為這個(gè)場(chǎng)景設(shè)計(jì)的。每次執(zhí)行impeccable generate時(shí)agent會(huì)創(chuàng)建一個(gè)新的session。如果你想在上一輪的基礎(chǔ)上繼續(xù)修改可以用impeccable session resume session-id恢復(fù)會(huì)話(huà)后agent會(huì)保留之前的對(duì)話(huà)上下文你不需要重新描述項(xiàng)目背景和設(shè)計(jì)約束。這個(gè)機(jī)制和codex cli的/resume命令類(lèi)似但impeccable的session還額外保存了頁(yè)面快照和樣式狀態(tài)恢復(fù)后agent能“看到”當(dāng)前頁(yè)面的實(shí)際樣子。我個(gè)人的習(xí)慣是一個(gè)頁(yè)面或一個(gè)功能模塊用一個(gè)session不要把所有東西都塞進(jìn)一個(gè)session里。session太長(zhǎng)會(huì)導(dǎo)致agent的上下文窗口被占滿(mǎn)后面的指令響應(yīng)質(zhì)量會(huì)下降。當(dāng)一個(gè)session的對(duì)話(huà)輪次超過(guò)20輪左右我就會(huì)開(kāi)新session把關(guān)鍵的設(shè)計(jì)約束重新交代一遍。4. 工具選型與參數(shù)調(diào)優(yōu)的底層邏輯4.1 模型選擇不是越貴越好impeccable支持配置不同的AI模型。在實(shí)際使用中我的體會(huì)是模型選擇要看任務(wù)類(lèi)型不是越貴越好。對(duì)于純樣式調(diào)整類(lèi)的任務(wù)比如改間距、調(diào)顏色、加陰影輕量級(jí)模型完全夠用響應(yīng)速度還更快。而對(duì)于需要理解復(fù)雜組件結(jié)構(gòu)、生成完整頁(yè)面布局的任務(wù)才需要上更強(qiáng)的模型。impeccable的config里可以針對(duì)不同命令設(shè)置不同的模型這個(gè)設(shè)計(jì)很實(shí)用。具體怎么配我的建議是generate命令用能力較強(qiáng)的模型因?yàn)橐淮涡陨赏暾M件preview和實(shí)時(shí)調(diào)優(yōu)用輕量模型追求響應(yīng)速度session resume后的繼續(xù)對(duì)話(huà)根據(jù)當(dāng)前任務(wù)復(fù)雜度動(dòng)態(tài)切換4.2 設(shè)計(jì)令牌的映射策略designTokens的配置是impeccable區(qū)別于通用AI編碼工具的核心差異點(diǎn)。通用工具生成代碼時(shí)顏色值、間距值都是硬編碼的而impeccable會(huì)把這些值映射到你的設(shè)計(jì)令牌上。配置方式是在.impeccable/config.json里定義token映射{ designTokens: { colors: { primary: #3B82F6, secondary: #64748B, background: #FFFFFF }, spacing: { sm: 8px, md: 16px, lg: 24px }, radius: { sm: 4px, md: 8px, full: 9999px } } }配好之后agent生成代碼時(shí)會(huì)自動(dòng)用var(--color-primary)或theme.spacing.md這樣的引用而不是寫(xiě)死#3B82F6或16px。這個(gè)細(xì)節(jié)看起來(lái)小但對(duì)項(xiàng)目可維護(hù)性的影響很大。后期設(shè)計(jì)系統(tǒng)調(diào)整時(shí)你只需要改token定義所有引用它的組件自動(dòng)生效。4.3 生成策略從“一次生成”到“漸進(jìn)增強(qiáng)”我剛開(kāi)始用impeccable的時(shí)候總想一次指令就生成完美代碼。后來(lái)發(fā)現(xiàn)漸進(jìn)增強(qiáng)的策略效果更好。具體做法是第一輪指令只描述組件的結(jié)構(gòu)和核心功能不糾結(jié)樣式細(xì)節(jié)。等結(jié)構(gòu)生成對(duì)了再用后續(xù)指令逐步調(diào)整樣式。這樣做的好處是agent在每一輪只需要關(guān)注一個(gè)維度的問(wèn)題出錯(cuò)概率低而且你更容易定位問(wèn)題出在哪一輪。比如做登錄表單第一輪只說(shuō)“生成一個(gè)登錄表單包含郵箱輸入框、密碼輸入框、記住我復(fù)選框和登錄按鈕”。結(jié)構(gòu)對(duì)了之后第二輪說(shuō)“給表單加上卡片式容器內(nèi)邊距24px圓角12px帶輕微陰影”。第三輪再說(shuō)“輸入框聚焦時(shí)邊框變?yōu)橹魃珟н^(guò)渡動(dòng)畫(huà)”。這樣一步步來(lái)最終效果比一次性描述所有細(xì)節(jié)要好。5. 常見(jiàn)問(wèn)題與排查技巧實(shí)錄5.1 生成代碼與項(xiàng)目風(fēng)格不一致這是最常見(jiàn)的問(wèn)題。agent生成的代碼用了函數(shù)式組件而你項(xiàng)目里都是類(lèi)組件或者它用了CSS Modules而你項(xiàng)目用的是Tailwind。排查思路首先檢查.impeccable/config.json里的framework和styleStrategy配置是否正確。如果配置沒(méi)問(wèn)題那可能是agent沒(méi)有充分讀取項(xiàng)目里的現(xiàn)有代碼風(fēng)格。解決辦法是在指令里明確指定參考文件比如“參考src/components/Button.tsx的代碼風(fēng)格生成”。如果還是不一致可以在項(xiàng)目根目錄放一個(gè).impeccablerc文件里面寫(xiě)明代碼規(guī)范要點(diǎn)agent每次生成前都會(huì)讀取這個(gè)文件。5.2 瀏覽器擴(kuò)展無(wú)法選中元素有時(shí)候點(diǎn)擊頁(yè)面元素?cái)U(kuò)展沒(méi)有反應(yīng)。這通常是因?yàn)槟繕?biāo)元素在iframe里或者被其他元素遮擋了。排查步驟先確認(rèn)元素是否在iframe內(nèi)如果是需要先在擴(kuò)展里切換到對(duì)應(yīng)的iframe上下文。如果不是iframe的問(wèn)題檢查一下是否有遮罩層或彈窗擋住了目標(biāo)元素?？梢韵扔脼g覽器開(kāi)發(fā)者工具確認(rèn)元素的實(shí)際層級(jí)關(guān)系再在擴(kuò)展里手動(dòng)輸入選擇器來(lái)定位。5.3 生成速度慢或超時(shí)生成速度受模型響應(yīng)速度和網(wǎng)絡(luò)狀況影響。如果頻繁超時(shí)可以嘗試以下調(diào)整切換到響應(yīng)更快的輕量模型減少單次指令的復(fù)雜度拆分成多條簡(jiǎn)單指令檢查本地網(wǎng)絡(luò)連接agent服務(wù)需要穩(wěn)定的網(wǎng)絡(luò)環(huán)境另外session過(guò)長(zhǎng)也會(huì)導(dǎo)致響應(yīng)變慢因?yàn)閍gent需要處理的上下文變大了。定期開(kāi)新session是個(gè)好習(xí)慣。5.4 樣式修改不生效在瀏覽器擴(kuò)展里發(fā)了修改指令但頁(yè)面沒(méi)變化。這種情況通常是CSS優(yōu)先級(jí)的問(wèn)題。agent生成的樣式可能被更高優(yōu)先級(jí)的規(guī)則覆蓋了。解決辦法在指令里明確要求使用!important或者讓agent直接修改目標(biāo)元素的inline style。更好的做法是讓agent分析當(dāng)前生效的CSS規(guī)則找到優(yōu)先級(jí)最高的那個(gè)選擇器然后基于它來(lái)修改。5.5 常見(jiàn)問(wèn)題速查表問(wèn)題現(xiàn)象可能原因解決方向生成代碼風(fēng)格不一致配置未指定或agent未讀取項(xiàng)目規(guī)范檢查config添加.impeccablerc擴(kuò)展無(wú)法選中元素iframe或元素被遮擋切換iframe上下文手動(dòng)輸入選擇器生成超時(shí)模型慢或session過(guò)長(zhǎng)換輕量模型開(kāi)新session樣式修改不生效CSS優(yōu)先級(jí)沖突用!important或inline style導(dǎo)出變更失敗文件權(quán)限或路徑問(wèn)題檢查目標(biāo)文件讀寫(xiě)權(quán)限6. 把impeccable嵌入日常工作流的經(jīng)驗(yàn)6.1 與現(xiàn)有工具鏈的配合impeccable不是要替代你現(xiàn)有的工具而是嵌入到現(xiàn)有工作流里。我的做法是設(shè)計(jì)稿評(píng)審階段用CLI生成第一版代碼開(kāi)發(fā)階段用瀏覽器擴(kuò)展做實(shí)時(shí)調(diào)優(yōu)代碼提交前用CLI做一次批量格式化和規(guī)范檢查。和Git的配合也很自然。每次用impeccable生成或修改代碼后先git diff看一下變更確認(rèn)沒(méi)問(wèn)題再提交。瀏覽器擴(kuò)展導(dǎo)出的diff文件可以直接用git apply應(yīng)用省去手動(dòng)復(fù)制的麻煩。6.2 團(tuán)隊(duì)協(xié)作中的使用建議如果團(tuán)隊(duì)里多人使用impeccable建議統(tǒng)一.impeccable/config.json和.impeccablerc的配置并提交到版本庫(kù)。這樣每個(gè)人生成的代碼風(fēng)格是一致的減少代碼評(píng)審時(shí)的摩擦。另外session id不要提交到版本庫(kù)那是個(gè)人工作狀態(tài)每個(gè)人不一樣。但可以把重要的設(shè)計(jì)約束和項(xiàng)目規(guī)范寫(xiě)進(jìn).impeccablerc這是團(tuán)隊(duì)共享的。6.3 我踩過(guò)的幾個(gè)坑第一個(gè)坑是過(guò)度依賴(lài)agent生成。剛開(kāi)始用的時(shí)候我恨不得所有代碼都讓agent寫(xiě)結(jié)果生成了一堆能跑但不好維護(hù)的代碼。后來(lái)我調(diào)整了策略agent負(fù)責(zé)生成重復(fù)性高的樣式代碼和基礎(chǔ)結(jié)構(gòu)核心業(yè)務(wù)邏輯和復(fù)雜交互還是手寫(xiě)。這樣既享受了效率提升又保證了代碼質(zhì)量。第二個(gè)坑是忽略設(shè)計(jì)令牌的維護(hù)。有段時(shí)間我圖省事直接在指令里寫(xiě)具體的顏色值沒(méi)走designTokens。結(jié)果后來(lái)設(shè)計(jì)系統(tǒng)升級(jí)要改幾十個(gè)文件里的硬編碼顏色。從那以后我嚴(yán)格要求所有生成代碼必須引用設(shè)計(jì)令牌。第三個(gè)坑是session管理混亂。有次一個(gè)session連續(xù)用了快50輪后面agent的響應(yīng)質(zhì)量明顯下降生成的代碼開(kāi)始出現(xiàn)重復(fù)定義和邏輯錯(cuò)誤。后來(lái)我定了規(guī)矩單個(gè)session不超過(guò)20輪超了就開(kāi)新的把關(guān)鍵約束重新交代一遍。6.4 后續(xù)可以擴(kuò)展的方向impeccable目前聚焦在前端設(shè)計(jì)和代碼生成上但這個(gè)模式可以擴(kuò)展到更多場(chǎng)景。比如結(jié)合組件庫(kù)文檔讓agent生成符合特定組件庫(kù)規(guī)范的代碼或者接入設(shè)計(jì)稿解析能力直接從Figma文件生成代碼。另一個(gè)有意思的方向是和測(cè)試結(jié)合。生成組件代碼的同時(shí)讓agent自動(dòng)生成對(duì)應(yīng)的單元測(cè)試和快照測(cè)試這樣新組件的測(cè)試覆蓋率從一開(kāi)始就有保障。我個(gè)人在實(shí)際操作中的體會(huì)是impeccable這類(lèi)工具的價(jià)值不在于“替代開(kāi)發(fā)者”而在于“壓縮反饋循環(huán)”。以前改一個(gè)樣式要經(jīng)歷“改代碼-保存-切瀏覽器-刷新-看效果”五步現(xiàn)在變成“說(shuō)一句話(huà)-看效果”兩步。這個(gè)效率提升是實(shí)實(shí)在在的而且它改變了我做前端設(shè)計(jì)的方式——從“先想清楚所有細(xì)節(jié)再動(dòng)手”變成“先出第一版再逐步調(diào)優(yōu)”后者更符合實(shí)際的設(shè)計(jì)探索過(guò)程。