UI/UX Pro Max 是一个设计智能技能，核心是一个可搜索的数据库，收录了 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 指南以及特定技术栈的最佳实践。当用户提出 UI/UX 相关需求（设计、构建、创建、实现、审查、修复、改进）时，可按以下工作流使用。
一、用途 该技能用于辅助前端 UI/UX 的设计与实现，帮助在布局、组件、视觉系统、排版、色彩和 UX 模式等方面做出有依据的决策，适用于网站、落地页、仪表盘等场景。
二、主要能力 技能提供多个可搜索的领域（domain）：
- product：按产品类型获取风格推荐，关键词如 SaaS、电商、作品集、医疗、美容、服务。
- style：获取 UI 风格、颜色、效果，关键词如玻璃拟态、极简主义、暗色模式、粗野主义。
- typography：获取字体搭配与 Google Fonts 导入，关键词如优雅、活泼、专业、现代。
- color：按产品类型获取配色方案（主色、辅助色、CTA、背景、文字、边框）。
- landing：获取页面结构与 CTA 策略，关键词如 hero、以 hero 为中心、用户评价、定价、社会证明。
- chart：获取图表类型与库推荐，关键词如趋势、对比、时间线、漏斗、饼图。
- ux：获取最佳实践与反模式，关键词如动画、无障碍、z-index、加载。
- prompt：获取 AI 提示词与 CSS 关键词（按风格名称）。
同时提供技术栈（stack）指南，可选：html-tailwind（默认）、react、nextjs、vue、svelte、swiftui、react-native、flutter。
三、使用方式 从技能目录（$CODEX_HOME/skills/ui-ux-pro-max）运行命令，以便 scripts/search.py 能被解析，或提供脚本的绝对路径。若没有 python，使用 python3。
工作流： 步骤 1：分析用户需求，提取产品类型、风格关键词、行业、技术栈（未指定则默认 html-tailwind）。 步骤 2：多次搜索相关领域，命令格式： python scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] 推荐搜索顺序：product → style → typography → color → landing（若为落地页）→ chart（若为仪表盘/分析）→ ux → stack。 步骤 3：技术栈指南，命令： python scripts/search.py "<keyword>" --stack html-tailwind
示例工作流（用户请求：为专业护肤服务制作落地页）：
1. 搜索产品类型
python scripts/search.py "beauty spa wellness service" --domain product
2. 搜索风格
python scripts/search.py "elegant minimal soft" --domain style
3. 搜索排版
python scripts/search.py "elegant luxury" --domain typography
4. 搜索配色
python scripts/search.py "beauty spa wellness" --domain color
5. 搜索落地页结构
python scripts/search.py "hero-centric social-proof" --domain landing
6. 搜索 UX 指南
python scripts/search.py "animation" --domain ux python scripts/search.py "accessibility" --domain ux
7. 搜索技术栈指南
python scripts/search.py "layout responsive" --stack html-tailwind 然后综合所有搜索结果并实现设计。
提升效果的技巧：关键词要具体（如 "healthcare SaaS dashboard" 优于 "app"）；多次搜索；组合领域（风格+排版+颜色=完整设计系统）；始终检查 UX；使用 stack 标志；迭代尝试不同关键词。
四、专业 UI 的常见规则 图标与视觉元素：UI 控件使用来自单一图标集的 SVG 图标（Heroicons、Lucide、Simple Icons），emoji 仅用于内容；悬停状态使用颜色/透明度过渡，保持布局尺寸固定以防位移；品牌 logo 从 Simple Icons 或品牌站点获取官方 SVG 并核实最新标识；统一图标尺寸（viewBox 24x24，应用 w-6 h-6 或等效）。 交互与光标：所有可点击/可悬停的卡片和元素添加 cursor-pointer；悬停和聚焦时提供清晰视觉反馈（颜色、阴影、边框）；使用 150-300ms 过渡。 明暗模式对比：玻璃卡片浅色模式使用 bg-white/80 或更高不透明度；浅色正文文字使用 #0F172A（slate-900）或更深以满足 4.5:1 对比度；次要文字使用 #475569（slate-600）或更深；浅色模式边框使用 border-gray-200 或更高。 布局与间距：浮动导航栏添加 top-4 left-4 right-4（或等效）边距；内容顶部内边距等于固定导航栏高度；各区块使用统一容器宽度（如 max-w-6xl 或 max-w-7xl）。
五、交付前检查清单 视觉质量：未用 emoji 作图标；所有图标来自一致图标集；品牌 logo 正确；悬停状态不引起布局位移；直接使用主题颜色（bg-primary）而非 var() 包装。 交互：所有可点击元素有 cursor-pointer；悬停状态有清晰反馈；过渡平滑（150-300ms）；键盘导航聚焦状态可见。 明暗模式：浅色模式文字对比度足够（最低 4.5:1）；玻璃/透明元素在浅色模式可见；两种模式边框均可见；交付前测试两种模式。 布局：浮动元素与边缘有适当间距；内容不被固定导航栏遮挡；在 320px、768px、1024px、1440px 响应式；移动端无横向滚动。 无障碍：所有图片有 alt 文本；表单输入有标签；颜色不是唯一指示；尊重 prefers-reduced-motion。
六、适用场景与限制 适用于需要设计或优化前端界面的场景，尤其是落地页、仪表盘、网站等。限制方面：资料未提供收费、价格、平台支持范围等具体信息；技能依赖 Python 运行搜索脚本；技术栈指南仅覆盖上述列出的栈。