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