Back to Details

ui-ux-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design Reference - Searchable Pattern Database

UI设计参考 - 可搜索的模式数据库

Curated reference database of UI/UX patterns, styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. Use this as a lookup tool to find proven design patterns and implementation guidance.
这是一个精心整理的UI/UX模式、设计风格、调色板、字体配对、图表类型、产品推荐、UX指南以及特定技术栈最佳实践的参考数据库。可将其用作查找经过验证的设计模式和实现指导的查询工具。

Prerequisites

前置条件

Check if Python is installed:
bash
python3 --version || python --version
If Python is not installed, install it based on user's OS:
macOS:
bash
brew install python3
Ubuntu/Debian:
bash
sudo apt update && sudo apt install python3
Windows:
powershell
winget install Python.Python.3.12
检查是否已安装Python：
bash
python3 --version || python --version
如果未安装Python，请根据用户的操作系统进行安装：
macOS：
bash
brew install python3
Ubuntu/Debian：
bash
sudo apt update && sudo apt install python3
Windows：
powershell
winget install Python.Python.3.12

How to Use This Skill

如何使用该技能

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
当用户提出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
python3 .claude/skills/ui-ux-design/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
python3 .claude/skills/ui-ux-design/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
  1. 产品 - 获取针对该产品类型的设计风格推荐
  2. 风格 - 获取详细的风格指南（颜色、效果、框架）
  3. 排版 - 获取包含Google Fonts导入代码的字体配对方案
  4. 颜色 - 获取调色板（主色、辅助色、行动号召色、背景色、文本色、边框色）
  5. 着陆页 - 获取页面结构（如果是着陆页需求）
  6. 图表 - 获取图表推荐（如果是仪表盘/数据分析类需求）
  7. UX - 获取最佳实践和反模式
  8. 技术栈 - 获取特定技术栈的指导原则（默认：html-tailwind）

Step 3: Stack Guidelines (Default: html-tailwind)

步骤3：技术栈指导原则（默认：html-tailwind）

If user doesn't specify a stack, default to 
html-tailwind
.
bash
python3 .claude/skills/ui-ux-design/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
如果用户未指定技术栈，默认使用
html-tailwind
。
bash
python3 .claude/skills/ui-ux-design/scripts/search.py "<关键词>" --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、e-commerce、portfolio、healthcare、beauty、service
style
UI样式、颜色、效果glassmorphism、minimalism、dark mode、brutalism
typography
字体配对、Google Fontselegant、playful、professional、modern
color
按产品类型分类的调色板saas、ecommerce、healthcare、beauty、fintech、service
landing
页面结构、行动号召策略hero、hero-centric、testimonial、pricing、social-proof
chart
图表类型、库推荐trend、comparison、timeline、funnel、pie
ux
最佳实践、反模式animation、accessibility、z-index、loading
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
服务端渲染、路由、图片处理、API路由
vue
组合式API、Pinia、Vue Router
svelte
Runes、状态存储、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
组件、状态、布局、主题

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. 搜索产品类型

python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness service" --domain product
python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness service" --domain product

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

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

python3 .claude/skills/ui-ux-design/scripts/search.py "elegant minimal soft" --domain style
python3 .claude/skills/ui-ux-design/scripts/search.py "elegant minimal soft" --domain style

3. Search typography

3. 搜索排版方案

python3 .claude/skills/ui-ux-design/scripts/search.py "elegant luxury" --domain typography
python3 .claude/skills/ui-ux-design/scripts/search.py "elegant luxury" --domain typography

4. Search color palette

4. 搜索调色板

python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness" --domain color
python3 .claude/skills/ui-ux-design/scripts/search.py "beauty spa wellness" --domain color

5. Search landing page structure

5. 搜索着陆页结构

python3 .claude/skills/ui-ux-design/scripts/search.py "hero-centric social-proof" --domain landing
python3 .claude/skills/ui-ux-design/scripts/search.py "hero-centric social-proof" --domain landing

6. Search UX guidelines

6. 搜索UX指南

python3 .claude/skills/ui-ux-design/scripts/search.py "animation" --domain ux python3 .claude/skills/ui-ux-design/scripts/search.py "accessibility" --domain ux
python3 .claude/skills/ui-ux-design/scripts/search.py "animation" --domain ux python3 .claude/skills/ui-ux-design/scripts/search.py "accessibility" --domain ux

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

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

python3 .claude/skills/ui-ux-design/scripts/search.py "layout responsive" --stack html-tailwind

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

---
python3 .claude/skills/ui-ux-design/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. 关键词要具体 - "healthcare SaaS dashboard" 优于 "app"
  2. 多次搜索 - 不同关键词会带来不同的见解
  3. 组合多个领域 - 风格 + 排版 + 颜色 = 完整的设计系统
  4. 始终检查UX - 搜索"animation"、"z-index"、"accessibility"以发现常见问题
  5. 使用技术栈参数 - 获取针对具体实现的最佳实践
  6. 迭代优化 - 如果第一次搜索结果不符合预期，尝试不同的关键词

Common Rules for Professional UI

专业UI设计的通用规则

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

Icons & Visual Elements

图标与视觉元素

RuleDoDon't
No emoji iconsUse SVG icons (Heroicons, Lucide, Simple Icons)Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover statesUse color/opacity transitions on hoverUse scale transforms that shift layout
Correct brand logosResearch official SVG from Simple IconsGuess or use incorrect logo paths
Consistent icon sizingUse fixed viewBox (24x24) with w-6 h-6Mix different icon sizes randomly
规则正确做法错误做法
不使用emoji作为图标使用SVG图标（Heroicons、Lucide、Simple Icons）使用🎨 🚀 ⚙️这类emoji作为UI图标
稳定的悬停状态悬停时使用颜色/透明度过渡效果使用会导致布局偏移的缩放变换
正确的品牌标志从Simple Icons获取官方SVG图标猜测或使用错误的标志路径
一致的图标尺寸使用固定的viewBox（24x24）搭配w-6 h-6类随机混合不同尺寸的图标

Interaction & Cursor

交互与光标

RuleDoDon't
Cursor pointerAdd 
cursor-pointer
to all clickable/hoverable cards		Leave default cursor on interactive elements
Hover feedbackProvide visual feedback (color, shadow, border)No indication element is interactive
Smooth transitionsUse 
transition-colors duration-200
Instant state changes or too slow (>500ms)
规则正确做法错误做法
光标样式为指针为所有可点击/可悬停的卡片添加
cursor-pointer
交互式元素保留默认光标
悬停反馈提供视觉反馈（颜色、阴影、边框变化）没有任何元素可交互的提示
平滑过渡使用
transition-colors duration-200
状态瞬间切换或过渡过慢（>500ms）

Light/Dark Mode Contrast

亮色/深色模式对比度

RuleDoDon't
Glass card light modeUse 
bg-white/80
or higher opacity		Use 
bg-white/10
(too transparent)
Text contrast lightUse 
#0F172A
(slate-900) for text		Use 
#94A3B8
(slate-400) for body text
Muted text lightUse 
#475569
(slate-600) minimum		Use gray-400 or lighter
Border visibilityUse 
border-gray-200
in light mode		Use 
border-white/10
(invisible)
规则正确做法错误做法
亮色模式玻璃卡片使用
bg-white/80
或更高透明度		使用
bg-white/10
（过于透明）
亮色模式文本对比度使用
#0F172A
（slate-900）作为文本颜色		使用
#94A3B8
（slate-400）作为正文文本颜色
亮色模式弱化文本最低使用
#475569
（slate-600）		使用gray-400或更浅的颜色
边框可见性亮色模式下使用
border-gray-200
使用
border-white/10
（不可见）

Layout & Spacing

布局与间距

RuleDoDon't
Floating navbarAdd 
top-4 left-4 right-4
spacing		Stick navbar to 
top-0 left-0 right-0
Content paddingAccount for fixed navbar heightLet content hide behind fixed elements
Consistent max-widthUse same 
max-w-6xl
or 
max-w-7xl
Mix different container widths
规则正确做法错误做法
悬浮导航栏添加
top-4 left-4 right-4
间距		将导航栏固定在
top-0 left-0 right-0
内容内边距考虑固定导航栏的高度让内容被固定元素遮挡
一致的最大宽度使用统一的
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）
  • 品牌标志正确（已通过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
  • 所有图片都有替代文本
  • 表单输入框都有标签
  • 不单独使用颜色作为唯一的提示方式
  • 遵循
    prefers-reduced-motion
    设置