185 lines
5.5 KiB
Markdown
185 lines
5.5 KiB
Markdown
# UI UX Pro Max
|
||
|
||
一个为多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
|
||
|
||
<p align="center">
|
||
<img src="screenshots/website.png" alt="UI UX Pro Max" width="800">
|
||
</p>
|
||
|
||
## 概述
|
||
|
||
UI UX Pro Max 是一个可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。它作为 AI 编程助手（Claude Code、Codex、Cursor、Windsurf 等）的技能/工作流使用。
|
||
|
||
## 功能特性
|
||
|
||
- **57 种 UI 风格** - 玻璃态、粘土态、极简主义、野兽派、新拟态、便当网格、深色模式等
|
||
- **95 个配色方案** - 针对 SaaS、电商、医疗、金融科技、美妆等行业的专属配色
|
||
- **56 个字体配对** - 精选的排版组合，包含 Google Fonts 导入
|
||
- **24 种图表类型** - 适用于仪表板和数据分析的推荐
|
||
- **11 个技术栈** - React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui
|
||
- **98 条 UX 指南** - 最佳实践、反模式和无障碍规则
|
||
|
||
## 安装
|
||
|
||
### 使用 CLI（推荐）
|
||
|
||
```bash
|
||
# 全局安装 CLI
|
||
npm install -g uipro-cli
|
||
|
||
# 进入你的项目
|
||
cd /path/to/your/project
|
||
|
||
# 为你的 AI 助手安装
|
||
uipro init --ai claude # Claude Code
|
||
uipro init --ai cursor # Cursor
|
||
uipro init --ai windsurf # Windsurf
|
||
uipro init --ai antigravity # Antigravity (.agent + .shared)
|
||
uipro init --ai copilot # GitHub Copilot
|
||
uipro init --ai kiro # Kiro
|
||
uipro init --ai codex # Codex (Skills)
|
||
uipro init --ai gemini # Gemini CLI
|
||
uipro init --ai trae # Trae
|
||
uipro init --ai all # 所有助手
|
||
```
|
||
|
||
### 其他 CLI 命令
|
||
|
||
```bash
|
||
uipro versions # 列出可用版本
|
||
uipro update # 更新到最新版本
|
||
uipro init --version v1.0.0 # 安装指定版本
|
||
```
|
||
|
||
### 手动安装
|
||
|
||
将相应的文件夹复制到你的项目中：
|
||
|
||
| AI 助手 | 需要复制的文件夹 |
|
||
| -------------- | -------------------------------------------------------------------- |
|
||
| Claude Code | `.claude/skills/ui-ux-pro-max/` |
|
||
| Cursor | `.cursor/commands/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
|
||
| Windsurf | `.windsurf/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
|
||
| Antigravity | `.agent/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
|
||
| GitHub Copilot | `.github/prompts/ui-ux-pro-max.prompt.md` + `.shared/ui-ux-pro-max/` |
|
||
| Kiro | `.kiro/steering/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
|
||
| Codex | `.codex/skills/ui-ux-pro-max/` |
|
||
| Gemini CLI | `.gemini/skills/ui-ux-pro-max/` + `.shared/ui-ux-pro-max/` |
|
||
| Trae | `.trae/skills/ui-ux-pro-max/` + `.shared/ui-ux-pro-max/` |
|
||
|
||
## 前置要求
|
||
|
||
搜索脚本需要 Python 3.x。
|
||
|
||
```bash
|
||
# 检查是否已安装 Python
|
||
python3 --version
|
||
|
||
# macOS
|
||
brew install python3
|
||
|
||
# Ubuntu/Debian
|
||
sudo apt update && sudo apt install python3
|
||
|
||
# Windows
|
||
winget install Python.Python.3.12
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### Claude Code
|
||
|
||
当你请求 UI/UX 工作时，技能会自动激活。只需自然对话：
|
||
|
||
```
|
||
为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### Cursor / Windsurf / Antigravity
|
||
|
||
使用斜杠命令调用技能：
|
||
|
||
```
|
||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### Kiro
|
||
|
||
在聊天中输入 `/` 查看可用命令，然后选择 `ui-ux-pro-max`：
|
||
|
||
```
|
||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### GitHub Copilot
|
||
|
||
在 VS Code 中使用 Copilot，在聊天中输入 `/` 查看可用提示，然后选择 `ui-ux-pro-max`：
|
||
|
||
```
|
||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### Codex CLI
|
||
|
||
技能会自动激活以处理 UI/UX 请求。你也可以显式调用：
|
||
|
||
```
|
||
$ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### Gemini CLI
|
||
|
||
当你请求 UI/UX 工作时，技能会自动激活。
|
||
|
||
```
|
||
为我的 SaaS 产品构建一个落地页
|
||
```
|
||
|
||
### Trae
|
||
|
||
_免责声明：Trae 技能处于测试阶段。请报告任何问题或反馈。_
|
||
|
||
要使用 Trae 技能，你需要切换到 **SOLO** 模式。如果你的请求与技能相关，技能将被使用：
|
||
|
||
```
|
||
为我的 SaaS 产品构建一个落地页（仅前端）。
|
||
```
|
||
|
||
### 示例提示
|
||
|
||
```
|
||
为我的 SaaS 产品构建一个落地页
|
||
|
||
创建一个医疗分析仪表板
|
||
|
||
设计一个带深色模式的作品集网站
|
||
|
||
制作一个电商移动应用 UI
|
||
```
|
||
|
||
### 工作原理
|
||
|
||
1. **你提问** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
|
||
2. **技能激活** - AI 自动搜索设计数据库中相关的风格、颜色、排版和指南
|
||
3. **智能推荐** - 根据你的产品类型和需求，找到最匹配的设计系统
|
||
4. **代码生成** - 使用适当的颜色、字体、间距和最佳实践实现 UI
|
||
|
||
### 支持的技术栈
|
||
|
||
该技能为以下技术栈提供专属指南：
|
||
|
||
- **HTML + Tailwind**（默认）
|
||
- **React** / **Next.js** / **shadcn/ui**
|
||
- **Vue** / **Nuxt.js** / **Nuxt UI** / **Svelte**
|
||
- **SwiftUI** / **React Native** / **Flutter**
|
||
|
||
只需在提示中提及你偏好的技术栈，或让它默认使用 HTML + Tailwind。
|
||
|
||
## Star 历史
|
||
|
||
[](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)
|
||
|
||
## 许可证
|
||
|
||
本项目采用 [MIT 许可证](LICENSE)。
|