Back to Details

ui-ux-pro-max

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Pro Max - Design Intelligence

UI/UX Pro Max - 设计智能系统

Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.
这是一个可搜索的数据库，包含UI样式、调色板、字体搭配、图表类型、产品设计建议、UX指南以及各技术栈专属的最佳实践。

How to Use This Skill

如何使用该Skill

Run the commands from the skill directory (
$CODEX_HOME/skills/ui-ux-pro-max
) so 
scripts/search.py
resolves, or provide an absolute path to the script. If 
python
is not available, use 
python3
.
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
在Skill目录（
$CODEX_HOME/skills/ui-ux-pro-max
）中运行命令，确保
scripts/search.py
能被正确解析，或者提供该脚本的绝对路径。如果
python
不可用，请使用
python3
。
当用户请求UI/UX相关工作（设计、构建、创建、实现、评审、修复、优化）时，请遵循以下工作流程：

Step 1: Analyze User Requirements

步骤1：分析用户需求

Extract key information from user request:
  • Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
  • Style keywords: minimal, playful, professional, elegant, dark mode, etc.
  • Industry: healthcare, fintech, gaming, education, etc.
  • Stack: React, Vue, Next.js, or default to 
    html-tailwind
从用户请求中提取关键信息：
  • 产品类型：SaaS、电商、作品集、仪表盘、落地页等
  • 风格关键词：极简、活泼、专业、优雅、深色模式等
  • 行业领域：医疗健康、金融科技、游戏、教育等
  • 技术栈：React、Vue、Next.js，默认使用
    html-tailwind

Step 2: Search Relevant Domains

步骤2：搜索相关领域

Use 
search.py
multiple times to gather comprehensive information. Search until you have enough context.
bash
python scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
Recommended search order:
  1. Product - Get style recommendations for product type
  2. Style - Get detailed style guide (colors, effects, frameworks)
  3. Typography - Get font pairings with Google Fonts imports
  4. Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
  5. Landing - Get page structure (if landing page)
  6. Chart - Get chart recommendations (if dashboard/analytics)
  7. UX - Get best practices and anti-patterns
  8. Stack - Get stack-specific guidelines (default: html-tailwind)
多次使用
search.py
来收集全面的信息，直到获取足够的上下文。
bash
python scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
推荐搜索顺序：
  1. 产品 - 获取对应产品类型的风格建议
  2. 风格 - 获取详细的风格指南（色彩、效果、框架）
  3. 排版 - 获取包含Google Fonts导入代码的字体搭配方案
  4. 色彩 - 获取调色板（主色、辅助色、CTA色、背景色、文本色、边框色）
  5. 落地页 - 获取页面结构（如果是落地页需求）
  6. 图表 - 获取图表推荐（如果是仪表盘/分析类需求）
  7. UX - 获取最佳实践与反模式
  8. 技术栈 - 获取对应技术栈的指南（默认：html-tailwind）

Step 3: Stack Guidelines (Default: infer-from-project)

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

If user doesn't specify a stack, infer it from the project or default to 
html-tailwind
.
bash
python scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
如果用户未指定技术栈，从项目中推断或默认使用
html-tailwind
。
bash
python scripts/search.py "<keyword>" --stack html-tailwind
支持的技术栈：
html-tailwind
、
react
、
nextjs
、
vue
、
svelte
、
swiftui
、
react-native
、
flutter

Search Reference

搜索参考

Available Domains

可用领域

DomainUse ForExample Keywords
product
Product type recommendationsSaaS, e-commerce, portfolio, healthcare, beauty, service
style
UI styles, colors, effectsglassmorphism, minimalism, dark mode, brutalism
typography
Font pairings, Google Fontselegant, playful, professional, modern
color
Color palettes by product typesaas, ecommerce, healthcare, beauty, fintech, service
landing
Page structure, CTA strategieshero, hero-centric, testimonial, pricing, social-proof
chart
Chart types, library recommendationstrend, comparison, timeline, funnel, pie
ux
Best practices, anti-patternsanimation, accessibility, z-index, loading
prompt
AI prompts, CSS keywords(style name)
领域用途示例关键词
product
产品类型设计建议SaaS、电商、作品集、医疗健康、美容、服务类
style
UI样式、色彩、效果玻璃态、极简主义、深色模式、粗野主义
typography
字体搭配、Google Fonts优雅、活泼、专业、现代
color
按产品类型分类的调色板SaaS、电商、医疗健康、美容、金融科技、服务类
landing
页面结构、CTA策略英雄区、以英雄区为核心、客户见证、定价、社交证明
chart
图表类型、库推荐趋势、对比、时间线、漏斗、饼图
ux
最佳实践、反模式动画、可访问性、z-index、加载
prompt
AI提示词、CSS关键词（风格名称）

Available Stacks

可用技术栈

StackFocus
html-tailwind
Tailwind utilities, responsive, a11y (DEFAULT)
react
State, hooks, performance, patterns
nextjs
SSR, routing, images, API routes
vue
Composition API, Pinia, Vue Router
svelte
Runes, stores, SvelteKit
swiftui
Views, State, Navigation, Animation
react-native
Components, Navigation, Lists
flutter
Widgets, State, Layout, Theming
技术栈关注重点
html-tailwind
Tailwind工具类、响应式设计、可访问性（默认）
react
状态管理、Hooks、性能、设计模式
nextjs
SSR、路由、图片处理、API路由
vue
组合式API、Pinia、Vue Router
svelte
Runes、状态存储、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
组件（Widgets）、状态、布局、主题

Example Workflow

示例工作流程

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
AI should:
bash
undefined
用户请求： "为专业护肤服务制作落地页"
AI应执行：
bash
undefined

1. Search product type

1. 搜索产品类型

python scripts/search.py "beauty spa wellness service" --domain product
python scripts/search.py "beauty spa wellness service" --domain product

2. Search style (based on industry: beauty, elegant)

2. 搜索风格（基于行业：美容、优雅）

python scripts/search.py "elegant minimal soft" --domain style
python scripts/search.py "elegant minimal soft" --domain style

3. Search typography

3. 搜索排版

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

4. Search color palette

4. 搜索调色板

python scripts/search.py "beauty spa wellness" --domain color
python scripts/search.py "beauty spa wellness" --domain color

5. Search landing page structure

5. 搜索落地页结构

python scripts/search.py "hero-centric social-proof" --domain landing
python scripts/search.py "hero-centric social-proof" --domain landing

6. Search UX guidelines

6. 搜索UX指南

python scripts/search.py "animation" --domain ux python scripts/search.py "accessibility" --domain ux
python scripts/search.py "animation" --domain ux python scripts/search.py "accessibility" --domain ux

7. Search stack guidelines (default: html-tailwind)

7. 搜索技术栈指南（默认：html-tailwind）

python scripts/search.py "layout responsive" --stack html-tailwind

**Then:** Synthesize all search results and implement the design.

---
python scripts/search.py "layout responsive" --stack html-tailwind

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

---

Tips for Better Results

提升结果质量的技巧

  1. Be specific with keywords - "healthcare SaaS dashboard" > "app"
  2. Search multiple times - Different keywords reveal different insights
  3. Combine domains - Style + Typography + Color = Complete design system
  4. Always check UX - Search "animation", "z-index", "accessibility" for common issues
  5. Use stack flag - Get implementation-specific best practices
  6. Iterate - If first search doesn't match, try different keywords
  1. 关键词要具体 - "医疗健康SaaS仪表盘" > "应用"
  2. 多次搜索 - 不同关键词会带来不同的洞察
  3. 组合多个领域 - 风格 + 排版 + 色彩 = 完整的设计系统
  4. 务必检查UX - 搜索"动画"、"z-index"、"可访问性"以排查常见问题
  5. 使用技术栈参数 - 获取针对具体实现的最佳实践
  6. 迭代优化 - 如果首次搜索结果不符合预期，尝试不同的关键词

Common Rules for Professional UI

专业UI设计的通用规则

These are frequently overlooked issues that make UI look unprofessional:
以下是常被忽略但会影响UI专业性的问题：

Icons & Visual Elements

图标与视觉元素

RuleEnforce
SVG icon setsUse SVG icons from a single set (Heroicons, Lucide, Simple Icons) for UI controls; reserve emojis for content only.
Stable hover statesUse color/opacity transitions on hover; keep layout dimensions fixed to prevent shift.
Correct brand logosPull official SVGs from Simple Icons or brand sites; verify the latest mark before use.
Consistent icon sizingStandardize viewBox (24x24) and apply w-6 h-6 (or equivalent) across the set.
规则执行要求
SVG图标集UI控件使用来自同一图标集（Heroicons、Lucide、Simple Icons）的SVG图标；仅在内容中使用emoji。
稳定的悬停状态悬停时使用颜色/透明度过渡；保持布局尺寸固定，避免页面移位。
正确的品牌Logo从Simple Icons或品牌官网获取官方SVG；使用前确认是最新版本。
统一的图标尺寸标准化viewBox为24x24，并为所有图标设置统一尺寸（如w-6 h-6或等效）。

Interaction & Cursor

交互与光标

RuleEnforce
Pointer cuesAdd 
cursor-pointer
to all clickable/hoverable cards and elements.
Hover feedbackProvide clear visual feedback (color, shadow, border) on hover and focus.
Smooth transitionsUse 150-300ms transitions (colors, opacity, shadow) to keep changes fluid.
规则执行要求
指针提示为所有可点击/可悬停的卡片及元素添加
cursor-pointer
。
悬停反馈悬停和聚焦时提供清晰的视觉反馈（颜色、阴影、边框变化）。
平滑过渡使用150-300ms的过渡效果，让变化更流畅。

Light/Dark Mode Contrast

亮/深色模式对比度

RuleEnforce
Glass card light modeUse 
bg-white/80
or higher opacity for glass surfaces.
Light text contrastUse 
#0F172A
(slate-900) or darker for body text to meet 4.5:1 contrast.
Muted text lightUse 
#475569
(slate-600) or darker for secondary text.
Border visibilityUse 
border-gray-200
or higher in light mode so edges remain visible.
规则执行要求
亮色模式玻璃卡片玻璃质感元素使用
bg-white/80
或更高透明度。
亮色文本对比度正文文本使用
#0F172A
（slate-900）或更深的颜色，确保对比度达到4.5:1。
亮色模式次要文本次要文本使用
#475569
（slate-600）或更深的颜色。
边框可见性亮色模式下使用
border-gray-200
或更粗的边框，确保边缘可见。

Layout & Spacing

布局与间距

RuleEnforce
Floating navbar spacingAdd 
top-4 left-4 right-4
(or equivalent) margin for floating navbars.
Content clearanceAdd top padding equal to the fixed navbar height to keep content visible.
Consistent max-widthUse a single container width (e.g., 
max-w-6xl
or 
max-w-7xl
) across sections.
规则执行要求
悬浮导航栏间距为悬浮导航栏添加
top-4 left-4 right-4
（或等效）的外边距。
内容留白添加与固定导航栏高度相等的顶部内边距，确保内容不被遮挡。
统一最大宽度所有区块使用统一的容器宽度（如
max-w-6xl
或
max-w-7xl
）。

Pre-Delivery Checklist

交付前检查清单

Before delivering UI code, verify these items:
在交付UI代码前，请验证以下项目：

Visual Quality

视觉质量

  • No emojis used as icons (use SVG instead)
  • All icons from consistent icon set (Heroicons/Lucide)
  • Brand logos are correct (verified from Simple Icons)
  • Hover states don't cause layout shift
  • Use theme colors directly (bg-primary) not var() wrapper
  • 未将emoji用作图标（改用SVG）
  • 所有图标来自统一的图标集（Heroicons/Lucide）
  • 品牌Logo正确（已从Simple Icons验证）
  • 悬停状态不会导致页面移位
  • 直接使用主题色（如bg-primary）而非var()包装器

Interaction

交互体验

  • All clickable elements have 
    cursor-pointer
  • Hover states provide clear visual feedback
  • Transitions are smooth (150-300ms)
  • Focus states visible for keyboard navigation
  • 所有可点击元素都设置了
    cursor-pointer
  • 悬停状态提供清晰的视觉反馈
  • 过渡效果平滑（150-300ms）
  • 键盘导航的聚焦状态可见

Light/Dark Mode

亮/深色模式

  • Light mode text has sufficient contrast (4.5:1 minimum)
  • Glass/transparent elements visible in light mode
  • Borders visible in both modes
  • Test both modes before delivery
  • 亮色模式文本对比度足够（最低4.5:1）
  • 玻璃/透明元素在亮色模式下可见
  • 边框在两种模式下都可见
  • 交付前测试两种模式

Layout

布局

  • Floating elements have proper spacing from edges
  • No content hidden behind fixed navbars
  • Responsive at 320px, 768px, 1024px, 1440px
  • No horizontal scroll on mobile
  • 悬浮元素与页面边缘有合适的间距
  • 没有内容被固定导航栏遮挡
  • 在320px、768px、1024px、1440px分辨率下均支持响应式
  • 移动端无横向滚动

Accessibility

可访问性

  • All images have alt text
  • Form inputs have labels
  • Color is not the only indicator
  • prefers-reduced-motion
    respected
  • 所有图片都有alt文本
  • 表单输入框都有标签
  • 不单独使用颜色作为状态指示
  • 尊重
    prefers-reduced-motion
    设置