8.2 KiB

Raw Blame History

ui-ux-pro-max

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

前置要求

检查是否已安装 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：搜索相关领域

多次使用 search.py 收集全面信息。搜索直到获得足够的上下文。

python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]

推荐搜索顺序：

Product（产品） - 获取产品类型的风格推荐
Style（风格） - 获取详细风格指南（颜色、效果、框架）
Typography（排版） - 获取字体配对及 Google Fonts 导入
Color（颜色） - 获取配色方案（主色、辅助色、CTA、背景、文本、边框）
Landing（落地页） - 获取页面结构（如果是落地页）
Chart（图表） - 获取图表推荐（如果是仪表板/分析）
UX - 获取最佳实践和反模式
Stack（技术栈） - 获取特定技术栈指南（默认：html-tailwind）

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

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

python3 .shared/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind

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

搜索参考

可用领域

领域	用途	示例关键词
`product`	产品类型推荐	SaaS、电商、作品集、医疗、美妆、服务
`style`	UI 风格、颜色、效果	玻璃态、极简主义、深色模式、野兽派
`typography`	字体配对、Google Fonts	优雅、活泼、专业、现代
`color`	按产品类型的配色方案	saas、电商、医疗、美妆、金融科技、服务
`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`	小部件、状态、布局、主题
`shadcn`	shadcn/ui 组件、主题、表单、模式

示例工作流

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

AI 应该：

# 1. 搜索产品类型
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. 搜索风格（基于行业：美妆、优雅）
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. 搜索排版
python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. 搜索配色方案
python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. 搜索落地页结构
python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. 搜索 UX 指南
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. 搜索技术栈指南（默认：html-tailwind）
python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

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

获得更好结果的技巧

关键词要具体 - "医疗 SaaS 仪表板" > "应用"
多次搜索 - 不同关键词揭示不同见解
组合领域 - 风格 + 排版 + 颜色 = 完整设计系统
始终检查 UX - 搜索"动画"、"z-index"、"无障碍"以发现常见问题
使用技术栈标志 - 获取特定实现的最佳实践
迭代 - 如果首次搜索不匹配，尝试不同关键词
拆分为多个文件 - 为了更好的可维护性：
- 将组件分离到单独文件（例如 Header.tsx、Footer.tsx）
- 将可重用样式提取到专用文件
- 保持每个文件专注且少于 200-300 行

专业 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 验证）
悬停状态不会导致布局偏移

交互

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

亮色/暗色模式

亮色模式文本有足够对比度（最少 4.5:1）
玻璃/透明元素在亮色模式下可见
边框在两种模式下都可见
交付前测试两种模式

布局

浮动元素与边缘有适当间距
没有内容隐藏在固定导航栏后面
在 320px、768px、1024px、1440px 下响应式
移动端无横向滚动

无障碍

所有图片都有 alt 文本
表单输入都有标签
颜色不是唯一指示器
遵守 prefers-reduced-motion

8.2 KiB Raw Blame History Unescape Escape