前言¶
做微信小程序界面时，常见问题是按 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
