添加中文文档翻译和示例页面

- 翻译 README.md 为中文 - 翻译所有 AI 助手的工作流文档 - 翻译 CLI 工具说明 - 添加示例落地页 HTML - 更新 CLAUDE.md 为中文
2026-01-14 20:16:00 +08:00 · 2026-01-14 20:16:00 +08:00 · 8c24cfd73d
parent 9149e5f2fa
commit 8c24cfd73d
10 changed files with 783 additions and 689 deletions
--- 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.
+- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
- **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`
+- **技术栈**：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
+1. **Product（产品）** - 获取产品类型的风格推荐
-2. **Style** - Get detailed style guide (colors, effects, frameworks)
+2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
-3. **Typography** - Get font pairings with Google Fonts imports
+3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
-4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
-5. **Landing** - Get page structure (if landing page)
+5. **Landing（落地页）** - 获取页面结构（如果是落地页）
-6. **Chart** - Get chart recommendations (if dashboard/analytics)
+6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
-7. **UX** - Get best practices and anti-patterns
+7. **UX** - 获取最佳实践和反模式
-8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+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 |
+| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
-### Available Stacks
+### 可用技术栈
-| Stack | Focus |
+| 技术栈 | 重点 |
 |-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
-| `react` | State, hooks, performance, patterns |
+| `react` | 状态、钩子、性能、模式 |
-| `nextjs` | SSR, routing, images, API routes |
+| `nextjs` | SSR、路由、图片、API 路由 |
-| `vue` | Composition API, Pinia, Vue Router |
+| `vue` | Composition API、Pinia、Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
+| `svelte` | Runes、stores、SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
+| `swiftui` | 视图、状态、导航、动画 |
-| `react-native` | Components, Navigation, Lists |
+| `react-native` | 组件、导航、列表 |
-| `flutter` | Widgets, State, Layout, Theming |
+| `flutter` | 小部件、状态、布局、主题 |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `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"
+1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
-2. **Search multiple times** - Different keywords reveal different insights
+2. **多次搜索** - 不同关键词揭示不同见解
-3. **Combine domains** - Style + Typography + Color = Complete design system
+3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
-4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
-5. **Use stack flag** - Get implementation-specific best practices
+5. **使用技术栈标志** - 获取特定实现的最佳实践
-6. **Iterate** - If first search doesn't match, try different keywords
+6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
-7. **Split Into Multiple Files** - For better maintainability:
+7. **拆分为多个文件** - 为了更好的可维护性：
-   - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+   - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
-   - Extract reusable styles into dedicated files
+   - 将可重用样式提取到专用文件
-   - Keep each file focused and under 200-300 lines
+   - 保持每个文件专注且少于 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 |
+| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
-| **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 |
+| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| **一致的图标尺寸** | 使用固定的 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 |
+| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
-| **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) |
+| **平滑过渡** | 使用 `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) |
+| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| **边框可见性** | 亮色模式使用 `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` |
+| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `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 |
+| **一致的最大宽度** | 使用相同的 `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)
+- [ ] 未使用表情符号作为图标（使用 SVG 代替）
- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] 品牌标志正确（从 Simple Icons 验证）
- [ ] Hover states don't cause layout shift
+- [ ] 悬停状态不会导致布局偏移
-### Interaction
+### 交互
- [ ] All clickable elements have `cursor-pointer`
+- [ ] 所有可点击元素都有 `cursor-pointer`
- [ ] Hover states provide clear visual feedback
+- [ ] 悬停状态提供清晰的视觉反馈
- [ ] Transitions are smooth (150-300ms)
+- [ ] 过渡平滑（150-300ms）
- [ ] Focus states visible for keyboard navigation
+- [ ] 键盘导航的焦点状态可见
-### Light/Dark Mode
+### 亮色/暗色模式
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
- [ ] Glass/transparent elements visible in light mode
+- [ ] 玻璃/透明元素在亮色模式下可见
- [ ] Borders visible in both modes
+- [ ] 边框在两种模式下都可见
- [ ] Test both modes before delivery
+- [ ] 交付前测试两种模式
-### Layout
+### 布局
- [ ] Floating elements have proper spacing from edges
+- [ ] 浮动元素与边缘有适当间距
- [ ] No content hidden behind fixed navbars
+- [ ] 没有内容隐藏在固定导航栏后面
- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] 在 320px、768px、1024px、1440px 下响应式
- [ ] No horizontal scroll on mobile
+- [ ] 移动端无横向滚动
-### Accessibility
+### 无障碍
- [ ] All images have alt text
+- [ ] 所有图片都有 alt 文本
- [ ] Form inputs have labels
+- [ ] 表单输入都有标签
- [ ] Color is not the only indicator
+- [ ] 颜色不是唯一指示器
- [ ] `prefers-reduced-motion` respected
+- [ ] 遵守 `prefers-reduced-motion`
--- 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.
+-   **产品类型**：SaaS、电商、作品集、仪表板、落地页等
-   **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`
+-   **技术栈**：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
+1. **Product（产品）** - 获取产品类型的风格推荐
-2. **Style** - Get detailed style guide (colors, effects, frameworks)
+2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
-3. **Typography** - Get font pairings with Google Fonts imports
+3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
-4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
-5. **Landing** - Get page structure (if landing page)
+5. **Landing（落地页）** - 获取页面结构（如果是落地页）
-6. **Chart** - Get chart recommendations (if dashboard/analytics)
+6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
-7. **UX** - Get best practices and anti-patterns
+7. **UX** - 获取最佳实践和反模式
-8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+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 |
+| `product`    | 产品类型推荐         | SaaS、电商、作品集、医疗、美妆、服务 |
-| `style`      | UI styles, colors, effects           | glassmorphism, minimalism, dark mode, brutalism          |
+| `style`      | UI 风格、颜色、效果           | 玻璃态、极简主义、深色模式、野兽派          |
-| `typography` | Font pairings, Google Fonts          | elegant, playful, professional, modern                   |
+| `typography` | 字体配对、Google Fonts          | 优雅、活泼、专业、现代                   |
-| `color`      | Color palettes by product type       | saas, ecommerce, healthcare, beauty, fintech, service    |
+| `color`      | 按产品类型的配色方案       | saas、电商、医疗、美妆、金融科技、服务    |
-| `landing`    | Page structure, CTA strategies       | hero, hero-centric, testimonial, pricing, social-proof   |
+| `landing`    | 页面结构、CTA 策略       | 英雄区、英雄中心、推荐、定价、社会证明   |
-| `chart`      | Chart types, library recommendations | trend, comparison, timeline, funnel, pie                 |
+| `chart`      | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图                 |
-| `ux`         | Best practices, anti-patterns        | animation, accessibility, z-index, loading               |
+| `ux`         | 最佳实践、反模式        | 动画、无障碍、z-index、加载               |
-| `prompt`     | AI prompts, CSS keywords             | (style name)                                             |
+| `prompt`     | AI 提示、CSS 关键词             | （风格名称）                                             |
-### Available Stacks
+### 可用技术栈
-| Stack           | Focus                                          |
+| 技术栈           | 重点                                          |
 | --------------- | ---------------------------------------------- |
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
-| `react`         | State, hooks, performance, patterns            |
+| `react`         | 状态、钩子、性能、模式            |
-| `nextjs`        | SSR, routing, images, API routes               |
+| `nextjs`        | SSR、路由、图片、API 路由               |
-| `vue`           | Composition API, Pinia, Vue Router             |
+| `vue`           | Composition API、Pinia、Vue Router             |
-| `svelte`        | Runes, stores, SvelteKit                       |
+| `svelte`        | Runes、stores、SvelteKit                       |
-| `swiftui`       | Views, State, Navigation, Animation            |
+| `swiftui`       | 视图、状态、导航、动画            |
-| `react-native`  | Components, Navigation, Lists                  |
+| `react-native`  | 组件、导航、列表                  |
-| `flutter`       | Widgets, State, Layout, Theming                |
+| `flutter`       | 小部件、状态、布局、主题                |
-| `shadcn`        | shadcn/ui components, theming, forms, patterns |
+| `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"
+1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
-2. **Search multiple times** - Different keywords reveal different insights
+2. **多次搜索** - 不同关键词揭示不同见解
-3. **Combine domains** - Style + Typography + Color = Complete design system
+3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
-4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
-5. **Use stack flag** - Get implementation-specific best practices
+5. **使用技术栈标志** - 获取特定实现的最佳实践
-6. **Iterate** - If first search doesn't match, try different keywords
+6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
-7. **Split Into Multiple Files** - For better maintainability:
+7. **拆分为多个文件** - 为了更好的可维护性：
-    - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+    - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
-    - Extract reusable styles into dedicated files
+    - 将可重用样式提取到专用文件
-    - Keep each file focused and under 200-300 lines
+    - 保持每个文件专注且少于 200-300 行
 ---
-## Common Rules for Professional UI
+## 专业 UI 的通用规则
-These are frequently overlooked issues that make UI look unprofessional:
+这些是经常被忽视的问题，会让 UI 看起来不专业：
 ### Icons & Visual Elements
--- 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.
+- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
- **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`
+- **技术栈**：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
+1. **Product（产品）** - 获取产品类型的风格推荐
-2. **Style** - Get detailed style guide (colors, effects, frameworks)
+2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
-3. **Typography** - Get font pairings with Google Fonts imports
+3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
-4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
-5. **Landing** - Get page structure (if landing page)
+5. **Landing（落地页）** - 获取页面结构（如果是落地页）
-6. **Chart** - Get chart recommendations (if dashboard/analytics)
+6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
-7. **UX** - Get best practices and anti-patterns
+7. **UX** - 获取最佳实践和反模式
-8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+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 |
+| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
-### Available Stacks
+### 可用技术栈
-| Stack | Focus |
+| 技术栈 | 重点 |
 |-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
-| `react` | State, hooks, performance, patterns |
+| `react` | 状态、钩子、性能、模式 |
-| `nextjs` | SSR, routing, images, API routes |
+| `nextjs` | SSR、路由、图片、API 路由 |
-| `vue` | Composition API, Pinia, Vue Router |
+| `vue` | Composition API、Pinia、Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
+| `svelte` | Runes、stores、SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
+| `swiftui` | 视图、状态、导航、动画 |
-| `react-native` | Components, Navigation, Lists |
+| `react-native` | 组件、导航、列表 |
-| `flutter` | Widgets, State, Layout, Theming |
+| `flutter` | 小部件、状态、布局、主题 |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `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"
+1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
-2. **Search multiple times** - Different keywords reveal different insights
+2. **多次搜索** - 不同关键词揭示不同见解
-3. **Combine domains** - Style + Typography + Color = Complete design system
+3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
-4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
-5. **Use stack flag** - Get implementation-specific best practices
+5. **使用技术栈标志** - 获取特定实现的最佳实践
-6. **Iterate** - If first search doesn't match, try different keywords
+6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
-7. **Split Into Multiple Files** - For better maintainability:
+7. **拆分为多个文件** - 为了更好的可维护性：
-   - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+   - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
-   - Extract reusable styles into dedicated files
+   - 将可重用样式提取到专用文件
-   - Keep each file focused and under 200-300 lines
+   - 保持每个文件专注且少于 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 |
+| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
-| **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 |
+| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| **一致的图标尺寸** | 使用固定的 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 |
+| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
-| **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) |
+| **平滑过渡** | 使用 `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) |
+| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| **边框可见性** | 亮色模式使用 `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` |
+| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `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 |
+| **一致的最大宽度** | 使用相同的 `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)
+- [ ] 未使用表情符号作为图标（使用 SVG 代替）
- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] 品牌标志正确（从 Simple Icons 验证）
- [ ] Hover states don't cause layout shift
+- [ ] 悬停状态不会导致布局偏移
-### Interaction
+### 交互
- [ ] All clickable elements have `cursor-pointer`
+- [ ] 所有可点击元素都有 `cursor-pointer`
- [ ] Hover states provide clear visual feedback
+- [ ] 悬停状态提供清晰的视觉反馈
- [ ] Transitions are smooth (150-300ms)
+- [ ] 过渡平滑（150-300ms）
- [ ] Focus states visible for keyboard navigation
+- [ ] 键盘导航的焦点状态可见
-### Light/Dark Mode
+### 亮色/暗色模式
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
- [ ] Glass/transparent elements visible in light mode
+- [ ] 玻璃/透明元素在亮色模式下可见
- [ ] Borders visible in both modes
+- [ ] 边框在两种模式下都可见
- [ ] Test both modes before delivery
+- [ ] 交付前测试两种模式
-### Layout
+### 布局
- [ ] Floating elements have proper spacing from edges
+- [ ] 浮动元素与边缘有适当间距
- [ ] No content hidden behind fixed navbars
+- [ ] 没有内容隐藏在固定导航栏后面
- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] 在 320px、768px、1024px、1440px 下响应式
- [ ] No horizontal scroll on mobile
+- [ ] 移动端无横向滚动
-### Accessibility
+### 无障碍
- [ ] All images have alt text
+- [ ] 所有图片都有 alt 文本
- [ ] Form inputs have labels
+- [ ] 表单输入都有标签
- [ ] Color is not the only indicator
+- [ ] 颜色不是唯一指示器
- [ ] `prefers-reduced-motion` respected
+- [ ] 遵守 `prefers-reduced-motion`
--- 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.
+- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
- **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`
+- **技术栈**：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
+1. **Product（产品）** - 获取产品类型的风格推荐
-2. **Style** - Get detailed style guide (colors, effects, frameworks)
+2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
-3. **Typography** - Get font pairings with Google Fonts imports
+3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
-4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
-5. **Landing** - Get page structure (if landing page)
+5. **Landing（落地页）** - 获取页面结构（如果是落地页）
-6. **Chart** - Get chart recommendations (if dashboard/analytics)
+6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
-7. **UX** - Get best practices and anti-patterns
+7. **UX** - 获取最佳实践和反模式
-8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+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 |
+| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
-### Available Stacks
+### 可用技术栈
-| Stack | Focus |
+| 技术栈 | 重点 |
 |-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
-| `react` | State, hooks, performance, patterns |
+| `react` | 状态、钩子、性能、模式 |
-| `nextjs` | SSR, routing, images, API routes |
+| `nextjs` | SSR、路由、图片、API 路由 |
-| `vue` | Composition API, Pinia, Vue Router |
+| `vue` | Composition API、Pinia、Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
+| `svelte` | Runes、stores、SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
+| `swiftui` | 视图、状态、导航、动画 |
-| `react-native` | Components, Navigation, Lists |
+| `react-native` | 组件、导航、列表 |
-| `flutter` | Widgets, State, Layout, Theming |
+| `flutter` | 小部件、状态、布局、主题 |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `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"
+1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
-2. **Search multiple times** - Different keywords reveal different insights
+2. **多次搜索** - 不同关键词揭示不同见解
-3. **Combine domains** - Style + Typography + Color = Complete design system
+3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
-4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
-5. **Use stack flag** - Get implementation-specific best practices
+5. **使用技术栈标志** - 获取特定实现的最佳实践
-6. **Iterate** - If first search doesn't match, try different keywords
+6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
-7. **Split Into Multiple Files** - For better maintainability:
+7. **拆分为多个文件** - 为了更好的可维护性：
-   - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+   - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
-   - Extract reusable styles into dedicated files
+   - 将可重用样式提取到专用文件
-   - Keep each file focused and under 200-300 lines
+   - 保持每个文件专注且少于 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 |
+| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 :art: :rocket: :gear: 作为 UI 图标 |
-| **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 |
+| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| **一致的图标尺寸** | 使用固定的 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 |
+| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
-| **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) |
+| **平滑过渡** | 使用 `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) |
+| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| **边框可见性** | 亮色模式使用 `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` |
+| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `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 |
+| **一致的最大宽度** | 使用相同的 `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)
+- [ ] 未使用表情符号作为图标（使用 SVG 代替）
- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] 品牌标志正确（从 Simple Icons 验证）
- [ ] Hover states don't cause layout shift
+- [ ] 悬停状态不会导致布局偏移
-### Interaction
+### 交互
- [ ] All clickable elements have `cursor-pointer`
+- [ ] 所有可点击元素都有 `cursor-pointer`
- [ ] Hover states provide clear visual feedback
+- [ ] 悬停状态提供清晰的视觉反馈
- [ ] Transitions are smooth (150-300ms)
+- [ ] 过渡平滑（150-300ms）
- [ ] Focus states visible for keyboard navigation
+- [ ] 键盘导航的焦点状态可见
-### Light/Dark Mode
+### 亮色/暗色模式
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
- [ ] Glass/transparent elements visible in light mode
+- [ ] 玻璃/透明元素在亮色模式下可见
- [ ] Borders visible in both modes
+- [ ] 边框在两种模式下都可见
- [ ] Test both modes before delivery
+- [ ] 交付前测试两种模式
-### Layout
+### 布局
- [ ] Floating elements have proper spacing from edges
+- [ ] 浮动元素与边缘有适当间距
- [ ] No content hidden behind fixed navbars
+- [ ] 没有内容隐藏在固定导航栏后面
- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] 在 320px、768px、1024px、1440px 下响应式
- [ ] No horizontal scroll on mobile
+- [ ] 移动端无横向滚动
-### Accessibility
+### 无障碍
- [ ] All images have alt text
+- [ ] 所有图片都有 alt 文本
- [ ] Form inputs have labels
+- [ ] 表单输入都有标签
- [ ] Color is not the only indicator
+- [ ] 颜色不是唯一指示器
- [ ] `prefers-reduced-motion` respected
+- [ ] 遵守 `prefers-reduced-motion`
--- 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.
+- **产品类型**：SaaS、电商、作品集、仪表板、落地页等
- **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`
+- **技术栈**：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
+1. **Product（产品）** - 获取产品类型的风格推荐
-2. **Style** - Get detailed style guide (colors, effects, frameworks)
+2. **Style（风格）** - 获取详细风格指南（颜色、效果、框架）
-3. **Typography** - Get font pairings with Google Fonts imports
+3. **Typography（排版）** - 获取字体配对及 Google Fonts 导入
-4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
+4. **Color（颜色）** - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
-5. **Landing** - Get page structure (if landing page)
+5. **Landing（落地页）** - 获取页面结构（如果是落地页）
-6. **Chart** - Get chart recommendations (if dashboard/analytics)
+6. **Chart（图表）** - 获取图表推荐（如果是仪表板/分析）
-7. **UX** - Get best practices and anti-patterns
+7. **UX** - 获取最佳实践和反模式
-8. **Stack** - Get stack-specific guidelines (default: html-tailwind)
+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 |
+| `product` | 产品类型推荐 | SaaS、电商、作品集、医疗、美妆、服务 |
-| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `style` | UI 风格、颜色、效果 | 玻璃态、极简主义、深色模式、野兽派 |
-| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `typography` | 字体配对、Google Fonts | 优雅、活泼、专业、现代 |
-| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `color` | 按产品类型的配色方案 | saas、电商、医疗、美妆、金融科技、服务 |
-| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `landing` | 页面结构、CTA 策略 | 英雄区、英雄中心、推荐、定价、社会证明 |
-| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `chart` | 图表类型、库推荐 | 趋势、对比、时间线、漏斗、饼图 |
-| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `ux` | 最佳实践、反模式 | 动画、无障碍、z-index、加载 |
-| `prompt` | AI prompts, CSS keywords | (style name) |
+| `prompt` | AI 提示、CSS 关键词 | （风格名称） |
-### Available Stacks
+### 可用技术栈
-| Stack | Focus |
+| 技术栈 | 重点 |
 |-------|-------|
-| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `html-tailwind` | Tailwind 工具类、响应式、无障碍（默认） |
-| `react` | State, hooks, performance, patterns |
+| `react` | 状态、钩子、性能、模式 |
-| `nextjs` | SSR, routing, images, API routes |
+| `nextjs` | SSR、路由、图片、API 路由 |
-| `vue` | Composition API, Pinia, Vue Router |
+| `vue` | Composition API、Pinia、Vue Router |
-| `svelte` | Runes, stores, SvelteKit |
+| `svelte` | Runes、stores、SvelteKit |
-| `swiftui` | Views, State, Navigation, Animation |
+| `swiftui` | 视图、状态、导航、动画 |
-| `react-native` | Components, Navigation, Lists |
+| `react-native` | 组件、导航、列表 |
-| `flutter` | Widgets, State, Layout, Theming |
+| `flutter` | 小部件、状态、布局、主题 |
-| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `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"
+1. **关键词要具体** - "医疗 SaaS 仪表板" > "应用"
-2. **Search multiple times** - Different keywords reveal different insights
+2. **多次搜索** - 不同关键词揭示不同见解
-3. **Combine domains** - Style + Typography + Color = Complete design system
+3. **组合领域** - 风格 + 排版 + 颜色 = 完整设计系统
-4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+4. **始终检查 UX** - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
-5. **Use stack flag** - Get implementation-specific best practices
+5. **使用技术栈标志** - 获取特定实现的最佳实践
-6. **Iterate** - If first search doesn't match, try different keywords
+6. **迭代** - 如果首次搜索不匹配，尝试不同关键词
-7. **Split Into Multiple Files** - For better maintainability:
+7. **拆分为多个文件** - 为了更好的可维护性：
-   - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`)
+   - 将组件分离到单独文件（例如 `Header.tsx`、`Footer.tsx`）
-   - Extract reusable styles into dedicated files
+   - 将可重用样式提取到专用文件
-   - Keep each file focused and under 200-300 lines
+   - 保持每个文件专注且少于 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 |
+| **不使用表情符号图标** | 使用 SVG 图标（Heroicons、Lucide、Simple Icons） | 使用表情符号如 🎨 🚀 ⚙️ 作为 UI 图标 |
-| **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 |
+| **正确的品牌标志** | 从 Simple Icons 研究官方 SVG | 猜测或使用不正确的标志路径 |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+| **一致的图标尺寸** | 使用固定的 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 |
+| **光标指针** | 为所有可点击/可悬停的卡片添加 `cursor-pointer` | 在交互元素上保留默认光标 |
-| **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) |
+| **平滑过渡** | 使用 `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) |
+| **亮色模式玻璃卡片** | 使用 `bg-white/80` 或更高不透明度 | 使用 `bg-white/10`（太透明） |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **亮色文本对比** | 文本使用 `#0F172A` (slate-900) | 正文文本使用 `#94A3B8` (slate-400) |
-| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **亮色柔和文本** | 最少使用 `#475569` (slate-600) | 使用 gray-400 或更浅 |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+| **边框可见性** | 亮色模式使用 `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` |
+| **浮动导航栏** | 添加 `top-4 left-4 right-4` 间距 | 将导航栏固定到 `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 |
+| **一致的最大宽度** | 使用相同的 `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)
+- [ ] 未使用表情符号作为图标（使用 SVG 代替）
- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] 品牌标志正确（从 Simple Icons 验证）
- [ ] Hover states don't cause layout shift
+- [ ] 悬停状态不会导致布局偏移
-### Interaction
+### 交互
- [ ] All clickable elements have `cursor-pointer`
+- [ ] 所有可点击元素都有 `cursor-pointer`
- [ ] Hover states provide clear visual feedback
+- [ ] 悬停状态提供清晰的视觉反馈
- [ ] Transitions are smooth (150-300ms)
+- [ ] 过渡平滑（150-300ms）
- [ ] Focus states visible for keyboard navigation
+- [ ] 键盘导航的焦点状态可见
-### Light/Dark Mode
+### 亮色/暗色模式
- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] 亮色模式文本有足够对比度（最少 4.5:1）
- [ ] Glass/transparent elements visible in light mode
+- [ ] 玻璃/透明元素在亮色模式下可见
- [ ] Borders visible in both modes
+- [ ] 边框在两种模式下都可见
- [ ] Test both modes before delivery
+- [ ] 交付前测试两种模式
-### Layout
+### 布局
- [ ] Floating elements have proper spacing from edges
+- [ ] 浮动元素与边缘有适当间距
- [ ] No content hidden behind fixed navbars
+- [ ] 没有内容隐藏在固定导航栏后面
- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] 在 320px、768px、1024px、1440px 下响应式
- [ ] No horizontal scroll on mobile
+- [ ] 移动端无横向滚动
-### Accessibility
+### 无障碍
- [ ] All images have alt text
+- [ ] 所有图片都有 alt 文本
- [ ] Form inputs have labels
+- [ ] 表单输入都有标签
- [ ] Color is not the only indicator
+- [ ] 颜色不是唯一指示器
- [ ] `prefers-reduced-motion` respected
+- [ ] 遵守 `prefers-reduced-motion`
--- 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 "<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)
+- `product` - 产品类型推荐（SaaS、电商、作品集）
- `style` - UI styles (glassmorphism, minimalism, brutalism)
+- `style` - UI 风格（玻璃态、极简主义、野兽派）
- `typography` - Font pairings with Google Fonts imports
+- `typography` - 字体配对及 Google Fonts 导入
- `color` - Color palettes by product type
+- `color` - 按产品类型的配色方案
- `landing` - Page structure and CTA strategies
+- `landing` - 页面结构和 CTA 策略
- `chart` - Chart types and library recommendations
+- `chart` - 图表类型和库推荐
- `ux` - Best practices and anti-patterns
+- `ux` - 最佳实践和反模式
- `prompt` - AI prompts and CSS keywords
+- `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
+.claude/skills/ui-ux-pro-max/    # Claude Code 技能
-├── SKILL.md                      # Skill definition with workflow instructions
+├── SKILL.md                      # 包含工作流指令的技能定义
 ├── scripts/
-│   ├── search.py                 # CLI entry point
+│   ├── search.py                 # CLI 入口点
-│   └── core.py                   # BM25 + regex hybrid search engine
+│   └── core.py                   # BM25 + 正则混合搜索引擎
-└── data/                         # CSV databases (styles, colors, typography, etc.)
+└── data/                         # CSV 数据库（风格、颜色、排版等）
-    └── stacks/                   # Stack-specific guidelines (8 CSV files)
+    └── stacks/                   # 特定技术栈指南（8 个 CSV 文件）
-.windsurf/workflows/              # Windsurf workflow copy
+.windsurf/workflows/              # Windsurf 工作流副本
-.agent/workflows/ui-ux-pro-max/   # Generic agent workflow copy
+.agent/workflows/ui-ux-pro-max/   # 通用代理工作流副本
-.github/prompts/                  # GitHub Copilot prompt
+.github/prompts/                  # GitHub Copilot 提示
-.kiro/steering/                   # Kiro steering file
+.kiro/steering/                   # Kiro 引导文件
-.trae/skills/ui-ux-pro-max/       # Trae skill copy
+.trae/skills/ui-ux-pro-max/       # Trae 技能副本
-.shared/ui-ux-pro-max/            # Shared data copy
+.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/`
+- **数据和脚本**（`data/`、`scripts/`）：将更改复制到 `.shared/ui-ux-pro-max/` 和 `cli/assets/.shared/ui-ux-pro-max/`
- **SKILL.md**: Update corresponding files in `.agent/`, `.cursor/`, `.windsurf/`, `.github/prompts/`, `.kiro/steering/`, `.trae/skills/`
+- **SKILL.md**：更新 `.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/`)
+- **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/...`
+1. 创建新分支：`git checkout -b feat/...` 或 `fix/...`
-2. Commit changes
+2. 提交更改
-3. Push branch: `git push -u origin <branch>`
+3. 推送分支：`git push -u origin <分支>`
-4. Create PR: `gh pr create`
+4. 创建 PR：`gh pr create`
--- 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 技能。
 <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
+- **57 种 UI 风格** - 玻璃态、粘土态、极简主义、野兽派、新拟态、便当网格、深色模式等
- **95 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.
+- **95 个配色方案** - 针对 SaaS、电商、医疗、金融科技、美妆等行业的专属配色
- **56 Font Pairings** - Curated typography combinations with Google Fonts imports
+- **56 个字体配对** - 精选的排版组合，包含 Google Fonts 导入
- **24 Chart Types** - Recommendations for dashboards and analytics
+- **24 种图表类型** - 适用于仪表板和数据分析的推荐
- **11 Tech Stacks** - React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui
+- **11 个技术栈** - 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
+- **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 versions              # 列出可用版本
-uipro update                # Update to latest version
+uipro update                # 更新到最新版本
-uipro init --version v1.0.0 # Install specific version
+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)
+1. **你提问** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
-2. **Skill activates** - The AI automatically searches the design database for relevant styles, colors, typography, and guidelines
+2. **技能激活** - AI 自动搜索设计数据库中相关的风格、颜色、排版和指南
-3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching design system
+3. **智能推荐** - 根据你的产品类型和需求，找到最匹配的设计系统
-4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices
+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)。
--- 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 versions              # 列出可用版本
-uipro update                # Update to latest version
+uipro update                # 更新到最新版本
-uipro init --version v1.0.0 # Install specific version
+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
--- 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",
--- a/example-landing-page.html
+++ b/example-landing-page.html
@ -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>