用AI设计跨平台专业UI/UX

ui-ux-pro-max-skill

一套基于AI的专业UI/UX设计智能系统，支持多平台设计系统生成与UI风格优化。

nextlevelbuilder

设计师 / 开发者

图片设计项目管理已认证开源许可: MIT

GitHub Stars110K

试试这样做

请为我的高端美容水疗中心设计一个落地页的设计系统，要求风格优雅且具有高级感。

为一款面向年轻人的健身APP推荐一套现代化的UI配色方案和排版规范。

如何根据我的项目需求生成一套符合WCAG AA标准的响应式设计系统？

详细介绍

UI UX Pro Max

一个提供跨平台和框架的专业 UI/UX 构建设计智能的 AI 技能。

v2.0 的新特性

智能设计系统生成

v2.0 的核心功能是设计系统生成器——一个 AI 驱动的推理引擎，分析你的项目需求并在数秒内生出一个完整的、量身定制的设计系统。

+----------------------------------------------------------------------------------------+
|  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           │
└─────────────────────────────────────────────────────────────────┘

161 条行业特定的推理规则

推理引擎包含针对以下类别的专门规则：

类别	示例
技术与 SaaS	SaaS、微 SaaS、B2B 服务、开发者工具 / IDE、AI/聊天机器人平台、网络安全平台
金融	金融科技/加密、银行、保险、个人理财追踪器、发票与账单工具
医疗保健	医疗诊所、药房、牙科、兽医、心理健康、用药提醒
电子商务	通用、奢侈品、市场 (P2P)、订阅盒子、食品配送
服务	美容/水疗、餐厅、酒店、法律、家居服务、预约
创意	作品集、代理机构、摄影、游戏、音乐流媒体、照片/视频编辑器
生活方式	习惯追踪器、食谱与烹饪、冥想、天气、日记、情绪追踪器
新兴科技	Web3/NFT、空间计算、量子计算、自主无人机舰队

每条规则包括：模式、风格优先级、色彩氛围、排版氛围、关键效果和反模式。

功能特性

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 条推理规则 – 行业特定的设计系统生成

可用的风格

通用风格 (49)

#	风格	最适合
1	Minimalism & Swiss Style	企业应用、仪表板、文档
2	Neumorphism	健康/保健应用、冥想平台
3	Glassmorphism	现代 SaaS、金融仪表板
4	Brutalism	设计作品集、艺术项目
5	3D & Hyperrealism	游戏、产品展示、沉浸式
6	Vibrant & Block-based	初创公司、创意机构、游戏
7	Dark Mode (OLED)	夜间模式应用、编码平台
8	Accessible & Ethical	政府、医疗、教育
9	Claymorphism	教育应用、儿童应用、SaaS
10	Aurora UI	现代 SaaS、创意机构
11	Retro-Futurism	游戏、娱乐、音乐平台
12	Flat Design	Web 应用、移动应用、初创 MVP
13	Skeuomorphism	传统应用、游戏、高级产品
14	Liquid Glass	高级 SaaS、高端电商
15	Motion-Driven	作品集网站、叙事平台
16	Micro-interactions	移动应用、触屏 UI
17	Inclusive Design	公共服务、教育、医疗
18	Zero Interface	语音助手、AI 平台
19	Soft UI Evolution	现代企业应用、SaaS
20	Neubrutalism	Z 世代品牌、初创公司、Figma 风格
21	Bento Box Grid	仪表板、产品页、作品集
22	Y2K Aesthetic	时尚品牌、音乐、Z 世代
23	Cyberpunk UI	游戏、科技产品、加密应用
24	Organic Biophilic	健康应用、可持续发展品牌
25	AI-Native UI	AI 产品、聊天机器人、副驾驶
26	Memphis Design	创意机构、音乐、青年品牌
27	Vaporwave	音乐平台、游戏、作品集
28	Dimensional Layering	仪表板、卡片布局、模态
29	Exaggerated Minimalism	时尚、建筑、作品集
30	Kinetic Typography	英雄区、营销网站
31	Parallax Storytelling	品牌叙事、产品发布
32	Swiss Modernism 2.0	企业网站、建筑、社论
33	HUD / Sci-Fi FUI	科幻游戏、太空科技、网络安全
34	Pixel Art	独立游戏、复古工具、创意
35	Bento Grids	产品功能、仪表板、个人
36	Spatial UI (VisionOS)	空间计算应用、VR/AR
37	E-Ink / Paper	阅读应用、数字报纸
38	Gen Z Chaos / Maximalism	Z 世代生活方式、音乐艺术家
39	Biomimetic / Organic 2.0	可持续发展科技、生物科技、健康
40	Anti-Polish / Raw Aesthetic	创意作品集、艺术家网站
41	Tactile Digital / Deformable UI	现代移动应用、有趣品牌
42	Nature Distilled	健康品牌、可持续产品
43	Interactive Cursor Design	创意作品集、交互
44	Voice-First Multimodal	语音助手、可访问性应用
45	3D Product Preview	电商、家具、时尚
46	Gradient Mesh / Aurora Evolved	英雄区、背景、创意
47	Editorial Grid / Magazine	新闻网站、博客、杂志
48	Chromatic Aberration / RGB Split	音乐平台、游戏、科技
49	Vintage Analog / Retro Film	摄影、音乐/黑胶品牌

落地页风格 (8)

#	风格	最适合
1	Hero-Centric Design	具有强烈视觉识别的产品
2	Conversion-Optimized	潜在客户生成、销售页
3	Feature-Rich Showcase	SaaS、复杂产品
4	Minimal & Direct	简单产品、应用
5	Social Proof-Focused	服务、B2C 产品
6	Interactive Product Demo	软件、工具
7	Trust & Authority	B2B、企业、咨询
8	Storytelling-Driven	品牌、机构、非营利

BI/分析仪表板风格 (10)

#	风格	最适合
1	Data-Dense Dashboard	复杂数据分析
2	Heat Map & Heatmap Style	地理/行为数据
3	Executive Dashboard	高管摘要
4	Real-Time Monitoring	运维、DevOps
5	Drill-Down Analytics	深入探索
6	Comparative Analysis Dashboard	并排比较
7	Predictive Analytics	预测、ML 洞察
8	User Behavior Analytics	UX 研究、产品分析
9	Financial Dashboard	财务、会计
10	Sales Intelligence Dashboard	销售团队、CRM

使用方法

只需用自然语言请求 UI/UX 工作。该技能会自动激活，并在实现 UI 前生成完整的设计系统。

示例提示

为我的 SaaS 产品构建一个落地页
创建一个医疗保健分析的仪表板
设计一个带暗模式的作品集网站
做一个电子商务的移动应用 UI
构建一个暗主题的金融科技银行应用

工作方式

你提出请求 – 任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
设计系统生成 – AI 使用推理引擎自动生成完整的设计系统
智能推荐 – 根据你的产品类型和需求，找到最匹配的风格、颜色和排版
代码生成 – 用合适的颜色、字体、间距和最佳实践实现 UI
交付前检查 – 对照常见的 UI/UX 反模式进行验证

支持的技术栈

该技能为以下技术栈提供针对性的指南：

类别	技术栈
Web (HTML)	HTML + Tailwind（默认）
React 生态	React、Next.js、shadcn/ui
Vue 生态	Vue、Nuxt.js、Nuxt UI
Angular	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 智能、设计系统生成和跨平台支持。如需品牌形象设计、资产创建和高级功能，存在一个高级版本，但不包含在此处。