mcpField
U
ui-ux-pro-max

ui-ux-pro-max

github.com/c0x12c设计与 UI110112 次安装19 周前更新
代码仓库

关于 ui-ux-pro-max

ui-ux-pro-max 是面向 Web 和移动应用设计与评审的设计指南，适用于界面实现、无障碍检查和设计系统选择。它提供可搜索的样式、配色、字体、UX 规则与图表建议，并按优先级整理。

主要功能

  1. 01检索样式、配色和字体搭配
  2. 02提供 UX 与无障碍指南
  3. 03覆盖 13 种技术栈
  4. 04按优先级组织设计规则
  5. 05生成设计系统并支持多种格式

适用场景

  1. 01为新页面选择设计方向
  2. 02检查界面代码中的 UX 问题
  3. 03构建落地页或仪表板
  4. 04落实无障碍设计要求

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/c0x12c/ai-toolkit --skill ui-ux-pro-max

安装后在 Claude Code 中输入/ui-ux-pro-max确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

python-setup.md
data/
charts.csv
colors.csv
icons.csv
landing.csv
products.csv
react-performance.csv
styles.csv
typography.csv
ui-reasoning.csv
ux-guidelines.csv
web-interface.csv
data/stacks/
astro.csv
flutter.csv
html-tailwind.csv
jetpack-compose.csv
nextjs.csv
nuxt-ui.csv
nuxtjs.csv
react-native.csv
react.csv
shadcn.csv
svelte.csv
swiftui.csv
vue.csv
scripts/
core.py
design_system.py
search.py

详细介绍

UI/UX Pro Max - 设计智能

适用于 Web 和移动应用的全面设计指南。包含 67 种风格、96 套配色方案、57 组字体搭配、99 条 UX 指南，以及涵盖 13 种技术栈的 25 种图表类型。提供可搜索的数据库，并根据优先级给出建议。

适用场景

遇到以下情况时，请参考这些指南：

  • 设计新的 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 属性的 label
2. 触控与交互（严重）
  • touch-target-size - 触控目标的最小尺寸为 44x44px
  • 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 - 移动设备上的正文字号至少为 16px
  • 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-300ms
  • 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 脚本的用法请参阅 python-setup.md。

示例工作流

用户请求：“为专业护肤服务制作落地页”

步骤 1：分析需求
  • 产品类型：美容／水疗服务
  • 风格关键词：优雅、专业、柔和
  • 行业：美容／健康
  • 技术栈：html-tailwind（默认）
步骤 2：生成设计系统（必需）
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

**输出：**完整的设计系统，包含设计模式、风格、颜色、字体排版、效果和反模式。

步骤 3：补充详细搜索（按需）
# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
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 box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

获得更好结果的技巧

  1. 关键词要具体 - “医疗 SaaS 仪表板” > “应用”
  2. 多次搜索 - 不同的关键词会带来不同的见解
  3. 组合领域 - 风格 + 排版 + 颜色 = 完整的设计系统
  4. 始终检查 UX - 搜索“动画”、“z-index”、“无障碍性”，排查常见问题
  5. 使用 stack 标志 - 获取针对具体实现方式的最佳实践
  6. 反复迭代 - 如果首次搜索结果不匹配，请尝试不同的关键词

专业 UI 的常见规则

这些问题经常被忽视，会让 UI 显得不够专业：

图标与视觉元素
规则应做不应做
不要使用表情符号作为图标使用 SVG 图标（Heroicons、Lucide、Simple Icons）使用 🎨 🚀 ⚙️ 等表情符号作为 UI 图标
悬停状态保持稳定悬停时使用颜色/透明度过渡使用会导致布局偏移的缩放变换
使用正确的品牌徽标从 Simple Icons 查找官方 SVG猜测或使用错误的徽标路径
图标尺寸保持一致使用固定的 viewBox（24x24），并设置 w-6 h-6随意混用不同尺寸的图标
交互与光标
规则应做不应做
使用指针光标为所有可点击/可悬停的卡片添加 cursor-pointer让交互元素保留默认光标
提供悬停反馈提供视觉反馈（颜色、阴影、边框）不提示元素具有交互性
使用平滑过渡使用 transition-colors duration-200状态瞬间变化或变化过慢（>500ms）
浅色/深色模式对比度
规则应做不应做
浅色模式下的玻璃卡片使用 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-300ms）
  • 键盘导航时焦点状态清晰可见
浅色/深色模式
  • 浅色模式文本具有足够的对比度（至少 4.5:1）
  • 玻璃/透明元素在浅色模式下清晰可见
  • 两种模式下的边框都清晰可见
  • 交付前测试两种模式
布局
  • 悬浮元素与边缘保持适当间距
  • 没有内容被固定导航栏遮挡
  • 在 375px、768px、1024px、1440px 下均可自适应
  • 移动设备上没有水平滚动
无障碍性
  • 所有图片都有 alt 文本
  • 表单输入项都有标签
  • 颜色不是唯一的提示方式
  • 遵循 prefers-reduced-motion

评论

支持 Markdown