UI-UX-Pro-Max-Skill:
AI 驱动的设计智能引擎

将资深设计师数年的专业决策能力，转化为可即时调用的计算服务。 通过结构化知识库与智能推理引擎，让 AI 编程助手生成专业级 UI/UX 设计系统。

45.6k GitHub Stars 4.4k Forks 31 Contributors

智能推理

5维并行搜索 + BM25排序算法

跨平台支持

13种技术栈全覆盖

知识库规模

161行业 × 67风格 × 161配色

AI助手兼容

15+种编程环境支持

项目概述

核心定位

UI-UX-Pro-Max-Skill 是一个专为现代 AI 编程助手设计的开源技能插件， 其核心使命是将资深 UI/UX 设计师数年积累的专业决策能力，转化为可即时调用的计算服务。 该项目由 nextlevelbuilder 团队开发维护，截至 2026 年 3 月已获得 45.6k GitHub Stars 和 4.4k Forks，成为 AI 辅助设计领域最具影响力的开源项目之一。

关键洞察：与传统的设计工具或组件库不同，该项目并非提供静态模板或预设样式， 而是构建了一套动态智能推理系统。它能够理解自然语言描述的项目需求， 基于庞大的结构化知识库生成完整、专业、可直接落地的设计系统方案。

智能推理架构

  • • BM25排序算法的风格优先级计算
  • • 行业特定的反模式过滤机制
  • • 复杂的JSON条件决策规则处理
  • • 五维度知识库并行检索

跨平台支持

  • • Web开发：React, Vue, Next.js等
  • • 移动原生：SwiftUI, Jetpack Compose
  • • 跨平台：React Native, Flutter
  • • 13种主流技术栈全覆盖

核心原理

智能推理引擎架构

UI设计智能推理引擎系统架构示意图

五维并行搜索机制

高质量 UI/UX 设计需要在多个维度上达成协调一致。系统同时展开五个维度的知识检索， 确保决策的全局最优性。

161 产品类型匹配
67 风格推荐引擎
161 配色方案选择
24 着陆页模式库
57 字体搭配系统

推理决策流程

产品→UI类别规则映射

将产品类型转化为具体的UI设计约束集合

BM25排序算法应用

计算项目需求与风格的匹配得分

反模式过滤机制

规避特定行业语境下的设计禁忌

设计系统生成流水线

输入层

自然语言需求解析，形成结构化需求特征向量

处理层

五维并行搜索与推理决策，维度间协调优化

输出层

完整设计系统文档，人类可读、机器可执行

功能体系

设计资产库

风格系统

67种风格 49通用 8着陆页 10仪表盘

色彩系统

161套调色板 1:1行业映射 动态生成

排版系统

57种搭配 Google Fonts 个性匹配

模式与组件库

着陆页模式

24种布局 CRO优化 移动端适配

图表类型

25种可视化 趋势分析 实时监控 预测分析

行业专属规则

推理规则

161条规则 8大领域 JSON格式

质量保障

99条准则 优先级分层 预交付检查

核心功能详解

风格推荐算法

采用 BM25排序算法，将项目需求特征视为"查询词条"， 风格定义标签视为"文档内容"，计算匹配得分。算法考虑了：

  • • 标签匹配频率与文档长度归一化
  • • 标签区分度权重（罕见精准匹配权重更高）
  • • 避免标签堆砌的风格获得不当优势

反模式过滤

硬过滤+软警告两级策略，确保设计决策质量：

  • • 硬过滤：直接排除明确损害用户体验的选项
  • • 软警告：标注风险但由用户根据情境判断
  • • 覆盖金融科技、医疗健康、B2B企业等关键领域

技术栈支持

Web开发生态

HTML + Tailwind CSS

默认方案

零构建成本 性能优异

React

主流框架

组件生态 状态管理

Next.js

全栈React

SEO优化 图像优化

shadcn/ui

现代组件库

源码复制 高度定制

Vue + Nuxt.js

渐进式框架

学习曲线平缓 性能优秀

Svelte + Astro

编译时优化

无虚拟DOM 零JS默认

移动开发生态

iOS 平台

SwiftUI

声明式语法，实时预览，深度集成Apple生态

Human Interface Guidelines

跨平台方案

React Native

JavaScript/TypeScript，接近原生性能

组件桥接 热更新
Flutter

Dart语言，自绘引擎，高度一致体验

Material Design Cupertino

使用方法

安装部署

Claude Marketplace安装

# 添加插件市场源
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
# 安装技能
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

安装完成后重启 Claude Code，验证命令 /skills 应显示插件

CLI工具安装（推荐）

# 全局安装CLI
npm install -g uipro-cli
# 项目目录初始化
uipro init --ai claude

支持多种AI助手： claude, cursor, windsurf, copilot

调用模式

技能模式（Skill Mode）

自然语言自动激活

"为我的SaaS产品构建着陆页"
  • • 适用于日常开发、快速迭代
  • • AI助手自动识别设计需求
  • • 无需记忆特定命令

工作流模式（Workflow Mode）

斜杠命令调用

/ui-ux-pro-max Build landing page
  • • 适用于精确控制、复杂需求
  • • 参数化配置，可重复执行
  • • 适合团队协作和自动化

支持平台

Claude Code

Marketplace插件 原生技能系统

深度集成，最佳体验

Cursor

CLI初始化 自定义命令

.cursor/commands 配置

Windsurf

CLI初始化 Cascade工作流

流畅的AI辅助体验

GitHub Copilot

CLI初始化 提示工程

.github/prompts 配置

其他助手

Antigravity Kiro Qoder

持续扩展支持

典型案例：Serenity Spa 设计系统

水疗中心自然风格网站界面设计

Serenity Spa 案例完整演示了从"美容水疗中心"这一简单自然语言输入， 到全要素设计系统的生成过程。系统输出的设计系统可直接指导开发实现， 无需人工设计决策，生动展示了项目如何将专业设计能力"民主化"。

模式推荐

首屏中心 + 信任权威型

Hero-Centric + Trust & Authority

1
首屏区块

情感驱动，建立第一印象

2
服务展示

清晰展示可提供价值

3
客户评价

建立信任，降低决策风险

4
预订区块

转化行动，降低摩擦

风格定位

有机生物亲和主义

Organic Biophilic

自然灵感形态
大地色调
有机纹理
可持续美学

配色方案

主色

鼠尾草绿

自然、平静、疗愈

辅色

沙色

温暖、大地、舒适

背景色

奶油色

柔和、干净、宽敞

强调色

陶土色

活力、手工艺、真实

字体搭配

Playfair Display

标题字体

优雅体验，从这里开始

优雅 编辑感 经典

Inter

正文字体

为您提供专业的水疗服务，让身心得到完美放松与恢复

现代 中性 高效

关键效果

柔和视差

0.3x速度的多层背景滚动

悬停状态

150ms过渡，微妙缩放变化

加载动画

骨架屏 + 脉冲效果

反模式规避

霓虹色

损害平静自然气质

激进动画

引发焦虑，干扰放松体验

深色模式

与传统水疗场景冲突