前言¶
做微信小程序界面時，常見問題是按 Web 習慣寫樣式：用 px/rem、指望 CSS Grid 或遠程字體，上線後在不同機型上錯位，還要回頭改 WXSS。設計稿和代碼之間也缺少統一換算（375px 畫板與 rpx）、無障礙與暗黑模式往往事後補。
下面介紹 SkillHub 上的社區 Skill「小程序ui ux 設計技能」（座標 @user_04fe3e31/miniprogram-ui-ux-design）。它把微信小程序 UI/UX 規範、WXSS 能力邊界和可落地的檢查清單放進標準 SKILL.md 格式，讓編碼 Agent 在設計、寫樣式和評審時有一致參照，而不是每次從零口述約束。
這是什麼¶
一句話定位： 面向微信小程序的 UI/UX 設計規範與最佳實踐 Skill，供 AI Agent 在相關任務中自動加載。
| 項 | 說明 |
|---|---|
| 名稱 | 小程序ui ux 設計技能 |
| 座標 | @user_04fe3e31/miniprogram-ui-ux-design |
| 版本 | 1.0.1（SkillHub 頁面與包內 SKILL.md） |
| 來源 | community（SkillHub 社區） |
| 分類 | design-media |
| 發佈者 | user_04fe3e31（SkillHub 頁面標註作者爲花喵叔） |
| 評分 / 下載 | SkillHub 評分 100000；已抓取資料顯示下載 6722 次 |
| API Key | 標籤 requires_api_key=false，無需額外 API 密鑰 |
Skill 內聲明的適用方向包括：設計小程序界面、編寫 WXSS、無障礙合規、審查設計稿、建立 Design Token 體系等。
核心功能¶
以下內容均來自安裝包內的 SKILL.md 與 references/ 文檔，屬於 Skill 向 Agent 提供的知識能力，而非獨立運行的服務。
設計原則與速查¶
- 設計哲學：「rpx 優先、Flexbox 爲主、系統字體、觸屏優先」；強調單一縱向滾動、rpx 適配、WXSS 子集、無 Web 字體等約束。
- 設計鐵律： 對比度層級、留白與間距、組件一致性、操作反饋（含 0.2–0.3s 微交互）、無障礙（觸摸目標 88rpx、不單靠顏色等）。
- 視覺層級： 大小、顏色、留白、鄰近、對比等用法；Z 模式 / F 模式閱讀路徑說明。
- rpx 換算：
1rpx = 屏幕寬度 / 750；375px 寬畫板下「設計稿 px × 2 = rpx」。 - WXSS 能力邊界表： 支持 Flexbox、
transform/transition/animation、CSS 變量等；不支持或不完整項包括 CSS Grid、backdrop-filter、遠程@font-face等。 - 字體策略： 僅系統字體棧，並給出示例
font-family。 - Top 5 反模式： 如照搬 Web 習慣、
setData濫用、view 嵌套過深、忽略 darkmode、觸摸區域過小等及對應正確做法。 - Pre-Build 檢查清單： 開寫代碼前的 rpx、Flexbox、色板、暗黑模式、安全區、對比度與多機型等逐項確認項。
參考文檔索引¶
Skill 通過 references/ 擴展閱讀，Agent 可按任務深入：
| 文件 | 內容概要 |
|---|---|
MINIPROGRAM_BASICS.md |
rpx、安全區、暗黑、多機型、佈局、反模式、組件庫決策等 |
DESIGN_TOKENS.md |
Token 方法論、間距、字體、色彩與示例主題 |
DESIGN_WORKFLOW.md |
從 PRD 到 WXSS 的流程、Figma 規範、標註與 rpx 換算 |
COMPONENTS.md |
10 大類、30 個通用組件的 WXML+WXSS 示例 |
ACCESSIBILITY.md |
WCAG 原則與小程序側無障礙、測試與檢查清單 |
包內還彙總了 WeUI、微信官方文檔方向的設計參考，以及 Figma、對比度檢查、iconfont、微信開發者工具等工具表（見 SKILL.md「設計工具彙總」）。
安裝與啓用¶
SkillHub 官方頁面給出的安裝方式是：讓 AI 按 SkillHub 安裝說明 安裝本 Skill。下面是在本機用 CLI 的核實步驟。
1、安裝 SkillHub CLI（若尚未安裝）¶
command -v skillhub && skillhub --version
未安裝時可執行（完整安裝或僅 CLI，以安裝文檔爲準）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
2、安裝本 Skill 到當前 Agent 的 skills 目錄¶
安裝時必須用 --dir 指向當前客戶端識別的 skills 目錄，否則默認落在 ./skills/ 可能不被加載。座標需帶 @ 前綴：
skillhub install @user_04fe3e31/miniprogram-ui-ux-design --dir <你的 skills 目錄>
常用路徑（來自 SkillHub 安裝文檔）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝成功後，包會落在類似 @user_04fe3e31/miniprogram-ui-ux-design/ 的子目錄中，根文件爲 SKILL.md。
3、在對話中啓用¶
向 Agent 說明任務屬於微信小程序 UI/UX 或 WXSS 設計即可；Skill 自身在「何時使用」中列出：設計界面、寫 WXSS、無障礙審查、設計稿評審、Design Token 等場景應加載本 Skill。具體是否自動匹配取決於你所用客戶端的 Skill 發現機制；若未生效，可在提示中明確引用 Skill 名稱或座標。
也可將 SkillHub 頁面提供的提示詞發給 AI：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_04fe3e31/miniprogram-ui-ux-design`。
典型用法¶
下列示例復現 Skill 文檔中的意圖，便於在 Cursor 等環境中直接試用。
按場景觸發¶
在需求描述中對齊 SKILL.md 的「何時使用」，例如：
我要做一個微信小程序訂單列表頁，請按 @user_04fe3e31/miniprogram-ui-ux-design 的規範：
用 Flexbox + rpx 給出頁面結構建議，並列出 Pre-Build 檢查清單裏我還沒覆蓋的項。
樣式與能力邊界¶
編寫 WXSS 前讓 Agent 對照能力表，避免 Grid 或遠程字體：
根據小程序 UI UX 設計技能，用系統字體棧寫標題和正文樣式；
說明哪些屬性不能用，並給按鈕按下態的微交互（transform + opacity，約 0.15s）。
設計流程與交付¶
需要 Figma 到代碼銜接時，可指向 references/DESIGN_WORKFLOW.md：
按 DESIGN_WORKFLOW：375px 畫板、8px 柵格，把標註 16px 間距換算成 rpx，
並說明高保真階段每個組件需要覆蓋的六種狀態。
組件與無障礙¶
實現具體控件或過無障礙清單時：
從 COMPONENTS 裏選一個列表項模式，給出 WXML+WXSS 骨架；
再按 ACCESSIBILITY 檢查對比度與 88rpx 觸摸目標是否滿足。
適用場景與注意¶
適合誰
- 用 AI 輔助做微信小程序界面、WXSS 和簡單設計評審的開發者或設計協作方。
- 希望把 rpx、安全區、暗黑模式、反模式等約束固化在 Agent 側、減少重複說明的團隊。
限制與注意
- 內容爲規範與參考文檔，不替代微信開發者工具真機預覽與官方審覈規則；上線前仍須在目標機型上驗證。
- Skill 強調 WCAG 思路與小程序約束的結合，具體無障礙實現需對照微信當前能力與項目要求。
SKILL.md中的產品參考（如微信讀書、WeUI）僅作設計靈感與方向，不是官方背書案例。- 包內
_meta.json版本字段爲 1.0.0，與 SkillHub 展示的 1.0.1 不一致時，以商店頁與SKILL.md頭部版本爲準。 - 社區來源（community），更新與維護節奏取決於發佈者；升級可用
skillhub對同一座標重新安裝或按 SkillHub 流程更新。
結尾¶
「小程序ui ux 設計技能」把微信小程序特有的 rpx、WXSS 邊界、Design Token、組件示例和無障礙清單收斂成 Agent 可讀的 Skill 包，適合在設計到編碼的鏈條裏統一口徑。若要從商店安裝或查看元數據，可打開 SkillHub 頁面：
- 頁面：https://www.skillhub.cn/skills/user_04fe3e31/miniprogram-ui-ux-design
- API 條目：https://api.skillhub.cn/user_04fe3e31/miniprogram-ui-ux-design
