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
|