前言¶
寫界面的人常見這幾類返工：鍵盤走不通，Tab 到一半就丟焦點；窄屏下佈局直接崩；加載和空態沒做，接口一慢頁面就是一片空白；還有一種更隱蔽的問題——界面能跑、看着也還行，但一眼就是”AI 生成觀感”：同樣的卡片、同樣的藍紫漸變、同樣的三欄等寬佈局。這類問題靠臨時補樣式很難根除，需要在寫代碼之前就定好工程規範。
下面介紹的這個 Skill 就是針對這類問題設計的。它在 SkillHub 上的名稱是「前端用戶體驗工程」，座標 @user_e40a4360/frontend-ui-engineering，版本 1.0.0，來源 community，分類 dev-programming。
這是什麼¶
一句話定位：一套生產級前端界面的工程規範，指導你在新建或修改界面、創建組件、實現佈局、管理狀態時，直接產出可訪問、響應式、視覺上接近生產環境的界面，而不是帶 AI 生成痕跡的界面。
它由 SkillHub 社區發佈者 user_e40a4360 維護，需要明確的是，它屬於社區來源（community），不是框架官方出品。它解決的問題不是”某個組件怎麼寫”，而是”從組件架構到顏色令牌、從狀態分層到加載態，一套界面應該按什麼規範組織”。
核心功能¶
Skill 指南按界面工程的幾個層次展開，一節只覆蓋一件事。
組件架構與文件同置¶
先定組件的邊界，再談樣式怎麼寫。相關文件（組件本體、樣式、小部件）按目錄就近放置，避免一個組件的改動散在三四個目錄裏。
組合優於配置¶
優先用組合（子組件嵌套）表達界面結構，而不是給一個組件堆滿布爾開關和配置項。配置項越多，調用方越難猜出默認行爲，可訪問性和樣式一致性也越難保證。
數據獲取與展示分離¶
數據層負責取數和緩存，展示層只管按給定數據渲染。兩層不混在一個組件裏，加載、錯誤、空態纔有統一的掛載位置。
狀態管理分層選型¶
按狀態的作用域選方案：局部界面狀態留在組件內，跨組件共享再上全局方案。分層的依據是作用域，不是”哪個庫更流行”。
設計系統與語義化顏色令牌¶
顏色一律走語義化令牌（語義、層級、狀態），不寫死具體色值。改主題或做暗色模式時，只需替換令牌定義。
WCAG 2.1 AA 無障礙¶
這一節給出可覈對的硬要求：鍵盤導航路徑完整、交互元素帶 ARIA 標籤、焦點順序可見且可預測、焦點管理正確。目標不是”看起來無障礙”，是能通過鍵盤和讀屏軟件實際走完流程。
響應式斷點¶
斷點按內容和容器定，不按某個固定設備列表照抄。佈局隨容器變化，而不是在斷點處整體重排。
加載、更新與空態/錯態¶
接口慢時先渲染骨架屏佔位，不用空白或轉圈打發用戶；樂觀更新先改界面、失敗再回滾，並給出明確反饋。空態和錯態單獨設計，不沿用默認空白。
規避 AI 模板審美¶
這一節處理的是前述的”一眼 AI”問題：識別模板化的卡片堆疊、濫用漸變和等寬網格等套路，並給出替代做法，讓界面在視覺上接近真實產品。
元數據與獲取¶
截至本次抓取，SkillHub 頁面上的公開數據如下：
- 評分 100000
- 下載 7776
- 安裝 31
- 標籤
requires_api_key=false，即不需要 API Key - 版本 1.0.0，來源 community
關於安裝：SkillHub 頁面未提供可直接複製的安裝命令，需在頁面內按其引導安裝；本文檔未覈實到具體的 CLI 命令，故不列出，以免誤導。
典型用法¶
這個 Skill 是規範類指南，不是可運行的代碼庫，因此典型用法是”按需查閱”而不是”一鍵執行”。以新建一個列表頁爲例：
1、先讀「組件架構與文件同置」，定好頁面和卡片組件的文件結構。
2、再讀「數據獲取與展示分離」，把取數邏輯抽到數據層。
3、接着讀「狀態管理分層選型」，決定哪些狀態留在頁面內、哪些上全局。
4、然後讀「WCAG 2.1 AA」和「響應式斷點」，給鍵盤路徑和斷點定規範。
5、最後讀「加載、更新與空態/錯態」和「規避 AI 模板審美」，補齊加載態、空態、錯態，並檢查視覺是否落進模板套路。
上面的步驟順序不一定要照搬，但它體現了這套規範的使用方式：先定架構，再定交互和視覺，而不是先寫樣式。
適用場景與注意¶
適合這幾類人：要在現有項目裏新建或修改界面；要創建組件、實現響應式佈局、管理前端狀態；要滿足 WCAG 無障礙要求；或者明確要求產出達到生產級質感的界面。
注意幾點：
- 這是社區來源的規範文檔，接入生產前需要對照你實際使用的框架和組件庫覈對，規範裏給出的是通用做法，不是某個框架的 API 約定。
- 它覆蓋的是界面工程規範，不涉及後端接口設計、部署和性能優化。
- 線索中另提到如需完整版可在淘寶搜索「AI靈匣」店鋪獲取，本文檔未覈實該渠道，僅作來源說明。
結尾¶
這個 Skill 的價值在於把”生產級界面”拆成了可逐項覈對的工程要求：架構、數據、狀態、無障礙、響應式、加載態各一節，缺哪一項就補哪一項。按它的順序走一遍，產出的界面在可訪問性和響應式上不會差，視覺上也能避開模板化觀感。官方地址：https://www.skillhub.cn/skills/user_e40a4360/frontend-ui-engineering（API 地址：https://api.skillhub.cn/org-b6kzcl68/frontend-ui-engineering）。
