337 lines
7.0 KiB
Markdown
337 lines
7.0 KiB
Markdown
|
# 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
|