UI/UX Pro Max - 设计智能工具

适用场景

• 设计新的UI组件或页面
• 选择配色方案与排版
• 评审代码中的UX问题
• 构建着陆页或仪表盘
• 实现无障碍设计要求

按优先级划分的规则类别

ux

ux

ux

ux

typography

color

ux

style

product

chart

快速参考

1. 无障碍设计（关键）

• color-contrast

  - 普通文本的对比度最低需达到4.5:1

• focus-states

  - 交互元素需有可见的焦点环

• alt-text

  - 有意义的图片需添加描述性替代文本

• aria-labels

  - 纯图标按钮需添加aria-label

• keyboard-nav

  - 标签顺序需与视觉顺序一致

• 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图标，而非emoji

8. 图表与数据展示（低）

• chart-type

  - 图表类型需与数据类型匹配

• color-guidance

  - 使用符合无障碍要求的配色方案

• data-table

  - 为图表提供表格形式的替代方案以满足无障碍要求

使用方法

前置要求

python3 --version || python --version

brew install python3

sudo apt update && sudo apt install python3

winget install Python.Python.3.12

本工具使用流程

步骤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 "Project Name"]

1. 并行搜索5个领域（产品、风格、配色、着陆页、排版）
2. 应用

   ui-reasoning.csv

   中的推理规则选择最佳匹配项
3. 返回完整的设计系统：模式、风格、配色、排版、效果
4. 包含需要避免的反模式

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

步骤2b：保存设计系统（主文件+覆盖文件模式）

--persist

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

• design-system/MASTER.md

  — 包含所有设计规则的全局基准文件

• design-system/pages/

  — 存放页面专属覆盖规则的文件夹

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

• design-system/pages/dashboard.md

  — 与主文件不同的页面专属规则

1. 当构建特定页面（如"结账页"）时，首先检查

   design-system/pages/checkout.md

2. 若该页面文件存在，其规则将覆盖主文件中的对应规则
3. 若不存在，则仅使用

   design-system/MASTER.md

   中的规则

我正在构建[Page Name]页面。请阅读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

--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

style

typography

color

landing

chart

ux

react

web

prompt

支持的技术栈

html-tailwind

react

nextjs

vue

svelte

swiftui

react-native

flutter

shadcn

jetpack-compose

示例流程

步骤1：分析需求

• 产品类型：美容/SPA服务
• 风格关键词：优雅、专业、柔和
• 行业领域：美容/健康
• 技术栈：html-tailwind（默认）

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

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

步骤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. 关键词需具体 - "医疗SaaS仪表盘" 优于 "应用"
2. 多次搜索 - 不同关键词可挖掘不同信息
3. 组合领域搜索 - 风格+排版+配色=完整设计系统
4. 务必检查UX - 搜索"animation"、"z-index"、"accessibility"排查常见问题
5. 使用技术栈参数 - 获取针对特定技术栈的最佳实践
6. 迭代优化 - 若首次搜索结果不符，尝试更换关键词

专业UI设计通用规则

图标与视觉元素

交互与光标

cursor-pointer

transition-colors duration-200

明暗模式对比度

bg-white/80

bg-white/10

#0F172A

#94A3B8

#475569

border-gray-200

border-white/10

布局与间距

top-4 left-4 right-4

top-0 left-0 right-0

max-w-6xl

max-w-7xl

交付前检查清单

视觉质量

• 未使用emoji作为图标（改用SVG）
• 所有图标来自统一的图标库（Heroicons/Lucide）
• 品牌Logo正确（已通过Simple Icons验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary）而非var()包装器

交互体验

• 所有可点击元素均添加了

  cursor-pointer

• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑（150-300ms）
• 键盘导航的焦点状态可见

明暗模式

• 浅色模式文本对比度达标（最低4.5:1）
• 玻璃/透明元素在浅色模式下可见
• 边框在两种模式下均可见
• 交付前已测试两种模式

布局设计

• 浮动元素与边缘有合适的间距
• 无内容被固定导航栏遮挡
• 在375px、768px、1024px、1440px分辨率下均为响应式
• 移动端无横向滚动

无障碍设计

• 所有图片均添加了替代文本
• 表单输入框均搭配了label标签
• 未仅使用颜色作为状态指示
• 已遵循

  prefers-reduced-motion

  设置