ui-ux-pro-max

UI/UX Pro Max - 界面设计智能助手

技能概述

UI/UX Pro Max 是一款专业的界面设计智能助手，提供 50+ 设计风格、21 种配色方案、50 组字体搭配和 20 种图表类型，支持 9 大主流技术栈，帮助开发者快速构建美观、可用、响应式的用户界面。

适用场景

1. 快速原型设计与落地页开发

当你需要为新产品设计落地页或快速构建原型时，UI/UX Pro Max 可以根据产品类型（SaaS、电商、作品集等）智能推荐匹配的设计风格、配色方案和页面结构，避免从零开始摸索。

2. 界面代码审查与优化

当你需要检查现有 UI 代码的可访问性、响应式布局或交互体验时，该技能提供系统化的审查清单，涵盖触摸目标大小、颜色对比度、焦点状态等关键指标，快速发现并修复常见问题。

3. 多技术栈组件选择

当你使用 React、Vue、Next.js、Svelte、SwiftUI、React Native、Flutter 或 Tailwind CSS 开发时，该技能提供针对特定技术栈的设计规范和最佳实践，并集成 shadcn/ui 组件搜索功能。

核心功能

1. 智能设计系统生成

输入产品类型和行业关键词，自动生成完整的设计系统，包括匹配的设计风格、主色调配色方案、字体搭配建议、界面效果和需要避免的反模式。支持玻璃拟态、新拟态、极简主义、粗野主义、便当盒布局等多种风格。

2. 设计规范与最佳实践

提供按优先级分类的 UX 设计指南，涵盖可访问性（CRITICAL）、触摸与交互（CRITICAL）、性能（HIGH）、布局与响应式（HIGH）、排版与色彩（MEDIUM）、动画（MEDIUM）等领域，每条规则都有明确的实施建议。

3. 组件与资源搜索

集成 shadcn/ui MCP，支持组件搜索和示例查看。提供按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表等常用 UI 元素的设计规范和实现参考。

常见问题

UI/UX Pro Max 支持哪些技术栈？

该技能支持 9 大技术栈：React、Next.js、Vue、Svelte、SwiftUI（iOS）、React Native（跨平台移动端）、Flutter、Tailwind CSS 和 shadcn/ui 组件库。如果你没有指定技术栈，默认使用 HTML + Tailwind CSS。

如何生成玻璃拟态风格的界面设计？

使用命令 python3 .claude/skills/ui-ux-pro-max/scripts/search.py "产品类型 行业 关键词" --design-system 即可生成完整的设计系统。例如：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness elegant" --design-system -p "Serenity Spa"。

移动端UI设计有什么特殊考虑？

移动端设计需要特别注意：触摸目标最小 44×44px、正文文字不小于 16px、避免水平滚动、考虑 prefers-reduced-motion 减少动画、为异步内容预留空间防止内容跳动、图片使用 WebP 格式和懒加载优化性能。