UI-UX-Pro-Max-Skill介绍

ui-ux-pro-max-skill项目介绍

Ai1403864674

911人浏览 · 2026-03-19 16:36:34

Ai1403864674 · 2026-03-19 16:36:34 发布

注：以下介绍来自Kimi深度研究，开发过程中使用了此skill，以此记录，网页渲染结果可查看（介绍）。

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

UI-UX-Pro-Max-Skill 项目详解

1. 项目概述

1.1 核心定位

1.1.1 AI驱动的设计智能引擎

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

与传统的设计工具或组件库不同，该项目并非提供静态模板或预设样式，而是构建了一套动态智能推理系统。它能够理解自然语言描述的项目需求，基于庞大的结构化知识库生成完整、专业、可直接落地的设计系统方案。这一设计理念源于对行业痛点的深刻洞察：大量开发团队和非设计背景的产品构建者虽然具备出色的技术实现能力，却在视觉设计和用户体验决策方面面临巨大障碍，导致最终产品”功能可用但审美堪忧”。

该引擎的智能性体现在其多层次的决策架构上。与简单的规则匹配或模板替换不同，系统采用基于 BM25 排序算法的风格优先级计算、行业特定的反模式过滤机制，以及复杂的 JSON 条件决策规则处理流程。当用户输入”为我的美容水疗中心构建着陆页”时，系统启动完整的推理链条：识别产品类型、并行检索五个维度的知识库、综合决策生成定制化设计系统——而非从有限模板中机械选择。

1.1.2 跨平台UI/UX构建解决方案

该项目的第二大核心定位是真正的跨平台设计智能。它原生支持 13 种主流技术栈，完整覆盖现代软件开发的三大生态领域：

生态领域	支持技术栈
Web 开发	HTML + Tailwind CSS（默认）、React、Next.js、Vue、Nuxt.js、Svelte、Astro、shadcn/ui、Nuxt UI
移动原生	SwiftUI（iOS）、Jetpack Compose（Android）
跨平台	React Native、Flutter

这种跨平台能力的设计哲学源于对现代开发团队工作现实的深刻理解。同一产品往往需要在多个平台上实现一致体验，或团队需要根据项目特点灵活选择技术方案。UI-UX-Pro-Max-Skill 通过设计决策与技术实现解耦——先生成平台无关的设计系统规范，再针对选定技术栈生成相应代码实现——确保设计意图在不同平台上的一致传达。

更重要的是，系统对不同技术栈的支持并非简单语法转换，而是深入理解各平台的设计语言惯例和性能特征。为 SwiftUI 生成的代码充分利用 Apple 的 Human Interface Guidelines，为 Flutter 则遵循 Material Design 3 规范，同时保持核心设计系统（色彩、排版、间距、动效）的跨平台一致性。

1.1.3 开源技能插件生态系统

UI-UX-Pro-Max-Skill 采用开源模式发布，构建了一个开放、可扩展的技能插件生态系统。项目托管于 GitHub，采用宽松许可证允许商业使用和修改，降低了企业用户的采用门槛。

“技能插件”（Skill）概念体现了项目的架构创新：它是一种可被多种 AI 编程环境识别和调用的标准化能力扩展模块。UI-UX-Pro-Max-Skill 将自己定位为这样的插件，使得任何兼容的 AI 助手都能加载其设计智能能力。目前官方已支持 15+ 种 AI 编程助手，包括 Claude Code、Cursor、Windsurf、Antigravity、GitHub Copilot、Kiro、Codex CLI、Qoder、Roo Code、Gemini CLI、Trae 等。

开源策略还体现在社区驱动的知识积累机制上。设计领域的最佳实践持续演进，新的风格趋势、技术方案、行业需求不断涌现。通过开源，项目邀请全球设计者和开发者共同参与知识库完善，形成正向循环的生态系统。截至 2026 年初，项目已积累 112 次 Commits、17 个 Releases、31 位 Contributors 。

1.2 版本演进

1.2.1 v2.0核心突破：智能设计系统生成器

2025 年底发布的 v2.0 版本标志着项目从”设计知识库”到”智能设计系统生成器”的质变跃迁。该版本的核心突破是引入了 AI 驱动的推理引擎，能够在数秒内分析项目需求并生成完整的定制化设计系统。

智能生成器的工作机制可分解为四个阶段：

阶段	核心任务	技术实现
用户请求解析	意图识别和关键信息提取	自然语言理解、实体识别
多领域并行搜索	五维度知识库检索	异步查询、结果缓存
推理决策	多维度结果整合与优化	BM25 排序、规则过滤、冲突消解
完整设计系统输出	结构化设计规范生成	模板渲染、可解释性标注

这一突破的价值不仅在于自动化程度提升，更在于设计决策质量的系统性保障。传统人工设计流程中，决策者受限于个人经验范围，容易遗漏关键考量（如特定行业的无障碍要求、文化语境下的色彩禁忌）。智能生成器基于结构化知识库和显式推理规则，确保每次决策都经过完整检查清单验证。

1.2.2 从静态模板到动态推理的范式转变

UI-UX-Pro-Max-Skill 的版本演进清晰展示了从静态模板到动态推理的范式转变轨迹。早期设计辅助工具的核心模式是”模板库+变量替换”：预先设计好页面模板，用户选择最接近的模板，然后通过配置界面修改变量。这种模式的天花板明显：模板数量有限、变量配置维度固定、最终产出容易陷入”模板感” 。

动态推理范式则从根本上改变了这一逻辑。系统不再从预设模板中选择，而是基于对需求的理解实时”推理”出最优方案。这一转变的关键支撑在于知识表示形式的升级：从”模板实例”到”设计规则”。模板实例是具体的、有限的、刚性的；设计规则是抽象的、可组合的、灵活的。UI-UX-Pro-Max-Skill 的 161 条行业特定推理规则、67 种风格定义、99 条 UX 准则，都是设计规则的具象化——可以被视为设计领域的”公理”，通过推理引擎的”演绎”，生成无限可能的设计系统”定理” 。

2. 核心原理

2.1 智能推理引擎架构

2.1.1 多领域并行搜索机制（5维同步分析）

UI-UX-Pro-Max-Skill 推理引擎的底层架构建立在多领域并行搜索机制之上。这一设计源于对设计决策复杂性的深刻认知：高质量 UI/UX 设计需要在产品定位、视觉风格、色彩心理、信息架构、品牌气质等多个维度上达成协调一致。传统串行决策流程容易导致局部最优而全局失衡，并行搜索通过同时展开五个维度的知识检索，确保决策的全局最优性。

搜索维度	知识库规模	核心功能	决策影响
产品类型匹配	161 个行业类别	识别项目所属行业语境，加载对应规则集	决定整体设计基调与禁忌
风格推荐引擎	67 种 UI 风格	基于产品类型和项目气质推荐视觉风格	定义界面视觉语言
配色方案选择	161 套调色板	提供与行业和产品类型匹配的色彩系统	影响情感感知和品牌识别
着陆页模式库	24 种布局模式	推荐信息架构和页面结构	决定用户流程和转化效率
字体搭配系统	57 种组合方案	匹配字体气质与项目定位	塑造阅读体验和品牌调性

产品类型匹配（161个行业类别）

产品类型匹配是五维搜索的首要维度，其功能在于将用户的自然语言描述映射到预定义的 161 个行业类别之一，从而激活该类别关联的全套设计规则。这一映射过程并非简单关键词匹配，而是需要理解描述的语义内涵。例如，“美容水疗中心”和”医学美容诊所”在字面上有重叠，但属于不同产品类型，对应截然不同的设计规则——前者强调放松、奢华、情感体验，后者强调专业、安全、医疗信任。

161 个行业类别被组织为八个宏观领域：

宏观领域	典型细分类别
科技 SaaS 类	SaaS、微 SaaS、B2B 服务、开发者工具/IDE、AI/聊天机器人平台、网络安全平台
金融类	金融科技/加密、数字银行、保险科技、个人理财追踪、投资平台、支付处理
医疗健康类	医疗诊所、药房、牙科、兽医、心理健康、远程医疗、健康追踪
电商类	综合电商、奢侈品电商、P2P 市场、订阅盒、食品配送、二手交易
服务类	美容/水疗、餐饮、酒店、法律、家政、预约预订、教育服务
创意类	作品集、设计 agency、摄影、游戏、音乐流媒体、视频编辑
生活方式类	习惯追踪、食谱烹饪、冥想、天气、日记、情绪追踪、旅行规划
新兴科技类	Web3/NFT、空间计算、量子计算、自主无人机、机器人技术

每个行业类别都关联着丰富的设计语境信息：目标用户群体、使用场景、情感诉求、信任建立方式、视觉偏好禁忌等。这些信息以结构化规则形式存储，在产品类型匹配成功后自动加载，为后续维度决策提供上下文约束。

风格推荐引擎（67种UI风格）

风格推荐引擎负责在 67 种经过验证的 UI 风格中，为特定项目筛选最匹配的候选集并排序。这一引擎的设计挑战在于风格的”适用性”是多因素决定的：产品类型提供基础约束，但同一产品类型仍可能有多种可行风格（如 SaaS 产品既可选择”极简主义”强调效率，也可选择”玻璃拟态”展示现代感，还可选择”AI 原生 UI”突出智能特性）。

67 种风格被组织为三个功能组别：

通用风格组（49 种）覆盖最广泛的界面设计场景：

风格家族	代表风格	核心特征	最佳适用场景
极简主义家族	Minimalism、Swiss Style、Japanese Minimalism	极致简洁、内容优先、大量留白	企业应用、仪表板、文档
新拟态家族	Neumorphism、Glassmorphism、Claymorphism	柔和阴影、浮雕效果、触感模拟	健康应用、创意展示、现代 SaaS
粗野主义家族	Brutalism、Neo-Brutalism	原始元素、高对比度、反常规布局	设计作品集、艺术项目、前卫品牌
动态网格家族	Bento Grid、Masonry、Editorial Grid	模块化卡片、灵活布局、信息密度	仪表板、内容平台、产品页面
深色模式家族	Dark Mode、Midnight、OLED Black	低亮度界面、色彩抑制、夜间友好	开发者工具、媒体消费、夜间场景
AI 原生家族	AI-Native UI、Generative Interface	对话式界面、流式生成、协作状态	AI 产品、聊天机器人、copilot 应用

着陆页专用风格组（8 种）针对营销转化场景优化：

风格名称	核心策略	典型应用场景
首屏中心型（Hero-Centric）	大视觉焦点+清晰 CTA	品牌认知、产品发布
转化优化型（Conversion-Optimized）	减少摩擦、强化行动引导	潜在客户生成、销售页面
特性丰富型（Feature-Rich）	功能矩阵展示、价值分层	SaaS、复杂产品
极简直接型（Minimal-Direct）	极致简化、单页完成	简单产品、应用下载
社会证明聚焦型（Social-Proof-Heavy）	密集客户背书、信任建立	服务、B2C 产品
交互产品演示型（Interactive-Demo）	嵌入式体验、即时价值感知	软件工具、平台产品
信任权威型（Trust & Authority）	资质展示、专业形象	B2B、企业、咨询
叙事驱动型（Story-Driven）	情感弧线、品牌故事	品牌宣传、agency、非营利组织

BI/分析仪表板风格组（10 种）专注于数据可视化场景：

风格名称	核心特征	数据场景
数据密集型（Data-Dense）	最大化信息展示、专业用户导向	复杂数据分析、金融交易监控
热图风格（Heatmap-Style）	颜色编码密度、模式识别优先	地理数据、行为分析
高管仪表板（Executive）	关键指标突出、趋势概括	C 级汇报、战略决策
实时监控型（Real-Time）	动态更新、异常自动高亮	DevOps、运营中心、IoT
钻取分析型（Drill-Down）	层级探索、细节渐进披露	深度分析、问题排查
对比分析型（Comparative）	并排比较、差异强调	A/B 测试、竞品分析
预测分析型（Predictive）	置信区间、情景对比	机器学习输出、趋势预测
用户行为分析型（Behavioral）	漏斗可视化、路径追踪	UX 研究、产品优化
财务仪表板（Financial）	精确数值、合规展示	会计、投资、风险管理
销售智能型（Sales Intelligence）	管道可视化、业绩追踪	CRM、销售团队管理

风格推荐的排序算法采用 BM25（Best Match 25），这是信息检索领域广泛使用的相关性评分算法。BM25 的核心思想是：词条与文档的相关性不仅取决于词条出现频率，还考虑文档长度归一化和词条区分度。在风格推荐场景中，“查询”是项目需求的多维特征向量，“文档”是各风格的定义描述和适用场景标签，BM25 确保了最匹配项目语境的风格获得最高优先级。

配色方案选择（161套调色板）

配色方案选择维度与产品类型形成 1:1 的映射关系，即每个行业类别都有专门定制的调色板推荐。这一设计基于色彩心理学的研究共识：不同行业承载着不同的情感期望和文化联想，色彩选择需要与这些期望保持一致。例如，金融科技偏好蓝色系（信任、稳定、专业），医疗健康偏好白色和淡绿色（清洁、生命、平静），奢侈品电商偏好黑色和金色（高端、exclusive），儿童教育应用则偏好明亮饱和的多彩配色（活力、趣味）。

每套调色板的结构遵循功能化色彩系统的设计原则：

色彩角色	功能定位	典型应用场景
主色（Primary）	品牌核心识别色	Logo、主要按钮、关键信息高亮
辅色（Secondary）	与主色形成和谐对比	次要操作、分类标识、图表系列
行动号召色（CTA）	专门优化转化率的高对比色	主按钮、限时优惠、紧急操作
背景色（Background）	界面基底，考虑长时间阅读舒适性	页面背景、卡片底色、模态框
文本色（Text）	确保可读性的高对比深色或浅色	正文、标题、标签、辅助文字
情境色（Semantic）	系统状态反馈	成功（绿）、警告（黄）、错误（红）、信息（蓝）

以 Serenity Spa 案例为例，其配色方案为：主色 #E8B4B8（柔和粉）、辅色 #A8D5BA（鼠尾草绿）、CTA 色 #D4AF37（金色）、背景色 #FFF5F5（暖白）、文本色 #2D3436（炭灰）。这一配色精准传达了水疗中心的放松、奢华、自然的核心价值。

着陆页模式库（24种布局模式）

着陆页模式库专注于营销页面的信息架构设计，提供 24 种经过验证的高转化布局结构。每种模式都包含：推荐的区块序列及功能定位、各区块的内容优先级建议、视觉动线设计（F 型、Z 型、分层蛋糕等）、以及移动端适配策略。

模式按商业目标分类：

目标类型	代表模式	核心结构	关键成功因素
认知建立	首屏中心型	大视觉+标语+价值主张	3 秒内传达核心价值
转化驱动	转化优化型	CTA 矩阵+社会证明+紧迫感	减少决策摩擦、强化行动
信任构建	信任权威型	资质展示+案例+团队介绍	第三方背书、专业形象
教育引导	特性丰富型	功能展示+教程嵌入+FAQ	降低认知负荷、使用准备
社区动员	社会证明聚焦型	用户数据+社区展示+邀请	网络效应、归属感营造
内容吸引	叙事驱动型	内容预览+作者权威+订阅	价值承诺、更新预期

以 Serenity Spa 采用的”首屏中心+社会证明”模式为例，其结构定义为：首屏区块（情感驱动，建立第一印象）→ 服务区块（清晰展示可提供价值）→ 客户评价区块（建立信任，降低决策风险）→ 预订区块（转化行动，降低摩擦）→ 联系区块（提供备选沟通渠道）。CTA 按钮的放置策略是”首屏可见+评价后重复”，既确保即时转化机会，又在信任建立后强化行动引导。

字体搭配系统（57种组合方案）

字体搭配系统解决界面设计中最具挑战性的排版决策问题。57 种经过验证的字体搭配方案均基于 Google Fonts 构建，每种组合包含标题字体、正文字体的具体选择、推荐字重组合、Google Fonts 导入链接，以及备选字体栈。

字体搭配的设计遵循气质匹配原则：

气质类别	标题字体示例	正文字体示例	适用产品类型
优雅经典	Playfair Display、Cormorant Garamond	Source Sans Pro、Lato	奢侈品、高端服务、婚礼、艺术
现代简洁	Inter、Roboto、SF Pro	Inter、Open Sans	科技产品、工具应用、B2B 服务
友好亲和	Nunito、Quicksand、Rounded Mplus	Nunito Sans、Work Sans	消费应用、教育产品、儿童内容
权威专业	Merriweather、Source Serif Pro	Source Sans Pro、IBM Plex Sans	金融、法律、医疗、新闻
创意活力	Space Grotesk、Bebas Neue、Clash Display	Spline Sans、Manrope	创意 agency、娱乐产品、青年品牌
技术代码	JetBrains Mono、Fira Code、SF Mono	Inter、Roboto	开发者工具、技术文档、数据展示

以 Serenity Spa 案例为例，其字体搭配为 Cormorant Garamond（标题）+ Montserrat（正文），气质标签为”优雅、平静、精致”，明确标注”适合奢侈品牌、wellness、美容、编辑”场景。

2.1.2 推理决策流程

五维并行搜索完成后，系统进入核心的推理决策阶段，将多维度的候选结果整合为连贯、一致、最优的设计系统方案。

产品→UI类别规则映射

规则映射是推理的第一步，将识别出的产品类型转化为具体的 UI 设计约束集合。161 个行业类别各有一套关联的规则定义，涵盖：

规则要素	功能说明	示例（美容/水疗）
推荐模式	该类别通常采用的信息架构	首屏中心+社会证明
风格优先级	最适合的若干风格及其排序	柔和 UI 演进 > 有机生物亲和 > 极简优雅
色彩情绪	应传达的情感基调	放松、奢华、自然、温暖
排版气质	匹配的字体性格	优雅、精致、人文感
关键效果	常用的动效和交互模式	柔和视差、悬停状态、加载动画
反模式	绝对应避免的设计元素	霓虹色、激进动画、高对比深色模式

BM25排序算法应用风格优先级

BM25 算法在风格推荐阶段的应用是推理引擎的关键技术创新。该算法将项目需求特征（产品类型、功能需求、气质描述等）视为”查询词条”，将风格定义的属性标签视为”文档内容”，计算需求与风格的匹配得分。这一适配使得风格排序不仅考虑标签匹配的绝对数量，还考虑标签的区分度（罕见但精准匹配的标签权重更高）和风格描述的冗长度（避免标签堆砌的风格获得不当优势）。

行业反模式过滤机制

反模式过滤是确保设计决策质量的关键安全网。“反模式”指特定行业语境下应当避免的设计选择——它们可能在其他场景中有效，但在当前语境中会产生认知冲突、降低用户信任或损害品牌形象。

行业/场景	典型反模式	规避原因
金融科技	“AI 紫粉渐变”、过度动画、非标准交互	损害稳重、可信、专业形象
医疗健康	高饱和度红色、紧迫感设计、激进动画	引发焦虑、加剧用户不安
B2B 企业	游戏化元素、娱乐化色彩、 playful 动效	削弱专业权威感
电商转化	隐藏价格、强制注册、中断弹窗	增加决策摩擦、降低转化
开发者工具	过度装饰、非标准快捷键、封闭生态	降低效率、引发排斥

反模式过滤的执行策略是”硬过滤+软警告”两级：对于明确损害用户体验的反模式，系统直接排除相关选项；对于存在风险但情境依赖的反模式，系统在输出中标注警告，由用户根据具体情况判断。

JSON条件决策规则处理

推理引擎的底层规则以 JSON 格式表达，支持复杂的条件逻辑。规则的基本结构为：IF [条件集合] THEN [决策动作]，条件可涉及产品类型、功能需求、用户偏好、技术约束等多个维度。

2.2 设计系统生成流水线

2.2.1 输入层：自然语言需求解析

设计系统生成的起点是用户的自然语言输入。输入解析模块采用多层次理解策略：关键词提取识别明确信息（产品类型、功能需求），语义分析推断隐含气质（从形容词和语境词），意图识别判断用户优先级（转化优先 vs. 品牌表达优先），最终形成结构化的需求特征向量。

输入层的容错设计体现了对真实使用场景的适应：当产品类型不明确时，通过交互式澄清提问；当风格偏好矛盾时（如”极简但要有丰富动画”），标注冲突并建议折中方案；当需求超出当前知识库覆盖时，推荐最接近的已知类别并说明近似性。

2.2.2 处理层：多维度智能匹配

解析后的需求特征向量进入处理层，触发五维并行搜索和推理决策流程。该层的核心创新在于维度间的协调优化——各维度的独立决策可能存在冲突，系统通过交叉验证和迭代调整达成全局一致。协调策略包括：主维度优先（产品类型和风格作为最高优先级）、冲突检测（标注维度间的不一致）、以及迭代优化（在冲突维度上重新搜索替代方案）。

2.2.3 输出层：完整设计系统交付

输出层将推理结果结构化为可直接使用的设计系统文档。以 Serenity Spa 案例为例，标准输出格式包含：

输出组件	具体内容	实施指导价值
模式（Pattern）	Hero-Centric + 信任权威型	确定页面结构和信息架构
风格（Style）	有机生物亲和主义（Organic Biophilic）	定义视觉美学方向和设计原则
配色（Colors）	鼠尾草绿、沙色、奶油色、陶土色	提供完整的调色板和语义色定义
排版（Typography）	Playfair Display + Inter	指定字体家族、字重、字号比例
动效（Effects）	柔和视差、悬停状态、加载动画	描述关键交互和过渡效果
反模式（Avoid）	霓虹色、激进动画、深色模式	警示需规避的设计实践
检查清单（Checklist）	无障碍、响应式、动画优化等	预交付验证标准

这种”人类可读、机器可执行”的双模态输出，既便于设计评审和团队协作，也便于 AI 助手直接解析并转化为代码实现。

3. 功能体系

3.1 设计资产库

3.1.1 风格系统（67种）

UI-UX-Pro-Max-Skill 的风格系统是其最直观的设计资产，67 种精心定义的风格覆盖了从经典到前沿、从保守到激进的完整设计光谱。每种风格都包含完整的定义文档：视觉特征描述、适用场景建议、技术实现要点、以及与其他风格的组合禁忌。

通用风格（49种）：极简主义、玻璃拟态、brutalism、AI原生UI等

通用风格组的 49 种风格构成界面设计的基础 vocabulary，按设计演进的时间线和复杂度组织：

风格名称	核心视觉特征	技术实现要点	典型应用场景
极简主义（Minimalism）	大量留白、清晰层级、功能性排版	CSS Grid、字体层级、微妙色彩	企业应用、仪表板、文档
瑞士风格（Swiss Style）	非对称布局、无衬线字体、客观摄影	模块化网格、Akzidenz-Grotesk 系字体	编辑设计、文化机构
玻璃拟态（Glassmorphism）	半透明背景、背景模糊、细微边框	backdrop-filter、背景模糊、边框高光	现代 SaaS、金融仪表板
新拟态（Neumorphism）	柔和阴影、浮雕效果、单色基调	box-shadow 多层叠加、渐变过渡	健康应用、IoT 控制面板
粗野主义（Brutalism）	原始 HTML 感、高对比色彩、系统字体	默认样式、粗边框、有意不对齐	设计作品集、艺术项目、前卫品牌
便当盒网格（Bento Grid）	模块化卡片、灵活布局、信息密度	CSS Grid、响应式断点、内容适配	仪表板、产品页面、Apple 风格展示
AI 原生 UI（AI-Native UI）	对话式界面、流式生成、协作状态	实时数据驱动、自适应布局、预测交互	AI 产品、聊天机器人、copilot 应用
深色模式 OLED（Dark Mode OLED）	纯黑背景、色彩抑制、节能优化	#000000 背景、低亮度色彩、对比度控制	夜间应用、OLED 设备、开发者工具

着陆页专用风格（8种）：转化优化型、故事驱动型、信任权威型等

风格名称	核心设计策略	心理学原理	转化目标
转化优化型	减少摩擦、强化 CTA、建立紧迫感	认知负荷理论、稀缺性原理	最大化即时转化
故事驱动型	叙事弧线、情感共鸣、渐进披露	英雄之旅结构、情感记忆效应	品牌认知、长期关系
信任权威型	资质展示、客户背书、专业形象	社会证明、权威效应	B2B 决策、高客单价
交互演示型	嵌入式体验、即时价值感知	试用效应、禀赋效应	降低试用门槛
社会证明聚焦型	密集用户评价、使用数据展示	从众效应、相似性原理	降低决策风险
极简直接型	单一焦点、消除干扰、快速行动	希克定律、选择悖论	简单产品、冲动转化
特性丰富型	功能矩阵、价值分层、对比展示	锚定效应、框架效应	复杂产品、评估阶段
首屏中心型	大视觉冲击力、3 秒价值传达	首因效应、视觉层次	品牌认知、记忆建立

BI/分析仪表板风格（10种）：数据密集型、实时监控型、预测分析型等

BI/分析仪表板风格组专注于数据可视化场景的特殊需求，平衡信息密度与可读性：

风格名称	核心挑战	设计解决方案	用户类型
数据密集型	有限空间内呈现大量信息	微排版优化、高效信息编码、交互式细节	专业分析师
实时监控型	持续态势感知、异常快速识别	大字体关键指标、颜色编码状态、自动警报	运维人员、运营中心
预测分析型	传达预测的不确定性	置信区间可视化、多情景对比、历史准确性	决策者、模型使用者
高管仪表板	高层快速把握关键信息	趋势概括、异常高亮、行动建议	C-level、管理层
钻取分析型	支持深度探索和多层级下钻	层级导航、上下文保持、细节渐进披露	数据探索者、问题排查

3.1.2 色彩系统（161套）

行业专属调色板（与产品类型1:1映射）

色彩系统的 161 套调色板与产品类型形成精确的 1:1 映射，每套调色板的设计都基于对该行业色彩心理学的深入研究、竞争对手色彩策略的分析、以及成功品牌案例的总结。

行业领域	典型色彩策略	情感目标	代表品牌参考
金融科技	深蓝主色+青色辅助+金色 CTA	信任、稳定、增长	Stripe、Robinhood
医疗健康	白色/浅灰背景+淡绿/蓝色点缀	清洁、生命、平静	Mayo Clinic、Teladoc
奢侈品电商	黑色背景+金色/玫瑰金+大量留白	高端、exclusive、精致	Net-a-Porter、Farfetch
教育科技	明亮色彩+友好渐变+活力点缀	趣味、成长、可及	Duolingo、Khan Academy
开发者工具	深色模式+霓虹强调色+高对比	专注、高效、技术感	GitHub、Vercel

动态色彩推理生成

除了预定义的 161 套调色板，系统还支持基于色彩理论的动态生成。当用户有特定色彩偏好时，引擎可以基于色彩和谐理论（互补色、类似色、三角色等）生成协调的完整配色方案。动态生成的色彩方案同样经过无障碍验证，确保对比度满足 WCAG 2.1 AA 标准。

3.1.3 排版系统（57种字体搭配）

Google Fonts集成方案

排版系统的 57 种字体搭配均基于 Google Fonts 构建，确保全球可访问性和零授权成本。每种搭配包含：

组件	具体内容	技术实现
标题字体	Display/Heading Font 的具体选择	Google Fonts 导入链接、字重建议
正文字体	Body Font 的具体选择	备选字体栈、加载性能标注
技术字体	Code/Mono Font（如适用）	等宽字体、编程场景优化
排版比例	字号阶梯、行高、字间距	基于 8px 网格、模块化尺度

字体个性匹配算法

字体搭配的推荐基于“字体个性”与项目气质的匹配。系统为每种字体标注性格标签，与产品类型的气质需求进行匹配：

字体	性格标签	最佳匹配场景
Inter	现代、中性、高效	科技 SaaS、开发者工具
Playfair Display	优雅、经典、编辑感	奢侈品、时尚、出版
Space Grotesk	前卫、独特、几何感	创意 agency、青年品牌
Merriweather	权威、可信、学术感	金融、法律、教育
Nunito	友好、圆润、亲和	消费应用、儿童产品

3.2 模式与组件库

3.2.1 着陆页模式（24种）

着陆页模式的 24 种布局结构经过转化率优化（CRO）最佳实践验证，涵盖从简单单页到复杂多步骤漏斗的完整场景。每种模式包含：推荐的区块序列及功能定位、各区块的内容优先级建议、视觉动线设计、以及移动端适配策略。

3.2.2 图表类型（25种）

图表类型库专门针对仪表盘和分析场景，提供 25 种数据可视化方案：

图表类别	代表类型	最佳数据场景	设计要点
趋势类	折线图、面积图、Sparkline	时间序列、性能监控	平滑曲线、异常高亮、预测区间
比较类	柱状图、条形图、雷达图	类别对比、多维评估	排序策略、基准线、差异强调
构成类	饼图、环形图、树图、桑基图	占比分析、流程分解	限制切片数、标签优化、交互下钻
分布类	散点图、箱线图、热力图、直方图	相关性分析、异常检测	密度表达、聚类识别、阈值标记
地理类	Choropleth、气泡地图、流向图	区域分析、物流追踪	投影选择、色阶优化、交互缩放
关系类	网络图、力导向图、旭日图	关联分析、层级探索	节点布局、边权重、聚类着色
实时类	动态仪表盘、实时流图、心跳图	监控告警、运营中心	更新动画、阈值 alert、历史对比

3.3 行业专属规则引擎

3.3.1 161条行业特定推理规则

161 条行业特定推理规则是 UI-UX-Pro-Max-Skill 区别于通用设计工具的核心竞争力。这些规则将设计最佳实践编码为可执行的决策逻辑，使 AI 能够”像行业专家一样思考”。

宏观领域	规则数量	核心设计约束	典型反模式
科技 SaaS 类	~25 条	产品价值快速传达、免费试用转化、开发者体验	过度营销感、忽视文档体验
金融类	~20 条	信任感建立、合规性暗示、安全感知设计	“AI 紫粉渐变”、激进动画、过度承诺
医疗健康类	~18 条	情感敏感性、无障碍强制合规、信息清晰度	紧迫感设计、高对比刺激、隐私忽视
电商类	~22 条	转化率最大化、信任建立、决策辅助	隐藏价格、强制注册、信任缺失
服务类	~28 条	线上预约与线下体验衔接、地理位置相关	营业时间模糊、预约流程复杂
创意类	~20 条	个性表达、创意展示、可用性平衡	过度创新损害可用性、加载性能忽视
生活方式类	~18 条	日常习惯养成、情感连接、个性化推荐	通知干扰、隐私侵犯、成瘾设计
新兴科技类	~10 条	用户教育、技术概念抽象化、信任建立	过度技术术语、忽视用户认知负荷

3.3.2 规则要素构成

每条行业规则以结构化 JSON 格式编码，包含七个核心要素：

要素	说明	功能
推荐模式	最适合的着陆页/仪表盘模式	确定信息架构框架
风格优先级	按匹配度排序的风格列表	指导视觉方向选择
色彩情绪	色彩心理学定位和品牌调性	确保情感传达准确
字体气质	字体家族选择和排版调性	塑造阅读体验和品牌
关键动效	必须实现和必须避免的动画	优化交互体验
反模式警示	行业特定的设计禁忌	规避常见陷阱
合规检查	法律/行业规范相关的设计要求	降低法律风险

3.4 质量保障系统

3.4.1 99条UX设计准则

99 条 UX 设计准则构成质量保障的知识基础，按优先级分层：

优先级	准则数量	核心关注	未遵守后果
CRITICAL（关键）	~15 条	无障碍、可用性基础	产品无法使用或违法
HIGH（高）	~25 条	用户体验核心要素	显著用户流失
MEDIUM（中）	~35 条	体验优化项	竞争力下降
LOW（低）	~24 条	精致度提升	品牌感知影响

准则库包含最佳实践库（经过验证的设计模式）、反模式识别（常见设计错误及替代方案）、以及无障碍规则（WCAG 2.1 合规要求）。

3.4.2 预交付检查清单

预交付检查清单是质量保障的最后防线，包含 7 大类别、20+ 具体检查项：

检查类别	关键检查项	验证标准
视觉质量	图标规范（SVG 禁用 emoji）、品牌一致性	无表情符号、图标来源统一
交互状态	可点击元素反馈、过渡动画	cursor-pointer、150-300ms 过渡
浅色/深色模式	双模式对比度、元素可见性	WCAG 4.5:1、玻璃元素可见
布局	响应式断点、内容遮挡检查	375/768/1024/1440px、无水平滚动
无障碍	屏幕阅读器、键盘导航、减少动效	alt 文本、focus 状态、prefers-reduced-motion

4. 技术栈支持

4.1 Web开发生态

技术方案	定位	核心优势	适用场景
HTML + Tailwind CSS	默认方案	零构建成本、性能优异、设计系统友好	快速原型、简单项目、性能敏感场景
React	主流框架	组件生态丰富、状态管理成熟	复杂交互应用、大型项目
Next.js	全栈 React	SSR/SSG、图像优化、路由完善	SEO 敏感、内容驱动应用
shadcn/ui	现代组件库	可复制源码、高度可定制、主题系统	快速启动、设计系统一致
Vue + Nuxt.js	渐进式框架	学习曲线平缓、性能优秀	中小型项目、团队技术偏好
Svelte	编译时优化	无虚拟 DOM、包体极小	高性能要求、嵌入式应用
Astro	内容优先	岛屿架构、零 JS 默认、多框架混合	内容站点、文档、博客

4.2 移动开发生态

平台	技术方案	核心特性	设计系统集成
iOS	SwiftUI	声明式语法、实时预览、Apple 生态深度集成	Human Interface Guidelines 适配
Android	Jetpack Compose	Kotlin 优先、Material Design 3、动画系统	Material You 动态主题
跨平台	React Native	JavaScript/TypeScript、接近原生性能、热更新	组件桥接、原生模块集成
跨平台	Flutter	Dart 语言、自绘引擎、高度一致体验	Material/Cupertino 双设计语言

5. 使用方法

5.1 安装部署

5.1.1 Claude Marketplace安装（Claude Code）

# 添加插件市场源
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

# 安装技能
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

安装完成后重启 Claude Code，验证命令 /skills 应显示 ui-ux-pro-max 在已安装技能列表中。

5.1.2 CLI工具安装（推荐）

# 全局安装 CLI
npm install -g uipro-cli

# 项目目录初始化
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # 所有助手

CLI 工具的核心优势在于模板生成——根据目标 AI 助手的配置文件格式，自动生成正确的目录结构和技能定义文件。

5.2 调用模式

调用模式	触发方式	示例	适用场景
技能模式（Skill Mode）	自然语言自动激活	“为我的 SaaS 产品构建着陆页”	日常开发、快速迭代
工作流模式（Workflow Mode）	斜杠命令调用	/ui-ux-pro-max Build landing page	精确控制、复杂需求

5.3 支持平台

平台	集成方式	特色功能
Claude Code	Marketplace 插件 / CLI	原生技能系统、深度集成
Cursor	CLI 初始化	.cursor/commands 自定义命令
Windsurf	CLI 初始化	Cascade 工作流集成
Antigravity	CLI 初始化	新兴 AI 助手支持
GitHub Copilot	CLI 初始化	.github/prompts 提示工程
Kiro	CLI 初始化	韩国市场主流助手
Codex CLI	CLI 初始化	OpenAI 官方代码助手
Qoder	CLI 初始化	中文开发者社区
Roo Code	CLI 初始化	开源 Claude Code 替代

6. 典型应用案例

6.1 Serenity Spa设计系统

Serenity Spa 是项目文档中展示的典型应用案例，完整演示了从自然语言需求到设计系统的生成过程。

6.1.1 模式推荐：Hero-Centric + 信任权威型

区块序列	功能定位	设计策略
首屏（Hero）	情感驱动，建立第一印象	大视觉背景、品牌标语、即时 CTA
服务展示	清晰展示可提供价值	服务卡片网格、价格透明、预约入口
客户评价	建立信任，降低决策风险	真实用户照片、星级评分、具体体验描述
预订区块	转化行动，降低摩擦	简化表单、日期选择器、即时确认
联系信息	提供备选沟通渠道	地图嵌入、营业时间、多联系方式

6.1.2 风格定位：有机生物亲和主义（Organic Biophilic）

有机生物亲和主义风格的核心特征：自然灵感形态、大地色调、有机纹理、可持续美学。该风格精准匹配水疗中心的放松、自然、可持续品牌价值，与科技感的”玻璃拟态”或激进的”粗野主义”形成鲜明对比。

6.1.3 配色方案：鼠尾草绿、沙色、奶油色、陶土色

色彩角色	色值	情感传达	应用场景
主色	鼠尾草绿（Sage Green）	自然、平静、疗愈	品牌标识、主要按钮
辅色	沙色（Sand）	温暖、大地、舒适	背景层次、分隔元素
背景色	奶油色（Cream）	柔和、干净、宽敞	页面基底、卡片背景
强调色	陶土色（Terracotta）	活力、手工艺、真实	CTA 按钮、关键高亮

6.1.4 字体搭配：Playfair Display + Inter

字体	角色	气质标签	应用场景
Playfair Display	标题字体	优雅、编辑感、经典	大标题、品牌标语、引用文字
Inter	正文字体	现代、中性、高效	正文阅读、界面元素、数据展示

这一搭配实现了优雅与可读性的平衡：衬线标题体传递高端服务品质，无衬线正文体确保屏幕阅读的舒适性。

6.1.5 关键效果：柔和视差、悬停状态、加载动画

效果类型	具体实现	性能考量
柔和视差	0.3x 速度的多层背景滚动	尊重 prefers-reduced-motion
悬停状态	150ms 过渡、微妙缩放或阴影变化	仅 CSS transform，避免布局抖动
加载动画	骨架屏 + 脉冲效果	感知性能优化、内容渐进披露

6.1.6 反模式规避：避免霓虹色、避免激进动画等

反模式	规避原因	替代方案
霓虹色（Neon Colors）	与水疗的平静自然气质冲突	大地色调、柔和饱和度
激进动画（Aggressive Animation）	引发焦虑、干扰放松体验	柔和过渡、自然缓动曲线
深色模式（Dark Mode）	传统水疗场景的光亮联想	暖白背景、充足自然光感
“AI 紫粉渐变”	科技感过强、损害高端感知	有机渐变、自然色彩过渡

6.1.7 交付检查清单：无障碍、响应式、动画优化等

检查维度	具体标准	验证方法
无障碍	对比度 ≥ 4.5:1、屏幕阅读器兼容、键盘导航	Lighthouse 审计、手动测试
响应式	375px / 768px / 1024px / 1440px 断点	设备模拟、真实设备测试
动画优化	尊重 prefers-reduced-motion、60fps 流畅	性能面板、用户偏好测试
视觉质量	无 emoji 图标、SVG 统一来源、品牌一致性	设计审查、代码检查
交互状态	所有可点击元素有反馈、过渡平滑	交互测试、边缘情况验证

Serenity Spa 案例的价值在于其完整性演示：从”美容水疗中心”这一简单自然语言输入，系统生成了涵盖模式、风格、色彩、排版、动效、反模式、检查清单的全要素设计系统，可直接指导开发实现，无需人工设计决策。这一案例生动展示了 UI-UX-Pro-Max-Skill 如何将专业设计能力”民主化”，使任何开发者都能产出接近商业产品水准的界面设计。