UI/UX Pro Max - Design Intelligence 是一个可搜索的设计智能数据库，用于在 UI/UX 的设计、构建、创建、实现、审核、修复和改进工作中提供参考。数据库涵盖 UI 风格、配色方案、字体搭配、图表类型、产品类型建议、UX 指南以及特定技术栈的最佳实践。
一、前置条件 需检查 Python 是否已安装：
python3 --version || python --version
若未安装，按操作系统安装： 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：搜索相关领域 多次运行 search.py 收集完整信息，直到上下文足够：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
推荐搜索顺序：Product（按产品类型获取风格建议）、Style（获取详细风格指南：颜色、效果、框架）、Typography（获取字体搭配及 Google Fonts 导入）、Color（获取调色板：Primary、Secondary、CTA、Background、Text、Border）、Landing（获取页面结构，用于落地页）、Chart（获取图表建议，用于仪表盘/分析）、UX（获取最佳实践与反模式）、Stack（获取技术栈专属指南，默认 html-tailwind）。
步骤 3：技术栈指南（默认 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 风格、颜色、效果，示例关键词 glassmorphism、极简主义、暗色模式、粗野主义； typography：字体搭配、Google Fonts，示例关键词优雅、活泼、专业、现代； color：按产品类型的调色板，示例关键词 saas、电子商务、医疗、美妆、金融科技、服务； landing：页面结构、CTA 策略，示例关键词 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：状态、Hooks、性能、模式； nextjs：SSR、路由、图片、API 路由； vue：Composition API、Pinia、Vue Router； svelte：Runes、stores、SvelteKit； swiftui：视图、状态、导航、动画； react-native：组件、导航、列表； flutter：Widget、状态、布局、主题； shadcn：对应指南。
四、示例工作流 用户请求：为专业护肤服务制作落地页。 AI 应执行：
- 搜索产品类型：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
- 搜索风格（基于行业：美妆、优雅）：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
- 搜索排版：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
- 搜索调色板：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
- 搜索落地页结构：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
- 搜索 UX 指南：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux；python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
- 搜索技术栈指南（默认 html-tailwind）：python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind 随后综合所有搜索结果并实现设计。
五、提升效果的技巧 关键词要具体："healthcare SaaS dashboard" 优于 "app"；多次搜索：不同关键词会揭示不同信息；组合领域：风格 + 排版 + 颜色 = 完整设计系统；始终检查 UX：搜索 "animation"、"z-index"、"accessibility" 以排查常见问题；使用 stack 参数获取实现层面的最佳实践；迭代：若首次搜索不匹配，尝试不同关键词。
六、专业 UI 的常见规则 以下是被经常忽略、导致 UI 显得不专业的问题。
图标与视觉元素： 不要用 emoji 作 UI 图标，应使用 SVG 图标（Heroicons、Lucide、Simple Icons）；悬停状态要稳定，用颜色/透明度过渡，避免引起布局位移的缩放变换；品牌 Logo 要正确，从 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 代码前核对以下项目。
视觉质量：无 emoji 充当图标（改用 SVG）；所有图标来自一致图标集（Heroicons/Lucide）；品牌 Logo 正确（经 Simple Icons 核实）；悬停状态不引起布局位移；直接使用主题颜色（bg-primary）而非 var() 包装。
交互：所有可点击元素有 cursor-pointer；悬停状态提供清晰视觉反馈；过渡平滑（150-300ms）；键盘导航的聚焦状态可见。
明暗模式：浅色模式文本对比度充足（最低 4.5:1）；玻璃/透明元素在浅色模式可见；边框在两种模式均可见；交付前测试两种模式。
布局：浮动元素与边缘间距合适；内容不被固定导航栏遮挡；在 320px、768px、1024px、1440px 下响应式正常；移动端无横向滚动。
可访问性：所有图片有 alt 文本；表单输入有 label；颜色不是唯一指示方式；尊重 prefers-reduced-motion。