ui-ux-pro-maxlisted
Install: claude install-skill iDWong/pm-skills
# UI/UX Pro Max——设计智能
本技能提供可搜索的本地 UI/UX 指南:79 种风格(50 种启用)、192 套产品配色及推理配置、74 组字体搭配、119 条 UX 指南、105 个��标、17 个 GSAP 预设、25 种图表和 22 个技术栈。
## 适用场景
当任务涉及 **UI 结构、视觉设计决策、交互模式或用户体验质量** 时使用,例如设计新页面、创建或重构 UI 组件、选择色彩/排版/间距/布局系统、评审 UX/无障碍/一致性,以及实现导航、动画和响应式行为。
纯后端逻辑、API/数据库设计、基础设施、DevOps 或非视觉脚本无需使用;除非任务会改变界面的外观、感受、运动方式或交互方式。
## 优先级
按下列顺序处理问题。**规则集按平台取,别读错**:Web / 桌面端读 `references/quick-reference.md`(全 10 类完整规则,也是评审与审计用的那一份);
iOS / Android / RN / Flutter 读 `references/pro-rules.md`(**移动端专用**:触控 44×44pt、安全区避让、单区域单手势、按压反馈、最大系统字号)**再加** `quick-reference.md` 的通用部分。
| 优先级 | 类别 | Domain | 核心检查 |
|---|---|---|---|
| 1 | 无障碍 | `ux` | 4.5:1 对比度、替代文本、键盘导航、ARIA 标签 |
| 2 | 触控与交互 | `ux` | 最小 44×44px、间距 ≥8px、加载反馈 |
| 3 | 性能 | `ux` | WebP/AVIF、懒加载、预留空间、CLS < 0.1 |
| 4 | 风格选择 | `style`, `product` | 匹配产品、保持一致、使用 SVG 图标而非 emoji |
| 5 | 布局与响应式 | `ux` | 移动优先、viewport meta、无横向滚动 |
| 6 | 排版与色彩 | `typography`, `color` | 基准字号 16px、行高 1.5、语义色彩令牌 |
| 7 | 动画 | `ux`, `gsap` | 动效表达含义、空间连续、支持 reduced motion |
| 8 | 表单与反馈 | `ux` | 可见标签、就近错误提示、辅助文本、渐进披露 |
| 9 | 导航 | `ux` | 可预期返回、底部导航 ≤5 项、支持深层链接 |
| 10 | 图表与数据 | `chart` | 图例、工具提示、无障碍配色 |
## 运行搜索工具
脚本位于技能目录,不在项目目录。**先解析出本技能的绝对路径,不要硬编码任何一个技能库根**——
本技能同时存在于 Claude 平铺、Codex、Cursor 以及 Claude Code plugin 四种布局下,写死哪一个都会在别处断链:
```bash
resolve_skill() {
name="$(printf '%s' "$@")"
if [ -n "${CLAUDE_PLUGIN_ROOT:-}" ]; then # plugin 模式
[ -d "$CLAUDE_PLUGIN_ROOT/skills/$name" ] && { printf '%s' "$CLAUDE_PLUGIN_ROOT/skills/$name"; return 0; }
for