wehub/nextlevelbuilder--ui-ux-pro-max-skill
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

docs: make Chinese README the default
Release / Semantic release (push) Has been cancelled
Details
Smoke test data / smoke (push) Has been cancelled
Details

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 08:35:17 +00:00
parent 0b97a65051
commit 0243f1f65b
1 changed files with 327 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+327 -328
View File
@@ -1,3 +1,9 @@
<!-- WEHUB_ZH_README -->
> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) · [上游 README](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
# [UI UX Pro Max](https://uupm.cc)
<p align="center">
@@ -7,8 +13,8 @@
<p align="center">
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a>
<img src="https://img.shields.io/badge/reasoning_rules-161-green?style=for-the-badge" alt="161 Reasoning Rules">
<img src="https://img.shields.io/badge/UI_styles-67-purple?style=for-the-badge" alt="67 UI Styles">
<img src="https://img.shields.io/badge/reasoning_rules-161-green?style=for-the-badge" alt="161 条推理规则">
<img src="https://img.shields.io/badge/UI_styles-67-purple?style=for-the-badge" alt="67 种 UI 风格">
<img src="https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white" alt="Python 3.x">
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green" alt="License"></a>
</p>
@@ -17,10 +23,10 @@
<a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/v/ui-ux-pro-max-cli?style=flat-square&logo=npm&label=CLI" alt="npm"></a>
<a href="https://www.npmjs.com/package/ui-ux-pro-max-cli"><img src="https://img.shields.io/npm/dm/ui-ux-pro-max-cli?style=flat-square&label=downloads" alt="npm downloads"></a>
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/stargazers"><img src="https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github" alt="GitHub stars"></a>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Support%20Development-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-支持开发-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a>
</p>
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
一个为跨多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
<p align="center">
<a href="https://uupm.cc">
@@ -29,273 +35,273 @@ An AI skill that provides design intelligence for building professional UI/UX ac
</p>
<p align="center">
<b>If you find this useful, consider supporting the project:</b><br><br>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal Donate"></a>
<b>如果这个项目对你有帮助，请考虑支持：</b><br><br>
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-捐赠-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal 捐赠"></a>
</p>
<p align="center">
<i>Other projects</i><br>
<i>其他项目</i><br>
<a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>
</p>
## What's New in v2.0
## v2.0 新特性
### Intelligent Design System Generation
### 智能设计系统生成
The flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.
v2.0 的旗舰特性是**设计系统生成器**——一个 AI 驱动的推理引擎，可在数秒内分析你的项目需求并生成完整、定制化的设计系统。
```
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
| 目标：Serenity Spa - 推荐设计系统 |
+----------------------------------------------------------------------------------------+
| |
| PATTERN: Hero-Centric + Social Proof |
| Conversion: Emotion-driven with trust elements |
| CTA: Above fold, repeated after testimonials |
| Sections: |
| 1. Hero |
| 2. Services |
| 3. Testimonials |
| 4. Booking |
| 5. Contact |
| 模式：以 Hero 为中心 + 社交证明 |
| 转化：情感驱动，带信任元素 |
| CTA：首屏展示，客户评价后重复 |
| 版块： |
| 1. 主视觉区 (Hero) |
| 2. 服务 |
| 3. 客户评价 |
| 4. 预约 |
| 5. 联系我们 |
| |
| STYLE: Soft UI Evolution |
| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |
| Best For: Wellness, beauty, lifestyle brands, premium services |
| Performance: Excellent | Accessibility: WCAG AA |
| 风格：柔和 UI 进化版 (Soft UI Evolution) |
| 关键词：柔和阴影、微妙深度、 calming、高级质感、有机形状 |
| 适用：健康、美容、生活方式品牌、高端服务 |
| 性能：优秀 | 无障碍：WCAG AA |
| |
| COLORS: |
| Primary: #E8B4B8 (Soft Pink) |
| Secondary: #A8D5BA (Sage Green) |
| CTA: #D4AF37 (Gold) |
| Background: #FFF5F5 (Warm White) |
| Text: #2D3436 (Charcoal) |
| Notes: Calming palette with gold accents for luxury feel |
| 配色： |
| 主色： #E8B4B8 (柔和粉) |
| 辅色： #A8D5BA (鼠尾草绿) |
| CTA： #D4AF37 (金色) |
| 背景： #FFF5F5 (暖白) |
| 文字： #2D3436 (炭灰) |
| 备注： calming 配色，金色点缀增添奢华感 |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| Best For: Luxury brands, wellness, beauty, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| 字体：Cormorant Garamond / Montserrat |
| 调性：优雅、 calming、精致 |
| 适用：奢侈品牌、健康、美容、编辑类 |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| KEY EFFECTS: |
| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states |
| 关键效果： |
| 柔和阴影 + 平滑过渡 (200-300ms) + 细腻悬停状态 |
| |
| AVOID (Anti-patterns): |
| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |
| 避免 (反模式)： |
| 亮霓虹色 + 生硬动画 + 深色模式 + AI 紫/粉渐变 (银行业) |
| |
| PRE-DELIVERY CHECKLIST: |
| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |
| [ ] cursor-pointer on all clickable elements |
| [ ] Hover states with smooth transitions (150-300ms) |
| [ ] Light mode: text contrast 4.5:1 minimum |
| [ ] Focus states visible for keyboard nav |
| [ ] prefers-reduced-motion respected |
| [ ] Responsive: 375px, 768px, 1024px, 1440px |
| 交付前检查清单： |
| [ ] 不使用表情符号作为图标 (使用 SVG: Heroicons/Lucide) |
| [ ] 所有可点击元素有 cursor-pointer |
| [ ] 悬停状态带平滑过渡 (150-300ms) |
| [ ] 浅色模式：文字对比度至少 4.5:1 |
| [ ] Focus 状态对键盘导航可见 |
| [ ] 尊重 prefers-reduced-motion 偏好 |
| [ ] 响应式：375px、768px、1024px、1440px |
| |
+----------------------------------------------------------------------------------------+
```
### How Design System Generation Works
### 设计系统生成的工作原理
```
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a landing page for my beauty spa" │
│ 1. 用户请求 │
│ "为我的美容院搭建落地页" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │
│ • Product type matching (161 categories) │
│ • Style recommendations (67 styles) │
│ • Color palette selection (161 palettes) │
│ • Landing page patterns (24 patterns) │
│ • Typography pairing (57 font combinations) │
│ 2. 多域搜索 (5 个并行搜索) │
│ • 产品类型匹配 (161 个分类) │
│ • 风格推荐 (67 种风格) │
│ • 配色方案选择 (161 套配色) │
│ • 落地页模式 (24 种模式) │
│ • 字体配对 (57 种组合) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. REASONING ENGINE │
│ • Match product → UI category rules │
│ • Apply style priorities (BM25 ranking) │
│ • Filter anti-patterns for industry │
│ • Process decision rules (JSON conditions) │
│ 3. 推理引擎 │
│ • 匹配产品 → UI 分类规则 │
│ • 应用风格优先级 (BM25 排序) │
│ • 过滤行业反模式 │
│ • 处理决策规则 (JSON 条件) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. COMPLETE DESIGN SYSTEM OUTPUT │
│ Pattern + Style + Colors + Typography + Effects │
│ + Anti-patterns to avoid + Pre-delivery checklist │
│ 4. 完整设计系统输出 │
│ 模式 + 风格 + 配色 + 字体 + 效果 │
│ + 避免的反模式 + 交付前检查清单 │
└─────────────────────────────────────────────────────────────────┘
```
### 161 Industry-Specific Reasoning Rules
### 161 条行业特定推理规则
The reasoning engine includes specialized rules for:
推理引擎包含针对以下领域的专门规则：
| Category | Examples |
|----------|----------|
| **Tech & SaaS** | SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform |
| **Finance** | Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool |
| **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder |
| **E-commerce** | General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery |
| **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment |
| **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor |
| **Lifestyle** | Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker |
| **Emerging Tech** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet |
| 分类 | 示例 |
|------|------|
| **科技与 SaaS** | SaaS、微 SaaS、B2B 服务、开发者工具 / IDE、AI/聊天机器人平台、网络安全平台 |
| **金融** | 金融科技/加密货币、银行、保险、个人财务追踪、发票与账单工具 |
| **医疗健康** | 医疗诊所、药房、牙科、兽医、心理健康、用药提醒 |
| **电子商务** | 综合电商、奢侈品、二手交易平台 (P2P)、订阅盒、外卖配送 |
| **服务** | 美容/水疗、餐饮、酒店、法律、家政服务、预约与预订 |
| **创意** | 作品集、代理公司、摄影、游戏、音乐流媒体、照片/视频编辑器 |
| **生活方式** | 习惯追踪、食谱与烹饪、冥想、天气、日记、情绪追踪 |
| **新兴技术** | Web3/NFT、空间计算、量子计算、自动驾驶无人机编队 |
Each rule includes:
- **Recommended Pattern** - Landing page structure
- **Style Priority** - Best matching UI styles
- **Color Mood** - Industry-appropriate palettes
- **Typography Mood** - Font personality matching
- **Key Effects** - Animations and interactions
- **Anti-Patterns** - What NOT to do (e.g., "AI purple/pink gradients" for banking)
每条规则包括：
- **推荐模式** - 落地页结构
- **风格优先级** - 最匹配的 UI 风格
- **配色氛围** - 适合行业的调色板
- **字体氛围** - 匹配品牌个性的字体
- **关键效果** - 动画与交互
- **反模式** - 不要做哪些（例如银行业的"AI 紫/粉渐变"）
## Features
## 功能特性
- **67 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more
- **161 Color Palettes** - Industry-specific palettes aligned 1:1 with the 161 product types
- **57 Font Pairings** - Curated typography combinations with Google Fonts imports
- **25 Chart Types** - Recommendations for dashboards and analytics
- **22 Tech Stacks** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
- **99 UX Guidelines** - Best practices, anti-patterns, and accessibility rules
- **161 Reasoning Rules** - Industry-specific design system generation (NEW in v2.0)
- **67 种 UI 风格** - 玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等
- **161 套配色方案** - 与 161 种产品类型 1:1 对齐的行业专属调色板
- **57 种字体配对** - 精选字体组合，含 Google Fonts 导入
- **25 种图表类型** - 适用于仪表板和分析场景的推荐
- **22 种技术栈** - React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose、Angular、Laravel、Three.js、JavaFX、WPF、WinUI 3、UWP、Avalonia、Uno Platform
- **99 条 UX 指南** - 最佳实践、反模式与无障碍规则
- **161 条推理规则** - 行业特定的设计系统生成（v2.0 新增）
### Available Styles (67)
### 可用风格 (67)
<details>
<summary><b>General Styles (49)</b></summary>
<summary><b>通用风格 (49)</b></summary>
| # | Style | Best For |
|---|-------|----------|
| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation |
| 2 | Neumorphism | Health/wellness apps, meditation platforms |
| 3 | Glassmorphism | Modern SaaS, financial dashboards |
| 4 | Brutalism | Design portfolios, artistic projects |
| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive |
| 6 | Vibrant & Block-based | Startups, creative agencies, gaming |
| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms |
| 8 | Accessible & Ethical | Government, healthcare, education |
| 9 | Claymorphism | Educational apps, children's apps, SaaS |
| 10 | Aurora UI | Modern SaaS, creative agencies |
| 11 | Retro-Futurism | Gaming, entertainment, music platforms |
| 12 | Flat Design | Web apps, mobile apps, startup MVPs |
| 13 | Skeuomorphism | Legacy apps, gaming, premium products |
| 14 | Liquid Glass | Premium SaaS, high-end e-commerce |
| 15 | Motion-Driven | Portfolio sites, storytelling platforms |
| 16 | Micro-interactions | Mobile apps, touchscreen UIs |
| 17 | Inclusive Design | Public services, education, healthcare |
| 18 | Zero Interface | Voice assistants, AI platforms |
| 19 | Soft UI Evolution | Modern enterprise apps, SaaS |
| 20 | Neubrutalism | Gen Z brands, startups, Figma-style |
| 21 | Bento Box Grid | Dashboards, product pages, portfolios |
| 22 | Y2K Aesthetic | Fashion brands, music, Gen Z |
| 23 | Cyberpunk UI | Gaming, tech products, crypto apps |
| 24 | Organic Biophilic | Wellness apps, sustainability brands |
| 25 | AI-Native UI | AI products, chatbots, copilots |
| 26 | Memphis Design | Creative agencies, music, youth brands |
| 27 | Vaporwave | Music platforms, gaming, portfolios |
| 28 | Dimensional Layering | Dashboards, card layouts, modals |
| 29 | Exaggerated Minimalism | Fashion, architecture, portfolios |
| 30 | Kinetic Typography | Hero sections, marketing sites |
| 31 | Parallax Storytelling | Brand storytelling, product launches |
| 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial |
| 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity |
| 34 | Pixel Art | Indie games, retro tools, creative |
| 35 | Bento Grids | Product features, dashboards, personal |
| 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR |
| 37 | E-Ink / Paper | Reading apps, digital newspapers |
| 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists |
| 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health |
| 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites |
| 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands |
| 42 | Nature Distilled | Wellness brands, sustainable products |
| 43 | Interactive Cursor Design | Creative portfolios, interactive |
| 44 | Voice-First Multimodal | Voice assistants, accessibility apps |
| 45 | 3D Product Preview | E-commerce, furniture, fashion |
| 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative |
| 47 | Editorial Grid / Magazine | News sites, blogs, magazines |
| 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech |
| 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands |
| # | 风格 | 最适用于 |
|---|------|---------|
| 1 | 极简主义 & 瑞士风格 | 企业应用、仪表板、文档 |
| 2 | 新拟态 (Neumorphism) | 健康/养生应用、冥想平台 |
| 3 | 玻璃拟态 (Glassmorphism) | 现代 SaaS、金融仪表板 |
| 4 | 粗野主义 (Brutalism) | 设计作品集、艺术项目 |
| 5 | 3D & 超写实主义 | 游戏、产品展示、沉浸式体验 |
| 6 | 活力 & 块状 | 创业公司、创意机构、游戏 |
| 7 | 深色模式 (OLED) | 夜间模式应用、编程平台 |
| 8 | 无障碍 & 伦理设计 | 政府、医疗、教育 |
| 9 | 粘土拟态 (Claymorphism) | 教育应用、儿童应用、SaaS |
| 10 | 极光 UI (Aurora UI) | 现代 SaaS、创意机构 |
| 11 | 复古未来主义 | 游戏、娱乐、音乐平台 |
| 12 | 扁平设计 | Web 应用、移动应用、初创 MVP |
| 13 | 拟物化 | 传统应用、游戏、高端产品 |
| 14 | 液态玻璃 | 高端 SaaS、高端电商 |
| 15 | 动效驱动 | 作品集网站、叙事平台 |
| 16 | 微交互 | 移动应用、触摸屏 UI |
| 17 | 包容性设计 | 公共服务、教育、医疗 |
| 18 | 零界面 | 语音助手、AI 平台 |
| 19 | 柔和 UI 进化版 | 现代企业应用、SaaS |
| 20 | 新粗野主义 | Z 世代品牌、创业公司、Figma 风格 |
| 21 | 便当盒网格 | 仪表板、产品页面、作品集 |
| 22 | Y2K 美学 | 时尚品牌、音乐、Z 世代 |
| 23 | 赛博朋克 UI | 游戏、科技产品、加密货币应用 |
| 24 | 有机亲生物 | 健康应用、可持续品牌 |
| 25 | AI 原生 UI | AI 产品、聊天机器人、Copilot |
| 26 | 孟菲斯设计 | 创意机构、音乐、年轻品牌 |
| 27 | 蒸汽波 | 音乐平台、游戏、作品集 |
| 28 | 维度分层 | 仪表板、卡片布局、模态框 |
| 29 | 夸张极简主义 | 时尚、建筑、作品集 |
| 30 | 动态字体 | 主视觉区、营销网站 |
| 31 | 视差叙事 | 品牌故事、产品发布 |
| 32 | 瑞士现代主义 2.0 | 企业网站、建筑、编辑类 |
| 33 | HUD / 科幻 FUI | 科幻游戏、太空科技、网络安全 |
| 34 | 像素艺术 | 独立游戏、复古工具、创意 |
| 35 | 便当网格 | 产品特性、仪表板、个人 |
| 36 | 空间 UI (VisionOS) | 空间计算应用、VR/AR |
| 37 | 电子墨水 / 纸张 | 阅读应用、数字报纸 |
| 38 | Z 世代混沌 / 极繁主义 | Z 世代生活方式、音乐艺术家 |
| 39 | 仿生 / 有机 2.0 | 可持续科技、生物科技、健康 |
| 40 | 反精致 / 原始美学 | 创意作品集、艺术家网站 |
| 41 | 触感数字 / 可变形 UI | 现代移动应用、趣味品牌 |
| 42 | 自然提炼 | 健康品牌、可持续产品 |
| 43 | 交互式光标设计 | 创意作品集、交互式 |
| 44 | 语音优先多模态 | 语音助手、无障碍应用 |
| 45 | 3D 产品预览 | 电商、家具、时尚 |
| 46 | 渐变网格 / 极光进化 | 主视觉区、背景、创意 |
| 47 | 编辑网格 / 杂志 | 新闻网站、博客、杂志 |
| 48 | 色差 / RGB 分离 | 音乐平台、游戏、科技 |
| 49 | 复古模拟 / 胶片 | 摄影、音乐/黑胶品牌 |
</details>
<details>
<summary><b>Landing Page Styles (8)</b></summary>
<summary><b>落地页风格 (8)</b></summary>
| # | Style | Best For |
|---|-------|----------|
| 1 | Hero-Centric Design | Products with strong visual identity |
| 2 | Conversion-Optimized | Lead generation, sales pages |
| 3 | Feature-Rich Showcase | SaaS, complex products |
| 4 | Minimal & Direct | Simple products, apps |
| 5 | Social Proof-Focused | Services, B2C products |
| 6 | Interactive Product Demo | Software, tools |
| 7 | Trust & Authority | B2B, enterprise, consulting |
| 8 | Storytelling-Driven | Brands, agencies, nonprofits |
| # | 风格 | 最适用于 |
|---|------|---------|
| 1 | 主视觉中心设计 | 具有强烈视觉识别度的产品 |
| 2 | 转化优化型 | 潜在客户生成、销售页面 |
| 3 | 功能丰富展示 | SaaS、复杂产品 |
| 4 | 极简直接型 | 简单产品、应用 |
| 5 | 社交证明聚焦 | 服务、B2C 产品 |
| 6 | 交互产品演示 | 软件、工具 |
| 7 | 信任与权威型 | B2B、企业、咨询 |
| 8 | 叙事驱动型 | 品牌、代理公司、非营利 |
</details>
<details>
<summary><b>BI/Analytics Dashboard Styles (10)</b></summary>
<summary><b>BI/分析仪表板风格 (10)</b></summary>
| # | Style | Best For |
|---|-------|----------|
| 1 | Data-Dense Dashboard | Complex data analysis |
| 2 | Heat Map & Heatmap Style | Geographic/behavior data |
| 3 | Executive Dashboard | C-suite summaries |
| 4 | Real-Time Monitoring | Operations, DevOps |
| 5 | Drill-Down Analytics | Detailed exploration |
| 6 | Comparative Analysis Dashboard | Side-by-side comparisons |
| 7 | Predictive Analytics | Forecasting, ML insights |
| 8 | User Behavior Analytics | UX research, product analytics |
| 9 | Financial Dashboard | Finance, accounting |
| 10 | Sales Intelligence Dashboard | Sales teams, CRM |
| # | 风格 | 最适用于 |
|---|------|---------|
| 1 | 密集数据仪表板 | 复杂数据分析 |
| 2 | 热力图风格 | 地理/行为数据 |
| 3 | 高管仪表板 | 高管摘要 |
| 4 | 实时监控 | 运维、DevOps |
| 5 | 钻取分析 | 详细探索 |
| 6 | 对比分析仪表板 | 并排对比 |
| 7 | 预测分析 | 预测、ML 洞察 |
| 8 | 用户行为分析 | UX 研究、产品分析 |
| 9 | 财务仪表板 | 财务、会计 |
| 10 | 销售智能仪表板 | 销售团队、CRM |
</details>
## 💎 Basic vs. Premium Version Comparison
## 💎 基础版与高级版对比
Many users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow.
许多用户询问开源版与高级版之间的差异。以下是详细的对比，帮助你选择适合自己工作流的版本。
### 🟢 Basic Version (This Repository)
* **Fully Open Source:** Perfect for individual developers, hobbyists, and standard projects.
* **Core UI/UX Intelligence:** Full access to 67 UI styles, 161 product types, color palettes, and curated font pairings.
* **Smart Recommendations:** Built-in BM25 search engine for highly accurate design matching.
* **Cross-Platform Support:** Stack-specific guidelines supporting 13+ major frameworks (React, Vue, Tailwind, iOS, Android, etc.).
* **Design System Generation:** Instantly generate tailored UI rules, patterns, and logic via CLI.
### 🟢 基础版（本仓库）
* **完全开源：** 适合个人开发者、爱好者及标准项目。
* **核心 UI/UX 智能：** 完整支持 67 种 UI 风格、161 种产品类型、配色方案和精选字体配对。
* **智能推荐：** 内置 BM25 搜索引擎，提供高精度的设计匹配。
* **跨平台支持：** 提供针对 13+ 主流框架（React、Vue、Tailwind、iOS、Android 等）的技术栈专属指南。
* **设计系统生成：** 通过 CLI 即时生成定制化的 UI 规则、模式与逻辑。
### 🟡 Premium Version
* **Extended Brand Design Skills:** Goes beyond UI/UX to include Brand Identity generation, Logo Design, Corporate Identity Programs (CIP), Banners, Presentation Slides, and custom Iconography.
* **Advanced Asset Creation:** Deep integration with AI-powered image generation to create real visual assets, not just placeholders.
* **Enterprise Architecture:** A more comprehensive and scalable Design Token architecture, built for large-scale team deployments.
* **Priority Support:** Dedicated technical assistance for teams and professionals who need an uninterrupted full design workflow.
### 🟡 高级版
* **扩展的品牌设计能力：** 超越 UI/UX 范畴，涵盖品牌标识生成、Logo 设计、企业识别系统 (CIP)、横幅、演示文稿幻灯片及自定义图标设计。
* **高级资产生成：** 深度集成 AI 图像生成能力，创建真实视觉素材而非占位符。
* **企业级架构：** 更全面、可扩展的设计令牌 (Design Token) 架构，面向大规模团队部署。
* **优先支持：** 为需要不间断完整设计工作流的团队和专业人士提供专属技术支持。
👉 *For more details on upgrading to the Premium tier, visit [uupm.cc](https://uupm.cc).*
👉 *如需了解升级到高级版的更多详情，请访问 [uupm.cc](https://uupm.cc)。*
## Installation
## 安装
### Using Claude Marketplace (Claude Code)
### 使用 Claude Marketplace (Claude Code)
Install directly in Claude Code with two commands:
通过两条命令直接在 Claude Code 中安装：
```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```
### Using CLI (Recommended)
### 使用 CLI (推荐)
```bash
# Install CLI globally
# 全局安装 CLI
npm install -g ui-ux-pro-max-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
@@ -314,125 +320,124 @@ uipro init --ai droid # Droid (Factory)
uipro init --ai kilocode # KiloCode
uipro init --ai warp # Warp
uipro init --ai augment # Augment
uipro init --ai all # All assistants
uipro init --ai all # 所有助手
```
The npm package is `ui-ux-pro-max-cli`; it still installs the `uipro` command. Older `uipro-cli` releases are stale and should not be used for current assets.
npm 包名为 `ui-ux-pro-max-cli`；它仍然安装 `uipro` 命令。旧版 `uipro-cli` 已过时，不应用于当前资源。
### Global Install (Available for All Projects)
### 全局安装（适用于所有项目）
```bash
uipro init --ai claude --global # Install to ~/.claude/skills/
uipro init --ai cursor --global # Install to ~/.cursor/skills/
uipro init --ai claude --global # 安装到 ~/.claude/skills/
uipro init --ai cursor --global # 安装到 ~/.cursor/skills/
```
### Other CLI Commands
### 其他 CLI 命令
```bash
uipro versions # List available versions
uipro update # Refresh skill files from installed CLI package
uipro init --offline # Compatibility flag; installs bundled templates
uipro uninstall # Remove skill (auto-detect platform)
uipro uninstall --ai claude # Remove specific platform
uipro uninstall --global # Remove from global install
uipro versions # 列出可用版本
uipro update # 从已安装的 CLI 包刷新技能文件
uipro init --offline # 兼容性标志；安装捆绑模板
uipro uninstall # 移除技能（自动检测平台）
uipro uninstall --ai claude # 移除特定平台
uipro uninstall --global # 移除全局安装
```
## Prerequisites
## 前置要求
Python 3.x is required for the search script (standard library only — the scripts install nothing and make no network calls).
Check if Python is installed:
搜索脚本需要 Python 3.x（仅使用标准库 — 脚本不安装任何东西，也不进行网络请求）。
```bash
# 检查是否已安装 Python
python3 --version
```
If it is missing, install it yourself from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). These install steps are for **you, the human user** — AI agents using this skill should never install software on your machine; they are instructed to ask you instead.
如果未安装，请**你自己**从 [python.org](https://www.python.org/downloads/) 或通过系统包管理器（Homebrew、apt、winget）安装。这些安装步骤面向人类用户 — 使用此技能的 AI 代理不应在你的机器上安装软件，而应请你自行安装。
## Usage
## 使用方式
### Skill Mode (Auto-activate)
### 技能模式 (自动激活)
**Supported:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment
**支持：** Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid (Factory)、KiloCode、Warp、Augment
The skill activates automatically when you request UI/UX work. Just chat naturally:
当你请求 UI/UX 工作时，技能会自动激活。只需自然地聊天：
```
Build a landing page for my SaaS product
为我的 SaaS 产品搭建一个落地页
```
> **Trae**: Switch to **SOLO** mode first. The skill will activate for UI/UX requests.
> **Trae**：先切换到 **SOLO** 模式。技能会在 UI/UX 请求时激活。
### Workflow Mode (Slash Command)
### 工作流模式 (斜杠命令)
**Supported:** Kiro, GitHub Copilot, Roo Code, KiloCode
**支持：** Kiro、GitHub Copilot、Roo Code、KiloCode
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 产品搭建一个落地页
```
### 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
Build a fintech banking app with dark theme
搭建一个带深色主题的金融科技银行应用
```
### How It Works
### 工作原理
1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve)
2. **Design System Generated** - The AI automatically generates a complete design system using the reasoning engine
3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching styles, colors, and typography
4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices
5. **Pre-delivery checks** - Validates against common UI/UX anti-patterns
1. **你提出请求** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
2. **生成设计系统** - AI 使用推理引擎自动生成完整的设计系统
3. **智能推荐** - 根据你的产品类型和需求，找到最佳匹配的风格、配色和字体
4. **代码生成** - 使用正确的颜色、字体、间距和最佳实践实现 UI
5. **交付前检查** - 针对常见 UI/UX 反模式进行验证
### Supported Stacks
### 支持的技术栈
The skill provides stack-specific guidelines for:
该技能为以下技术栈提供特定指南：
| Category | Stacks |
|----------|--------|
| **Web (HTML)** | HTML + Tailwind (default) |
| **React Ecosystem** | React, Next.js, shadcn/ui |
| **Vue Ecosystem** | Vue, Nuxt.js, Nuxt UI |
| 分类 | 技术栈 |
|------|--------|
| **Web (HTML)** | HTML + Tailwind (默认) |
| **React 生态** | React、Next.js、shadcn/ui |
| **Vue 生态** | Vue、Nuxt.js、Nuxt UI |
| **Angular** | Angular |
| **PHP** | Laravel (Blade, Livewire, Inertia.js) |
| **Other Web** | Svelte, Astro, Three.js |
| **Desktop** | JavaFX |
| **PHP** | Laravel (Blade、Livewire、Inertia.js) |
| **其他 Web** | Svelte、Astro、Three.js |
| **桌面端** | JavaFX |
| **iOS** | SwiftUI |
| **Android** | Jetpack Compose |
| **Cross-Platform** | React Native, Flutter |
| **跨平台** | React Native、Flutter |
Just mention your preferred stack in the prompt, or let it default to HTML + Tailwind.
只需在提示词中提到你偏好的技术栈，或让它默认使用 HTML + Tailwind。
## Design System Command (Advanced)
## 设计系统命令 (高级)
For direct access to the design system generator:
如需直接访问设计系统生成器：
> Note: If you installed via Continue, replace `.claude/skills/` with `.continue/skills/` in the commands below. For Droid (Factory), use `.factory/skills/`.
> 注意：如果你通过 Continue 安装，将下面命令中的 `.claude/skills/` 替换为 `.continue/skills/`。对于 Droid (Factory)，使用 `.factory/skills/`。
```bash
# Generate design system with ASCII output
# 生成带 ASCII 输出的设计系统
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
# Generate with Markdown output
# 生成带 Markdown 输出
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
# Domain-specific search
# 特定领域搜索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
# Stack-specific guidelines
# 特定技术栈指南
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
@@ -440,192 +445,186 @@ python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterpr
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
```
### Persist Design System (Master + Overrides Pattern)
### 持久化设计系统 (主配置 + 覆盖模式)
Save your design system to files for **hierarchical retrieval across sessions**:
将设计系统保存到文件，实现**跨会话的层级检索**：
```bash
# Generate and persist to design-system/MASTER.md
# 生成并持久化到 design-system/MASTER.md
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
# Also create a page-specific override file
# 同时创建页面特定的覆盖文件
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
```
This creates a `design-system/` folder structure:
这会创建 `design-system/` 文件夹结构：
```
design-system/
├── MASTER.md # Global Source of Truth (colors, typography, spacing, components)
├── MASTER.md # 全局唯一真相源 (颜色、字体、间距、组件)
└── pages/
└── dashboard.md # Page-specific overrides (only deviations from Master)
└── dashboard.md # 页面特定覆盖 (仅与主配置的偏差)
```
**How hierarchical retrieval works:**
1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
2. If the page file exists, its rules **override** the Master file
3. If not, use `design-system/MASTER.md` exclusively
**层级检索工作原理：**
1. 构建特定页面 (如"结账页") 时，先检查 `design-system/pages/checkout.md`
2. 如果页面文件存在，其规则**覆盖**主配置文件
3. 如果不存在，仅使用 `design-system/MASTER.md`
**Context-aware retrieval prompt:**
**上下文感知检索提示词：**
```
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
同时检查 design-system/pages/[page-name].md 是否存在。
如果页面文件存在，优先使用其规则。
如果不存在，仅使用主配置规则。
现在，生成代码...
```
## Architecture & Contributing
## 架构与贡献
### For Users
### 对于用户
The codebase has been restructured to use a **template-based generation system**. All platform-specific files (`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/`, etc.) are now generated dynamically by the CLI.
代码库已重构为使用**基于模板的生成系统**。所有平台特定文件 (`.cursor/`、`.windsurf/`、`.kiro/`、`.factory/` 等) 现在由 CLI 动态生成。
**Always use the CLI to install:**
**始终使用 CLI 安装：**
```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>
```
This ensures you get the latest templates bundled with the installed CLI package and the correct file structure for your AI assistant. Update the npm package first when a new release is published.
这确保你获得随已安装 CLI 包捆绑的最新模板，以及适用于 AI 助手的正确文件结构。发布新版本时请先更新 npm 包。
### For Contributors
### 对于贡献者
If you want to contribute to this project:
如果你想为这个项目做贡献：
```bash
# 1. Clone the repository
# 1. 克隆仓库
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill
# 2. Understand the structure
src/ui-ux-pro-max/ # Source of truth (data, scripts, templates)
cli/ # CLI installer (generates files from templates)
.claude/ # Local dev/test for Claude Code skill
.factory/ # Local dev/test for Droid (Factory) skill
# 2. 理解结构
src/ui-ux-pro-max/ # 唯一真相源 (数据、脚本、模板)
cli/ # CLI 安装器 (从模板生成文件)
.claude/ # Claude Code 技能的本地开发/测试
.factory/ # Droid (Factory) 技能的本地开发/测试
# 3. Make changes in src/ui-ux-pro-max/
# - data/*.csv → Database files
# - scripts/*.py → Search engine & design system
# - templates/ → Platform-specific templates
# 3. 在 src/ui-ux-pro-max/ 中修改
# - data/*.csv → 数据库文件
# - scripts/*.py → 搜索引擎与设计系统
# - templates/ → 平台特定模板
# 4. Sync to CLI and test locally
# 4. 同步到 CLI 并本地测试
cd cli
npm run sync:assets
npm run check:assets
npm run validate:csv
npm run smoke:domains
npm run smoke:stacks
npm run typecheck
# 5. Build and test CLI
# `npm run build` uses Bun when available and falls back to TypeScript compiler output after `npm ci`.
npm run build
node dist/index.js init --ai claude --offline # Test in a temp folder
# 5. 构建并测试 CLI
bun run build
node dist/index.js init --ai claude --offline # 在临时文件夹中测试
# 6. Create PR (never push directly to main)
# 6. 创建 PR (永远不要直接推送到 main)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create
```
See [CLAUDE.md](CLAUDE.md) for detailed development guidelines.
详细的开发指南请参见 [CLAUDE.md](CLAUDE.md)。
## 自动化发布
## Automated Releases
本仓库使用 semantic-release 配合约定式提交 (Conventional Commits) 自动创建 GitHub 发布：
This repository uses semantic-release with Conventional Commits to create GitHub releases automatically:
- `dev` 分支创建 beta GitHub 预发布，如 `2.6.0-beta.1`。
- `main` 分支创建官方稳定版 GitHub 发布，如 `2.6.0`。
- `dev` branch creates beta GitHub prereleases such as `2.6.0-beta.1`.
- `main` branch creates official stable GitHub releases such as `2.6.0`.
发布说明和 `CHANGELOG.md` 根据约定式提交信息生成。在发布准备期间，版本号会在 `skill.json`、`.claude-plugin/plugin.json`、`.claude-plugin/marketplace.json`、`cli/package.json` 和 `cli/package-lock.json` 之间同步。
Release notes and `CHANGELOG.md` are generated from Conventional Commit messages. Version numbers are synchronized across `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, and `cli/package-lock.json` during release preparation.
使用以下提交类型以获得正确的版本号升级：
Use these commit types for correct version bumps:
- `fix:` -> 补丁版本发布
- `feat:` -> 次版本发布
- `feat!:` 或 `BREAKING CHANGE:` -> 主版本发布
- `fix:` -> patch release
- `feat:` -> minor release
- `feat!:` or `BREAKING CHANGE:` -> major release
发布工作流使用默认的 `GITHUB_TOKEN` 创建 GitHub 发布，并使用仓库的 `NPM_TOKEN` 密钥将 `ui-ux-pro-max-cli` 发布到 npm。
The release workflow uses the default `GITHUB_TOKEN` for GitHub releases and the repository `NPM_TOKEN` secret to publish `ui-ux-pro-max-cli` to npm.
## 故障排查
## Troubleshooting
### `uipro: unknown command 'uninstall'` 或 `unknown command 'update'`
### `uipro: unknown command 'uninstall'` or `unknown command 'update'`
Your installed version of `ui-ux-pro-max-cli` is outdated. Update it and retry:
你安装的 `ui-ux-pro-max-cli` 版本已过时。请更新后重试：
```bash
npm install -g ui-ux-pro-max-cli@latest
uipro uninstall
```
### `uipro uninstall` says "No installed AI skill directories detected"
### `uipro uninstall` 提示 "No installed AI skill directories detected"
The skill was installed in a different directory than where you're running the command. Either:
技能安装在与运行命令不同的目录中。可以：
```bash
# Option A — run from the project root where you originally installed it
# 方案 A — 切换到最初安装它的项目根目录
cd /path/to/your/project
uipro uninstall
# Option B — remove the global install
# 方案 B — 移除全局安装
uipro uninstall --global
# Option C — remove manually
# 方案 C — 手动移除
rm -rf .claude/skills/ui-ux-pro-max # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max # Antigravity
```
### Claude Marketplace install fails with "Zip file contains a symbolic link"
### Claude Marketplace 安装失败，提示 "Zip file contains a symbolic link"
This is a known issue with versions prior to v2.5.1. The repository used symlinks internally which some installation tools can't handle. **Fix:** use the CLI installer instead:
这是 v2.5.1 之前版本的已知问题。仓库内部使用了符号链接，某些安装工具无法处理。**解决办法：** 改用 CLI 安装器：
```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
```
Or wait for the next release where this is resolved.
或等待下一个已修复此问题的版本发布。
### `npm install -g ui-ux-pro-max-cli` fails with permission error
### `npm install -g ui-ux-pro-max-cli` 失败，提示权限错误
Use a Node version manager (recommended), or skip the global install entirely:
使用 Node 版本管理器（推荐），或直接跳过全局安装：
```bash
# npx without installing globally
# 使用 npx 而不全局安装
npx ui-ux-pro-max-cli init --ai claude
```
### Python not found when running design system commands
### 运行设计系统命令时找不到 Python
The search scripts require Python 3.x. Install it manually from [python.org](https://www.python.org/downloads/) or with your OS package manager (Homebrew, apt, winget). AI agents should not install it for you — they are instructed to ask you instead.
搜索脚本需要 Python 3.x。请从 [python.org](https://www.python.org/downloads/) 或通过系统包管理器（Homebrew、apt、winget）自行安装。AI 代理不应替你安装 — 它们被要求先征求你的意见。
### Design system output is cut off / fields truncated
### 设计系统输出被截断 / 字段不完整
Use the `--max-length` flag to increase (or remove) the truncation limit:
使用 `--max-length` 标志增加（或取消）截断限制：
```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --max-length 0
# ^ 0 = unlimited
# ^ 0 = 不限制
```
---
## 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) 授权。
## Compatible Agents
## 兼容的智能体
This skill works with:
本技能可与以下工具配合使用：
- [Claude Code](https://claude.com/product/claude-code)
- [AdaL](https://sylph.ai/) - Self-evolving AI coding agent ([Docs](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli))
- [AdaL](https://sylph.ai/) - 自进化的 AI 编码智能体（[文档](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli)）