内容
# 克劳德代码 UI/UX 专业版 — 单一仓库
克劳德代码的高级 UI/UX 栈，全部在一个仓库中。基于 4 个阶段的设置：
1. **安装克劳德** — 克劳德代码 CLI
2. **UI UX 专业版** — 设计智能技能（50+ 样式，161 调色板，57 字体配对，可访问性检查）
3. **21 世代魔术** — MCP 服务器，从自然语言生成生产就绪的 UI 组件
4. **Framer 动画** — React 生产动画库
## 快速开始
```bash
git clone <your-repo-url> claude-ux-ui-pro-max
cd claude-ux-ui-pro-max
./install.sh
```
这会按顺序运行所有四个阶段。或者单独运行它们：
```bash
./install-stages/01-install-claude.sh
./install-stages/02-ui-ux-pro-max.sh
./install-stages/03-21st-dev-magic.sh
./install-stages/04-framer-motion.sh
```
## 先决条件
- **Node.js 18+** 和 **npm**
- **git**
- 一个 **21 世代 API 密钥**（免费层可用）— 在 https://21st.dev/magic/console 获取
在阶段 3 之前设置：
```bash
export TWENTYFIRST_API_KEY="your-key-here"
```
## 每个阶段的作用
### 阶段 1 — 安装克劳德
通过 npm 在全局安装 `@anthropic-ai/claude-code` 并运行 `claude --version` 进行验证。
### 阶段 2 — UI UX 专业版技能
使用克劳德代码插件市场：
```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
阶段脚本打印这两个命令，以便在 `claude` 中交互式运行（无法从 shell 调用斜杠命令）。
### 阶段 3 — 21 世代魔术 MCP
将魔术 MCP 服务器与克劳德代码注册：
```bash
npx @21st-dev/cli@latest install claude --api-key "$TWENTYFIRST_API_KEY"
```
### 阶段 4 — Framer 动画
在 `./app/` 中初始化一个 Next.js + TypeScript + Tailwind 应用，并安装 `framer-motion`。
跳过 Next.js 初始化，设置 `SKIP_SCAFFOLD=1` — 仅将 `framer-motion` 添加到当前项目。
## 安装后
在克劳德代码中打开项目：
```bash
cd app && claude
```
然后在克劳德中，尝试：
> “为我构建一个具有玻璃态卡片和 Framer 动画入口动画的高级登陆页面英雄。”
UI UX 专业版技能会自动激活。魔术 MCP 获取匹配的组件。Framer 动画处理运动。
## 故障排除
- 阶段 1 后 `claude: command not found` → 检查 `npm config get prefix` 是否在您的 PATH 上。
- 阶段 3 失败，返回 `401` → API 密钥丢失或无效。重新导出 `TWENTYFIRST_API_KEY` 并重新运行。
- 阶段 4 在 `create-next-app` 上失败 → 运行 `SKIP_SCAFFOLD=1` 并手动添加 Next.js。
