技能介绍
UI UX Pro Max 是由 nextlevelbuilder 提供的一个 AI 技能，为跨平台、跨框架的专业 UI/UX 构建提供设计智能。它的核心是 v2.0 引入的设计系统生成器——一个 AI 驱动的推理引擎，分析你的项目需求，并在数秒内生出一套完整的、量身定制的设计系统。本组合包含 6 个可安装子 Skill。
此技能为开源版本，包含所有核心 UI/UX 智能、设计系统生成和跨平台支持；品牌形象设计、资产创建与高级功能存在于一个高级版本中，不包含在此处。
适用场景
- 为一个新项目（如 SaaS 落地页、美容水疗中心官网）快速确定设计系统
- 为面向年轻人的健身 App 推荐现代化 UI 配色方案与排版规范
- 需要一套符合 WCAG AA 标准的响应式设计系统
- 在指定技术栈（React、Next.js、SwiftUI、Flutter 等）下实现 UI
- 在交付前检查 UI 是否踩到常见反模式
核心能力
- 84 种 UI 风格 – 玻璃态、粘土态、极简主义、粗野主义、新态、便当网格、暗模式、AI 原生 UI，等等
- 192 套调色板 – 与 192 种产品类型一一对应的行业特定调色板
- 74 种字体搭配 – 精选的排版组合，包含 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
- 98 条 UX 指南 – 最佳实践、反模式和可访问性规则
- 161 条推理规则 – 行业特定的设计系统生成
161 条行业特定的推理规则
推理引擎包含针对以下类别的专门规则：
↔ 左右滑动查看完整表格
| 类别 | 示例 |
|---|---|
| 技术与 SaaS | SaaS、微 SaaS、B2B 服务、开发者工具 / IDE、AI/聊天机器人平台、网络安全平台 |
| 金融 | 金融科技/加密、银行、保险、个人理财追踪器、发票与账单工具 |
| 医疗保健 | 医疗诊所、药房、牙科、兽医、心理健康、用药提醒 |
| 电子商务 | 通用、奢侈品、市场 (P2P)、订阅盒子、食品配送 |
| 服务 | 美容/水疗、餐厅、酒店、法律、家居服务、预约 |
| 创意 | 作品集、代理机构、摄影、游戏、音乐流媒体、照片/视频编辑器 |
| 生活方式 | 习惯追踪器、食谱与烹饪、冥想、天气、日记、情绪追踪器 |
| 新兴科技 | Web3/NFT、空间计算、量子计算、自主无人机舰队 |
每条规则包括：模式、风格优先级、色彩氛围、排版氛围、关键效果和反模式。
可用的风格
通用风格 (49)，例如 Minimalism & Swiss Style（企业应用、仪表板、文档）、Neumorphism（健康/保健应用、冥想平台）、Glassmorphism（现代 SaaS、金融仪表板）、Brutalism（设计作品集、艺术项目）、Dark Mode (OLED)、Claymorphism、Aurora UI、Bento Box Grid、AI-Native UI、Spatial UI (VisionOS) 等；此外还有落地页风格 (8)、BI/分析仪表板风格 (10)。
效果预览
生成的设计系统输出示例（节选）：
+----------------------------------------------------------------------------------------+
| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |
+----------------------------------------------------------------------------------------+
| |
| 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 |
| |
| 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 |
| |
| 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 |
| |
| TYPOGRAPHY: Cormorant Garamond / Montserrat |
| Mood: Elegant, calming, sophisticated |
| Best For: Luxury brands, wellness, beauty, editorial |
| Google Fonts: https://fonts.google.com/share?selection.family=... |
| |
| KEY EFFECTS: |
| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states |
| |
| AVOID (Anti-patterns): |
| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |
| |
| 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 |
| |
+----------------------------------------------------------------------------------------+工作方式
设计系统生成的流程：
┌─────────────────────────────────────────────────────────────────┐
│ 1. USER REQUEST │
│ "Build a landing page for my beauty spa" │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │
│ • Product type matching (192 categories) │
│ • Style recommendations (84 styles) │
│ • Color palette selection (192 palettes) │
│ • Landing page patterns (34 patterns) │
│ • Typography pairing (74 font combinations) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. REASONING ENGINE │
│ • Match product → UI category rules │
│ • Apply style priorities (BM25 ranking) │
│ • Filter anti-patterns for industry │
│ • Process decision rules (JSON conditions) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. COMPLETE DESIGN SYSTEM OUTPUT │
│ Pattern + Style + Colors + Typography + Effects │
│ + Anti-patterns to avoid + Pre-delivery checklist │
└─────────────────────────────────────────────────────────────────┘面向使用者的五步：你提出请求 → 设计系统生成 → 智能推荐（匹配风格、颜色与排版）→ 代码生成 → 交付前检查（对照常见 UI/UX 反模式验证）。
支持的技术栈：Web (HTML) 默认 HTML + Tailwind；React 生态 React、Next.js、shadcn/ui；Vue 生态 Vue、Nuxt.js、Nuxt UI；Angular；PHP Laravel (Blade、Livewire、Inertia.js)；其他 Web Svelte、Astro、Three.js；桌面 JavaFX、WPF、WinUI 3、Avalonia、Uno Platform、UWP；iOS SwiftUI；Android Jetpack Compose；跨平台 React Native、Flutter。只需在提示中提及你想用的技术栈，或让它默认为 HTML + Tailwind。
你需要提供
- 需要 Python 3.x 来运行搜索脚本（仅使用标准库——脚本不安装任何东西，也不进行网络调用）。如果缺少 Python，AI 代理会要求你安装它，不会在你的机器上自动安装软件。
- 用自然语言描述你的 UI/UX 需求，必要时指定技术栈。
你会获得
- 一份完整的设计系统：模式（Pattern）+ 风格 + 配色 + 排版 + 效果，附需要避免的反模式与交付前检查清单
- 依据该设计系统实现的 UI 代码
使用示例
只需用自然语言请求 UI/UX 工作，该技能会自动激活，并在实现 UI 前生成完整的设计系统。
为我的 SaaS 产品构建一个落地页
创建一个医疗保健分析的仪表板
设计一个带暗模式的作品集网站
做一个电子商务的移动应用 UI
构建一个暗主题的金融科技银行应用页面给出的典型提问示例：
请为我的高端美容水疗中心设计一个落地页的设计系统，要求风格优雅且具有高级感。为一款面向年轻人的健身APP推荐一套现代化的UI配色方案和排版规范。如何根据我的项目需求生成一套符合WCAG AA标准的响应式设计系统？
