添加中文文档翻译和示例页面
- 翻译 README.md 为中文 - 翻译所有 AI 助手的工作流文档 - 翻译 CLI 工具说明 - 添加示例落地页 HTML - 更新 CLAUDE.md 为中文
This commit is contained in:
parent
9149e5f2fa
commit
8c24cfd73d
|
|
@ -1,21 +1,21 @@
|
|||
---
|
||||
description: Plan and implement UI
|
||||
description: 规划和实现 UI
|
||||
auto_execution_mode: 3
|
||||
---
|
||||
|
||||
# UI/UX Pro Max - Design Intelligence
|
||||
# UI/UX Pro Max - 设计智能
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Check if Python is installed:
|
||||
检查是否已安装 Python：
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
如果未安装 Python，根据用户的操作系统安装：
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
|
|
@ -34,199 +34,199 @@ winget install Python.Python.3.12
|
|||
|
||||
---
|
||||
|
||||
## How to Use This Workflow
|
||||
## 如何使用此工作流
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循此工作流：
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
### 步骤 1：分析用户需求
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
从用户请求中提取关键信息：
|
||||
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
|
||||
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
|
||||
- **行业**：医疗、金融科技、游戏、教育等
|
||||
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
### 步骤 2：搜索相关领域
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
多次使用 `search.py` 收集全面信息。搜索直到获得足够的上下文。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
**推荐搜索顺序：**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
1. **Product（产品）** - 获取产品类型的风格推荐
|
||||
2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
|
||||
3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
|
||||
4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
|
||||
5. **Landing（落地页）** - 获取页面结构（如果是落地页）
|
||||
6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
|
||||
7. **UX** - 获取最佳实践和反模式
|
||||
8. **Stack（技术栈）** - 获取特定技术栈指南（默认：html-tailwind）
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
### 步骤 3：技术栈指南（默认：html-tailwind）
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
如果用户未指定技术栈，**默认使用 `html-tailwind`**。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
## 搜索参考
|
||||
|
||||
### Available Domains
|
||||
### 可用领域
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
| 领域 | 用途 | 示例关键词 |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
|
||||
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
|
||||
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
|
||||
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
|
||||
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
|
||||
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
|
||||
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
|
||||
| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
|
||||
|
||||
### Available Stacks
|
||||
### 可用技术栈
|
||||
|
||||
| Stack | Focus |
|
||||
| 技术栈 | 重点 |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `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 components, theming, forms, patterns |
|
||||
| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
|
||||
| `react` | 状态、钩子、性能、模式 |
|
||||
| `nextjs` | SSR、路由、图片、API 路由 |
|
||||
| `vue` | Composition API、Pinia、Vue Router |
|
||||
| `svelte` | Runes、stores、SvelteKit |
|
||||
| `swiftui` | 视图、状态、导航、动画 |
|
||||
| `react-native` | 组件、导航、列表 |
|
||||
| `flutter` | 小部件、状态、布局、主题 |
|
||||
| `shadcn` | shadcn/ui 组件、主题、表单、模式 |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
## 示例工作流
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
**用户请求：** "为专业护肤服务制作落地页"
|
||||
|
||||
**AI should:**
|
||||
**AI 应该：**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
# 1. 搜索产品类型
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
# 2. 搜索风格（基于行业：美妆、优雅）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
# 3. 搜索排版
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
# 4. 搜索配色方案
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
# 5. 搜索落地页结构
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
# 6. 搜索 UX 指南
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
# 7. 搜索技术栈指南（默认：html-tailwind）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
**然后：** 综合所有搜索结果并实现设计。
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
## 获得更好结果的技巧
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
7. **Split Into Multiple Files** - For better maintainability:
|
||||
- Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
|
||||
- Extract reusable styles into dedicated files
|
||||
- Keep each file focused and under 200-300 lines
|
||||
1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
|
||||
2. **多次搜索** - 不同关键词揭示不同见解
|
||||
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
|
||||
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
|
||||
5. **使用技术栈标志** - 获取特定实现的最佳实践
|
||||
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
|
||||
7. **拆分为多个文件** - 为了更好的可维护性：
|
||||
- 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
|
||||
- 将可重用样式提取到专用文件
|
||||
- 保持每个文件专注且少于 200-300 行
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
## 专业 UI 的通用规则
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
这些是经常被忽视的问题，会让 UI 看起来不专业：
|
||||
|
||||
### Icons & Visual Elements
|
||||
### 图标和视觉元素
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
|
||||
| **稳定的悬停状态** | 在悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
|
||||
| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
|
||||
| **一致的图标尺寸** | 使用固定的 viewBox (24x24) 配合 w-6 h-6 | 随机混合不同的图标尺寸 |
|
||||
|
||||
### Interaction & Cursor
|
||||
### 交互和光标
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
|
||||
| **悬停反馈** | 提供视觉反馈（颜色、阴影、边框） | 没有指示元素可交互 |
|
||||
| **平滑过渡** | 使用 `transition-colors duration-200` | 瞬间状态变化或太慢（>500ms） |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
### 亮色/暗色模式对比
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
|
||||
| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
|
||||
| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
|
||||
| **边框可见性** | 亮色模式使用 `border-gray-200` | 使用 `border-white/10`（不可见） |
|
||||
|
||||
### Layout & Spacing
|
||||
### 布局和间距
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `top-0 left-0 right-0` |
|
||||
| **内容内边距** | 考虑固定导航栏高度 | 让内容隐藏在固定元素后面 |
|
||||
| **一致的最大宽度** | 使用相同的 `max-w-6xl` 或 `max-w-7xl` | 混合不同的容器宽度 |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
## 交付前检查清单
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
在交付 UI 代码之前，验证这些项目：
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
### 视觉质量
|
||||
- [ ] 未使用表情符号作为图标（使用 SVG 代替）
|
||||
- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
|
||||
- [ ] 品牌标志正确（从 Simple Icons 验证）
|
||||
- [ ] 悬停状态不会导致布局偏移
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
### 交互
|
||||
- [ ] 所有可点击元素都有 `cursor-pointer`
|
||||
- [ ] 悬停状态提供清晰的视觉反馈
|
||||
- [ ] 过渡平滑（150-300ms）
|
||||
- [ ] 键盘导航的焦点状态可见
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
### 亮色/暗色模式
|
||||
- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
|
||||
- [ ] 玻璃/透明元素在亮色模式下可见
|
||||
- [ ] 边框在两种模式下都可见
|
||||
- [ ] 交付前测试两种模式
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 320px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
### 布局
|
||||
- [ ] 浮动元素与边缘有适当间距
|
||||
- [ ] 没有内容隐藏在固定导航栏后面
|
||||
- [ ] 在 320px、768px、1024px、1440px 下响应式
|
||||
- [ ] 移动端无横向滚动
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
### 无障碍
|
||||
- [ ] 所有图片都有 alt 文本
|
||||
- [ ] 表单输入都有标签
|
||||
- [ ] 颜色不是唯一指示器
|
||||
- [ ] 遵守 `prefers-reduced-motion`
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
# ui-ux-pro-max
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Check if Python is installed:
|
||||
检查是否已安装 Python：
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
如果未安装 Python，根据用户的操作系统安装：
|
||||
|
||||
**macOS:**
|
||||
|
||||
|
|
@ -32,133 +32,133 @@ winget install Python.Python.3.12
|
|||
|
||||
---
|
||||
|
||||
## How to Use This Workflow
|
||||
## 如何使用此工作流
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循此工作流：
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
### 步骤 1：分析用户需求
|
||||
|
||||
Extract key information from user request:
|
||||
从用户请求中提取关键信息：
|
||||
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
|
||||
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
|
||||
- **行业**：医疗、金融科技、游戏、教育等
|
||||
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
### 步骤 2：搜索相关领域
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
多次使用 `search.py` 收集全面信息。搜索直到获得足够的上下文。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
**推荐搜索顺序：**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
1. **Product（产品）** - 获取产品类型的风格推荐
|
||||
2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
|
||||
3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
|
||||
4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
|
||||
5. **Landing（落地页）** - 获取页面结构（如果是落地页）
|
||||
6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
|
||||
7. **UX** - 获取最佳实践和反模式
|
||||
8. **Stack（技术栈）** - 获取特定技术栈指南（默认：html-tailwind）
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
### 步骤 3：技术栈指南（默认：html-tailwind）
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
如果用户未指定技术栈，**默认使用 `html-tailwind`**。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
## 搜索参考
|
||||
|
||||
### Available Domains
|
||||
### 可用领域
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
| 领域 | 用途 | 示例关键词 |
|
||||
| ------------ | ------------------------------------ | -------------------------------------------------------- |
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
|
||||
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
|
||||
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
|
||||
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
|
||||
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
|
||||
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
|
||||
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
|
||||
| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
|
||||
|
||||
### Available Stacks
|
||||
### 可用技术栈
|
||||
|
||||
| Stack | Focus |
|
||||
| 技术栈 | 重点 |
|
||||
| --------------- | ---------------------------------------------- |
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `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 components, theming, forms, patterns |
|
||||
| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
|
||||
| `react` | 状态、钩子、性能、模式 |
|
||||
| `nextjs` | SSR、路由、图片、API 路由 |
|
||||
| `vue` | Composition API、Pinia、Vue Router |
|
||||
| `svelte` | Runes、stores、SvelteKit |
|
||||
| `swiftui` | 视图、状态、导航、动画 |
|
||||
| `react-native` | 组件、导航、列表 |
|
||||
| `flutter` | 小部件、状态、布局、主题 |
|
||||
| `shadcn` | shadcn/ui 组件、主题、表单、模式 |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
## 示例工作流
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
**用户请求：** "为专业护肤服务制作落地页"
|
||||
|
||||
**AI should:**
|
||||
**AI 应该：**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
# 1. 搜索产品类型
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
# 2. 搜索风格（基于行业：美妆、优雅）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
# 3. 搜索排版
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
# 4. 搜索配色方案
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
# 5. 搜索落地页结构
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
# 6. 搜索 UX 指南
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
# 7. 搜索技术栈指南（默认：html-tailwind）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
**然后：** 综合所有搜索结果并实现设计。
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
## 获得更好结果的技巧
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
7. **Split Into Multiple Files** - For better maintainability:
|
||||
- Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
|
||||
- Extract reusable styles into dedicated files
|
||||
- Keep each file focused and under 200-300 lines
|
||||
1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
|
||||
2. **多次搜索** - 不同关键词揭示不同见解
|
||||
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
|
||||
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
|
||||
5. **使用技术栈标志** - 获取特定实现的最佳实践
|
||||
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
|
||||
7. **拆分为多个文件** - 为了更好的可维护性：
|
||||
- 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
|
||||
- 将可重用样式提取到专用文件
|
||||
- 保持每个文件专注且少于 200-300 行
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
## 专业 UI 的通用规则
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
这些是经常被忽视的问题，会让 UI 看起来不专业：
|
||||
|
||||
### Icons & Visual Elements
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
# ui-ux-pro-max
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Check if Python is installed:
|
||||
检查是否已安装 Python：
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
如果未安装 Python，根据用户的操作系统安装：
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
|
|
@ -29,199 +29,199 @@ winget install Python.Python.3.12
|
|||
|
||||
---
|
||||
|
||||
## How to Use This Workflow
|
||||
## 如何使用此工作流
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循此工作流：
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
### 步骤 1：分析用户需求
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
从用户请求中提取关键信息：
|
||||
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
|
||||
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
|
||||
- **行业**：医疗、金融科技、游戏、教育等
|
||||
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
### 步骤 2：搜索相关领域
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
多次使用 `search.py` 收集全面信息。搜索直到获得足够的上下文。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
**推荐搜索顺序：**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
1. **Product（产品）** - 获取产品类型的风格推荐
|
||||
2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
|
||||
3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
|
||||
4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
|
||||
5. **Landing（落地页）** - 获取页面结构（如果是落地页）
|
||||
6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
|
||||
7. **UX** - 获取最佳实践和反模式
|
||||
8. **Stack（技术栈）** - 获取特定技术栈指南（默认：html-tailwind）
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
### 步骤 3：技术栈指南（默认：html-tailwind）
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
如果用户未指定技术栈，**默认使用 `html-tailwind`**。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
## 搜索参考
|
||||
|
||||
### Available Domains
|
||||
### 可用领域
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
| 领域 | 用途 | 示例关键词 |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
|
||||
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
|
||||
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
|
||||
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
|
||||
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
|
||||
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
|
||||
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
|
||||
| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
|
||||
|
||||
### Available Stacks
|
||||
### 可用技术栈
|
||||
|
||||
| Stack | Focus |
|
||||
| 技术栈 | 重点 |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `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 components, theming, forms, patterns |
|
||||
| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
|
||||
| `react` | 状态、钩子、性能、模式 |
|
||||
| `nextjs` | SSR、路由、图片、API 路由 |
|
||||
| `vue` | Composition API、Pinia、Vue Router |
|
||||
| `svelte` | Runes、stores、SvelteKit |
|
||||
| `swiftui` | 视图、状态、导航、动画 |
|
||||
| `react-native` | 组件、导航、列表 |
|
||||
| `flutter` | 小部件、状态、布局、主题 |
|
||||
| `shadcn` | shadcn/ui 组件、主题、表单、模式 |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
## 示例工作流
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
**用户请求：** "为专业护肤服务制作落地页"
|
||||
|
||||
**AI should:**
|
||||
**AI 应该：**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
# 1. 搜索产品类型
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
# 2. 搜索风格（基于行业：美妆、优雅）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
# 3. 搜索排版
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
# 4. 搜索配色方案
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
# 5. 搜索落地页结构
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
# 6. 搜索 UX 指南
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
# 7. 搜索技术栈指南（默认：html-tailwind）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
**然后：** 综合所有搜索结果并实现设计。
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
## 获得更好结果的技巧
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
7. **Split Into Multiple Files** - For better maintainability:
|
||||
- Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
|
||||
- Extract reusable styles into dedicated files
|
||||
- Keep each file focused and under 200-300 lines
|
||||
1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
|
||||
2. **多次搜索** - 不同关键词揭示不同见解
|
||||
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
|
||||
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
|
||||
5. **使用技术栈标志** - 获取特定实现的最佳实践
|
||||
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
|
||||
7. **拆分为多个文件** - 为了更好的可维护性：
|
||||
- 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
|
||||
- 将可重用样式提取到专用文件
|
||||
- 保持每个文件专注且少于 200-300 行
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
## 专业 UI 的通用规则
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
这些是经常被忽视的问题，会让 UI 看起来不专业：
|
||||
|
||||
### Icons & Visual Elements
|
||||
### 图标和视觉元素
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
|
||||
| **稳定的悬停状态** | 在悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
|
||||
| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
|
||||
| **一致的图标尺寸** | 使用固定的 viewBox (24x24) 配合 w-6 h-6 | 随机混合不同的图标尺寸 |
|
||||
|
||||
### Interaction & Cursor
|
||||
### 交互和光标
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
|
||||
| **悬停反馈** | 提供视觉反馈（颜色、阴影、边框） | 没有指示元素可交互 |
|
||||
| **平滑过渡** | 使用 `transition-colors duration-200` | 瞬间状态变化或太慢（>500ms） |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
### 亮色/暗色模式对比
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
|
||||
| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
|
||||
| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
|
||||
| **边框可见性** | 亮色模式使用 `border-gray-200` | 使用 `border-white/10`（不可见） |
|
||||
|
||||
### Layout & Spacing
|
||||
### 布局和间距
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `top-0 left-0 right-0` |
|
||||
| **内容内边距** | 考虑固定导航栏高度 | 让内容隐藏在固定元素后面 |
|
||||
| **一致的最大宽度** | 使用相同的 `max-w-6xl` 或 `max-w-7xl` | 混合不同的容器宽度 |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
## 交付前检查清单
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
在交付 UI 代码之前，验证这些项目：
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
### 视觉质量
|
||||
- [ ] 未使用表情符号作为图标（使用 SVG 代替）
|
||||
- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
|
||||
- [ ] 品牌标志正确（从 Simple Icons 验证）
|
||||
- [ ] 悬停状态不会导致布局偏移
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
### 交互
|
||||
- [ ] 所有可点击元素都有 `cursor-pointer`
|
||||
- [ ] 悬停状态提供清晰的视觉反馈
|
||||
- [ ] 过渡平滑（150-300ms）
|
||||
- [ ] 键盘导航的焦点状态可见
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
### 亮色/暗色模式
|
||||
- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
|
||||
- [ ] 玻璃/透明元素在亮色模式下可见
|
||||
- [ ] 边框在两种模式下都可见
|
||||
- [ ] 交付前测试两种模式
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 320px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
### 布局
|
||||
- [ ] 浮动元素与边缘有适当间距
|
||||
- [ ] 没有内容隐藏在固定导航栏后面
|
||||
- [ ] 在 320px、768px、1024px、1440px 下响应式
|
||||
- [ ] 移动端无横向滚动
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
### 无障碍
|
||||
- [ ] 所有图片都有 alt 文本
|
||||
- [ ] 表单输入都有标签
|
||||
- [ ] 颜色不是唯一指示器
|
||||
- [ ] 遵守 `prefers-reduced-motion`
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@
|
|||
trigger: always_on
|
||||
---
|
||||
|
||||
# UI/UX Pro Max - Design Intelligence
|
||||
# UI/UX Pro Max - 设计智能
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Check if Python is installed:
|
||||
检查是否已安装 Python：
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
如果未安装 Python，根据用户的操作系统安装：
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
|
|
@ -33,199 +33,199 @@ winget install Python.Python.3.12
|
|||
|
||||
---
|
||||
|
||||
## How to Use This Workflow
|
||||
## 如何使用此工作流
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循此工作流：
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
### 步骤 1：分析用户需求
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
从用户请求中提取关键信息：
|
||||
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
|
||||
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
|
||||
- **行业**：医疗、金融科技、游戏、教育等
|
||||
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
### 步骤 2：搜索相关领域
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
多次使用 `search.py` 收集全面信息。搜索直到获得足够的上下文。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
**推荐搜索顺序：**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
1. **Product（产品）** - 获取产品类型的风格推荐
|
||||
2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
|
||||
3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
|
||||
4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
|
||||
5. **Landing（落地页）** - 获取页面结构（如果是落地页）
|
||||
6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
|
||||
7. **UX** - 获取最佳实践和反模式
|
||||
8. **Stack（技术栈）** - 获取特定技术栈指南（默认：html-tailwind）
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
### 步骤 3：技术栈指南（默认：html-tailwind）
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
如果用户未指定技术栈，**默认使用 `html-tailwind`**。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
## 搜索参考
|
||||
|
||||
### Available Domains
|
||||
### 可用领域
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
| 领域 | 用途 | 示例关键词 |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
|
||||
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
|
||||
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
|
||||
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
|
||||
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
|
||||
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
|
||||
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
|
||||
| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
|
||||
|
||||
### Available Stacks
|
||||
### 可用技术栈
|
||||
|
||||
| Stack | Focus |
|
||||
| 技术栈 | 重点 |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `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 components, theming, forms, patterns |
|
||||
| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
|
||||
| `react` | 状态、钩子、性能、模式 |
|
||||
| `nextjs` | SSR、路由、图片、API 路由 |
|
||||
| `vue` | Composition API、Pinia、Vue Router |
|
||||
| `svelte` | Runes、stores、SvelteKit |
|
||||
| `swiftui` | 视图、状态、导航、动画 |
|
||||
| `react-native` | 组件、导航、列表 |
|
||||
| `flutter` | 小部件、状态、布局、主题 |
|
||||
| `shadcn` | shadcn/ui 组件、主题、表单、模式 |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
## 示例工作流
|
||||
|
||||
**User request:** "Build a landing page for a skincare service"
|
||||
**用户请求：** "为护肤服务构建落地页"
|
||||
|
||||
**AI should:**
|
||||
**AI 应该：**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
# 1. 搜索产品类型
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
# 2. 搜索风格（基于行业：美妆、优雅）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
# 3. 搜索排版
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
# 4. 搜索配色方案
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
# 5. 搜索落地页结构
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
# 6. 搜索 UX 指南
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
# 7. 搜索技术栈指南（默认：html-tailwind）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
**然后：** 综合所有搜索结果并实现设计。
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
## 获得更好结果的技巧
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
7. **Split Into Multiple Files** - For better maintainability:
|
||||
- Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
|
||||
- Extract reusable styles into dedicated files
|
||||
- Keep each file focused and under 200-300 lines
|
||||
1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
|
||||
2. **多次搜索** - 不同关键词揭示不同见解
|
||||
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
|
||||
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
|
||||
5. **使用技术栈标志** - 获取特定实现的最佳实践
|
||||
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
|
||||
7. **拆分为多个文件** - 为了更好的可维护性：
|
||||
- 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
|
||||
- 将可重用样式提取到专用文件
|
||||
- 保持每个文件专注且少于 200-300 行
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
## 专业 UI 的通用规则
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
这些是经常被忽视的问题，会让 UI 看起来不专业：
|
||||
|
||||
### Icons & Visual Elements
|
||||
### 图标和视觉元素
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like :art: :rocket: :gear: as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 :art: :rocket: :gear: 作为 UI 图标 |
|
||||
| **稳定的悬停状态** | 在悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
|
||||
| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
|
||||
| **一致的图标尺寸** | 使用固定的 viewBox (24x24) 配合 w-6 h-6 | 随机混合不同的图标尺寸 |
|
||||
|
||||
### Interaction & Cursor
|
||||
### 交互和光标
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
|
||||
| **悬停反馈** | 提供视觉反馈（颜色、阴影、边框） | 没有指示元素可交互 |
|
||||
| **平滑过渡** | 使用 `transition-colors duration-200` | 瞬间状态变化或太慢（>500ms） |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
### 亮色/暗色模式对比
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
|
||||
| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
|
||||
| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
|
||||
| **边框可见性** | 亮色模式使用 `border-gray-200` | 使用 `border-white/10`（不可见） |
|
||||
|
||||
### Layout & Spacing
|
||||
### 布局和间距
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `top-0 left-0 right-0` |
|
||||
| **内容内边距** | 考虑固定导航栏高度 | 让内容隐藏在固定元素后面 |
|
||||
| **一致的最大宽度** | 使用相同的 `max-w-6xl` 或 `max-w-7xl` | 混合不同的容器宽度 |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
## 交付前检查清单
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
在交付 UI 代码之前，验证这些项目：
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
### 视觉质量
|
||||
- [ ] 未使用表情符号作为图标（使用 SVG 代替）
|
||||
- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
|
||||
- [ ] 品牌标志正确（从 Simple Icons 验证）
|
||||
- [ ] 悬停状态不会导致布局偏移
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
### 交互
|
||||
- [ ] 所有可点击元素都有 `cursor-pointer`
|
||||
- [ ] 悬停状态提供清晰的视觉反馈
|
||||
- [ ] 过渡平滑（150-300ms）
|
||||
- [ ] 键盘导航的焦点状态可见
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
### 亮色/暗色模式
|
||||
- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
|
||||
- [ ] 玻璃/透明元素在亮色模式下可见
|
||||
- [ ] 边框在两种模式下都可见
|
||||
- [ ] 交付前测试两种模式
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 320px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
### 布局
|
||||
- [ ] 浮动元素与边缘有适当间距
|
||||
- [ ] 没有内容隐藏在固定导航栏后面
|
||||
- [ ] 在 320px、768px、1024px、1440px 下响应式
|
||||
- [ ] 移动端无横向滚动
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
### 无障碍
|
||||
- [ ] 所有图片都有 alt 文本
|
||||
- [ ] 表单输入都有标签
|
||||
- [ ] 颜色不是唯一指示器
|
||||
- [ ] 遵守 `prefers-reduced-motion`
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
# ui-ux-pro-max
|
||||
|
||||
Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
|
||||
可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Check if Python is installed:
|
||||
检查是否已安装 Python：
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
如果未安装 Python，根据用户的操作系统安装：
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
|
|
@ -29,199 +29,199 @@ winget install Python.Python.3.12
|
|||
|
||||
---
|
||||
|
||||
## How to Use This Workflow
|
||||
## 如何使用此工作流
|
||||
|
||||
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
|
||||
当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，遵循此工作流：
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
### 步骤 1：分析用户需求
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
|
||||
- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
|
||||
- **Industry**: healthcare, fintech, gaming, education, etc.
|
||||
- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
|
||||
从用户请求中提取关键信息：
|
||||
- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
|
||||
- **风格关键词**：极简、活泼、专业、优雅、深色模式等
|
||||
- **行业**：医疗、金融科技、游戏、教育等
|
||||
- **技术栈**：React、Vue、Next.js，或默认为 `html-tailwind`
|
||||
|
||||
### Step 2: Search Relevant Domains
|
||||
### 步骤 2：搜索相关领域
|
||||
|
||||
Use `search.py` multiple times to gather comprehensive information. Search until you have enough context.
|
||||
多次使用 `search.py` 收集全面信息。搜索直到获得足够的上下文。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Recommended search order:**
|
||||
**推荐搜索顺序：**
|
||||
|
||||
1. **Product** - Get style recommendations for product type
|
||||
2. **Style** - Get detailed style guide (colors, effects, frameworks)
|
||||
3. **Typography** - Get font pairings with Google Fonts imports
|
||||
4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
|
||||
5. **Landing** - Get page structure (if landing page)
|
||||
6. **Chart** - Get chart recommendations (if dashboard/analytics)
|
||||
7. **UX** - Get best practices and anti-patterns
|
||||
8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
|
||||
1. **Product（产品）** - 获取产品类型的风格推荐
|
||||
2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
|
||||
3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
|
||||
4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
|
||||
5. **Landing（落地页）** - 获取页面结构（如果是落地页）
|
||||
6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
|
||||
7. **UX** - 获取最佳实践和反模式
|
||||
8. **Stack（技术栈）** - 获取特定技术栈指南（默认：html-tailwind）
|
||||
|
||||
### Step 3: Stack Guidelines (Default: html-tailwind)
|
||||
### 步骤 3：技术栈指南（默认：html-tailwind）
|
||||
|
||||
If user doesn't specify a stack, **default to `html-tailwind`**.
|
||||
如果用户未指定技术栈，**默认使用 `html-tailwind`**。
|
||||
|
||||
```bash
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
|
||||
```
|
||||
|
||||
Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
## 搜索参考
|
||||
|
||||
### Available Domains
|
||||
### 可用领域
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
| 领域 | 用途 | 示例关键词 |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
|
||||
| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
|
||||
| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
|
||||
| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
|
||||
| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
|
||||
| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
|
||||
| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
|
||||
| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
|
||||
|
||||
### Available Stacks
|
||||
### 可用技术栈
|
||||
|
||||
| Stack | Focus |
|
||||
| 技术栈 | 重点 |
|
||||
|-------|-------|
|
||||
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
|
||||
| `react` | State, hooks, performance, patterns |
|
||||
| `nextjs` | SSR, routing, images, API routes |
|
||||
| `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 components, theming, forms, patterns |
|
||||
| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
|
||||
| `react` | 状态、钩子、性能、模式 |
|
||||
| `nextjs` | SSR、路由、图片、API 路由 |
|
||||
| `vue` | Composition API、Pinia、Vue Router |
|
||||
| `svelte` | Runes、stores、SvelteKit |
|
||||
| `swiftui` | 视图、状态、导航、动画 |
|
||||
| `react-native` | 组件、导航、列表 |
|
||||
| `flutter` | 小部件、状态、布局、主题 |
|
||||
| `shadcn` | shadcn/ui 组件、主题、表单、模式 |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
## 示例工作流
|
||||
|
||||
**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
|
||||
**用户请求：** "为专业护肤服务制作落地页"
|
||||
|
||||
**AI should:**
|
||||
**AI 应该：**
|
||||
|
||||
```bash
|
||||
# 1. Search product type
|
||||
# 1. 搜索产品类型
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
|
||||
|
||||
# 2. Search style (based on industry: beauty, elegant)
|
||||
# 2. 搜索风格（基于行业：美妆、优雅）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
|
||||
|
||||
# 3. Search typography
|
||||
# 3. 搜索排版
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
|
||||
|
||||
# 4. Search color palette
|
||||
# 4. 搜索配色方案
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
|
||||
|
||||
# 5. Search landing page structure
|
||||
# 5. 搜索落地页结构
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
|
||||
|
||||
# 6. Search UX guidelines
|
||||
# 6. 搜索 UX 指南
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
||||
|
||||
# 7. Search stack guidelines (default: html-tailwind)
|
||||
# 7. 搜索技术栈指南（默认：html-tailwind）
|
||||
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
|
||||
```
|
||||
|
||||
**Then:** Synthesize all search results and implement the design.
|
||||
**然后：** 综合所有搜索结果并实现设计。
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
## 获得更好结果的技巧
|
||||
|
||||
1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
|
||||
2. **Search multiple times** - Different keywords reveal different insights
|
||||
3. **Combine domains** - Style + Typography + Color = Complete design system
|
||||
4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
|
||||
5. **Use stack flag** - Get implementation-specific best practices
|
||||
6. **Iterate** - If first search doesn't match, try different keywords
|
||||
7. **Split Into Multiple Files** - For better maintainability:
|
||||
- Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
|
||||
- Extract reusable styles into dedicated files
|
||||
- Keep each file focused and under 200-300 lines
|
||||
1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
|
||||
2. **多次搜索** - 不同关键词揭示不同见解
|
||||
3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
|
||||
4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
|
||||
5. **使用技术栈标志** - 获取特定实现的最佳实践
|
||||
6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
|
||||
7. **拆分为多个文件** - 为了更好的可维护性：
|
||||
- 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
|
||||
- 将可重用样式提取到专用文件
|
||||
- 保持每个文件专注且少于 200-300 行
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
## 专业 UI 的通用规则
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
这些是经常被忽视的问题，会让 UI 看起来不专业：
|
||||
|
||||
### Icons & Visual Elements
|
||||
### 图标和视觉元素
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
|
||||
| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
|
||||
| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
|
||||
| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
|
||||
| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
|
||||
| **稳定的悬停状态** | 在悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
|
||||
| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
|
||||
| **一致的图标尺寸** | 使用固定的 viewBox (24x24) 配合 w-6 h-6 | 随机混合不同的图标尺寸 |
|
||||
|
||||
### Interaction & Cursor
|
||||
### 交互和光标
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
|
||||
| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
|
||||
| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
|
||||
| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
|
||||
| **悬停反馈** | 提供视觉反馈（颜色、阴影、边框） | 没有指示元素可交互 |
|
||||
| **平滑过渡** | 使用 `transition-colors duration-200` | 瞬间状态变化或太慢（>500ms） |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
### 亮色/暗色模式对比
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
|
||||
| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
|
||||
| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
|
||||
| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
|
||||
| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
|
||||
| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
|
||||
| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
|
||||
| **边框可见性** | 亮色模式使用 `border-gray-200` | 使用 `border-white/10`（不可见） |
|
||||
|
||||
### Layout & Spacing
|
||||
### 布局和间距
|
||||
|
||||
| Rule | Do | Don't |
|
||||
| 规则 | 应该做 | 不应该做 |
|
||||
|------|----|----- |
|
||||
| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
|
||||
| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
|
||||
| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
|
||||
| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `top-0 left-0 right-0` |
|
||||
| **内容内边距** | 考虑固定导航栏高度 | 让内容隐藏在固定元素后面 |
|
||||
| **一致的最大宽度** | 使用相同的 `max-w-6xl` 或 `max-w-7xl` | 混合不同的容器宽度 |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
## 交付前检查清单
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
在交付 UI 代码之前，验证这些项目：
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] Brand logos are correct (verified from Simple Icons)
|
||||
- [ ] Hover states don't cause layout shift
|
||||
### 视觉质量
|
||||
- [ ] 未使用表情符号作为图标（使用 SVG 代替）
|
||||
- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
|
||||
- [ ] 品牌标志正确（从 Simple Icons 验证）
|
||||
- [ ] 悬停状态不会导致布局偏移
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor-pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are smooth (150-300ms)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
### 交互
|
||||
- [ ] 所有可点击元素都有 `cursor-pointer`
|
||||
- [ ] 悬停状态提供清晰的视觉反馈
|
||||
- [ ] 过渡平滑（150-300ms）
|
||||
- [ ] 键盘导航的焦点状态可见
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
|
||||
- [ ] Glass/transparent elements visible in light mode
|
||||
- [ ] Borders visible in both modes
|
||||
- [ ] Test both modes before delivery
|
||||
### 亮色/暗色模式
|
||||
- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
|
||||
- [ ] 玻璃/透明元素在亮色模式下可见
|
||||
- [ ] 边框在两种模式下都可见
|
||||
- [ ] 交付前测试两种模式
|
||||
|
||||
### Layout
|
||||
- [ ] Floating elements have proper spacing from edges
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] Responsive at 320px, 768px, 1024px, 1440px
|
||||
- [ ] No horizontal scroll on mobile
|
||||
### 布局
|
||||
- [ ] 浮动元素与边缘有适当间距
|
||||
- [ ] 没有内容隐藏在固定导航栏后面
|
||||
- [ ] 在 320px、768px、1024px、1440px 下响应式
|
||||
- [ ] 移动端无横向滚动
|
||||
|
||||
### Accessibility
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
### 无障碍
|
||||
- [ ] 所有图片都有 alt 文本
|
||||
- [ ] 表单输入都有标签
|
||||
- [ ] 颜色不是唯一指示器
|
||||
- [ ] 遵守 `prefers-reduced-motion`
|
||||
|
|
|
|||
88
CLAUDE.md
88
CLAUDE.md
|
|
@ -1,71 +1,71 @@
|
|||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
此文件为 Claude Code (claude.ai/code) 在处理此仓库代码时提供指导。
|
||||
|
||||
## Project Overview
|
||||
## 项目概述
|
||||
|
||||
Antigravity Kit is an AI-powered design intelligence toolkit providing searchable databases of UI styles, color palettes, font pairings, chart types, and UX guidelines. It works as a skill/workflow for AI coding assistants (Claude Code, Windsurf, Cursor, etc.).
|
||||
Antigravity Kit 是一个 AI 驱动的设计智能工具包，提供可搜索的 UI 风格、配色方案、字体配对、图表类型和 UX 指南数据库。它作为 AI 编程助手（Claude Code、Windsurf、Cursor 等）的技能/工作流使用。
|
||||
|
||||
## Search Command
|
||||
## 搜索命令
|
||||
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max_results>]
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<查询>" --domain <领域> [-n <最大结果数>]
|
||||
```
|
||||
|
||||
**Domain search:**
|
||||
- `product` - Product type recommendations (SaaS, e-commerce, portfolio)
|
||||
- `style` - UI styles (glassmorphism, minimalism, brutalism)
|
||||
- `typography` - Font pairings with Google Fonts imports
|
||||
- `color` - Color palettes by product type
|
||||
- `landing` - Page structure and CTA strategies
|
||||
- `chart` - Chart types and library recommendations
|
||||
- `ux` - Best practices and anti-patterns
|
||||
- `prompt` - AI prompts and CSS keywords
|
||||
**领域搜索：**
|
||||
- `product` - 产品类型推荐（SaaS、电商、作品集）
|
||||
- `style` - UI 风格（玻璃态、极简主义、野兽派）
|
||||
- `typography` - 字体配对及 Google Fonts 导入
|
||||
- `color` - 按产品类型的配色方案
|
||||
- `landing` - 页面结构和 CTA 策略
|
||||
- `chart` - 图表类型和库推荐
|
||||
- `ux` - 最佳实践和反模式
|
||||
- `prompt` - AI 提示和 CSS 关键词
|
||||
|
||||
**Stack search:**
|
||||
**技术栈搜索：**
|
||||
```bash
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack>
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<查询>" --stack <技术栈>
|
||||
```
|
||||
Available stacks: `html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
|
||||
可用技术栈：`html-tailwind`（默认）、`react`、`nextjs`、`vue`、`svelte`、`swiftui`、`react-native`、`flutter`、`shadcn`
|
||||
|
||||
## Architecture
|
||||
## 架构
|
||||
|
||||
```
|
||||
.claude/skills/ui-ux-pro-max/ # Claude Code skill
|
||||
├── SKILL.md # Skill definition with workflow instructions
|
||||
.claude/skills/ui-ux-pro-max/ # Claude Code 技能
|
||||
├── SKILL.md # 包含工作流指令的技能定义
|
||||
├── scripts/
|
||||
│ ├── search.py # CLI entry point
|
||||
│ └── core.py # BM25 + regex hybrid search engine
|
||||
└── data/ # CSV databases (styles, colors, typography, etc.)
|
||||
└── stacks/ # Stack-specific guidelines (8 CSV files)
|
||||
│ ├── search.py # CLI 入口点
|
||||
│ └── core.py # BM25 + 正则混合搜索引擎
|
||||
└── data/ # CSV 数据库（风格、颜色、排版等）
|
||||
└── stacks/ # 特定技术栈指南（8 个 CSV 文件）
|
||||
|
||||
.windsurf/workflows/ # Windsurf workflow copy
|
||||
.agent/workflows/ui-ux-pro-max/ # Generic agent workflow copy
|
||||
.github/prompts/ # GitHub Copilot prompt
|
||||
.kiro/steering/ # Kiro steering file
|
||||
.trae/skills/ui-ux-pro-max/ # Trae skill copy
|
||||
.shared/ui-ux-pro-max/ # Shared data copy
|
||||
.windsurf/workflows/ # Windsurf 工作流副本
|
||||
.agent/workflows/ui-ux-pro-max/ # 通用代理工作流副本
|
||||
.github/prompts/ # GitHub Copilot 提示
|
||||
.kiro/steering/ # Kiro 引导文件
|
||||
.trae/skills/ui-ux-pro-max/ # Trae 技能副本
|
||||
.shared/ui-ux-pro-max/ # 共享数据副本
|
||||
```
|
||||
|
||||
The search engine uses BM25 ranking combined with regex matching. Domain auto-detection is available when `--domain` is omitted.
|
||||
搜索引擎使用 BM25 排名结合正则匹配。当省略 `--domain` 时可自动检测领域。
|
||||
|
||||
## Sync Rules
|
||||
## 同步规则
|
||||
|
||||
When modifying files, keep all agent workflows in sync:
|
||||
修改文件时，保持所有代理工作流同步：
|
||||
|
||||
- **Data & Scripts** (`data/`, `scripts/`): Copy changes to `.shared/ui-ux-pro-max/` and `cli/assets/.shared/ui-ux-pro-max/`
|
||||
- **SKILL.md**: Update corresponding files in `.agent/`, `.cursor/`, `.windsurf/`, `.github/prompts/`, `.kiro/steering/`, `.trae/skills/`
|
||||
- **CLI assets**: Copy all skill folders to `cli/assets/` (`.claude/`, `.cursor/`, `.windsurf/`, `.agent/`, `.github/`, `.kiro/`, `.trae/`, `.shared/`)
|
||||
- **数据和脚本**（`data/`、`scripts/`）：将更改复制到 `.shared/ui-ux-pro-max/` 和 `cli/assets/.shared/ui-ux-pro-max/`
|
||||
- **SKILL.md**：更新 `.agent/`、`.cursor/`、`.windsurf/`、`.github/prompts/`、`.kiro/steering/`、`.trae/skills/` 中的相应文件
|
||||
- **CLI 资源**：将所有技能文件夹复制到 `cli/assets/`（`.claude/`、`.cursor/`、`.windsurf/`、`.agent/`、`.github/`、`.kiro/`、`.trae/`、`.shared/`）
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Python 3.x (no external dependencies required)
|
||||
Python 3.x（无需外部依赖）
|
||||
|
||||
## Git Workflow
|
||||
## Git 工作流
|
||||
|
||||
Never push directly to `main`. Always:
|
||||
永远不要直接推送到 `main`。始终：
|
||||
|
||||
1. Create a new branch: `git checkout -b feat/... ` or `fix/...`
|
||||
2. Commit changes
|
||||
3. Push branch: `git push -u origin <branch>`
|
||||
4. Create PR: `gh pr create`
|
||||
1. 创建新分支：`git checkout -b feat/...` 或 `fix/...`
|
||||
2. 提交更改
|
||||
3. 推送分支：`git push -u origin <分支>`
|
||||
4. 创建 PR：`gh pr create`
|
||||
|
|
|
|||
118
README.md
118
README.md
|
|
@ -1,36 +1,36 @@
|
|||
# UI UX Pro Max
|
||||
|
||||
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
|
||||
一个为多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
|
||||
|
||||
<p align="center">
|
||||
<img src="screenshots/website.png" alt="UI UX Pro Max" width="800">
|
||||
</p>
|
||||
|
||||
## Overview
|
||||
## 概述
|
||||
|
||||
UI UX Pro Max is a searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. It works as a skill/workflow for AI coding assistants (Claude Code, Codex, Cursor, Windsurf, etc.).
|
||||
UI UX Pro Max 是一个可搜索的数据库，包含 UI 风格、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈的最佳实践。它作为 AI 编程助手（Claude Code、Codex、Cursor、Windsurf 等）的技能/工作流使用。
|
||||
|
||||
## Features
|
||||
## 功能特性
|
||||
|
||||
- **57 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, and more
|
||||
- **95 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.
|
||||
- **56 Font Pairings** - Curated typography combinations with Google Fonts imports
|
||||
- **24 Chart Types** - Recommendations for dashboards and analytics
|
||||
- **11 Tech Stacks** - React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui
|
||||
- **98 UX Guidelines** - Best practices, anti-patterns, and accessibility rules
|
||||
- **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 指南** - 最佳实践、反模式和无障碍规则
|
||||
|
||||
## Installation
|
||||
## 安装
|
||||
|
||||
### Using CLI (Recommended)
|
||||
### 使用 CLI（推荐）
|
||||
|
||||
```bash
|
||||
# Install CLI globally
|
||||
# 全局安装 CLI
|
||||
npm install -g uipro-cli
|
||||
|
||||
# Go to your project
|
||||
# 进入你的项目
|
||||
cd /path/to/your/project
|
||||
|
||||
# Install for your AI assistant
|
||||
# 为你的 AI 助手安装
|
||||
uipro init --ai claude # Claude Code
|
||||
uipro init --ai cursor # Cursor
|
||||
uipro init --ai windsurf # Windsurf
|
||||
|
|
@ -40,22 +40,22 @@ 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 # All assistants
|
||||
uipro init --ai all # 所有助手
|
||||
```
|
||||
|
||||
### Other CLI Commands
|
||||
### 其他 CLI 命令
|
||||
|
||||
```bash
|
||||
uipro versions # List available versions
|
||||
uipro update # Update to latest version
|
||||
uipro init --version v1.0.0 # Install specific version
|
||||
uipro versions # 列出可用版本
|
||||
uipro update # 更新到最新版本
|
||||
uipro init --version v1.0.0 # 安装指定版本
|
||||
```
|
||||
|
||||
### Manual Installation
|
||||
### 手动安装
|
||||
|
||||
Copy the appropriate folders to your project:
|
||||
将相应的文件夹复制到你的项目中：
|
||||
|
||||
| AI Assistant | Folders to Copy |
|
||||
| AI 助手 | 需要复制的文件夹 |
|
||||
| -------------- | -------------------------------------------------------------------- |
|
||||
| Claude Code | `.claude/skills/ui-ux-pro-max/` |
|
||||
| Cursor | `.cursor/commands/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` |
|
||||
|
|
@ -67,12 +67,12 @@ Copy the appropriate folders to your project:
|
|||
| 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/` |
|
||||
|
||||
## Prerequisites
|
||||
## 前置要求
|
||||
|
||||
Python 3.x is required for the search script.
|
||||
搜索脚本需要 Python 3.x。
|
||||
|
||||
```bash
|
||||
# Check if Python is installed
|
||||
# 检查是否已安装 Python
|
||||
python3 --version
|
||||
|
||||
# macOS
|
||||
|
|
@ -85,100 +85,100 @@ sudo apt update && sudo apt install python3
|
|||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
## Usage
|
||||
## 使用方法
|
||||
|
||||
### Claude Code
|
||||
|
||||
The skill activates automatically when you request UI/UX work. Just chat naturally:
|
||||
当你请求 UI/UX 工作时，技能会自动激活。只需自然对话：
|
||||
|
||||
```
|
||||
Build a landing page for my SaaS product
|
||||
为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### Cursor / Windsurf / Antigravity
|
||||
|
||||
Use the slash command to invoke the skill:
|
||||
使用斜杠命令调用技能：
|
||||
|
||||
```
|
||||
/ui-ux-pro-max Build a landing page for my SaaS product
|
||||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### Kiro
|
||||
|
||||
Type `/` in chat to see available commands, then select `ui-ux-pro-max`:
|
||||
在聊天中输入 `/` 查看可用命令，然后选择 `ui-ux-pro-max`：
|
||||
|
||||
```
|
||||
/ui-ux-pro-max Build a landing page for my SaaS product
|
||||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### GitHub Copilot
|
||||
|
||||
In VS Code with Copilot, type `/` in chat to see available prompts, then select `ui-ux-pro-max`:
|
||||
在 VS Code 中使用 Copilot，在聊天中输入 `/` 查看可用提示，然后选择 `ui-ux-pro-max`：
|
||||
|
||||
```
|
||||
/ui-ux-pro-max Build a landing page for my SaaS product
|
||||
/ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### Codex CLI
|
||||
|
||||
The skill activates automatically for UI/UX requests. You can also invoke it explicitly:
|
||||
技能会自动激活以处理 UI/UX 请求。你也可以显式调用：
|
||||
|
||||
```
|
||||
$ui-ux-pro-max Build a landing page for my SaaS product
|
||||
$ui-ux-pro-max 为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### Gemini CLI
|
||||
|
||||
The skill activates automatically when you request UI/UX work.
|
||||
当你请求 UI/UX 工作时，技能会自动激活。
|
||||
|
||||
```
|
||||
Build a landing page for my SaaS product
|
||||
为我的 SaaS 产品构建一个落地页
|
||||
```
|
||||
|
||||
### Trae
|
||||
|
||||
_Disclaimer: Trae skill is in beta. Please report any issues or feedback._
|
||||
_免责声明：Trae 技能处于测试阶段。请报告任何问题或反馈。_
|
||||
|
||||
To use Trae skill, you need to switch to **SOLO** mode. If your request is related to skills, skills will be used:
|
||||
要使用 Trae 技能，你需要切换到 **SOLO** 模式。如果你的请求与技能相关，技能将被使用：
|
||||
|
||||
```
|
||||
Build a landing page (frontend ONLY) for my SaaS product.
|
||||
为我的 SaaS 产品构建一个落地页（仅前端）。
|
||||
```
|
||||
|
||||
### Example Prompts
|
||||
### 示例提示
|
||||
|
||||
```
|
||||
Build a landing page for my SaaS product
|
||||
为我的 SaaS 产品构建一个落地页
|
||||
|
||||
Create a dashboard for healthcare analytics
|
||||
创建一个医疗分析仪表板
|
||||
|
||||
Design a portfolio website with dark mode
|
||||
设计一个带深色模式的作品集网站
|
||||
|
||||
Make a mobile app UI for e-commerce
|
||||
制作一个电商移动应用 UI
|
||||
```
|
||||
|
||||
### How It Works
|
||||
### 工作原理
|
||||
|
||||
1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve)
|
||||
2. **Skill activates** - The AI automatically searches the design database for relevant styles, colors, typography, and guidelines
|
||||
3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching design system
|
||||
4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices
|
||||
1. **你提问** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
|
||||
2. **技能激活** - AI 自动搜索设计数据库中相关的风格、颜色、排版和指南
|
||||
3. **智能推荐** - 根据你的产品类型和需求，找到最匹配的设计系统
|
||||
4. **代码生成** - 使用适当的颜色、字体、间距和最佳实践实现 UI
|
||||
|
||||
### Supported Stacks
|
||||
### 支持的技术栈
|
||||
|
||||
The skill provides stack-specific guidelines for:
|
||||
该技能为以下技术栈提供专属指南：
|
||||
|
||||
- **HTML + Tailwind** (default)
|
||||
- **HTML + Tailwind**（默认）
|
||||
- **React** / **Next.js** / **shadcn/ui**
|
||||
- **Vue** / **Nuxt.js** / **Nuxt UI** / **Svelte**
|
||||
- **SwiftUI** / **React Native** / **Flutter**
|
||||
|
||||
Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.
|
||||
只需在提示中提及你偏好的技术栈，或让它默认使用 HTML + Tailwind。
|
||||
|
||||
## Star History
|
||||
## Star 历史
|
||||
|
||||
[](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)
|
||||
|
||||
## License
|
||||
## 许可证
|
||||
|
||||
This project is licensed under the [MIT License](LICENSE).
|
||||
本项目采用 [MIT 许可证](LICENSE)。
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
# uipro-cli
|
||||
|
||||
CLI to install UI/UX Pro Max skill for AI coding assistants.
|
||||
为 AI 编程助手安装 UI/UX Pro Max 技能的 CLI 工具。
|
||||
|
||||
## Installation
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm install -g uipro-cli
|
||||
```
|
||||
|
||||
## Usage
|
||||
## 使用方法
|
||||
|
||||
```bash
|
||||
# Install for specific AI assistant
|
||||
# 为特定 AI 助手安装
|
||||
uipro init --ai claude # Claude Code
|
||||
uipro init --ai cursor # Cursor
|
||||
uipro init --ai windsurf # Windsurf
|
||||
uipro init --ai antigravity # Antigravity
|
||||
uipro init --ai codex # Codex (Skills)
|
||||
uipro init --ai all # All assistants
|
||||
uipro init --ai all # 所有助手
|
||||
|
||||
# Other commands
|
||||
uipro versions # List available versions
|
||||
uipro update # Update to latest version
|
||||
uipro init --version v1.0.0 # Install specific version
|
||||
# 其他命令
|
||||
uipro versions # 列出可用版本
|
||||
uipro update # 更新到最新版本
|
||||
uipro init --version v1.0.0 # 安装指定版本
|
||||
```
|
||||
|
||||
## Development
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
# 安装依赖
|
||||
bun install
|
||||
|
||||
# Run locally
|
||||
# 本地运行
|
||||
bun run src/index.ts --help
|
||||
|
||||
# Build
|
||||
# 构建
|
||||
bun run build
|
||||
|
||||
# Link for local testing
|
||||
# 本地测试链接
|
||||
bun link
|
||||
```
|
||||
|
||||
## License
|
||||
## 许可证
|
||||
|
||||
CC-BY-NC-4.0
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "uipro-cli",
|
||||
"version": "1.3.0",
|
||||
"version": "1.7.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "uipro-cli",
|
||||
"version": "1.3.0",
|
||||
"version": "1.7.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^5.3.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>UI/UX Pro Max - 示例落地页</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white">
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="fixed top-4 left-4 right-4 z-50">
|
||||
<div class="max-w-7xl mx-auto bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-2xl font-bold">UI/UX Pro Max</div>
|
||||
<div class="hidden md:flex gap-8">
|
||||
<a href="#features" class="hover:text-purple-300 transition-colors cursor-pointer">功能</a>
|
||||
<a href="#pricing" class="hover:text-purple-300 transition-colors cursor-pointer">定价</a>
|
||||
<a href="#about" class="hover:text-purple-300 transition-colors cursor-pointer">关于</a>
|
||||
</div>
|
||||
<button class="bg-purple-500 hover:bg-purple-600 px-6 py-2 rounded-lg transition-colors cursor-pointer">
|
||||
开始使用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区 -->
|
||||
<section class="pt-32 pb-20 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h1 class="text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
|
||||
AI 驱动的设计智能
|
||||
</h1>
|
||||
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||
为 AI 编程助手提供专业的 UI/UX 设计知识库，包含 57 种风格、95 个配色方案和 98 条最佳实践
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<button class="bg-purple-500 hover:bg-purple-600 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
||||
立即安装
|
||||
</button>
|
||||
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-lg border border-white/20 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
||||
查看文档
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能展示 -->
|
||||
<section id="features" class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-16">核心功能</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
||||
<div class="text-4xl mb-4">🎨</div>
|
||||
<h3 class="text-2xl font-bold mb-4">57 种 UI 风格</h3>
|
||||
<p class="text-gray-300">玻璃态、极简主义、野兽派、新拟态等现代设计风格</p>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
||||
<div class="text-4xl mb-4">🎯</div>
|
||||
<h3 class="text-2xl font-bold mb-4">95 个配色方案</h3>
|
||||
<p class="text-gray-300">针对不同行业和产品类型的专业配色</p>
|
||||
</div>
|
||||
<div class="bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8 hover:bg-white/15 transition-colors cursor-pointer">
|
||||
<div class="text-4xl mb-4">✨</div>
|
||||
<h3 class="text-2xl font-bold mb-4">98 条 UX 指南</h3>
|
||||
<p class="text-gray-300">最佳实践、反模式和无障碍规则</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 定价 -->
|
||||
<section id="pricing" class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold mb-16">完全免费</h2>
|
||||
<div class="max-w-md mx-auto bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 p-8">
|
||||
<div class="text-5xl font-bold mb-4">$0</div>
|
||||
<p class="text-gray-300 mb-8">开源项目，永久免费使用</p>
|
||||
<button class="w-full bg-purple-500 hover:bg-purple-600 px-8 py-3 rounded-lg text-lg transition-colors cursor-pointer">
|
||||
开始使用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="py-12 px-4 border-t border-white/10">
|
||||
<div class="max-w-7xl mx-auto text-center text-gray-400">
|
||||
<p>© 2024 UI/UX Pro Max. MIT License.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue