← ClaudeAtlas

ui-ux-pro-maxlisted

面向 Web、移动端和桌面端的 UI/UX 设计决策与评审技能。需要检索设计系统、风格、配色、字体、无障碍、交互、响应式、动画、图表或技术栈 UI 指南时使用;负责提供经本地数据库验证的设计建议,不负责替代页面开发和前端编码技能。项目已有 PRD 与 SRS 且用户要设计稿、高保真原型、可点原型、交互原型或预览墙时,本技能同时负责设计稿交付链路(读 PRD+SRS 全文,内容以 PRD 为主 → 落 Prototype/<项目slug>/ → 三张 iframe 预览墙(移动 393×852 / 官网 1280×900 / 后台 1440×900)→ 全屏页出稿帧与需求标注),细则见 references/prototype-delivery.md。
iDWong/pm-skills · ★ 1 · Web & Frontend · score 74
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