diff --git a/.agent/workflows/ui-ux-pro-max.md b/.agent/workflows/ui-ux-pro-max.md index d92ed17..b1111ad 100644 --- a/.agent/workflows/ui-ux-pro-max.md +++ b/.agent/workflows/ui-ux-pro-max.md @@ -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 "" --domain [-n ] +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 "" --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` diff --git a/.codebuddy/commands/ui-ux-pro-max.md b/.codebuddy/commands/ui-ux-pro-max.md index 00ea685..0a00b05 100644 --- a/.codebuddy/commands/ui-ux-pro-max.md +++ b/.codebuddy/commands/ui-ux-pro-max.md @@ -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 "" --domain [-n ] +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 "" --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 diff --git a/.cursor/commands/ui-ux-pro-max.md b/.cursor/commands/ui-ux-pro-max.md index b28cfa5..5c3e9fb 100644 --- a/.cursor/commands/ui-ux-pro-max.md +++ b/.cursor/commands/ui-ux-pro-max.md @@ -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 "" --domain [-n ] +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 "" --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` diff --git a/.qoder/rules/ui-ux-pro-max.md b/.qoder/rules/ui-ux-pro-max.md index 4e7dce8..bcd2bc7 100644 --- a/.qoder/rules/ui-ux-pro-max.md +++ b/.qoder/rules/ui-ux-pro-max.md @@ -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 "" --domain [-n ] +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 "" --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` diff --git a/.roo/commands/ui-ux-pro-max.md b/.roo/commands/ui-ux-pro-max.md index b28cfa5..5c3e9fb 100644 --- a/.roo/commands/ui-ux-pro-max.md +++ b/.roo/commands/ui-ux-pro-max.md @@ -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 "" --domain [-n ] +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 "" --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` diff --git a/CLAUDE.md b/CLAUDE.md index df90676..248aca4 100644 --- a/CLAUDE.md +++ b/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 "" --domain [-n ] +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 "" --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 ` -4. Create PR: `gh pr create` +1. 创建新分支：`git checkout -b feat/...` 或 `fix/...` +2. 提交更改 +3. 推送分支：`git push -u origin <分支>` +4. 创建 PR：`gh pr create` diff --git a/README.md b/README.md index 11b003c..bed1483 100644 --- a/README.md +++ b/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 技能。

UI UX Pro Max

-## 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 历史 [![Star History Chart](https://api.star-history.com/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date) -## License +## 许可证 -This project is licensed under the [MIT License](LICENSE). +本项目采用 [MIT 许可证](LICENSE)。 diff --git a/cli/README.md b/cli/README.md index b4a54c9..08f7f01 100644 --- a/cli/README.md +++ b/cli/README.md @@ -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 diff --git a/cli/package-lock.json b/cli/package-lock.json index 1f558ef..be65662 100644 --- a/cli/package-lock.json +++ b/cli/package-lock.json @@ -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", diff --git a/example-landing-page.html b/example-landing-page.html new file mode 100644 index 0000000..7e7a8b8 --- /dev/null +++ b/example-landing-page.html @@ -0,0 +1,94 @@ + + + + + + UI/UX Pro Max - 示例落地页 + + + + + + + + +
+
+

+ AI 驱动的设计智能 +

+

+ 为 AI 编程助手提供专业的 UI/UX 设计知识库，包含 57 种风格、95 个配色方案和 98 条最佳实践 +

+
+ + +
+
+
+ + +
+
+

核心功能

+
+
+
🎨
+

57 种 UI 风格

+

玻璃态、极简主义、野兽派、新拟态等现代设计风格

+
+
+
🎯
+

95 个配色方案

+

针对不同行业和产品类型的专业配色

+
+
+
✨
+

98 条 UX 指南

+

最佳实践、反模式和无障碍规则

+
+
+
+
+ + +
+
+

完全免费

+
+
$0
+

开源项目，永久免费使用

+ +
+
+
+ + + + + +