以前做设计，光是定风格、选配色、搭字体就要耗半天，更别说还要适配不同行业、不同技术栈了。

现在有 AI 了，但颜色设计等风格趋于一致，比如蓝紫色渐变，我都不用脑子思考肯定 AI 生成的了，这可以说是克劳德的御用色～

AI 标准套餐一定是赛博基佬紫 bg-indigo-500～

明明已经用上了 Cursor 或 Claude Code 这种顶级 AI 助手，逻辑写得飞起，但写的样式第一次看是很高级，但现在 AI 生成的产品基本上清一色的 UI 风格，不是不高级，是已经审美疲劳了。

今天给大家介绍一个多平台、多框架构建专业级 UI/UX 提供设计智能的 AI SKILL 插件UI UX Pro Max，适用于多平台、多技术栈。

目前已经收获 16.7+k Star：

但这个工具牛在哪？只要你说一句 “给我的美容 spa 做个落地页”，它秒给你生成一套完整的、量身定制的设计系统，从页面结构到配色字体，甚至连避坑指南都给你列得明明白白！

关注度持续提升：

如果你对 SKILLS 还不太了解，可以参考我们的内容：https://www.runoob.com/claude-code/claude-agent-skills.html

UI UX Pro Max 旨在为跨平台和多框架开发提供专业的 UI/UX 设计智能支持。

UI UX Pro Max 本质上是一个可检索的设计数据库，包含样式、色板、字体、组件建议及 UX 准则，专门喂给 Cursor、Claude Code、Windsurf等这些 AI 编码助手。

UI UX Pro Max设计系统生成器 —— 一款由 AI 驱动的推理引擎，可分析你的项目需求，并在数秒内生成一套完整、量身定制的设计系统。

它不光给你配色字体，还直接告诉你页面怎么排、哪里放按钮最转化、哪些效果要用、哪些是行业大忌！简直是手把手带你避坑。

设计系统生成流程：

100 条行业专属推理规则

推理引擎包含针对以下行业的专属规则：

分类	示例场景
科技与 SaaS	通用 SaaS、微 SaaS、B2B 企业级产品、开发者工具、AI / 聊天机器人平台
金融领域	金融科技、银行、加密货币、保险、交易仪表盘
医疗健康	医疗诊所、药店、牙科、宠物医疗、心理健康服务
电子商务	综合电商、高端奢侈品、电商平台、订阅盒子模式
服务行业	美容 / 水疗、餐饮、酒店、法律、咨询服务
创意领域	作品集、广告公司、摄影、游戏、音乐流媒体
前沿科技	Web3/NFT、空间计算、量子计算、自动驾驶系统

每条规则均包含：

推荐布局模式 - 落地页结构框架

• 风格优先级 - 最匹配的 UI 风格

• 色彩氛围 - 适配行业的配色基调

• 字体氛围 - 契合行业特性的字体风格

• 核心视觉效果 - 动画与交互方式

• 反模式 - 设计禁忌（例如：金融行业避免使用 “AI 紫粉渐变”）

核心功能特性：

• 57 种 UI 风格：涵盖毛玻璃（Glassmorphism）、微粘土（Claymorphism）、极简主义、粗野主义、新拟物化、Bento Grid（便当盒布局）及深色模式等。

• 95 套专业色板：针对 SaaS、电商、医疗、金融、美容等行业量身定制。

• 56 组字体搭档：精选排版组合，并附带 Google Fonts 导入代码。

• 24 种图表类型：为仪表盘和数据分析提供针对性的可视化建议。

• 8 大主流技术栈：深度适配 React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter 以及 HTML+Tailwind。

• 98 条 UX 设计准则：包含最佳实践、设计禁忌（Anti-patterns）以及无障碍访问（Accessibility）规则。

不同技术栈的专用设计规范：

• HTML + Tailwind（默认）

• React / Next.js

• Vue / Svelte

• SwiftUI / React Native / Flutter

只需在提示词中声明技术栈，未声明时默认使用 HTML + Tailwind。

工作原理：

• 你提出需求：构建、设计、实现、优化或评审 UI / UX

• 技能自动触发：AI 会在内部搜索 UI 风格、配色、字体和 UX 规范数据库

• 智能设计推荐：根据产品类型与使用场景匹配合适的设计体系

• 直接生成代码：按最佳实践输出包含正确配色、字体、间距和结构的 UI 实现

开源地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

官方文档：https://ui-ux-pro-max-skill.nextlevelbuilder.io/

安装方式

1、通过 Claude Marketplace（Claude Code）安装

在 Claude Code 中执行以下两条命令即可直接安装：

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

2、使用 CLI（推荐）

全局安装 CLI：

npm install -g uipro-cli

2、进入你的项目目录

cd /path/to/your/project

3、根据使用的 AI 助手进行初始化

# 全局安装 CLInpm install -g uipro-cli# 进入你的项目目录cd /path/to/your/project# 为对应 AI 助手安装uipro init --ai claude      # Claude Codeuipro init --ai cursor      # Cursoruipro init --ai windsurf    # Windsurfuipro init --ai antigravity # Antigravity (.agent + .shared)uipro init --ai copilot     # GitHub Copilotuipro init --ai kiro        # Kirouipro init --ai codex       # Codex CLIuipro init --ai qoder       # Qoderuipro init --ai roocode     # Roo Codeuipro init --ai gemini      # Gemini CLIuipro init --ai trae        # Traeuipro init --ai all         # 所有助手

4、其他 CLI 命令：

uipro versions              # 查看可用版本uipro update                # 更新到最新版本uipro init --version v1.0.0 # 安装指定版本

5、安装指定版本

uipro init --ai claude

claude

结果如下，做的非常专业了：

各 AI 助手的使用方式

1、Claude Code

Build a landing page for my SaaS product

2、Cursor / Windsurf / Antigravity

/ui-ux-pro-max Build a landing page for my SaaS product

3、Kiro

/ui-ux-pro-max Build a landing page for my SaaS product

4、GitHub Copilot

/ui-ux-pro-max Build a landing page for my SaaS product