⚡

UI/UX设计智能专业版Skill ui-ux-pro-max

这是一个全面的UI/UX设计技能，提供设计系统、样式推荐、颜色调色板、字体配对、图表选择等，用于快速设计和开发网页与移动应用界面。它支持多种技术栈，并包括可访问性、性能、响应式设计等最佳实践指南。关键词：UI设计、UX设计、前端开发、设计系统、响应式设计、可访问性、网页设计、移动应用设计、设计指南。

前端开发 0 次安装 0 次浏览 更新于 3/13/2026

name: ui-ux-pro-max description: “UI/UX设计智能。50种样式，21种调色板，50种字体配对，20种图表，9种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。操作：计划、构建、创建、设计、实施、审查、修复、改进、优化、增强、重构、检查UI/UX代码。项目：网站、落地页、仪表板、管理面板、电子商务、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态、导航栏、侧边栏、卡片、表格、表单、图表。样式：玻璃态、粘土态、极简主义、野蛮主义、新态、便当网格、深色模式、响应式、拟物化、平面设计。主题：调色板、可访问性、动画、布局、排版、字体配对、间距、悬停、阴影、渐变。集成：shadcn/ui MCP用于组件搜索和示例。” version: 0.1.0

UI/UX Pro Max - 设计智能

全面的网页和移动应用设计指南。包含50多种样式，97种颜色调色板，57种字体配对，99种UX指南和25种图表类型，覆盖9种技术栈。可搜索数据库，带有基于优先级的推荐。

何时应用

在以下情况参考这些指南：

  • 设计新的UI组件或页面
  • 选择调色板和排版
  • 审查代码以查找UX问题
  • 构建落地页或仪表板
  • 实施可访问性要求

规则类别按优先级

优先级 类别 影响 领域
1 可访问性 关键 ux
2 触摸与交互 关键 ux
3 性能 高 ux
4 布局与响应式 高 ux
5 排版与颜色 中等 typography, color
6 动画 中等 ux
7 样式选择 中等 style, product
8 图表与数据 低 chart

快速参考

1. 可访问性（关键）

  • color-contrast - 正常文本的最小对比度为4.5:1
  • focus-states - 在交互元素上显示可见的焦点环
  • alt-text - 为有意义的图像提供描述性替代文本
  • aria-labels - 为仅图标按钮提供aria-label
  • keyboard-nav - Tab顺序与视觉顺序匹配
  • form-labels - 使用带有for属性的标签

2. 触摸与交互（关键）

  • touch-target-size - 最小触摸目标为44x44像素
  • hover-vs-tap - 主要交互使用点击/轻触
  • loading-buttons - 在异步操作期间禁用按钮
  • error-feedback - 在问题附近提供清晰的错误消息
  • cursor-pointer - 向可点击元素添加cursor-pointer

3. 性能（高）

  • image-optimization - 使用WebP、srcset、懒加载
  • reduced-motion - 检查prefers-reduced-motion
  • content-jumping - 为异步内容预留空间

4. 布局与响应式（高）

  • viewport-meta - width=device-width initial-scale=1
  • readable-font-size - 移动设备上正文文本最小16像素
  • horizontal-scroll - 确保内容适合视口宽度
  • z-index-management - 定义z-index尺度（10、20、30、50）

5. 排版与颜色（中等）

  • line-height - 正文文本使用1.5-1.75的行高
  • line-length - 每行限制为65-75个字符
  • font-pairing - 匹配标题/正文字体个性

6. 动画（中等）

  • duration-timing - 微交互使用150-300毫秒
  • transform-performance - 使用transform/opacity，而不是width/height
  • loading-states - 骨架屏或加载指示器

7. 样式选择（中等）

  • style-match - 样式与产品类型匹配
  • consistency - 在所有页面使用相同样式
  • no-emoji-icons - 使用SVG图标，而非表情符号

8. 图表与数据（低）

  • chart-type - 图表类型与数据类型匹配
  • color-guidance - 使用可访问的调色板
  • data-table - 为可访问性提供表格替代

如何使用

使用以下CLI工具搜索特定领域。

前提条件

检查是否安装Python：

python3 --version || python --version

如果未安装Python，根据用户操作系统安装：

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

如何使用此技能

当用户请求UI/UX工作（设计、构建、创建、实施、审查、修复、改进）时，遵循此工作流：

步骤1：分析用户需求

从用户请求中提取关键信息：

  • 产品类型：SaaS、电子商务、作品集、仪表板、落地页等。
  • 样式关键词：极简、活泼、专业、优雅、深色模式等。
  • 行业：医疗、金融科技、游戏、教育等。
  • 技术栈：React、Vue、Next.js，或默认为html-tailwind。

步骤2：生成设计系统（必需）

始终以--design-system开始，以获取带推理的综合推荐：

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "项目名称"]

此命令：

  1. 并行搜索5个领域（产品、样式、颜色、落地页、排版）
  2. 应用ui-reasoning.csv中的推理规则选择最佳匹配
  3. 返回完整设计系统：模式、样式、颜色、排版、效果
  4. 包括要避免的反模式

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "宁静水疗"

步骤2b：持久化设计系统（主控+覆盖模式）

为跨会话分层检索保存设计系统，添加--persist：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "项目名称"

这创建：

  • design-system/MASTER.md — 包含所有设计规则的全局真相源
  • design-system/pages/ — 页面特定覆盖的文件夹

带页面特定覆盖：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "项目名称" --page "dashboard"

这还创建：

  • design-system/pages/dashboard.md — 页面特定偏离主控文件的规则

分层检索如何工作：

  1. 当构建特定页面（如“结账”）时，首先检查design-system/pages/checkout.md
  2. 如果页面文件存在，其规则覆盖主控文件
  3. 如果不存在，仅使用design-system/MASTER.md

上下文感知检索提示：

我正在构建[页面名称]页面。请阅读design-system/MASTER.md。
同时检查design-system/pages/[page-name].md是否存在。
如果页面文件存在，优先使用其规则。
如果不存在，仅使用主控规则。
现在，生成代码...

步骤3：补充详细搜索（根据需要）

获取设计系统后，使用领域搜索获取额外细节：

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

需求 领域 示例
更多样式选项 style --domain style "glassmorphism dark"
图表推荐 chart --domain chart "real-time dashboard"
UX最佳实践 ux --domain ux "animation accessibility"
替代字体 typography --domain typography "elegant luxury"
落地页结构 landing --domain landing "hero social-proof"

步骤4：技术栈指南（默认：html-tailwind）

获取实施特定的最佳实践。如果用户未指定技术栈，默认为html-tailwind。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

搜索参考

可用领域

领域 用于 示例关键词
product 产品类型推荐 SaaS、电子商务、作品集、医疗、美容、服务
style UI样式、颜色、效果 玻璃态、极简主义、深色模式、野蛮主义
typography 字体配对、Google字体 优雅、活泼、专业、现代
color 按产品类型的调色板 saas、ecommerce、healthcare、beauty、fintech、service
landing 页面结构、CTA策略 hero、hero-centric、testimonial、pricing、social-proof
chart 图表类型、库推荐 trend、comparison、timeline、funnel、pie
ux 最佳实践、反模式 animation、accessibility、z-index、loading
react React/Next.js性能 waterfall、bundle、suspense、memo、rerender、cache
web Web界面指南 aria、focus、keyboard、semantic、virtualize
prompt AI提示、CSS关键词 （样式名称）

可用技术栈

技术栈 焦点
html-tailwind Tailwind实用工具、响应式、可访问性（默认）
react 状态、钩子、性能、模式
nextjs SSR、路由、图像、API路由
vue 组合API、Pinia、Vue路由
svelte 符文、存储、SvelteKit
swiftui 视图、状态、导航、动画
react-native 组件、导航、列表
flutter 小部件、状态、布局、主题化
shadcn shadcn/ui组件、主题化、表单、模式
jetpack-compose 可组合项、修饰符、状态提升、重组

示例工作流

用户请求： “Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp”（为专业护肤服务制作落地页）

步骤1：分析需求

  • 产品类型：美容/水疗服务
  • 样式关键词：优雅、专业、柔和
  • 行业：美容/健康
  • 技术栈：html-tailwind（默认）

步骤2：生成设计系统（必需）

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "宁静水疗"

输出： 完整设计系统，包括模式、样式、颜色、排版、效果和反模式。

步骤3：补充详细搜索（根据需要）

# 获取动画和可访问性的UX指南
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 如果需要，获取替代排版选项
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤4：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

然后： 综合设计系统和详细搜索，实施设计。

输出格式

--design-system标志支持两种输出格式：

# ASCII框（默认）- 最适合终端显示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最适合文档
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

更好结果的技巧

  1. 关键词具体 - “healthcare SaaS dashboard” > “app”
  2. 多次搜索 - 不同关键词揭示不同见解
  3. 组合领域 - 样式 + 排版 + 颜色 = 完整设计系统
  4. 始终检查UX - 搜索"animation"、“z-index”、"accessibility"以查找常见问题
  5. 使用技术栈标志 - 获取实施特定的最佳实践
  6. 迭代 - 如果第一次搜索不匹配，尝试不同关键词

专业UI的常见规则

这些是常被忽略的问题，使UI看起来不专业：

图标与视觉元素

规则 做 不要
无表情符号图标 使用SVG图标（Heroicons、Lucide、Simple Icons） 使用表情符号如 🎨 🚀 ⚙️ 作为UI图标
稳定的悬停状态 在悬停时使用颜色/不透明度过渡 使用导致布局偏移的缩放变换
正确的品牌标志 从Simple Icons研究官方SVG 猜测或使用不正确的标志路径
一致的图标尺寸 使用固定viewBox（24x24）和w-6 h-6 随机混合不同图标尺寸

交互与光标

规则 做 不要
光标指针 向所有可点击/可悬停卡片添加cursor-pointer 在交互元素上留下默认光标
悬停反馈 提供视觉反馈（颜色、阴影、边框） 无指示元素可交互
平滑过渡 使用transition-colors duration-200 瞬时状态变化或太慢（>500毫秒）

浅色/深色模式对比

规则 做 不要
玻璃卡片浅色模式 使用bg-white/80或更高不透明度 使用bg-white/10（太透明）
文本对比浅色 使用#0F172A（slate-900）作为文本 使用#94A3B8（slate-400）作为正文文本
柔和文本浅色 使用#475569（slate-600）最小 使用gray-400或更浅
边框可见性 在浅色模式使用border-gray-200 使用border-white/10（不可见）

布局与间距

规则 做 不要
浮动导航栏 添加top-4 left-4 right-4间距 将导航栏固定在top-0 left-0 right-0
内容内边距 考虑固定导航栏高度 让内容隐藏在固定元素后面
一致的最大宽度 使用相同max-w-6xl或max-w-7xl 混合不同容器宽度

交付前检查清单

交付UI代码前，验证这些项目：

视觉质量

  • [ ] 未使用表情符号作为图标（使用SVG代替）
  • [ ] 所有图标来自一致的图标集（Heroicons/Lucide）
  • [ ] 品牌标志正确（从Simple Icons验证）
  • [ ] 悬停状态不引起布局偏移
  • [ ] 直接使用主题颜色（bg-primary）而非var()包装

交互

  • [ ] 所有可点击元素有cursor-pointer
  • [ ] 悬停状态提供清晰的视觉反馈
  • [ ] 过渡平滑（150-300毫秒）
  • [ ] 键盘导航的焦点状态可见

浅色/深色模式

  • [ ] 浅色模式文本有足够对比度（最小4.5:1）
  • [ ] 玻璃/透明元素在浅色模式可见
  • [ ] 边框在两种模式可见
  • [ ] 交付前测试两种模式

布局

  • [ ] 浮动元素有适当边缘间距
  • [ ] 无内容隐藏在固定导航栏后面
  • [ ] 在375像素、768像素、1024像素、1440像素响应式
  • [ ] 移动设备上无水平滚动

可访问性

  • [ ] 所有图像有替代文本
  • [ ] 表单输入有标签
  • [ ] 颜色不是唯一指示器
  • [ ] 尊重prefers-reduced-motion