ui-ux-pro-max

UI/UX Pro Max 技能

概述

此技能通过原生 Mastra 工具提供对综合设计数据库的访问。 所有设计建议都必须来自工具查询，绝不能依赖大模型记忆。

可用工具

getStyleRecommendations

按产品类型、行业和关键词搜索 67+ 种 UI 样式。

查询示例：

• “金融科技仪表板 极简”
• “医疗监测 深色”
• “初创 SaaS 大胆”
• “企业级 专业”
• “语音 AI 赛博玻璃”

返回内容： 样式类别、颜色（十六进制）、效果、复杂度评级和实施检查清单。

getTypographyRecommendations

按风格、氛围和用途搜索 57+ 种字体搭配。

查询示例：

• “专业 企业”
• “现代 科技初创”
• “友好 亲和”
• “高端 奢华”

返回内容： 字体搭配（标题 + 正文）、字重、行高和用途。

getChartRecommendations

按数据模式和可视化目标搜索 25+ 种图表类型。

查询示例：

• “时间序列 趋势”
• “类别比较”
• “部分占整体比例”
• “地理分布”

返回内容： 图表类型、备选方案、颜色指南、无障碍说明和库推荐。

getProductRecommendations

搜索特定行业的设计模式。

查询示例：

• “CRM 仪表板”
• “语音 AI 分析”
• “工作流自动化”
• “医疗监测”

返回内容： 主要样式建议、着陆页模式、仪表板样式和关键注意事项。

getUXGuidelines

按类别和平台搜索 98+ 条 UX 最佳实践。

查询示例：

• “移动导航”
• “表单验证”
• “无障碍 WCAG”
• “仪表板布局”

返回内容： 指南、应做与不应做的示例、代码示例和严重程度评级。

使用规则

1. 始终在提供设计建议前调用工具
2. 绝不臆造设计值——只使用工具返回的内容
3. 引用结果中的具体值（十六进制代码、字体名称、样式名称）
4. 如果工具未返回结果，建议拓宽查询范围
5. 结合多个工具的结果，提供全面的建议

数据来源

• styles.csv：67 种 UI 样式，包含颜色、效果和复杂度
• typography.csv：57 种字体搭配，包含字重和用途
• charts.csv：25 种图表类型，包含无障碍说明
• products.csv：特定行业的设计模式
• ux-guidelines.csv：98 条 UX 最佳实践

---

设计系统工作流

生成完整设计系统

始终先生成完整设计系统，再搜索单个领域：

查询模式：

getProductRecommendations("<product_type> <industry>")
+ getStyleRecommendations("<product_type> <style_keywords>")
+ getTypographyRecommendations("<style_keywords>")
+ getChartRecommendations("<data_type>") [if dashboard]
+ getUXGuidelines("<platform> <category>")

示例：

User: "Create a fintech dashboard with dark mode"

1. getProductRecommendations("fintech dashboard")
   → Returns: Industry-specific design direction

2. getStyleRecommendations("fintech dark minimal professional")
   → Returns: Style category, hex colors, effects, complexity

3. getTypographyRecommendations("professional modern corporate")
   → Returns: Font pairings, weights, line heights

4. getChartRecommendations("time series trend comparison")
   → Returns: Chart types, color palettes, libraries

5. getUXGuidelines("dashboard layout dark mode accessibility")
   → Returns: Best practices, anti-patterns, code samples

设计系统输出结构

完整设计系统包括：

1. 模式 - 着陆页结构（以主视觉为核心、以客户评价为主导等）
2. 样式 - 视觉方向（玻璃拟态、极简主义等）及十六进制颜色
3. 颜色 - 主色、次要颜色、强调色、背景色和文本颜色
4. 排版 - 标题字体 + 正文字体，以及字重和行高
5. 效果 - 阴影、边框、动画和玻璃拟态数值
6. 反模式 - 此类产品应避免的做法

持久化设计系统（Master + 覆盖规则）

对于多页面项目，持久化设计系统以保持一致性：

概念：

• design-system/MASTER.md → 全局事实来源（所有设计规则）
• design-system/pages/ → 页面专属覆盖规则（与 Master 的差异）

分层检索逻辑：

1. 构建特定页面（例如“仪表盘”）时，先检查 design-system/pages/dashboard.md
2. 如果页面文件存在，则其中的规则优先于 Master 文件
3. 如果页面文件不存在，则仅使用 design-system/MASTER.md

何时创建 Master：

• 用户确认了适用于整个项目的设计系统
• 多个页面将共用相同的设计语言

何时创建页面覆盖规则：

• 用户要求页面采用专属样式（例如“让结账页面更简洁”）
• 页面有不同的密度／间距要求
• 页面有不同的颜色强调（例如确认页面使用成功绿）

内容结构：

MASTER.md：

# [Project Name] Design System

## Style
- Category: Glassmorphism
- Primary: #667eea
- Effects: backdrop-blur-md, bg-white/10
- Dark mode primary: #818cf8

## Typography
- Heading: Inter Bold (700, 800)
- Body: Inter Regular (400, 500)
- Line height: 1.5

## Spacing
- Density: Comfortable
- Card padding: p-6
- Section gaps: space-y-8

## Components
- Border radius: rounded-xl
- Shadow: shadow-lg
- Hover: scale-105, transition-300ms

pages/dashboard.md：

# Dashboard Page Overrides

## Spacing (OVERRIDE)
- Density: Compact (data-heavy)
- Card padding: p-4
- Section gaps: space-y-4

## Components (OVERRIDE)
- Border radius: rounded-lg (sharper for data tables)
- Charts: Use consistent color palette from MASTER

使用领域搜索补充信息

确立设计系统后，针对特定需求使用领域搜索：

何时搜索其他领域：

需求	领域	查询示例
替代风格	style	"粗野主义、大胆、高对比度"
更多字体选项	typography	"优雅、奢华、衬线字体"
图表变化	chart	"漏斗转化可视化"
UX 验证	ux	"移动端触控目标、动画"
行业模式	product	"医疗保健 HIPAA 合规性"

---

按优先级划分的快速参考

设计或审核 UI 时，请按优先级顺序应用以下指南：

优先级	类别	影响	关键规则
1	无障碍性	严重	4.5:1 对比度、焦点状态、替代文本、aria-label、键盘导航
2	触控与交互	严重	44x44px 目标、cursor-pointer、悬停反馈、加载状态
3	性能	高	WebP 图片、延迟加载、减少动态效果、避免内容跳动
4	布局与响应式	高	移动优先、最小 16px 字体、无水平滚动、z-index 层级
5	字体排印与颜色	中	1.5-1.75 行高、每行 65-75 个字符、字体搭配
6	动画	中	150-300ms 时长、仅使用 transform/opacity、骨架屏

关键规则（务必检查）

无障碍性：

• color-contrast：普通文本的最低对比度为 4.5:1
• focus-states：所有交互元素都应有可见的焦点环
• alt-text：为有意义的图片提供描述性替代文本
• aria-labels：仅包含图标的按钮必须提供 aria-label
• keyboard-nav：Tab 顺序应与视觉顺序一致
• form-labels：使用带有 for 属性的 label

触控与交互：

• touch-target-size：触控目标最小尺寸为 44x44px
• cursor-pointer：为所有可点击／可悬停元素添加此项
• hover-feedback：提供清晰的视觉反馈（颜色、阴影、边框）
• loading-buttons：异步操作期间禁用按钮
• error-feedback：在问题附近显示清晰的错误消息

性能：

• image-optimization：使用 WebP、srcset 和延迟加载
• reduced-motion：检查 prefers-reduced-motion 媒体查询
• content-jumping：为异步内容预留空间

领域搜索指南

使用以下领域获取具体的设计建议：

领域	用途	示例关键词	工具
product	产品类型建议	SaaS、电商、作品集、医疗保健、美妆	getProductRecommendations
style	UI 风格、颜色、效果	毛玻璃、极简主义、深色模式、粗野主义	getStyleRecommendations
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代	getTypographyRecommendations
color	按产品类型划分的配色方案	saas、电子商务、医疗保健、美妆、金融科技	getStyleRecommendations
chart	图表类型、库建议	趋势、对比、时间线、漏斗、饼图	getChartRecommendations
ux	最佳实践、反模式	动画、无障碍性、z-index、加载	getUXGuidelines

各领域的使用时机

从 product 开始： 获取行业专属的设计方向

getProductRecommendations("voice ai analytics dashboard")
Returns: Primary style, landing pattern, dashboard style, key considerations

接着使用 style： 获取详细的视觉方向

getStyleRecommendations("fintech minimal professional")
Returns: Style category, hex colors, effects, complexity rating, checklist

添加 typography： 获取字体搭配

getTypographyRecommendations("professional corporate modern")
Returns: Heading + body fonts, weights, line heights, use cases

加入 chart： 用于数据可视化

getChartRecommendations("time series trend comparison")
Returns: Chart types, secondary options, color guidance, libraries

检查 ux： 获取最佳实践

getUXGuidelines("mobile navigation accessibility")
Returns: Guidelines, do/don't examples, code samples, severity rating

---

常见反模式（请勿这样做）

专业的 UI 会避免以下经常被忽视的问题：

图标和视觉元素

规则	✅ 应该这样做	❌ 不要这样做
不要使用表情符号图标	使用 SVG 图标（Heroicons、Lucide、Simple Icons）	将 🎨 🚀 ⚙️ 等表情符号用作 UI 图标
保持悬停状态稳定	悬停时使用颜色/透明度过渡	使用会导致布局偏移的缩放变换
使用正确的品牌 Logo	从 Simple Icons 查找官方 SVG	猜测或使用错误的 Logo 路径
图标尺寸保持一致	使用固定的 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）
• 品牌 Logo 正确（已通过 Simple Icons 验证）
• 悬停状态不会导致布局偏移（不使用缩放变换）
• 直接使用主题颜色（bg-primary），而非 var() 包装器

交互

• 所有可点击元素都带有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑（150-300ms）
• 键盘导航时焦点状态清晰可见
• 加载期间禁用按钮，避免异步操作重复触发

浅色/深色模式

• 浅色模式下文本对比度足够（至少 4.5:1）
• 玻璃态/透明元素在浅色模式下清晰可见（bg-white/80+）
• 两种模式下边框均清晰可见
• 交付前测试两种模式

布局

• 浮动元素与边缘保持适当间距（top-4，而非 top-0）
• 固定导航栏后方没有内容被遮挡
• 在 375px、768px、1024px、1440px 宽度下均能自适应
• 移动设备上没有水平滚动条

无障碍

• 所有图像都有描述性替代文本
• 表单输入框都有对应的标签
• 颜色不是表示状态的唯一方式
• 动画遵循 prefers-reduced-motion 设置
• 移动设备上的触控目标最小为 44x44px

性能

• 图像已优化（WebP、延迟加载、srcset）
• 没有内容布局偏移（CLS）
• 动画使用 transform/opacity（而非 width/height）