7.0 KiB
7.0 KiB
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
# 检查 Python 版本
python --version
# 或
python3 --version
如果未安装，请根据操作系统安装：
Windows:
winget install Python.Python.3.12
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
📦 安装方法
方法 1：从公司 Gitea 克隆（推荐）
# 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 工具（公网）
# 全局安装 CLI
npm install -g uipro-cli
# 在你的项目中安装
uipro init --ai kiro
🔧 为不同 AI 助手安装
为 Kiro 安装
自动安装（使用 CLI）：
cd your-project
uipro init --ai kiro
手动安装：
# 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:
uipro init --ai claude
# 或手动复制 .claude/skills/ui-ux-pro-max/ 到你的项目
Cursor:
uipro init --ai cursor
# 或手动复制 .cursor/commands/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
Windsurf:
uipro init --ai windsurf
# 或手动复制 .windsurf/workflows/ui-ux-pro-max.md + .shared/ui-ux-pro-max/
所有助手一次性安装:
uipro init --ai all
💡 使用方法
在 Kiro 中使用
安装完成后，在 Kiro 聊天中：
方式 1：使用命令
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
方式 2：直接描述需求
设计一个医疗分析仪表板，使用玻璃态风格
创建一个电商网站首页，要求现代简约
制作一个在线教育平台的落地页
示例提示词
为一个金融科技 SaaS 产品设计落地页，要求：
- 专业、可信赖的风格
- 包含产品功能展示
- 定价表
- 客户评价
- 使用深色模式
创建一个医疗健康管理系统的仪表板，需要：
- 数据可视化图表
- 患者信息卡片
- 侧边导航栏
- 响应式设计
🎯 工作原理
- 你提出需求 → 描述你想要的 UI/UX
- AI 自动搜索 → 从设计数据库中查找相关风格、颜色、字体
- 智能推荐 → 根据产品类型匹配最佳设计系统
- 生成代码 → 输出符合专业标准的 HTML/CSS/JS 代码
- 查看效果 → 在浏览器中打开生成的 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 # 项目说明
🔍 高级用法
直接使用搜索脚本
# 搜索产品类型推荐
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(默认)reactnextjsvuesvelteswiftuireact-nativefluttershadcn
🛠️ 故障排除
Python 未找到
错误信息：
'python' 不是内部或外部命令
解决方法：
- 安装 Python 3.x
- 确保 Python 已添加到系统 PATH
- 重启终端/IDE
搜索脚本无法运行
检查 Python 路径：
# Windows
where python
where python3
# macOS/Linux
which python
which python3
Kiro 未识别技能
确认文件位置：
# 检查文件是否存在
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
更新项目
# 进入项目目录
cd ui-ux-pro-max-skill
# 拉取最新更新
git pull origin main
贡献改进
如果你有改进建议或发现问题：
- 在 Gitea 上创建 Issue
- 或直接联系项目负责人
📝 许可证
本项目采用 MIT 许可证，可自由使用和修改。
🎓 学习资源
推荐阅读
示例项目
查看 example-landing-page.html 了解生成的页面效果。
最后更新： 2024-01-14
版本： 1.7.0