如何在 Claude Code 中安装 UI UX Pro Max 并让 Skill 自动激活？
项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill 如果你希望 Claude Code 在做页面、组件、设计系统等 UI/UX 任务时使用本地可检索的设计数据（风格、配色、字体、UX 规范），而不是凭模型自身猜测，就需要把 UI UX Pro Max 这个 skill 装进项目。安装完成后，Claude Code 在 Skill Mode 下会自动激活该 skill，你只需正常描述 UI/UX 需求即可。
项目提供两条安装路径：Claude Code 内置的 Marketplace 安装，以及官方 CLI 安装（README 标注 Recommended）。本文按“准备 → 安装 → 验证 → 自动激活 → 常见报错”的顺序给出可执行步骤。
准备条件
- 使用 CLI 安装需要 npm：安装命令是
npm install -g ui-ux-pro-max-cli，npm 包名为ui-ux-pro-max-cli，安装后得到uipro命令。README 明确提醒：旧的uipro-cli发布版本已经过时，不要用于当前资产。 - skill 内的搜索脚本要求 Python 3.x（仅标准库，脚本不安装任何依赖、不发起网络请求）。先检查环境：
python3 --version
如果机器上没有 Python，README 要求由你自己从 python.org 或用系统包管理器（Homebrew、apt、winget）手动安装——使用该 skill 的 AI agent 被要求先询问你，而不是替你安装软件。
方式一：通过 Claude Marketplace 安装
在 Claude Code 会话中依次执行两条命令：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
这是两条命令组成的固定顺序：先添加 marketplace，再安装 ui-ux-pro-max@ui-ux-pro-max-skill。README 的 Troubleshooting 部分也确认：如果走 Claude.ai 的 “Upload a skill” 上传路线失败（例如提示 Zip contains too many files (maximum 200)），不要上传完整仓库 ZIP，Claude Code 应通过上面的 Marketplace 方式或 CLI 安装。
方式二：使用 CLI 安装（README 推荐）
# 全局安装 CLI（得到 uipro 命令）
npm install -g ui-ux-pro-max-cli
# 进入你的项目根目录（/path/to/your/project 是占位符，替换为你自己的项目路径）
cd /path/to/your/project
# 为 Claude Code 安装 skill
uipro init --ai claude
--ai 参数指定目标 AI 助手，本文场景固定使用 claude。CLI 还支持几个与本文场景相关的选项（来自 cli/src/index.ts 的命令定义）：
uipro init --ai claude --global：全局安装到~/.claude/skills/，对所有项目可用，而不仅是当前项目；-f, --force：覆盖已有文件；-o, --offline：兼容性标志，使用 CLI 包内的模板资产安装。
如果全局 npm 安装遇到权限错误，README 给出的替代路径是使用 Node 版本管理器，或完全跳过全局安装，直接：
npx ui-ux-pro-max-cli init --ai claude
验证安装是否成功
按顺序核对以下结果：
- 安装器输出：
uipro init成功时会打印UI/UX Pro Max installed successfully!，并列出本次安装的文件夹（输出中还会提示下一步：重启 AI coding assistant，然后尝试 “Build a landing page for a SaaS product”）。 - 文件落位：项目级安装后，skill 文件位于项目内的
.claude/skills/ui-ux-pro-max/，其中包含 SKILL.md 与scripts/search.py。README 的卸载排查条目也印证了这一位置：Claude Code 的手动清理对象就是.claude/skills/ui-ux-pro-max。 - 手动跑一次搜索脚本（可选但推荐，用于确认 Python 环境和数据完整）：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
README 展示了该命令的 ASCII 表格示例输出（含 Pattern、Style、Colors、Typography 等区块），那只是文档示例；只要脚本能正常输出设计系统结果，即说明安装与 Python 环境可用。若脚本因找不到 python 报错，SKILL.md 说明应依次尝试 python3、py -3。
让 Skill 在 Claude Code 中自动激活
Claude Code 属于 Skill Mode（Auto-activate） 的支持列表（Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid、KiloCode、Warp、Augment、CodeWhale）。自动激活的含义是：当你提出 UI/UX 相关请求时 skill 会被自动使用，无需额外命令。README 给出的首次使用示例提示：
Build a landing page for my SaaS product
Create a dashboard for healthcare analytics
Design a portfolio website with dark mode
Make a mobile app UI for e-commerce
Build a fintech banking app with dark theme
验证方式就是观察行为：重启 Claude Code 后发送上述任一请求，skill 激活后会自动生成设计系统（pattern、风格、配色、字体、反模式与交付前检查项），再基于检索结果实现 UI 并做 pre-delivery 检查。
注意区分：README 中的 /ui-ux-pro-max <需求> 斜杠命令属于 Workflow Mode，适用于 Kiro、GitHub Copilot、Roo Code、KiloCode，不是 Claude Code 的激活方式——Claude Code 走的就是上面的自然语言自动激活。另外，按 SKILL.md 的说明，skill 内调用搜索脚本时使用完整路径 python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" ...，即通过 ${CLAUDE_PLUGIN_ROOT} 环境变量定位 skill 目录，不依赖当前工作目录。
首次安装的常见报错
以下现象与处理均来自 README.md 的 Troubleshooting 章节：
- Marketplace 安装失败，提示 “Zip file contains a symbolic link”：v2.5.1 之前版本的已知问题（仓库内部使用了符号链接，部分安装工具无法处理）。改用 CLI 安装：
npm install -g ui-ux-pro-max-cli后执行uipro init --ai claude，或等待修复后的后续版本。 npm install -g ui-ux-pro-max-cli权限错误：改用 Node 版本管理器，或跳过全局安装，直接npx ui-ux-pro-max-cli init --ai claude。uipro: unknown command 'uninstall'或unknown command 'update'：已安装的 CLI 版本过旧，执行npm install -g ui-ux-pro-max-cli@latest更新后重试。- 运行设计系统命令时找不到 Python：搜索脚本要求 Python 3.x，由你手动从 python.org 或系统包管理器（Homebrew、apt、winget）安装。
安装之后的后续操作
安装验证通过后，README 给出的后续命令只有两类：
uipro update # 从已安装的 CLI 包刷新 skill 文件
uipro uninstall # 移除 skill（自动检测平台）
也就是说，首次安装 + 重启 Claude Code + 一条 UI/UX 请求能触发设计系统生成，即完成本场景的全部目标。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
