ui-ux-pro-max

UI/UX Pro Max - 设计智能

可搜索的数据库，包含 UI 样式、配色方案、字体搭配、图表类型、产品建议、UX 指南和针对特定技术栈的最佳实践。

如何使用此技能

在技能目录（$CODEX_HOME/skills/ui-ux-pro-max）中运行命令，以便正确解析 scripts/search.py；也可以提供脚本的绝对路径。如果没有 python，请使用 python3。

当用户提出 UI/UX 相关需求（设计、构建、创建、实现、评审、修复、改进）时，请遵循以下工作流：

步骤 1：分析用户需求

从用户请求中提取关键信息：

• 产品类型：SaaS、电商、作品集、仪表板、落地页等
• 风格关键词：简约、活泼、专业、优雅、深色模式等
• 行业：医疗保健、金融科技、游戏、教育等
• 技术栈：React、Vue、Next.js；未指定时默认使用 html-tailwind

步骤 2：搜索相关领域

多次运行 search.py，收集全面的信息。持续搜索，直到获得足够的上下文。

python scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

建议的搜索顺序：

1. 产品 - 获取针对产品类型的风格建议
2. 风格 - 获取详细的风格指南（颜色、效果、框架）
3. 排版 - 获取字体搭配及 Google Fonts 导入方式
4. 颜色 - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
5. 落地页 - 获取页面结构（适用于落地页）
6. 图表 - 获取图表建议（适用于仪表板/分析场景）
7. UX - 获取最佳实践和反模式
8. 技术栈 - 获取针对特定技术栈的指南（默认：html-tailwind）

步骤 3：技术栈指南（默认：从项目推断）

如果用户没有指定技术栈，请从项目中推断；否则默认使用 html-tailwind。

python scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter

---

搜索参考

可用领域

领域	用途	示例关键词
product	产品类型建议	SaaS、电商、作品集、医疗保健、美妆、服务
style	UI 样式、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代
color	按产品类型提供配色方案	SaaS、电商、医疗保健、美妆、金融科技、服务
landing	页面结构、CTA 策略	主视觉区、以主视觉为中心、客户评价、定价、社交证明
chart	图表类型、库建议	趋势、对比、时间线、漏斗、饼图
ux	最佳实践、反模式	动画、无障碍性、z-index、加载
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	小部件、状态、布局、主题

---

工作流示例

用户请求：“为专业护肤服务制作落地页”

AI 应该：

# 1. Search product type
python scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python scripts/search.py "animation" --domain ux
python scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python scripts/search.py "layout responsive" --stack html-tailwind

**然后：**综合所有搜索结果并实现设计。

---

获得更好结果的技巧

1. 关键词要具体 - “医疗保健 SaaS 仪表板” > “应用”
2. 多次搜索 - 不同关键词会带来不同的见解
3. 组合领域 - 风格 + 排版 + 颜色 = 完整的设计系统
4. 始终检查 UX - 搜索“动画”“z-index”“无障碍性”，排查常见问题
5. 使用技术栈标记 - 获取针对实现方式的最佳实践
6. 迭代 - 如果首次搜索结果不合适，请尝试不同的关键词

---

专业 UI 通用规则

以下是经常被忽视、会让 UI 显得不专业的问题：

图标与视觉元素

规则	要求
SVG 图标集	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）。

---

交付前检查清单

交付 UI 代码前，请核对以下项目：

视觉质量

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

交互

• 所有可点击元素都具有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡平滑（150-300ms）
• 键盘导航时焦点状态清晰可见

浅色／深色模式

• 浅色模式文本对比度足够（最低 4.5:1）
• 玻璃／透明元素在浅色模式下清晰可见
• 两种模式下边框都清晰可见
• 交付前测试两种模式

布局

• 浮动元素与边缘之间留有适当间距
• 固定导航栏不会遮挡内容
• 在 320px、768px、1024px、1440px 宽度下均能响应
• 移动设备上没有水平滚动

无障碍性

• 所有图片都有 alt 文本
• 表单输入框都有标签
• 颜色不是唯一的提示方式
• 遵循 prefers-reduced-motion