/ 目录 / 演练场 / UI/UX Pro Max Skill
● 社区 nextlevelbuilder ⚡ 即开即用

UI/UX Pro Max Skill

作者 nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

别再让 Claude 生成丑陋的 UI。这个 skill 教它真正的设计——字型比例、间距节奏、颜色系统、无障碍访问——覆盖 Web、移动端和桌面端。

UI/UX Pro Max 是一个全面的设计知识 skill,将设计智能注入任何加载它的 agent。涵盖排版、色彩理论、间距/网格、动效、无障碍访问(WCAG 2.2),以及各平台规范(Apple HIG、Material 3、Fluent)。最适合与 shadcn/Tailwind 生态系统搭配,但不强绑定。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "ui-ux-pro-max-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "ui-ux-pro-max-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
          "~/.claude/skills/ui-ux-pro-max"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add ui-ux-pro-max-skill -- git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: UI/UX Pro Max Skill

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

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

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

步骤
  1. 诊断
    Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ 已复制
    → 每个维度的评分卡,附具体问题
  2. 设置 token
    Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ 已复制
    → token 表格
  3. 应用
    Update tokens.css and rerun. Diff what changed in the rendered look.✓ 已复制
    → 更紧凑的排版,一致的节奏感

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

注意事项
  • 过度 token 化——每个值都变成变量 — 重复 token 用变量;一次性值用字面量即可

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

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

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

步骤
  1. 写规格
    Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ 已复制
    → 带 HIG 引用的规格文档
  2. 实现
    Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ 已复制
    → 看起来原生的 SwiftUI 代码

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

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

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

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

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

步骤
  1. 审计
    Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ 已复制
    → 带严重程度的问题列表
  2. 修复
    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

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

替代方案

UI/UX Pro Max Skill 对比其他方案

替代方案何时用它替代权衡
open-design-skill需要品牌级设计系统模板基础原则较少,预制外观更多
Hand-curated design tokens设计师已经参与其中需要更多人工投入

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills