名称: ui-ux-pro-max 描述: “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。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。样式：玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当网格、暗黑模式、响应式、拟物化、扁平设计。主题：调色板、可访问性、动画、布局、排版、字体配对、间距、悬停、阴影、渐变。”
UI/UX Pro Max - 设计智能
可搜索的UI样式、调色板、字体配对、图表类型、产品推荐、UX指南和技术栈特定最佳实践数据库。
前提条件
检查是否安装了Python：
python3 --version || python --version
如果未安装Python，根据用户的操作系统指导安装。
如何使用此技能
当用户请求UI/UX工作（设计、构建、创建、实施、评审、修复、改进）时，遵循以下工作流程：
步骤1：分析用户需求
从用户请求中提取关键信息：
- 产品类型：SaaS、电子商务、作品集、仪表板、着陆页等。
- 样式关键词：极简、活泼、专业、优雅、暗黑模式等。
- 行业：医疗保健、金融科技、游戏、教育等。
- 技术栈：React、Vue、Next.js，或默认为
html-tailwind
步骤2：搜索相关领域
使用run_shell_command多次执行search.py脚本以收集全面信息。搜索直到获得足够上下文。
命令格式：
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域>
推荐搜索顺序：
- 产品 - 获取产品类型的样式推荐
- 样式 - 获取详细样式指南（颜色、效果、框架）
- 排版 - 获取字体配对和Google字体导入
- 颜色 - 获取调色板（主色、辅色、行动召唤色、背景色、文本色、边框色）
- 着陆页 - 获取页面结构（如果是着陆页）
- 图表 - 获取图表推荐（如果是仪表板/分析）
- UX - 获取最佳实践和反模式
- 技术栈 - 获取技术栈特定指南（默认：html-tailwind）
步骤3：技术栈指南（默认：html-tailwind）
如果用户未指定技术栈，默认为html-tailwind。
python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --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 |
页面结构、行动召唤策略 | hero、hero-centric、testimonial、pricing、social-proof |
chart |
图表类型、库推荐 | trend、comparison、timeline、funnel、pie |
ux |
最佳实践、反模式 | animation、accessibility、z-index、loading |
prompt |
AI提示、CSS关键词 | （样式名称） |
可用技术栈
| 技术栈 | 重点 |
|---|---|
html-tailwind |
Tailwind实用工具、响应式、可访问性（默认） |
react |
状态、钩子、性能、模式 |
nextjs |
SSR、路由、图像、API路由 |
vue |
Composition API、Pinia、Vue Router |
svelte |
Runes、stores、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”（越南语：为专业护肤服务制作着陆页）
AI应：
-
搜索产品类型：
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product -
搜索样式（基于行业：美容、优雅）：
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style -
搜索排版：
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography -
搜索调色板：
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color -
搜索着陆页结构：
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing -
搜索UX指南：
python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux -
搜索技术栈指南（默认：html-tailwind）：
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
然后： 综合所有搜索结果并实现设计。
获得更好结果的提示
- 关键词具体 - “医疗保健SaaS仪表板” > “应用”
- 多次搜索 - 不同关键词揭示不同见解
- 结合领域 - 样式 + 排版 + 颜色 = 完整设计系统
- 始终检查UX - 搜索"animation"、“z-index”、"accessibility"以识别常见问题
- 使用技术栈标志 - 获取实施特定最佳实践
- 迭代 - 如果第一次搜索不匹配，尝试不同关键词
专业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）
- [ ] 品牌标志正确（从Simple Icons验证）
- [ ] 悬停状态不导致布局移动
- [ ] 直接使用主题颜色（bg-primary）而非var()包装
交互
- [ ] 所有可点击元素有
cursor-pointer - [ ] 悬停状态提供清晰视觉反馈
- [ ] 过渡平滑（150-300ms）
- [ ] 焦点状态对键盘导航可见
浅色/深色模式
- [ ] 浅色模式文本有足够对比度（最低4.5:1）
- [ ] 玻璃/透明元素在浅色模式可见
- [ ] 边框在两种模式可见
- [ ] 交付前测试两种模式
布局
- [ ] 浮动元素有适当的边缘间距
- [ ] 无内容隐藏在固定导航栏后面
- [ ] 在320px、768px、1024px、1440px响应
- [ ] 移动端无水平滚动
可访问性
- [ ] 所有图像有alt文本
- [ ] 表单输入有标签
- [ ] 颜色不是唯一指示器
- [ ]
prefers-reduced-motion被尊重"