⚡

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

这个技能是一个全面的UI/UX设计智能工具，提供丰富的设计资源和指南，用于web和移动应用程序的界面设计、用户体验优化和代码实现。包含多种样式、颜色调色板、字体配对、UX指南和图表类型，支持多种技术栈如React、Vue等。适用于前端开发者、UI设计师和产品经理，帮助提高设计效率和代码质量。关键词：UI设计、UX设计、前端开发、设计系统、响应式设计、可访问性、颜色调色板、字体配对、图表设计。

前端开发 0 次安装 0 次浏览 更新于 3/22/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 用于组件搜索和示例。” license: MIT metadata: version: “1.0.0” domain: frontend triggers: UI/UX、设计、颜色调色板、排版、玻璃态、暗黑模式、响应式、可访问性 role: 专家 scope: 实现 output-format: 代码 related-skills: tailwind-design-system、radix-ui-design-system

UI/UX设计专业版 - 设计智能

为web和移动应用程序提供的全面设计指南。包含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 - 为有意义的图像提供描述性alt文本
  • aria-labels - 为仅图标的按钮添加aria-label
  • keyboard-nav - Tab顺序与视觉顺序匹配
  • form-labels - 使用label标签与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 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "项目名称"]

此命令：

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

示例：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

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

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

python3 .claude/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 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

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

搜索参考

可用领域

领域 用途 示例关键词
product 产品类型推荐 SaaS、电子商务、作品集、医疗保健、美容、服务
style UI样式、颜色、效果 玻璃态、极简主义、暗黑模式、粗野主义
typography 字体配对、Google字体 优雅、有趣、专业、现代
color 按产品类型的颜色调色板 saas、ecommerce、healthcare、beauty、fintech、service
landing 页面结构、CTA策略 英雄区、以英雄区为中心、推荐信、定价、社交证明
chart 图表类型、库推荐 趋势、比较、时间线、漏斗图、饼图
ux 最佳实践、反模式 动画、可访问性、z-index、加载
react React/Next.js性能 瀑布流、捆绑、suspense、memo、重新渲染、缓存
web Web界面指南 aria、焦点、键盘、语义化、虚拟化
prompt AI提示、CSS关键词 （样式名称）

可用技术栈

技术栈 焦点
html-tailwind Tailwind实用程序、响应式、可访问性（默认）
react 状态、钩子、性能、模式
nextjs SSR、路由、图像、API路由
vue 组合API、Pinia、Vue Router
svelte Runes、存储、SvelteKit
swiftui 视图、状态、导航、动画
react-native 组件、导航、列表
flutter 小部件、状态、布局、主题
shadcn shadcn/ui组件、主题、表单、模式

示例工作流程

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

步骤1：分析需求

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

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

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

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

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

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

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

步骤4：技术栈指南

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

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

输出格式

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

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

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

提高结果的提示

  1. 关键词具体 - “医疗保健SaaS仪表板” > “应用”
  2. 多次搜索 - 不同关键词揭示不同见解
  3. 组合领域 - 样式 + 排版 + 颜色 = 完整设计系统
  4. 始终检查UX - 搜索"动画"、“z-index”、"可访问性"以解决常见问题
  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像素下响应式
  • [ ] 移动设备上无水平滚动

可访问性

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