ui-ux-pro-max

UI/UX Pro Max - 设计智能

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

OpenCode 工具映射

Claude Code 工具	OpenCode 对应项
TodoWrite	update_plan
Task 子 Agent	@mention 系统
Skill 工具	use_skill 工具
文件操作	OpenCode 原生工具

适用场景

在以下情况下使用此技能：

• 用户请求 UI/UX 工作（设计、构建、创建、实现、评审、修复、改进）
• 用户想构建前端页面（落地页、仪表盘、管理面板、电商、SaaS、作品集、博客、移动应用）
• 用户询问设计模式、配色方案、排版或 UI 组件

前置条件

检查是否已安装 Python：

python3 --version || python --version

如果未安装 Python，请根据用户的操作系统安装：

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

使用方法

第 1 步：分析用户需求

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

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

第 2 步：搜索相关领域

使用 update_plan 跟踪搜索任务，然后执行多次搜索以收集全面的信息。

python3 ../../.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

建议的搜索顺序：

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

第 3 步：技术栈指南（默认：html-tailwind）

如果用户未指定技术栈，默认使用 html-tailwind。

python3 ../../.shared/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 样式、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代
color	按产品类型分类的配色方案	saas、ecommerce、healthcare、beauty、fintech、service
landing	页面结构、CTA 策略	主视觉区、以主视觉区为中心、用户评价、定价、社交证明
chart	图表类型、库推荐	趋势、对比、时间线、漏斗、饼图
ux	最佳实践、反模式	动画、无障碍性、z-index、加载
prompt	AI 提示词、CSS 关键词	（风格名称）

可用技术栈

技术栈	重点
html-tailwind	Tailwind 工具类、响应式、无障碍（默认）
react	状态、钩子、性能、模式
nextjs	SSR、路由、图像、API 路由
vue	Composition API、Pinia、Vue Router
svelte	Runes、stores、SvelteKit
swiftui	视图、状态、导航、动画
react-native	组件、导航、列表
flutter	Widgets、状态、布局、主题
shadcn	shadcn/ui 组件、主题、表单、模式

---

示例工作流

用户请求：“为专业护肤服务打造一个落地页。”

AI 应该：

# 1. Search product type
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python3 ../../.shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

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

---

提升效果的技巧

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

---

专业 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）
• 品牌 Logo 正确（已通过 Simple Icons 核实）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary），而非 var() 包装

交互

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

浅色/深色模式

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

布局

• 浮动元素与边缘保持适当间距
• 内容不会被固定导航栏遮挡
• 在 320px、768px、1024px、1440px 屏幕宽度下均可响应式显示
• 移动设备上没有水平滚动

无障碍性

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