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

秒级生成定制化设计系统，包含配色、排版及交互规范。

详细介绍

UI UX Pro Max

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

v2.0 的新特性

智能设计系统生成

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

设计系统生成如何工作

┌─────────────────────────────────────────────────────────────────┐
│ 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 智能、设计系统生成和跨平台支持。如需品牌形象设计、资产创建和高级功能，存在一个高级版本，但不包含在此处。

试试这样做

请为我的高端美容水疗中心设计一个落地页的设计系统，要求风格优雅且具有高级感。
为一款面向年轻人的健身APP推荐一套现代化的UI配色方案和排版规范。
如何根据我的项目需求生成一套符合WCAG AA标准的响应式设计系统？

作者：nextlevelbuilder è®¾è®¡å¸ / å¼åè ｜ GitHub Stars 110K ｜标签：图片设计项目管理已认证开源许可: MIT

来源：colaos.ai ｜ Skill ID：ui-ux-pro-max-skill

详细介绍

试试这样做

相关推荐

将HTML/CSS渲染为MP4视频

审计软件并发现安全漏洞

制作小红书图卡和信息图

照片解构编辑创作工具

留言 0