前言¶

做界面開發的同行多半遇到過這類情況：需求方說“這裏要好看一點”，設計稿沒有寫清狀態，開發階段才發現漏了異常態和響應式斷點，驗收時又在文案和可訪問性上來回拉扯。問題往往不在代碼能力，而在界面規格本身沒被定義清楚。下面介紹的這個 Skill，就是把“界面應該長什麼樣、有哪些狀態、怎麼驗收”這件事系統化，輸出可開發、可驗收的規格。

這是什麼¶

界面設計助手是一個基於通用 SKILL.md 格式的 Skill，座標 @user_b4da0893/ui-design-guide-cn，版本 1.0.0，由發佈者 user_b4da0893 維護，來源爲 community（社區）。它面向網頁、移動端和後臺系統的界面設計與評審，幫助使用者把模糊的界面訴求收斂成具體的設計決策、實現約束和驗收清單。

核心功能¶

這個 Skill 覆蓋界面規格的幾個關鍵環節，每一步都圍繞“能不能落地、能不能驗收”來組織。

1、明確用戶任務。先把用戶在這個界面上要完成什麼、爲什麼完成說清楚，界面結構纔有依據。

2、梳理信息層級與頁面結構。區分主次信息，給出頁面骨架，而不是直接堆組件。

3、定義組件狀態。列出組件的正常、懸停、禁用、加載、異常等狀態，避免開發階段臨時補。

4、補充交互反饋與文案。說明操作後的反饋方式，以及界面文案的統一要求。

5、給出響應式斷點。針對網頁、移動端和後臺分別說明斷點和適配規則。

6、對齊可訪問性要求。把可訪問性作爲明確要求納入，而非事後附加。

7、輸出設計決策、實現約束和驗收清單。把前面的結論落成可覈對的驗收項。

安裝與啓用¶

該 Skill 通過 SkillHub 目錄獲取，座標爲 @user_b4da0893/ui-design-guide-cn。安裝後在對應的 Agent 客戶端（Cursor / Codex CLI / Claude Code 等支持 SKILL.md 的客戶端）中啓用即可使用。

# 安裝座標
@user_b4da0893/ui-design-guide-cn

需要說明的是，官方資料中未給出逐客戶端的專屬安裝命令，上面的座標是經覈實的獲取方式。該 Skill 標籤爲 requires_api_key=false，啓用時無需額外配置 API Key。

典型用法¶

下面給出一個可復現的用法示例：評審一套後臺列表頁的界面規格。

1、先說明業務目標。例如“運營需要一個商品列表頁，支持篩選和批量操作”。

2、再讓 Skill 幫助梳理用戶任務。明確瀏覽、篩選、批量操作這三類任務，及其對應的信息需求。

3、然後要求給出頁面結構與組件狀態。包括表格的空狀態、加載狀態、篩選後的無結果狀態。

4、最後拿到設計決策、實現約束和驗收清單。驗收清單可直接用於開發自測和需求方驗收。

# 以評審後臺列表頁爲例
業務目標：運營需要一個商品列表頁，支持篩選和批量操作
要求輸出：用戶任務 → 信息層級 → 組件狀態 → 響應式斷點 → 驗收清單

適用場景與注意¶

適合做網頁、移動端和後臺系統的界面設計與評審，尤其是需要把設計結論落成可覈對文檔的場景。它的價值在於把界面要求說清楚、驗收項寫全。

需要注意兩點。一是它輸出的是規格與清單，不能替代真實的視覺設計，也不能自動生成可運行代碼。二是官方資料中未提供各客戶端的詳細安裝參數，實際啓用方式以 SkillHub 目錄和所用客戶端的 SKILL.md 支持情況爲準。

結尾¶

界面設計助手的價值，在於把“好看、好用”這類模糊訴求，轉成有狀態、有斷點、有驗收項的界面規格，減少開發與驗收階段的反覆溝通。官方地址：https://api.skillhub.cn/user_b4da0893/ui-design-guide-cn，SkillHub 頁面：https://www.skillhub.cn/skills/user_b4da0893/ui-design-guide-cn。