ui-ux-pro-max

ui-ux-pro-max

适用于 Web 和移动应用的综合设计指南。包含 67 种风格、96 套配色方案、57 组字体搭配、99 条 UX 指南，以及涵盖 13 种技术栈的 25 种图表类型。提供可搜索的数据库，并基于优先级提供建议。

先决条件

检查是否已安装 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

---

如何使用此技能

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

步骤 1：分析用户需求

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

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

步骤 2：生成设计系统（必需）

始终从 --design-system 开始，获取全面的建议和推理依据：

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令将：

1. 并行搜索 5 个领域（产品、风格、颜色、落地页、字体排印）
2. 应用 ui-reasoning.csv 中的推理规则，选择最佳匹配项
3. 返回完整的设计系统：模式、风格、颜色、字体排印、效果
4. 列出应避免的反模式

示例：

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

步骤 2b：持久化设计系统（主文件 + 覆盖项模式）

如需保存设计系统，以便在不同会话中进行分层检索，请添加 --persist：

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

此操作会创建：

• design-system/<project-slug>/MASTER.md — 包含所有设计规则的全局事实来源
• design-system/<project-slug>/pages/ — 用于存放页面专属覆盖项的文件夹

使用页面专属覆盖项：

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

此操作还会创建：

• design-system/<project-slug>/pages/dashboard.md — 与主文件不同的页面专属规则

分层检索的工作方式：

1. 构建特定页面（例如“结账”）时，先检查 design-system/<project-slug>/pages/checkout.md
2. 如果页面文件存在，其中的规则将覆盖主文件
3. 如果不存在，则仅使用 design-system/<project-slug>/MASTER.md

步骤 3：通过详细搜索补充信息（按需）

获取设计系统后，可使用领域搜索获取更多细节：

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

何时使用详细搜索：

需求	领域	示例
更多风格选项	style	--domain style "glassmorphism dark"
图表建议	chart	--domain chart "real-time dashboard"
UX 最佳实践	ux	--domain ux "animation accessibility"
替代字体	typography	--domain typography "elegant luxury"
落地页结构	landing	--domain landing "hero social-proof"

步骤 4：技术栈指南（默认：html-tailwind）

获取特定于实现的最佳实践。如果用户未指定技术栈，默认使用 html-tailwind。

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

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

---

搜索参考

可用领域

领域	用途	示例关键词
product	产品类型建议	SaaS、电商、作品集、医疗、美妆、服务
style	UI 风格、颜色、效果	玻璃拟态、极简主义、深色模式、粗野主义
typography	字体搭配、Google Fonts	优雅、活泼、专业、现代
color	按产品类型提供配色方案	SaaS、电商、医疗、美妆、金融科技、服务
landing	页面结构、CTA 策略	主视觉区、以主视觉区为中心、用户评价、定价、社交证明
chart	图表类型、库推荐	趋势、对比、时间线、漏斗、饼图
ux	最佳实践、反模式	动画、无障碍、z-index、加载
icons	图标集和 SVG 使用指南	heroicons、lucide、类别、图标风格
react	React/Next.js 性能	瀑布流、包、Suspense、memo、重新渲染、缓存
web	Web 界面指南	aria、焦点、键盘、语义化、虚拟化

可用技术栈

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

---

示例工作流

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

步骤 1：分析需求

• 产品类型：美妆/水疗服务
• 风格关键词：优雅、专业、柔和
• 行业：美妆/健康养生
• 技术栈：html-tailwind（默认）

步骤 2：生成设计系统（必需）

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

**输出：**包含模式、风格、颜色、字体、效果和反模式的完整设计系统。

步骤 3：补充详细搜索（按需）

# Get UX guidelines for animation and accessibility
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤 4：技术栈指南

python3 .codex/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

**然后：**综合设计系统与详细搜索结果，并实现设计。

---

输出格式

--design-system 标志支持两种输出格式：

# ASCII box (default) - best for terminal display
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 .codex/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

提升效果的技巧

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

交互

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

浅色／深色模式

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

布局

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

无障碍访问

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