介绍
# UI/UX Pro Max - Design Intelligence
Web 和移动应用程序的综合设计指南。包含 50+ 种样式、97 个配色方案、57 种字体搭配、99 条 UX 指南以及 9 种技术栈中的 25 种图表类型。附带基于优先级建议的可搜索数据库。
## 适用场景
在以下情况下参考这些准则： - 设计新的 UI 组件或页面 - 选择配色方案和字体排印 - 审查代码是否存在 UX 问题 - 构建落地页或仪表盘 - 实施无障碍要求
## 按优先级分类的规则
| 优先级 | 类别 | 影响 | 领域 | |----------|----------|--------|--------| | 1 | Accessibility | CRITICAL | `ux` | | 2 | Touch & Interaction | CRITICAL | `ux` | | 3 | Performance | HIGH | `ux` | | 4 | Layout & Responsive | HIGH | `ux` | | 5 | Typography & Color | MEDIUM | `typography`, `color` | | 6 | Animation | MEDIUM | `ux` | | 7 | Style Selection | MEDIUM | `style`, `product` | | 8 | Charts & Data | LOW | `chart` |
## 快速参考
### 1. Accessibility (CRITICAL)
- `color-contrast` - 普通文本的最小对比度为 4.5:1 - `focus-states` - 交互元素上可见的焦点环 - `alt-text` - 为有意义的图片提供描述性 alt 文本 - `aria-labels` - 纯图标按钮需使用 aria-label - `keyboard-nav` - Tab 顺序需符合视觉顺序 - `form-labels` - 使用带有 for 属性的 label
### 2. Touch & Interaction (CRITICAL)
- `touch-target-size` - 最小 44x44px 的点击目标 - `hover-vs-tap` - 主要交互使用 click/tap - `loading-buttons` - 异步操作期间禁用按钮 - `error-feedback` - 在问题附近提供清晰的错误信息 - `cursor-pointer` - 为可点击元素添加 cursor-pointer
### 3. Performance (HIGH)
- `image-optimization` - 使用 WebP, srcset, lazy loading - `reduced-motion` - 检查 prefers-reduced-motion - `content-jumping` - 为异步内容预留空间
### 4. Layout & Responsive (HIGH)
- `viewport-meta` - width=device-width initial-scale=1 - `readable-font-size` - 移动端正文最小 16px - `horizontal-scroll` - 确保内容适配视口宽度 - `z-index-management` - 定义 z-index 层级 (10, 20, 30, 50)
### 5. Typography & Color (MEDIUM)
- `line-height` - 正文使用 1.5-1.75 - `line-length` - 每行限制为 65-75 个字符 - `font-pairing` - 标题与正文字体风格相匹配
### 6. Animation (MEDIUM)
- `duration-timing` - 微交互使用 150-300ms - `transform-performance` - 使用 transform/opacity，而非 width/height - `loading-states` - 骨架屏或加载指示器
### 7. Style Selection (MEDIUM)
- `style-match` - 样式需与产品类型匹配 - `consistency` - 在所有页面使用相同样式 - `no-emoji-icons` - 使用 SVG 图标，而非表情符号
### 8. Charts & Data (LOW)
- `chart-type` - 图表类型需与数据类型匹配 - `color-guidance` - 使用无障碍配色方案 - `data-table` - 为无障碍提供表格替代方案
## 如何使用
使用下面的 CLI 工具搜索特定领域。
---
## 前置条件
检查是否已安装 Python：
```bash python3 --version || python --version ```
如果未安装 Python，请根据用户的操作系统进行安装：
**macOS:** ```bash brew install python3 ```
**Ubuntu/Debian:** ```bash sudo apt update && sudo apt install python3 ```
**Windows:** ```powershell winget install Python.Python.3.12 ```
---
## 如何使用此技能
当用户请求 UI/UX 工作（设计、构建、创建、实施、审查、修复、改进）时，请遵循此工作流程：
### 步骤 1：分析用户需求
从用户请求中提取关键信息： - **产品类型**：SaaS、电商、作品集、仪表盘、落地页等。 - **风格关键词**：极简、俏皮、专业、优雅、暗色模式等。 - **行业**：医疗、金融科技、游戏、教育等。 - **技术栈**：React、Vue、Next.js 或默认使用 `html-tailwind`
### 步骤 2：生成设计系统 (REQUIRED)
**始终以 `--design-system` 开头**，以获取包含推理依据的全面建议：
```bash python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"] ```
该命令： 1. 并行搜索 5 个领域 2. 应用 `ui-reasoning.csv` 中的推理规则来选择最佳匹配 3. 返回完整的设计系统：模式、样式、颜色、字体排印、特效 4. 包含应避免的反模式
**示例：** ```bash python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" ```
### 步骤 2b：持久化设计系统（Master + 覆盖模式）
要保存设计系统以便**跨会话进行分层检索**，请添加 `--persist`：
```bash python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" ```
这将创建： - `design-system/MASTER.md` — 包含所有设计规则的全局单一事实来源 (Source of Truth) - `design-system/pages/` — 用于页面特定覆盖的文件夹
**包含页面特定覆盖：** ```bash python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" ```
这还会创建： - `design-system/pages/dashboard.md` — 特定于页面的 Master 偏差
**分层检索的工作原理：** 1. 构建特定页面（例如“Checkout”）时，首先检查 `design-system/pages/checkout.md` 2. 如果页面文件存在，其规则将**覆盖** Master 文件 3. 如果不存在，则仅使用 `design-system/MASTER.md`
**上下文感知检索提示：** ``` I am building the [Page Name] page. Please read design-system/MASTER.md. Also check if design-system/pages/[page-name].md exists. If the page file exists, prioritize its rules. If not, use the Master rules exclusively. Now, generate the code... ```
### 步骤 3：补充详细搜索（按需）
获得设计系统后，使用领域搜索获取更多详细信息：
```bash python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] ```
**何时使用详细搜索：**
| 需求 | 领域 | 示例 | |------|--------|---------| | 更多样式选项 | `style` | `--domain style "glassmorphism dark"` | | 图表建议 | `chart` | `--domain chart "real-time dashboard"` | | UX 最佳实践 | `ux` | `--domain ux "animation accessibility"` | | 替代字体 | `typography` | `--domain typography "elegant luxury"` | | 落地页结构 | `landing` | `--domain landing "hero social-proof"` |
### 步骤 4：技术栈指南（默认：html-tailwind）
获取特定于实施的最佳实践。如果用户未指定技术栈，**默认使用 `html-tailwind`**。
```bash python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind ```
可用技术栈：`html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
---
## 搜索参考
### 可用领域
| 领域 | 用于 | 示例关键词 | |--------|---------|------------------| | `product` | 产品类型建议 | SaaS, e-commerce, portfolio, healthcare, beauty, service | | `style` | UI 样式、颜色、特效 | glassmorphism, minimalism, dark mode, brutalism | | `typography` | 字体搭配、Google Fonts | elegant, playful, professional, modern | | `color` | 按产品类型的配色方案 | saas, ecommerce, healthcare, beauty, fintech, service | | `landing` | 页面结构、CTA 策略 | hero, hero-centric, testimonial, pricing, social-proof | | `chart` | 图表类型、库建议 | trend, comparison, timeline, funnel, pie | | `ux` | 最佳实践、反模式 | animation, accessibility, z-index, loading | | `react` | React/Next.js 性能 | waterfall, bundle, suspense, memo, rerender, cache | | `web` | Web 界面指南 | aria, focus, keyboard, semantic, virtualize | | `prompt` | AI 提示、CSS 关键词 | (style name) |
### 可用技术栈
| 技术栈 | 侧重 | |-------|-------| | `html-tailwind` | Tailwind 工具类、响应式、a11y (默认) | | `react` | 状态、hooks、性能、模式 | | `nextjs` | SSR、路由、图片、API 路由 | | `vue` | Composition API, Pinia, Vue Router | | `svelte` | Runes, stores, SvelteKit | | `swiftui` | Views, State, Navigation, Animation | | `react-native` | Components, Navigation, Lists | | `flutter` | Widgets, State, Layout, Theming | | `shadcn` | shadcn/ui 组件、主题、表单、模式 | | `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
---
## 示例工作流程
**用户请求：** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
### 步骤 1：分析需求 - 产品类型：Beauty/Spa 服务 - 风格关键词：elegant, professional, soft - 行业：Beauty/Wellness - 技术栈：html-tailwind (默认)
### 步骤 2：生成设计系统 (REQUIRED)
```bash python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" ```
**输出：** 包含模式、样式、颜色、字体排印、特效和反模式的完整设计系统。
### 步骤 3：补充详细搜索（按需）
```bash # Get UX guidelines for animation and accessibility python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Get alternative typography options if needed python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography ```
### 步骤 4：技术栈指南
```bash python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind ```
**然后：** 综合设计系统 + 详细搜索并实施设计。
---
## 输出格式
`--design-system` 标志支持两种输出格式：
```bash # ASCII box (default) - best for terminal display python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown ```
---
## 获取更好效果的技巧
1. **关键词要具体** - “healthcare SaaS dashboard” > “app” 2. **多次搜索** - 不同的关键词会揭示不同的见解 3. **组合领域** - Style + Typography + Color = 完整的设计系统 4. **始终检查 UX** - 搜索“animation”、“z-index”、“accessibility”以查找常见问题 5. **使用技术栈标志** - 获取特定于实施的最佳实践 6. **迭代** - 如果第一次搜索不匹配，请尝试不同的关键词
---
## 专业 UI 的通用规则
这些是经常被忽视的问题，会导致 UI 看起来不专业：
### 图标与视觉元素
| 规则 | 宜 | 忌 | |------|----|-----| | **No emoji icons** | 使用 SVG 图标 (Heroicons, Lucide, Simple Icons) | 使用表情符号（如 🎨 🚀 ⚙️）作为 UI 图标 | | **Stable hover states** | 在悬停时使用颜色/不透明度过渡 | 使用会改变布局的缩放变换 | | **Correct brand logos** | 从 Simple Icons 搜索官方 SVG | 猜测或使用错误的 logo 路径 | | **Consistent icon sizing** | 使用固定 viewBox (24x24) 配合 w-6 h-6 | 随意混合不同的图标大小 |
### 交互与光标
| 规则 | 宜 | 忌 | |------|----|-----| | **Cursor pointer** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 | | **Hover feedback** | 提供视觉反馈（颜色、阴影、边框） | 无任何元素可交互的指示 | | **Smooth transitions** | 使用 `transition-colors duration-200` | 瞬间状态变化或太慢 (>500ms) |
### Light/Dark Mode Contrast
| 规则 | 要做 | 不要做 | |------|----|----- | | **玻璃卡片浅色模式** | 使用 `bg-white/80` 或更高的不透明度 | 使用 `bg-white/10`（过于透明） | | **浅色模式文本对比度** | 使用 `#0F172A` (slate-900) 作为文本颜色 | 使用 `#94A3B8` (slate-400) 作为正文文本 | | **浅色模式静音文本** | 至少使用 `#475569` (slate-600) | 使用 gray-400 或更浅的颜色 | | **边框可见性** | 在浅色模式下使用 `border-gray-200` | 使用 `border-white/10`（不可见） |
### 布局与间距
| 规则 | 要做 | 不要做 | |------|----|----- | | **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定在 `top-0 left-0 right-0` | | **内容内边距** | 考虑固定导航栏的高度 | 让内容隐藏在固定元素后面 | | **一致的最大宽度** | 使用相同的 `max-w-6xl` 或 `max-w-7xl` | 混合使用不同的容器宽度 |
---
## 交付前检查清单
在交付 UI 代码之前，请验证以下项目：
### 视觉质量 - [ ] 没有将表情符号用作图标（改用 SVG） - [ ] 所有图标来自一致的图标集（Heroicons/Lucide） - [ ] 品牌标志正确（已从 Simple Icons 验证） - [ ] 悬停状态不会导致布局偏移 - [ ] 直接使用主题颜色（bg-primary），而不是 var() 包装器
### 交互 - [ ] 所有可点击元素都有 `cursor-pointer` - [ ] 悬停状态提供清晰的视觉反馈 - [ ] 过渡效果平滑（150-300ms） - [ ] 键盘导航时焦点状态可见
### 浅色/深色模式 - [ ] 浅色模式文本具有足够的对比度（至少 4.5:1） - [ ] 玻璃/透明元素在浅色模式下可见 - [ ] 边框在两种模式下均可见 - [ ] 交付前测试两种模式
### 布局 - [ ] 浮动元素与边缘之间有适当的间距 - [ ] 没有内容隐藏在固定导航栏后面 - [ ] 在 375px、768px、1024px、1440px 下具有响应式 - [ ] 移动端没有水平滚动
### 无障碍性 - [ ] 所有图片都有 alt 文本 - [ ] 表单输入框都有标签 - [ ] 颜色不是唯一的指示方式 - [ ] 遵守 `prefers-reduced-motion`