1. 為什么你的AI總在生成“同一個(gè)模子刻出來(lái)的”界面1.1 一個(gè)讓所有AI編程用戶頭疼的普遍現(xiàn)象如果你最近半年用過(guò)任何主流AI編程工具來(lái)生成前端界面大概率遇到過(guò)這種情況你讓它做一個(gè)后臺(tái)管理系統(tǒng)它給你一個(gè)側(cè)邊欄加頂部導(dǎo)航加卡片式數(shù)據(jù)面板你讓它做一個(gè)電商首頁(yè)它還是給你一個(gè)側(cè)邊欄加頂部導(dǎo)航加卡片式數(shù)據(jù)面板你甚至讓它做一個(gè)個(gè)人博客它依然給你一個(gè)側(cè)邊欄加頂部導(dǎo)航加卡片式數(shù)據(jù)面板。配色永遠(yuǎn)是那套藍(lán)紫漸變字體永遠(yuǎn)是Inter圓角永遠(yuǎn)是8px陰影永遠(yuǎn)是那套0 1px 3px rgba(0,0,0,0.1)。這不是你的提示詞寫(xiě)得不好也不是模型能力不行。這是當(dāng)前AI編程工具在界面生成這件事上的一個(gè)結(jié)構(gòu)性缺陷——它們?nèi)鄙僖惶钻P(guān)于“設(shè)計(jì)決策”的約束系統(tǒng)。我過(guò)去大半年時(shí)間一直在做AI輔助開(kāi)發(fā)相關(guān)的工程實(shí)踐前后試過(guò)不下十種AI編程工具和插件組合從最早的Copilot到后來(lái)的Cursor、Windsurf再到各種基于大模型API自建的代碼生成流水線。一個(gè)非常明確的感受是模型在邏輯代碼上的表現(xiàn)已經(jīng)相當(dāng)可用了但在UI生成上它就像一個(gè)只會(huì)做番茄炒蛋的廚師——你給它什么食材它都能給你炒出一盤(pán)番茄炒蛋。1.2 問(wèn)題的根源不在模型在“缺少約束”要理解為什么AI總生成模板化界面得先理解AI生成代碼的底層機(jī)制。大模型生成代碼本質(zhì)上是一個(gè)概率采樣過(guò)程它根據(jù)你的提示詞在訓(xùn)練數(shù)據(jù)中找到最匹配的模式然后逐token生成。問(wèn)題在于訓(xùn)練數(shù)據(jù)中最高頻的UI模式就是那幾種——Tailwind CSS的默認(rèn)示例、Shadcn/ui的組件demo、各種Admin模板的截圖轉(zhuǎn)代碼。當(dāng)你的提示詞沒(méi)有給出足夠強(qiáng)的差異化信號(hào)時(shí)模型就會(huì)退回到這些高頻模式。你可能會(huì)說(shuō)“我在提示詞里寫(xiě)了‘設(shè)計(jì)一個(gè)獨(dú)特的、現(xiàn)代化的界面’啊?！钡珕?wèn)題在于“獨(dú)特”和“現(xiàn)代化”這兩個(gè)詞在模型的語(yǔ)義空間里幾乎沒(méi)有區(qū)分度——一百萬(wàn)個(gè)用戶都寫(xiě)過(guò)同樣的詞模型學(xué)到的對(duì)應(yīng)輸出就是那套默認(rèn)模板。真正有效的做法不是寫(xiě)更好的提示詞而是給AI一套結(jié)構(gòu)化的設(shè)計(jì)決策約束。這就是“Skill包”這個(gè)概念的核心價(jià)值所在。1.3 Skill包到底是什么為什么它能解決這個(gè)問(wèn)題Skill包這個(gè)詞最近在AI編程圈子里出現(xiàn)頻率很高但很多人對(duì)它的理解還停留在“提示詞模板”的層面。實(shí)際上一個(gè)設(shè)計(jì)良好的Skill包遠(yuǎn)不止是提示詞集合它更像是一套注入到AI工作流中的領(lǐng)域知識(shí)系統(tǒng)。具體來(lái)說(shuō)一個(gè)針對(duì)UI生成的Skill包通常包含以下幾個(gè)層次的內(nèi)容設(shè)計(jì)決策規(guī)則什么場(chǎng)景用什么布局、什么行業(yè)用什么配色、什么用戶群體用什么交互模式約束條件明確禁止AI使用哪些“默認(rèn)選項(xiàng)”強(qiáng)制它在給定范圍內(nèi)做選擇參考樣本不是讓AI模仿某個(gè)具體設(shè)計(jì)而是給它一組設(shè)計(jì)語(yǔ)言的“語(yǔ)法規(guī)則”輸出檢查清單生成后自動(dòng)校驗(yàn)是否落入了模板化陷阱我自己的做法是把Skill包理解成給AI裝了一個(gè)“設(shè)計(jì)品味過(guò)濾器”。模型本身的能力沒(méi)有變但它的輸出空間被收窄到了一個(gè)更有品味的子集里。注意Skill包不是讓AI“隨機(jī)化”輸出。隨機(jī)化只會(huì)產(chǎn)生混亂的界面。Skill包的核心是“有約束的多樣性”——在保證可用性和一致性的前提下讓每次生成的結(jié)果有實(shí)質(zhì)性的設(shè)計(jì)差異。2. 拆解一個(gè)UI生成Skill包的核心結(jié)構(gòu)2.1 設(shè)計(jì)決策層讓AI先做選擇再寫(xiě)代碼大多數(shù)人用AI生成界面的方式是直接說(shuō)“幫我做一個(gè)XX頁(yè)面”然后AI就開(kāi)始吐代碼了。這種方式的問(wèn)題在于AI在寫(xiě)第一行代碼的時(shí)候還沒(méi)有對(duì)整體設(shè)計(jì)做出任何明確的決策它只是在沿著概率最高的路徑滑行。Skill包的第一個(gè)核心模塊就是強(qiáng)制AI在寫(xiě)代碼之前先做設(shè)計(jì)決策。具體做法是在Skill包中定義一組決策維度要求AI在生成代碼前先輸出一份設(shè)計(jì)決策清單。這份清單通常包括決策維度可選范圍決策依據(jù)布局模式側(cè)邊欄/頂部導(dǎo)航/底部標(biāo)簽/無(wú)導(dǎo)航/混合頁(yè)面類型與信息架構(gòu)色彩體系單色/互補(bǔ)/類比/三角/分裂互補(bǔ)品牌調(diào)性與行業(yè)屬性字體策略單字體/雙字體/三字體內(nèi)容層級(jí)與閱讀場(chǎng)景圓角風(fēng)格直角/微圓角/大圓角/膠囊產(chǎn)品氣質(zhì)與目標(biāo)用戶陰影層級(jí)無(wú)陰影/扁平/微陰影/懸浮信息密度與交互反饋間距節(jié)奏緊湊/標(biāo)準(zhǔn)/寬松/呼吸感內(nèi)容類型與屏幕尺寸這張表看起來(lái)簡(jiǎn)單但它的作用非常關(guān)鍵。當(dāng)AI被要求先填寫(xiě)這張表再寫(xiě)代碼時(shí)它的生成路徑就從一個(gè)“開(kāi)環(huán)”變成了“閉環(huán)”——先確定設(shè)計(jì)參數(shù)再基于參數(shù)生成代碼。實(shí)測(cè)下來(lái)僅僅加入這一步生成結(jié)果的多樣性就能提升三到五倍。2.2 約束規(guī)則層明確告訴AI“不要做什么”這是Skill包中最容易被忽視但效果最顯著的部分。大多數(shù)人在寫(xiě)提示詞時(shí)都在說(shuō)“要做什么”但真正能改變AI輸出分布的往往是“不要做什么”。我在自己的Skill包里維護(hù)了一份“禁用清單”每次生成UI時(shí)都會(huì)注入到系統(tǒng)提示中。這份清單包括但不限于禁止使用藍(lán)紫漸變作為主色調(diào)除非用戶明確要求禁止使用側(cè)邊欄頂部導(dǎo)航卡片網(wǎng)格的三段式布局除非是標(biāo)準(zhǔn)后臺(tái)管理場(chǎng)景禁止使用Inter字體作為默認(rèn)字體除非用戶指定禁止使用8px統(tǒng)一圓角要求根據(jù)元素層級(jí)區(qū)分圓角大小禁止使用shadow-sm級(jí)別的默認(rèn)陰影要求陰影有明確的方向性和層級(jí)感禁止在首屏使用輪播圖除非用戶明確要求禁止使用純白色背景要求使用帶色調(diào)的淺色背景這份清單看起來(lái)有些“霸道”但它的邏輯是這些選項(xiàng)是AI的默認(rèn)路徑禁用它們就是強(qiáng)制AI走非默認(rèn)路徑。當(dāng)然禁用不是絕對(duì)的如果用戶明確要求某個(gè)被禁用的選項(xiàng)Skill包會(huì)允許覆蓋但會(huì)提示用戶“這是一個(gè)常見(jiàn)模板特征”。2.3 場(chǎng)景適配層不同場(chǎng)景用不同設(shè)計(jì)語(yǔ)言模板化界面的另一個(gè)表現(xiàn)是不管什么場(chǎng)景AI都用同一套設(shè)計(jì)語(yǔ)言。一個(gè)兒童教育產(chǎn)品的界面和一個(gè)金融數(shù)據(jù)分析平臺(tái)的界面在AI眼里可能只有文字內(nèi)容的區(qū)別。Skill包的場(chǎng)景適配層解決的就是這個(gè)問(wèn)題。它的做法是為常見(jiàn)的產(chǎn)品類型預(yù)定義設(shè)計(jì)語(yǔ)言映射。比如工具類產(chǎn)品高信息密度、緊湊間距、弱裝飾、強(qiáng)功能導(dǎo)向內(nèi)容類產(chǎn)品強(qiáng)閱讀節(jié)奏、大留白、字體層級(jí)分明、弱交互干擾電商類產(chǎn)品強(qiáng)視覺(jué)沖擊、大圖優(yōu)先、明確的價(jià)格層級(jí)、緊迫感設(shè)計(jì)社交類產(chǎn)品頭像優(yōu)先、動(dòng)態(tài)流布局、輕量交互、情感化設(shè)計(jì)數(shù)據(jù)類產(chǎn)品圖表優(yōu)先、深色模式友好、高對(duì)比度、精確的數(shù)值展示每個(gè)場(chǎng)景對(duì)應(yīng)的不只是配色和布局還包括交互模式、動(dòng)效風(fēng)格、甚至文案語(yǔ)氣。這些細(xì)節(jié)單獨(dú)看都很小但組合起來(lái)就能讓界面產(chǎn)生本質(zhì)性的差異。2.4 輸出校驗(yàn)層生成后的自動(dòng)檢查Skill包的最后一道防線是輸出校驗(yàn)。當(dāng)AI生成完代碼后Skill包會(huì)觸發(fā)一組檢查規(guī)則掃描生成結(jié)果中是否包含模板化特征。這些檢查包括是否使用了禁用清單中的模式設(shè)計(jì)決策清單中的選擇是否在代碼中得到體現(xiàn)色彩、字體、間距等是否與場(chǎng)景適配層的要求一致是否存在“萬(wàn)能布局”即那種什么場(chǎng)景都能用但什么場(chǎng)景都不出彩的布局如果檢查不通過(guò)Skill包會(huì)要求AI重新生成并明確指出問(wèn)題所在。這個(gè)迭代過(guò)程通常只需要一到兩輪就能得到明顯改善的結(jié)果。3. 從零構(gòu)建一個(gè)可用的UI Skill包3.1 準(zhǔn)備工作確定你的技術(shù)棧和工具鏈在開(kāi)始構(gòu)建Skill包之前需要先明確你的使用場(chǎng)景。不同的AI編程工具對(duì)Skill包的支持方式不同構(gòu)建方法也有差異。我自己的主力工具鏈?zhǔn)荲S Code配合AI編程插件所以下面的方案會(huì)以這個(gè)組合為例但核心思路可以遷移到任何支持系統(tǒng)提示注入的工具上。你需要準(zhǔn)備的東西一個(gè)支持自定義系統(tǒng)提示或規(guī)則文件的AI編程工具一個(gè)用于存放Skill包內(nèi)容的目錄建議放在項(xiàng)目根目錄的.ai-skills/下一份你常用的技術(shù)棧清單比如React Tailwind Shadcn/ui一份你個(gè)人偏好的設(shè)計(jì)參考可以是截圖、網(wǎng)站鏈接、或者設(shè)計(jì)系統(tǒng)的文檔提示Skill包的內(nèi)容不需要一次性寫(xiě)完。我建議先從禁用清單開(kāi)始這是投入產(chǎn)出比最高的部分。寫(xiě)十條禁用規(guī)則就能立刻看到生成結(jié)果的改善。3.2 第一步編寫(xiě)核心規(guī)則文件Skill包的核心是一個(gè)Markdown格式的規(guī)則文件通常命名為ui-skill.md或類似名稱。這個(gè)文件會(huì)被注入到每次AI對(duì)話的系統(tǒng)提示中。下面是我自己使用的一個(gè)精簡(jiǎn)版規(guī)則文件的結(jié)構(gòu)# UI生成Skill包 ## 設(shè)計(jì)決策前置 在生成任何UI代碼之前必須先輸出設(shè)計(jì)決策清單包括 - 布局模式及理由 - 色彩體系及理由 - 字體策略及理由 - 圓角與陰影策略 - 間距節(jié)奏 ## 禁用清單 以下模式除非用戶明確要求否則禁止使用 1. 藍(lán)紫漸變主色調(diào) 2. 側(cè)邊欄頂部導(dǎo)航卡片網(wǎng)格的三段式布局 3. Inter作為默認(rèn)字體 4. 統(tǒng)一8px圓角 5. shadow-sm級(jí)別默認(rèn)陰影 6. 純白色背景 7. 首屏輪播圖 8. 三列等寬卡片布局 9. 居中大標(biāo)題副標(biāo)題兩個(gè)按鈕的Hero區(qū) 10. 灰色#f5f5f5作為頁(yè)面背景 ## 場(chǎng)景適配 根據(jù)產(chǎn)品類型選擇設(shè)計(jì)語(yǔ)言 - 工具類高密度、緊湊、功能導(dǎo)向 - 內(nèi)容類大留白、強(qiáng)閱讀節(jié)奏 - 電商類大圖優(yōu)先、價(jià)格層級(jí)明確 - 數(shù)據(jù)類圖表優(yōu)先、深色友好 ## 輸出校驗(yàn) 生成后檢查 - [ ] 是否觸發(fā)禁用清單 - [ ] 設(shè)計(jì)決策是否在代碼中體現(xiàn) - [ ] 場(chǎng)景適配是否一致這個(gè)文件看起來(lái)簡(jiǎn)單但它的威力在于每次生成都會(huì)被執(zhí)行。AI不會(huì)“忘記”這些規(guī)則因?yàn)樗鼈兪冀K在系統(tǒng)提示中。3.3 第二步建立場(chǎng)景設(shè)計(jì)語(yǔ)言庫(kù)禁用清單解決的是“不要什么”的問(wèn)題場(chǎng)景設(shè)計(jì)語(yǔ)言庫(kù)解決的是“要什么”的問(wèn)題。這部分內(nèi)容需要你根據(jù)自己的產(chǎn)品經(jīng)驗(yàn)來(lái)積累但可以參考以下框架每個(gè)場(chǎng)景的設(shè)計(jì)語(yǔ)言定義包含五個(gè)維度色彩維度主色、輔色、強(qiáng)調(diào)色、背景色、文字色的具體色值范圍。比如工具類產(chǎn)品的主色建議使用低飽和度的藍(lán)灰色系如#3B5998到#5B7DB1而電商類產(chǎn)品的主色建議使用高飽和度的暖色系如#E63946到#F4A261。字體維度字體族、字重分布、字號(hào)階梯。比如內(nèi)容類產(chǎn)品建議使用襯線字體作為標(biāo)題字體字號(hào)階梯為16/20/24/32/48工具類產(chǎn)品建議使用無(wú)襯線字體字號(hào)階梯為12/14/16/20/24。間距維度基礎(chǔ)間距單位、組件內(nèi)間距、組件間間距、區(qū)塊間間距。比如緊湊型界面使用4px基礎(chǔ)單位標(biāo)準(zhǔn)型使用8px寬松型使用12px。圓角維度不同層級(jí)元素的圓角策略。比如卡片使用12px按鈕使用8px輸入框使用6px標(biāo)簽使用4px頭像使用全圓。動(dòng)效維度過(guò)渡時(shí)長(zhǎng)、緩動(dòng)曲線、觸發(fā)方式。比如工具類產(chǎn)品使用150ms的ease-out內(nèi)容類產(chǎn)品使用300ms的ease-in-out。這些參數(shù)不需要一次定死但需要有明確的范圍約束。AI在這個(gè)范圍內(nèi)做選擇就不會(huì)跑偏到模板化的默認(rèn)路徑上。3.4 第三步集成到AI工作流中規(guī)則文件寫(xiě)好后需要把它集成到你的AI編程工具中。不同的工具有不同的集成方式VS Code AI插件大多數(shù)插件支持在項(xiàng)目根目錄放置規(guī)則文件如.cursorrules、.windsurfrules等或者在設(shè)置中配置系統(tǒng)提示。把Skill包內(nèi)容寫(xiě)入對(duì)應(yīng)文件即可。自建API流水線如果你是通過(guò)API調(diào)用大模型來(lái)生成代碼把Skill包內(nèi)容作為system message的一部分注入即可。建議把Skill包內(nèi)容放在system message的前半部分用戶的具體需求放在后半部分。對(duì)話式工具如果工具不支持持久化系統(tǒng)提示可以在每次對(duì)話開(kāi)始時(shí)手動(dòng)粘貼Skill包內(nèi)容。雖然麻煩一些但效果是一樣的。集成完成后建議先做一組對(duì)照測(cè)試用同樣的提示詞分別在有Skill包和無(wú)Skill包的情況下生成界面對(duì)比結(jié)果的差異。我自己的測(cè)試結(jié)果是有Skill包時(shí)生成結(jié)果的“模板化程度”大約降低了70%以上。4. 實(shí)操過(guò)程中踩過(guò)的坑和解決方案4.1 規(guī)則太多導(dǎo)致AI“罷工”剛開(kāi)始構(gòu)建Skill包時(shí)我犯了一個(gè)典型的錯(cuò)誤把禁用清單寫(xiě)得非常長(zhǎng)足足有五十多條。結(jié)果AI在生成時(shí)頻繁出現(xiàn)“無(wú)法滿足所有約束”的情況要么直接拒絕生成要么生成到一半就中斷了。后來(lái)我意識(shí)到約束不是越多越好而是越精準(zhǔn)越好?，F(xiàn)在的做法是把禁用清單控制在10到15條只保留那些最高頻、最影響觀感的模板化特征。其他細(xì)節(jié)通過(guò)場(chǎng)景適配層來(lái)引導(dǎo)而不是硬性禁止。實(shí)操心得如果你發(fā)現(xiàn)AI開(kāi)始“偷懶”或者生成質(zhì)量下降第一件事就是檢查Skill包是不是太長(zhǎng)了。精簡(jiǎn)規(guī)則往往比增加規(guī)則更有效。4.2 場(chǎng)景適配層需要持續(xù)迭代場(chǎng)景適配層的設(shè)計(jì)語(yǔ)言庫(kù)不是一次寫(xiě)完就完事的。我在實(shí)際使用中發(fā)現(xiàn)最初定義的幾套設(shè)計(jì)語(yǔ)言在真實(shí)項(xiàng)目中經(jīng)常需要微調(diào)。比如工具類產(chǎn)品的“緊湊間距”在某些數(shù)據(jù)密集型頁(yè)面會(huì)顯得過(guò)于擁擠需要為這類頁(yè)面單獨(dú)定義一個(gè)“超緊湊”變體。我的做法是維護(hù)一個(gè)“場(chǎng)景-設(shè)計(jì)語(yǔ)言”的映射表每次遇到不匹配的情況就新增一條記錄。半年下來(lái)這個(gè)映射表從最初的5條擴(kuò)展到了20多條覆蓋了大部分常見(jiàn)的產(chǎn)品類型。4.3 輸出校驗(yàn)不能太嚴(yán)格輸出校驗(yàn)層的初衷是好的但如果校驗(yàn)規(guī)則太嚴(yán)格會(huì)導(dǎo)致AI反復(fù)重新生成浪費(fèi)大量token和時(shí)間。我最初的校驗(yàn)規(guī)則有二十多條結(jié)果每次生成都要迭代三四輪才能通過(guò)?，F(xiàn)在的做法是把校驗(yàn)規(guī)則分為“必須通過(guò)”和“建議通過(guò)”兩級(jí)。必須通過(guò)的只有三條是否觸發(fā)禁用清單、設(shè)計(jì)決策是否在代碼中體現(xiàn)、場(chǎng)景適配是否一致。其他細(xì)節(jié)作為建議不強(qiáng)制重新生成。4.4 不同模型的適配問(wèn)題Skill包在不同模型上的表現(xiàn)差異很大。我測(cè)試過(guò)幾個(gè)主流的大模型發(fā)現(xiàn)有些模型對(duì)禁用清單的執(zhí)行非常嚴(yán)格有些則容易“忘記”規(guī)則。對(duì)于后者需要在每次對(duì)話中重復(fù)注入Skill包內(nèi)容或者在提示詞中增加“請(qǐng)嚴(yán)格遵守上述規(guī)則”的強(qiáng)調(diào)語(yǔ)句。另外不同模型對(duì)設(shè)計(jì)決策清單的理解深度也不同。有些模型能很好地根據(jù)場(chǎng)景做出合理的設(shè)計(jì)決策有些則傾向于選擇“安全”的默認(rèn)選項(xiàng)。對(duì)于后者可以在Skill包中增加一些“決策示例”幫助模型理解期望的決策深度。5. 常見(jiàn)問(wèn)題速查與進(jìn)階技巧5.1 常見(jiàn)問(wèn)題排查表問(wèn)題現(xiàn)象可能原因解決方案AI完全忽略Skill包規(guī)則文件未正確加載檢查文件路徑和格式確認(rèn)工具支持生成結(jié)果仍然模板化禁用清單不夠精準(zhǔn)增加高頻模板特征的禁用規(guī)則AI頻繁拒絕生成約束過(guò)多過(guò)嚴(yán)精簡(jiǎn)規(guī)則區(qū)分必須和建議不同頁(yè)面風(fēng)格不一致場(chǎng)景適配層缺失為每個(gè)頁(yè)面類型定義設(shè)計(jì)語(yǔ)言生成速度明顯變慢校驗(yàn)迭代次數(shù)過(guò)多減少必須通過(guò)的校驗(yàn)規(guī)則某些模型效果差模型對(duì)規(guī)則遵循度低增加規(guī)則強(qiáng)調(diào)語(yǔ)句或換模型5.2 進(jìn)階技巧用“設(shè)計(jì)種子”增加多樣性如果你希望同一個(gè)場(chǎng)景下的多次生成也有差異可以在Skill包中引入“設(shè)計(jì)種子”的概念。具體做法是在每次生成時(shí)隨機(jī)選擇一個(gè)設(shè)計(jì)種子比如“包豪斯風(fēng)格”、“瑞士國(guó)際主義”、“日式極簡(jiǎn)”、“孟菲斯風(fēng)格”等然后把種子對(duì)應(yīng)的設(shè)計(jì)特征注入到提示中。這個(gè)技巧的關(guān)鍵是種子要足夠抽象不能是具體的配色方案或布局模板。種子的作用是給AI一個(gè)“設(shè)計(jì)方向感”而不是一個(gè)“設(shè)計(jì)答案”。我實(shí)測(cè)下來(lái)加入設(shè)計(jì)種子后同一場(chǎng)景下的生成結(jié)果多樣性可以再提升兩到三倍。5.3 進(jìn)階技巧建立個(gè)人設(shè)計(jì)參考庫(kù)Skill包的效果上限取決于你注入的設(shè)計(jì)知識(shí)的質(zhì)量。如果你自己對(duì)設(shè)計(jì)沒(méi)有太多研究Skill包的效果會(huì)打折扣。我的建議是花一些時(shí)間建立自己的設(shè)計(jì)參考庫(kù)收集那些你覺(jué)得“有品味”的界面截圖然后分析它們的設(shè)計(jì)決策——用了什么布局、什么色彩體系、什么字體策略、什么間距節(jié)奏。把這些分析結(jié)果整理成結(jié)構(gòu)化的數(shù)據(jù)就可以作為Skill包的補(bǔ)充材料。不需要很多二十到三十個(gè)高質(zhì)量參考就足夠讓Skill包的效果產(chǎn)生質(zhì)變。5.4 一個(gè)容易被忽視的細(xì)節(jié)文案語(yǔ)氣模板化界面不只是視覺(jué)上的問(wèn)題文案語(yǔ)氣也是重災(zāi)區(qū)。AI生成的界面文案往往是“歡迎使用XX系統(tǒng)”、“請(qǐng)輸入您的用戶名”、“點(diǎn)擊這里開(kāi)始”這類毫無(wú)個(gè)性的表達(dá)。好的Skill包應(yīng)該也包含文案語(yǔ)氣的約束。我的做法是在Skill包中增加一個(gè)“文案風(fēng)格”模塊定義不同場(chǎng)景下的文案語(yǔ)氣。比如工具類產(chǎn)品用直接、簡(jiǎn)潔、動(dòng)詞開(kāi)頭的文案內(nèi)容類產(chǎn)品用溫暖、有節(jié)奏感、帶標(biāo)點(diǎn)的文案電商類產(chǎn)品用緊迫、有行動(dòng)號(hào)召力的文案。這個(gè)細(xì)節(jié)看起來(lái)小但對(duì)界面整體質(zhì)感的提升非常明顯。6. 我個(gè)人的一些實(shí)踐體會(huì)這套Skill包的方案我前后迭代了大概半年時(shí)間從最初的一個(gè)簡(jiǎn)單禁用清單發(fā)展到現(xiàn)在包含設(shè)計(jì)決策、場(chǎng)景適配、輸出校驗(yàn)、文案風(fēng)格四個(gè)模塊的完整系統(tǒng)。最大的感受是AI生成界面的質(zhì)量瓶頸不在模型能力而在你給它的約束質(zhì)量。同樣的模型同樣的提示詞加不加Skill包生成結(jié)果的差距是肉眼可見(jiàn)的。不加Skill包時(shí)生成結(jié)果大概能用但毫無(wú)特色加了Skill包后生成結(jié)果至少能達(dá)到“初級(jí)設(shè)計(jì)師水平”在某些場(chǎng)景下甚至能給出讓人眼前一亮的設(shè)計(jì)決策。另一個(gè)體會(huì)是Skill包不是一勞永逸的東西。隨著你對(duì)設(shè)計(jì)的理解加深隨著你接觸到的產(chǎn)品類型增多Skill包需要持續(xù)迭代。我現(xiàn)在的做法是每個(gè)月回顧一次Skill包的內(nèi)容把最近遇到的新模板化特征加入禁用清單把新的場(chǎng)景類型加入適配層。最后分享一個(gè)小的檢查方法每次AI生成完界面后問(wèn)自己一個(gè)問(wèn)題——“如果我把這個(gè)界面的截圖發(fā)給一個(gè)設(shè)計(jì)師朋友他會(huì)覺(jué)得這是AI生成的嗎”如果答案是“會(huì)”那就說(shuō)明Skill包還有優(yōu)化空間。這個(gè)標(biāo)準(zhǔn)雖然主觀但非常有效。