UI/UX Pro Max Skill

为什么要用

核心特性

带垂直韵律的字型比例
含语义 token、深色模式、无障碍访问的颜色系统
间距比例 + 网格模式
动效规范（时长、缓动曲线、何时添加动画）
各平台规范：Web、iOS HIG、Material 3、macOS
无障碍访问检查清单（默认 WCAG 2.2 AA）

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： UI/UX Pro Max Skill

修复现有应用中「AI 生成感」的界面外观

👤 Claude 生成的 UI 看起来过于通用的开发者 ⏱ ~60 min intermediate

何时使用： 你的 shadcn 输出能用，但看起来一眼就是模板。

步骤

诊断

Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ 已复制

→ 每个维度的评分卡，附具体问题
设置 token

Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ 已复制

→ token 表格
应用

Update tokens.css and rerun. Diff what changed in the rendered look.✓ 已复制

→ 更紧凑的排版，一致的节奏感

结果： UI 不再给人「5 分钟赶工」的感觉。

注意事项

过度 token 化——每个值都变成变量 — 重复 token 用变量；一次性值用字面量即可

设计一个遵循 iOS HIG 的移动端页面

👤 开发跨平台应用的工程师 ⏱ ~45 min intermediate

何时使用： 你有一个 iOS 界面，想让它原生感十足，而不是跨平台汤。

步骤

写规格

Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ 已复制

→ 带 HIG 引用的规格文档
实现

Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ 已复制

→ 看起来原生的 SwiftUI 代码

结果： 界面通过「看起来原生」的目视测试。

注意事项

硬编码颜色导致深色模式下显示错误 — 使用系统语义色；skill 会强制执行这一点

对某个组件进行无障碍访问审计

👤 准备进行无障碍合规的开发者 ⏱ ~30 min intermediate

何时使用： 你需要在关键流程上达到 WCAG 2.2 AA 标准。

步骤

审计

Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ 已复制

→ 带严重程度的问题列表
修复

Apply fixes. Verify with screen-reader semantic outline.✓ 已复制

→ 问题列表缩短；语义大纲清晰易读

结果： 通过审计工具检查，也能通过真实用户测试的组件。

注意事项

自动修复破坏了视觉布局 — 每次修复后重新渲染；进行视觉回归检查

搭配使用： filesystem

组合

与其他 MCP 搭配，撬动十倍杠杆

ui-ux-pro-max-skill + open-design-skill

设计系统基础原则 + 品牌级参考设计系统

Use UI/UX Pro Max for fundamentals + open-design for brand styles.✓ 已复制

ui-ux-pro-max-skill + filesystem

在代码库范围内应用 token 变更

Update tokens.css and propagate; run audit.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
design_audit	scope: directory or component	初步评估	tokens
tokens_recommend	constraints (brand, platform)	搭建设计系统	tokens
a11y_check	component path	合规检查	tokens

成本与限制

运行它的成本

API 配额: N/A
每次调用 Token 数: 首次审计较重；后续跟进轻量
费用: 免费
提示: 按组件审计，而不是一次审计整个应用

安全

权限、密钥、影响范围

最小权限： Read project files

凭据存储： 无

数据出站： 无

故障排查

常见错误与修复

Recommendations clash with brand guidelines

提前提供品牌约束；skill 会尊重这些约束

Skill triggers too aggressively

按目录限定范围，或显式调用

替代方案