前言¶
讓模型寫界面，常見結果是：能跑，但沒法交付。佈局在窄屏上擠成一團，按鈕缺少可訪問的焦點樣式，幾種狀態（加載、空、錯誤）只寫了一個，配色隨手挑，組件名和項目裏的設計系統對不上。問題不在模型不會寫代碼，而在它默認按「看起來對」來判斷，而不是按「生產環境該長什麼樣」來判斷。
前端UI工程（@kunlungrowth/kg-frontend-ui-engineering）就是針對這個默認判斷做約束的 Skill：它把設計系統、WCAG 可訪問性、響應式佈局和狀態管理的實踐固化爲一套流程，讓模型在寫前端時先走規範，再寫代碼。
這是什麼¶
一個面向前端界面開發的 Agent Skill，座標 @kunlungrowth/kg-frontend-ui-engineering，版本 1.0.0，由崑崙增長髮布，來源標記爲 enterprise，在 SkillHub 上歸類於 dev-programming。
它解決的問題是：模型生成的界面缺少生產級的約束檢查，導致交付後還要人工返工。Skill 的定位是把這些檢查前置到生成階段，而不是事後補。
核心能力¶
按官方簡介，該 Skill 覆蓋四類約束：
1、生產級交付：不只是寫出能渲染的代碼，而是按可上線的標準組織界面實現，包含佈局、交互與狀態的完整性。
2、可訪問性：遵循 WCAG 相關實踐，關注語義化標籤、鍵盤可達、焦點可見與對比度，而不是隻做視覺還原。
3、響應式：在不同視口和斷點下保持可用，避免只在單一寬度下看起來正常。
4、狀態管理：覆蓋加載、空、錯誤、成功等界面狀態的實現，而不是隻給出默認狀態的靜態結構。
另一個明確目標是規避「AI 審美」。這指的是模型傾向於生成風格趨同、配色隨意、裝飾重於功能的界面；Skill 的做法是讓實現服從設計系統，而不是服從模型的即興判斷。
安裝與啓用¶
該 Skill 採用通用 SKILL.md 格式，通過 Agent Skill 宿主加載。以下是啓用方式。
在 Cursor、Codex CLI 或 Claude Code 中啓用 Skill 時，需要把 SKILL.md 放到宿主能識別的目錄，或通過配置引用其座標 @kunlungrowth/kg-frontend-ui-engineering。具體目錄路徑和配置字段取決於所使用的宿主版本。
抓取到的官方頁面未給出可直接複製的安裝命令，因此這裏不寫安裝腳本。啓用前建議先打開官方頁面確認當前的安裝方式：
https://www.skillhub.cn/skills/kunlungrowth/kg-frontend-ui-engineering
典型用法¶
按該 Skill 的能力範圍，一次界面開發的流程可以這樣組織。下面這個流程是對 Skill 覆蓋能力的展開，具體提示詞和步驟以官方 SKILL.md 爲準。
1、先明確約束，再寫代碼：在動手前確定使用的組件庫或設計系統、目標斷點，以及界面需要覆蓋哪些狀態。把規範講清楚，比反覆改樣式有效。
目標：實現一個數據列表頁。
約束：使用項目現有組件庫，不引入新的視覺風格。
斷點：移動端 375px、桌面端 1280px。
狀態：需要覆蓋加載、空數據、請求失敗三種。
2、結構與語義優先：先給出語義化的標籤和組件結構，再考慮樣式。可訪問性依賴結構，事後補成本高。
3、狀態補齊：對每個異步或可變狀態，都給出對應的界面結構，包括錯誤提示的呈現方式和可重試入口。
4、響應式自檢：按斷點檢查佈局，確認在最小寬度下沒有橫向溢出，文字沒有截斷，觸控目標間距合理。
5、可訪問性自檢：確認鍵盤可以完成主要操作，焦點順序合理，交互元素有可辨識的焦點樣式，文本與背景對比度滿足要求。
適用場景與注意¶
適合的場景：需要交付真實前端頁面、且項目已有設計系統或組件庫的情況；需要同時覆蓋多個界面狀態的中大型界面任務；需要滿足可訪問性合規要求的界面。
需要注意的限制：
1、Skill 提供的是流程和約束，不包含組件庫本身。項目中如果沒有現成的設計系統，仍需先補齊這一層。
2、它不替代瀏覽器實測。響應式和可訪問性需要在真實環境或工具裏驗證，Skill 的作用是讓實現更接近正確，而不是自動保證正確。
3、「規避 AI 審美」的效果取決於給出的設計系統是否明確。規範越具體，模型偏離的空間越小。
4、抓取到的資料中未包含該 Skill 的完整正文、安裝命令與配置字段，以上能力描述基於官方簡介。使用前應以官方頁面爲準。
結尾¶
這個 Skill 的價值在於把前端交付中容易被忽略的幾件事——可訪問性、響應式、狀態完整性、對設計系統的服從——從人工檢查項變成生成階段默認要走的流程。如果你的界面任務經常落在「能跑但沒法交付」這個區間，可以先試用它，再按項目實際情況調整約束。
官方地址：https://www.skillhub.cn/skills/kunlungrowth/kg-frontend-ui-engineering
座標：@kunlungrowth/kg-frontend-ui-engineering
