# UI/UX Pro Max - 公司内部安装指南

## 📖 项目简介

UI/UX Pro Max 是一个 AI 设计智能工具包，为 AI 编程助手（Kiro、Claude、Cursor 等）提供专业的 UI/UX 设计知识库。

### 核心功能
- 🎨 **57 种 UI 风格** - 玻璃态、极简主义、野兽派、新拟态等
- 🎯 **95 个配色方案** - 针对不同行业的专业配色
- ✍️ **56 个字体配对** - 精选排版组合
- 📊 **24 种图表类型** - 数据可视化推荐
- ✨ **98 条 UX 指南** - 最佳实践和反模式
- 🛠️ **11 个技术栈** - React、Vue、Next.js、Flutter 等

---

## 🚀 快速开始

### 前置要求

**必须安装 Python 3.x**

```bash
# 检查 Python 版本
python --version
# 或
python3 --version
```

如果未安装，请根据操作系统安装：

**Windows:**
```powershell
winget install Python.Python.3.12
```

**macOS:**
```bash
brew install python3
```

**Ubuntu/Debian:**
```bash
sudo apt update && sudo apt install python3
```

---

## 📦 安装方法

### 方法 1：从公司 Gitea 克隆（推荐）

```bash
# 1. 克隆仓库
git clone http://42.51.49.106:3000/zhiming/ui-ux-pro-max-skill.git

# 2. 进入项目目录
cd ui-ux-pro-max-skill
```

### 方法 2：使用 CLI 工具（公网）

```bash
# 全局安装 CLI
npm install -g uipro-cli

# 在你的项目中安装
uipro init --ai kiro
```

---

## 🔧 为不同 AI 助手安装

### 为 Kiro 安装

**自动安装（使用 CLI）：**
```bash
cd your-project
uipro init --ai kiro
```

**手动安装：**
```bash
# 1. 进入你的项目目录
cd your-project

# 2. 创建必要的目录
mkdir -p .kiro/steering
mkdir -p .shared

# 3. 从克隆的仓库复制文件
# Windows PowerShell:
Copy-Item "D:\path\to\ui-ux-pro-max-skill\.kiro\steering\ui-ux-pro-max.md" -Destination ".kiro\steering\" -Force
Copy-Item "D:\path\to\ui-ux-pro-max-skill\.shared\ui-ux-pro-max" -Destination ".shared\" -Recurse -Force

# macOS/Linux:
cp ui-ux-pro-max-skill/.kiro/steering/ui-ux-pro-max.md .kiro/steering/
cp -r ui-ux-pro-max-skill/.shared/ui-ux-pro-max .shared/
```

### 为其他 AI 助手安装

**Claude Code:**
```bash
uipro init --ai claude
# 或手动复制 .claude/skills/ui-ux-pro-max/ 到你的项目
```

**Cursor:**
```bash
uipro init --ai cursor
# 或手动复制 .cursor/commands/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
```

**Windsurf:**
```bash
uipro init --ai windsurf
# 或手动复制 .windsurf/workflows/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
```

**所有助手一次性安装:**
```bash
uipro init --ai all
```

---

## 💡 使用方法

### 在 Kiro 中使用

安装完成后，在 Kiro 聊天中：

**方式 1：使用命令**
```
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
```

**方式 2：直接描述需求**
```
设计一个医疗分析仪表板，使用玻璃态风格
创建一个电商网站首页，要求现代简约
制作一个在线教育平台的落地页
```

### 示例提示词

```
为一个金融科技 SaaS 产品设计落地页，要求：
- 专业、可信赖的风格
- 包含产品功能展示
- 定价表
- 客户评价
- 使用深色模式
```

```
创建一个医疗健康管理系统的仪表板，需要：
- 数据可视化图表
- 患者信息卡片
- 侧边导航栏
- 响应式设计
```

---

## 🎯 工作原理

1. **你提出需求** → 描述你想要的 UI/UX
2. **AI 自动搜索** → 从设计数据库中查找相关风格、颜色、字体
3. **智能推荐** → 根据产品类型匹配最佳设计系统
4. **生成代码** → 输出符合专业标准的 HTML/CSS/JS 代码
5. **查看效果** → 在浏览器中打开生成的 HTML 文件

---

## 📂 项目结构

```
ui-ux-pro-max-skill/
├── .kiro/                    # Kiro 配置
│   └── steering/
│       └── ui-ux-pro-max.md
├── .shared/                  # 共享设计数据库
│   └── ui-ux-pro-max/
│       ├── data/            # CSV 数据文件
│       │   ├── styles.csv   # UI 风格
│       │   ├── colors.csv   # 配色方案
│       │   ├── typography.csv # 字体配对
│       │   └── ...
│       └── scripts/         # Python 搜索脚本
│           └── search.py
├── .cursor/                 # Cursor 配置
├── .claude/                 # Claude 配置
├── .windsurf/              # Windsurf 配置
├── cli/                    # CLI 工具源码
└── README.md               # 项目说明
```

---

## 🔍 高级用法

### 直接使用搜索脚本

```bash
# 搜索产品类型推荐
python .shared/ui-ux-pro-max/scripts/search.py "SaaS" --domain product

# 搜索 UI 风格
python .shared/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

# 搜索配色方案
python .shared/ui-ux-pro-max/scripts/search.py "healthcare" --domain color

# 搜索字体配对
python .shared/ui-ux-pro-max/scripts/search.py "elegant" --domain typography

# 搜索技术栈指南
python .shared/ui-ux-pro-max/scripts/search.py "responsive" --stack html-tailwind
```

### 可用的搜索领域

| 领域 | 说明 | 示例关键词 |
|------|------|-----------|
| `product` | 产品类型推荐 | SaaS, 电商, 医疗, 金融 |
| `style` | UI 风格 | 玻璃态, 极简, 野兽派 |
| `typography` | 字体配对 | 优雅, 现代, 专业 |
| `color` | 配色方案 | healthcare, fintech, beauty |
| `landing` | 落地页结构 | hero, pricing, testimonial |
| `chart` | 图表类型 | trend, pie, funnel |
| `ux` | UX 指南 | animation, accessibility |

### 支持的技术栈

- `html-tailwind` (默认)
- `react`
- `nextjs`
- `vue`
- `svelte`
- `swiftui`
- `react-native`
- `flutter`
- `shadcn`

---

## 🛠️ 故障排除

### Python 未找到

**错误信息：**
```
'python' 不是内部或外部命令
```

**解决方法：**
1. 安装 Python 3.x
2. 确保 Python 已添加到系统 PATH
3. 重启终端/IDE

### 搜索脚本无法运行

**检查 Python 路径：**
```bash
# Windows
where python
where python3

# macOS/Linux
which python
which python3
```

### Kiro 未识别技能

**确认文件位置：**
```bash
# 检查文件是否存在
ls .kiro/steering/ui-ux-pro-max.md
ls .shared/ui-ux-pro-max/
```

**重启 Kiro：**
- 关闭并重新打开 Kiro
- 或重新加载工作区

---

## 📞 支持与反馈

### 内部支持
- **负责人：** zhiming
- **Gitea 仓库：** http://42.51.49.106:3000/zhiming/ui-ux-pro-max-skill

### 更新项目

```bash
# 进入项目目录
cd ui-ux-pro-max-skill

# 拉取最新更新
git pull origin main
```

### 贡献改进

如果你有改进建议或发现问题：

1. 在 Gitea 上创建 Issue
2. 或直接联系项目负责人

---

## 📝 许可证

本项目采用 MIT 许可证，可自由使用和修改。

---

## 🎓 学习资源

### 推荐阅读
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [UI/UX 设计原则](https://www.nngroup.com/articles/)
- [无障碍设计指南](https://www.w3.org/WAI/WCAG21/quickref/)

### 示例项目
查看 `example-landing-page.html` 了解生成的页面效果。

---

**最后更新：** 2024-01-14  
**版本：** 1.7.0