UI/UX设计专家Skill：把风格库、配色盘、字体配对与 99 条 UX 规则装进一条命令
核心结论速览
- 它是什么：一个面向 Web 与移动应用的 UI/UX 设计智能技能，内置 50+ 种设计风格、161 种调色板、57 种字体配对、161 种产品类型推理规则、99 条 UX 指南，以及 10 个技术栈下的 25 种图表类型。
- 它解决什么：解决"UI 看起来不专业但说不出哪里不对"“配色、字体、间距靠拍脑袋”"上线前没人把关可访问性与交互细节"这类高频痛点。
- 怎么用：核心是一条命令行查询——先用
--design-system拿到整套设计系统（含推理与反模式），再用--domain深挖某个维度，最后用检查清单验收。 - 最适合谁：独立开发者、全栈工程师、需要自己动手做界面设计的前端与移动端开发者，以及没有专职设计师的小团队。
- 边界清晰：纯后端、API/数据库设计、DevOps 等与界面外观无关的任务，官方明确建议跳过此技能。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
这个技能的中文名是 UI/UX设计专家Skill，英文名 ui-ux-pro-max，技能 ID 为 14268。它定位为"设计智能"层：当任务会改变一个功能的外观、感觉、动效或交互方式时，就该让它介入。
它要解决的核心问题是设计决策的原材料缺失。开发者通常会遇到三种困境：一是不确定某类产品该用哪种风格（玻璃拟态？极简？便当网格？）；二是配色、字体、间距缺少成体系的参考，只能凭感觉拼凑；三是可访问性、触摸目标、暗黑模式对比度这些"专业细节"散落在多份平台规范里，很少有人真的逐条翻阅。这个技能把上述内容整理成可搜索的数据库，并按优先级给出建议。
一键安装与验证思路
该技能以技能包形式提供，安装本身是"装载一次、长期复用"，具体入口与命令请以官方说明为准。安装前需要确认一个真实存在的前置条件——Python 环境，因为技能的核心检索能力通过 Python 脚本提供。
第一步，检查 Python 是否可用：
python3 --version || python --version
若未安装，可按操作系统选择方式：macOS 使用 brew install python3；Ubuntu/Debian 使用 sudo apt update && sudo apt install python3；Windows 使用 winget install Python.Python.3.12。
第二步，通过你所使用平台的技能市场或技能包入口完成安装（具体安装命令与存放路径以官方说明为准）。安装后需确认脚本位于 skills/ui-ux-pro-max/scripts/search.py 这一相对路径下，因为后续所有查询都基于该路径调用。
第三步，验证是否生效。执行一次设计系统查询，若能返回包含风格、配色、排版与反模式建议的完整结果，即说明安装成功：
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
这一步同时验证了三件事：Python 可用、脚本路径正确、知识库可被检索。相比"装完不知道有没有生效"的常见困扰，这种用一次真实查询来做冒烟测试的方式更可靠。
2. 该技能的主要功能和特点
- 一套覆盖全链路的可搜索设计知识库：内置 50+ 种风格（玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当网格、暗黑模式、响应式、拟物化、扁平设计等）、161 种调色板、57 种字体配对、161 种产品类型、99 条 UX 指南，以及 10 个技术栈下的 25 种图表类型。
- 带推理的设计系统生成：
--design-system会并行搜索产品、风格、颜色、落地页、排版等多个领域，再套用推理规则选出最佳匹配，最终输出模式、风格、颜色、排版、效果，并附带"应避免的反模式"。普通工具通常只给结果，这里还告诉你为什么以及别做什么。 - 优先级驱动的规则体系：99 条 UX 指南被组织为 10 个优先级类别，从"可访问性"“触摸与交互”“性能"等严重级问题开始，逐级下探到"排版与色彩”“动画”“表单与反馈”“导航模式”“图表与数据”。这解决了"问题太多不知从哪改"的排序难题。
- 设计系统可持久化、可分层覆盖：通过
--persist将设计系统落盘为design-system/MASTER.md全局单一事实来源，并支持用--page生成页面级覆盖文件；构建具体页面时优先读取页面文件，不存在则回落到 Master，实现跨会话的分层检索。 - 多维度领域检索：
--domain支持 product、style、typography、color、landing、chart、ux、google-fonts、react、web、prompt 等领域，可按需深挖单一维度。 - 技术栈级实现指导：
--stack参数提供具体技术栈的最佳实践，详情中给出的示例为react-native（涵盖组件、导航、列表等关注点）；其余技术栈的具体支持方式以官方说明为准。 - 两种输出格式：默认 ASCII 框格式适合终端即时查看，
-f markdown输出 Markdown 便于写入文档与团队共享。 - 生态集成：描述中提到集成 shadcn/ui MCP 用于组件搜索与示例，便于把设计建议直接落到可复用组件上。
- 覆盖完整元素谱系：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表均为其明确支持的设计对象。
3. 如何使用该技能？
整体工作流分为"分析需求 → 生成设计系统 → 按需深度检索 → 技术栈指导 → 交付前验收"五步。
步骤 1：分析需求，提取关键信息。 从请求中提炼四类要素：产品类型（娱乐/工具/生产力或混合型）、目标受众与使用场景、风格关键词（有趣、充满活力、极简、暗黑、内容优先、沉浸式等）、技术栈。
步骤 2：生成设计系统（必需的第一步）。
python3 skills/ui-ux-pro-max/scripts/search.py "<产品类型> <行业> <关键词>" --design-system -p "项目名称"
输入示例："AI search tool modern minimal" --design-system -p "AI Search"。输出为完整设计系统，包含设计模式、风格方向、配色方案、排版体系、效果规范以及需要规避的反模式。若希望结果可直接复用，追加 --persist：
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system --persist -p "AI Search" --page "dashboard"
此时会生成 design-system/MASTER.md 与 design-system/pages/dashboard.md（页面相对 Master 的偏差）。后续构建具体页面时，先检查对应页面文件是否存在，存在则以其规则为准，否则仅用 Master。
步骤 3：按需补充领域检索。 拿到整体方案后，针对不确定的维度单独深挖。例如补充风格选项与搜索加载体验：
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
步骤 4：获取技术栈实现指导。
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
步骤 5：交付前验收。 实现前先跑一次 --domain ux "animation accessibility z-index loading" 作为 UX 验证环节，再按"§1–§3 严重与高优先级"清单复核，最后在小屏（如 375px）与横屏方向下测试，并验证"减少动画偏好"和"最大动态字体"开启时的表现。
查询技巧：关键词越具体越好，用"产品 + 行业 + 调性 + 密度"的多维组合，例如 "entertainment social vibrant content-dense"，而非笼统的 "app"；同一需求可换关键词多次尝试（"playful neon" → "vibrant dark" → "content-first minimal"）。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| UI/UX设计专家Skill（本技能） | 可搜索的 UI/UX 设计智能知识库 | 设计系统生成、10 类优先级规则、11 个领域检索、技术栈指导、设计系统持久化与分层覆盖 | 需 Python 环境，安装与调用以官方说明为准；核心操作是命令行查询 | 从零搭建页面/组件风格、审查现有 UI、落地暗黑模式与可访问性 | 优势：知识密度高、带推理与反模式、可落盘复用、跨 Web 与移动端；不足：需命令行习惯，产出仍需人工判断与落地 |
| 通用大模型直接对话生成 UI 代码 | 通用生成式助手 | 依提示词直接产出界面代码与样式 | 几乎零门槛，打开即用 | 快速原型、临时样式调整 | 优势：上手最快、交互自然；不足：风格与规范一致性不稳定，缺少系统化规则库与验收清单，难以跨会话保持一致 |
| 组件库 + 官方设计规范文档（如 Tailwind 生态、shadcn/ui） | 组件资产与规范文档 | 提供现成组件、样式令牌与文档说明 | 需接入项目与构建链路，存在学习成本 | 已有设计方向、需要快速拼装一致界面 | 优势：组件质量高、落地直接；不足：主要解决"怎么实现"，对"该选什么风格/配色/字体"的决策支持较弱 |
| 平台设计规范（Material Design / Apple HIG）+ 设计工具模板 | 平台级规范与设计资产 | 交互模式、尺寸、动效、无障碍的系统性规范 | 需自行阅读与筛选，信息量大 | 遵循平台习惯的 iOS/Android/Web 产品 | 优势：权威、详尽、贴合平台；不足：分散在长文档中，检索效率低，难以针对具体产品类型给出组合建议 |
对比可以看出，本技能的差异化在于把"决策"和"验收"两端的空白补上了：组件库解决实现，平台规范提供权威依据，而它负责在动手前给出成套风格方案、在交付前给出可执行的检查清单。
5. 该技能的典型应用场景与实际体验情况
场景一：独立开发者做产品落地页。 角色是独立开发者，痛点是"页面能跑起来，但看着像半成品"。使用方式是先用 --design-system 输入产品类型与调性关键词，拿到风格、配色、字体、效果与反模式，再按 --domain landing 确认 hero、社会证明、定价等区块结构。体验上，最大的变化是决策从"猜"变成"选"——从 161 种调色板和 57 种字体配对中按产品类型收窄，比从零调色快得多。注意点是关键词必须具体，笼统的输入只会得到笼统的建议。
场景二：前端团队重构仪表盘与数据可视化。 痛点是图表类型选错、图例分离到滚动区下方、只用颜色区分数据系列。使用方式是 --domain chart 匹配数据类型（趋势用折线、比较用条形、比例用饼图/环形），并遵循"超过 5 个分类避免饼图"“网格线低对比度”"提供表格作为无障碍替代"等规则。体验上，这类"说不出为什么难看"的问题被转化为可逐条勾选的检查项，评审沟通成本显著下降。
场景三：移动端 App 设计与实现（React Native 等）。 痛点是触摸目标过小、固定底栏遮挡内容、安全区域与手势冲突。使用方式是 --stack react-native 取实现指导，再对照"触摸与交互""布局与响应式"章节核对 44×44pt 最小点击区、8pt 间距节奏、安全区域内边距。体验上，交付前检查清单是最实用的部分，能拦住大量"上线后才被发现"的细节问题。注意点：详情中的技术栈示例以 React Native 为主，其他技术栈的用法以官方说明为准。
场景四：上线前的 UI 质量审查。 角色是即将发版的全栈工程师，痛点是"不知道还要检查什么"。使用方式是跑一次 --domain ux "animation accessibility z-index loading" 作为验证环节，再按严重级与高级优先级清单复核，并单独检查暗黑模式对比度（不假设浅色模式的值可用）。体验上，它把"审美问题"翻译成了"对比度 4.5:1"“动画 150–300ms”"禁用元素不透明度 0.38–0.5"这类可验证的数字。
整体上手难度：低到中等。熟悉命令行的开发者基本一次就会；真正的门槛不在操作，而在把建议转化为设计判断——工具给出的是带推理的推荐，不是唯一答案。
6. 该技能能为用户带来的价值
第一，把分散的规范变成一次检索。 可访问性、触摸交互、性能、风格、布局、排版、动画、表单、导航、图表十大类共 99 条指南，加上 50+ 风格、161 种调色板、57 种字体配对、161 种产品类型、25 种图表类型，原本需要翻阅多份平台规范并自行归纳，现在压缩成一次命令查询。检索成本从"读文档"降到"跑一条命令"。
第二，降低"没有设计师"团队的专业门槛。 小团队不必再为配色、字体配对、间距体系做无休止讨论——--design-system 直接给出成套方案并附带反模式，让非设计背景的开发者也能做出风格统一、可访问性达标的界面。
第三，把设计一致性沉淀为资产。 --persist 生成的 MASTER.md 是跨会话的单一事实来源，页面级覆盖文件保证局部差异可控。这意味着设计规范不再是"某个人脑子里的感觉"，而是可检索、可版本化、可交接的工程产物，对多人协作与长期维护的价值远高于单次使用。
第四，减少返工。 交付前检查清单与优先级规则让问题在编码阶段而非上线后暴露，尤其是暗黑模式对比度、触摸目标尺寸、布局抖动（CLS）这几类"上线后修复成本高"的问题。
7. 常见问题 FAQ
Q1：怎么安装？装完怎么确认能用？
答：先确认 Python 环境可用（python3 --version || python --version，未安装则按系统选择 brew、apt 或 winget 方式安装），再通过技能市场或技能包入口完成加载，具体命令与路径以官方说明为准。验证方式见上文第 1 部分：执行一次 --design-system 查询，能返回风格、配色、排版与反模式建议即表示生效。
Q2：收费吗？ 答：技能本身随技能包提供，具体授权与费用政策请以官方说明为准，本文不提供价格信息。
Q3：适合谁用？完全不懂设计能用吗？ 答：最适合独立开发者、全栈工程师、以及需要自己动手做界面的前端与移动端开发者。完全不懂设计也能用——它给出的是带推理的成套建议（风格 + 配色 + 字体 + 效果 + 反模式），但从"建议"到"好看的界面"仍需要你按检查清单逐项落实。
Q4：什么情况下不该用它？ 答：纯后端逻辑开发、仅涉及 API 或数据库设计、与界面无关的性能优化、基础设施与 DevOps 工作、非可视化的脚本任务，官方明确建议跳过。判断标准很简单：这个任务会不会改变功能的外观、感觉、动效或交互方式，会则用，不会则跳过。
Q5：和组件库、平台设计规范相比该怎么选？ 答：三者互补而非替代。组件库解决"怎么快速实现"，平台规范提供权威依据，本技能解决"该选什么风格组合"和"交付前该检查什么"。如果已经有了明确设计稿和组件体系，组件的价值更大；如果是从零开始或界面"不够专业但不知为何"，优先用本技能做设计系统与审查。