daoyou-zhang
8c24cfd73d
- 翻译 README.md 为中文 - 翻译所有 AI 助手的工作流文档 - 翻译 CLI 工具说明 - 添加示例落地页 HTML - 更新 CLAUDE.md 为中文 |
||
|---|---|---|
| .agent/workflows | ||
| .claude/skills/ui-ux-pro-max | ||
| .codebuddy/commands | ||
| .codex/skills/ui-ux-pro-max | ||
| .cursor/commands | ||
| .gemini/skills/ui-ux-pro-max | ||
| .github/prompts | ||
| .kiro/steering | ||
| .qoder/rules | ||
| .roo/commands | ||
| .shared/ui-ux-pro-max | ||
| .trae/skills/ui-ux-pro-max | ||
| .windsurf/workflows | ||
| cli | ||
| screenshots | ||
| .gitignore | ||
| CLAUDE.md | ||
| LICENSE | ||
| README.md | ||
| example-landing-page.html | ||
README.md
UI UX Pro Max
一个为多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
概述
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（推荐）
# 全局安装 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 命令
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。
# 检查是否已安装 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
工作原理
- 你提问 - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
- 技能激活 - AI 自动搜索设计数据库中相关的风格、颜色、排版和指南
- 智能推荐 - 根据你的产品类型和需求，找到最匹配的设计系统
- 代码生成 - 使用适当的颜色、字体、间距和最佳实践实现 UI
支持的技术栈
该技能为以下技术栈提供专属指南：
- HTML + Tailwind（默认）
- React / Next.js / shadcn/ui
- Vue / Nuxt.js / Nuxt UI / Svelte
- SwiftUI / React Native / Flutter
只需在提示中提及你偏好的技术栈，或让它默认使用 HTML + Tailwind。
Star 历史
许可证
本项目采用 MIT 许可证。