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 - 设计智能工具

Comprehensive design guide for web and mobile applications. Contains 84 styles, 192 color palettes, 74 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.
面向网页和移动应用的综合性设计指南。涵盖22种技术栈的84种样式、192种调色板、74种字体搭配、99条UX指南以及25种图表类型。具备基于优先级推荐的可搜索数据库。

When to Apply

适用场景

Reference these guidelines when:
  • Designing new UI components or pages
  • Choosing color palettes and typography
  • Reviewing code for UX issues
  • Building landing pages or dashboards
  • Implementing accessibility requirements
在以下场景中参考本指南：
  • 设计新的UI组件或页面时
  • 选择调色板和排版方案时
  • 评审代码中的UX问题时
  • 构建着陆页或仪表盘时
  • 落实无障碍需求时

Rule Categories by Priority

按优先级划分的规则类别

PriorityCategoryImpactDomain
1AccessibilityCRITICAL
ux
2Touch & InteractionCRITICAL
ux
3PerformanceHIGH
ux
4Layout & ResponsiveHIGH
ux
5Typography & ColorMEDIUM
typography
, 
color
6AnimationMEDIUM
ux
7Style SelectionMEDIUM
style
, 
product
8Charts & DataLOW
chart
优先级类别影响程度领域
1无障碍设计关键
ux
2触控与交互关键
ux
3性能优化高
ux
4布局与响应式设计高
ux
5排版与色彩中
typography
, 
color
6动画效果中
ux
7样式选择中
style
, 
product
8图表与数据展示低
chart

Quick Reference

快速参考

1. Accessibility (CRITICAL)

1. 无障碍设计（关键）

  • color-contrast
    - Minimum 4.5:1 ratio for normal text
  • focus-states
    - Visible focus rings on interactive elements
  • alt-text
    - Descriptive alt text for meaningful images
  • aria-labels
    - aria-label for icon-only buttons
  • keyboard-nav
    - Tab order matches visual order
  • form-labels
    - Use label with for attribute
  • color-contrast
    - 普通文本的对比度最低为4.5:1
  • focus-states
    - 交互元素需显示可见的焦点环
  • alt-text
    - 有意义的图片需添加描述性替代文本
  • aria-labels
    - 纯图标按钮需添加aria-label
  • keyboard-nav
    - 标签顺序需与视觉顺序一致
  • form-labels
    - 使用带for属性的label标签

2. Touch & Interaction (CRITICAL)

2. 触控与交互（关键）

  • touch-target-size
    - Minimum 44x44px touch targets
  • hover-vs-tap
    - Use click/tap for primary interactions
  • loading-buttons
    - Disable button during async operations
  • error-feedback
    - Clear error messages near problem
  • cursor-pointer
    - Add cursor-pointer to clickable elements
  • touch-target-size
    - 触控目标最小尺寸为44x44px
  • hover-vs-tap
    - 主要交互使用点击/触摸操作
  • loading-buttons
    - 异步操作期间禁用按钮
  • error-feedback
    - 在问题附近显示清晰的错误提示
  • cursor-pointer
    - 为可点击元素添加cursor-pointer样式

3. Performance (HIGH)

3. 性能优化（高）

  • image-optimization
    - Use WebP, srcset, lazy loading
  • reduced-motion
    - Check prefers-reduced-motion
  • content-jumping
    - Reserve space for async content
  • image-optimization
    - 使用WebP格式、srcset属性和懒加载
  • reduced-motion
    - 检测prefers-reduced-motion设置
  • content-jumping
    - 为异步加载内容预留空间

4. Layout & Responsive (HIGH)

4. 布局与响应式设计（高）

  • viewport-meta
    - width=device-width initial-scale=1
  • readable-font-size
    - Minimum 16px body text on mobile
  • horizontal-scroll
    - Ensure content fits viewport width
  • z-index-management
    - Define z-index scale (10, 20, 30, 50)
  • viewport-meta
    - 设置width=device-width initial-scale=1
  • readable-font-size
    - 移动端正文文本最小为16px
  • horizontal-scroll
    - 确保内容适配视口宽度
  • z-index-management
    - 定义z-index层级（10, 20, 30, 50）

5. Typography & Color (MEDIUM)

5. 排版与色彩（中）

  • line-height
    - Use 1.5-1.75 for body text
  • line-length
    - Limit to 65-75 characters per line
  • font-pairing
    - Match heading/body font personalities
  • line-height
    - 正文文本行高使用1.5-1.75
  • line-length
    - 每行限制为65-75个字符
  • font-pairing
    - 匹配标题与正文的字体风格

6. Animation (MEDIUM)

6. 动画效果（中）

  • duration-timing
    - Use 150-300ms for micro-interactions
  • transform-performance
    - Use transform/opacity, not width/height
  • loading-states
    - Skeleton screens or spinners
  • duration-timing
    - 微交互使用150-300ms时长
  • transform-performance
    - 使用transform/opacity属性，而非width/height
  • loading-states
    - 使用骨架屏或加载动画

7. Style Selection (MEDIUM)

7. 样式选择（中）

  • style-match
    - Match style to product type
  • consistency
    - Use same style across all pages
  • no-emoji-icons
    - Use SVG icons, not emojis
  • style-match
    - 样式需与产品类型匹配
  • consistency
    - 所有页面使用统一样式
  • no-emoji-icons
    - 使用SVG图标，而非表情符号

8. Charts & Data (LOW)

8. 图表与数据展示（低）

  • chart-type
    - Match chart type to data type
  • color-guidance
    - Use accessible color palettes
  • data-table
    - Provide table alternative for accessibility
  • chart-type
    - 根据数据类型选择合适的图表类型
  • color-guidance
    - 使用符合无障碍标准的调色板
  • data-table
    - 为无障碍需求提供表格替代方案

How to Use

使用方法

Search specific domains using the CLI tool below.
使用以下CLI工具搜索特定领域的内容。

Prerequisites

前置条件

Requires 
python3
(available by default in the Claude Code shell and in claude.ai's code-execution sandbox). This skill does not install anything.
需要
python3
（Claude Code shell和claude.ai的代码执行沙箱默认已安装）。本工具无需额外安装。

How to Use This Skill

本工具使用流程

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
First, enter this skill's directory so the 
scripts/
and 
data/
paths below resolve (the working directory persists across the subsequent commands):
bash
undefined
当用户提出UI/UX相关需求（设计、构建、创建、实现、评审、修复、优化）时，遵循以下工作流程：
首先，进入本工具的目录，确保后续命令中的
scripts/
和
data/
路径可正常解析（工作目录会在后续命令中保持不变）：
bash
undefined

Reads run from the skill dir; --persist writes to the project root.

Reads run from the skill dir; --persist writes to the project root.

PROJECT_ROOT="$PWD"
PROJECT_ROOT="$PWD"

Use the base path the orchestrator already resolved, else locate this skill.

Use the base path the orchestrator already resolved, else locate this skill.

UIUX_DIR="${SKILL_BASE:+$SKILL_BASE/ui-ux-pro-max}" [ -d "$UIUX_DIR" ] || UIUX_DIR="$(find "$HOME/.claude/plugins" /mnt/skills -type d -name ui-ux-pro-max 2>/dev/null | sort -V | tail -1)" cd "$UIUX_DIR"
undefined
UIUX_DIR="${SKILL_BASE:+$SKILL_BASE/ui-ux-pro-max}" [ -d "$UIUX_DIR" ] || UIUX_DIR="$(find "$HOME/.claude/plugins" /mnt/skills -type d -name ui-ux-pro-max 2>/dev/null | sort -V | tail -1)" cd "$UIUX_DIR"
undefined

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: Generate Design System (REQUIRED)

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

Always start with 
--design-system
 to get comprehensive recommendations with reasoning:
bash
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
  1. Searches 5 domains in parallel (product, style, color, landing, typography)
  2. Applies reasoning rules from 
    ui-reasoning.csv
    to select best matches
  3. Returns complete design system: pattern, style, colors, typography, effects
  4. Includes anti-patterns to avoid
Example:
bash
python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
始终从
--design-system
命令开始，获取包含推理过程的完整推荐方案：
bash
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
该命令会：
  1. 并行搜索5个领域（产品、风格、色彩、着陆页、排版）
  2. 应用
    ui-reasoning.csv
    中的推理规则选择最佳匹配
  3. 返回完整设计系统：模式、样式、色彩、排版、效果
  4. 包含需避免的反模式
示例：
bash
python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

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

To save the design system for hierarchical retrieval across sessions, add 
--persist
(point 
--output-dir
at the project root so files land there, not in the skill dir):
bash
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --output-dir "$PROJECT_ROOT"
This creates:
  • design-system/<project-slug>/MASTER.md
    — Global Source of Truth with all design rules
  • design-system/<project-slug>/pages/
    — Folder for page-specific overrides
--persist
skips writing if 
MASTER.md
already exists; add 
--force
to overwrite.
With page-specific override:
bash
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" --output-dir "$PROJECT_ROOT"
This also creates:
  • design-system/<project-slug>/pages/dashboard.md
    — Page-specific deviations from Master
How hierarchical retrieval works:
  1. When building a specific page (e.g., "Checkout"), first check 
    design-system/<project-slug>/pages/checkout.md
  2. If the page file exists, its rules override the Master file
  3. If not, use 
    design-system/<project-slug>/MASTER.md
    exclusively
Context-aware retrieval prompt:
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
如需保存设计系统以便跨会话层级检索，添加
--persist
参数（指定
--output-dir
为项目根目录，确保文件保存在项目根目录而非工具目录）：
bash
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --output-dir "$PROJECT_ROOT"
这会创建：
  • design-system/<project-slug>/MASTER.md
    — 包含所有设计规则的全局权威文件
  • design-system/<project-slug>/pages/
    — 存放页面特定覆盖规则的文件夹
若
MASTER.md
已存在，
--persist
会跳过写入；添加
--force
参数可覆盖现有文件。
带页面特定覆盖的命令：
bash
python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard" --output-dir "$PROJECT_ROOT"
这还会创建：
  • design-system/<project-slug>/pages/dashboard.md
    — 与主文件不同的页面特定规则
层级检索工作原理：
  1. 构建特定页面（如"结账页"）时，先检查
    design-system/<project-slug>/pages/checkout.md
  2. 若页面文件存在，其规则优先于主文件
  3. 若不存在，则仅使用
    design-system/<project-slug>/MASTER.md
    中的规则
上下文感知检索提示：
我正在构建[页面名称]页面。请阅读design-system/MASTER.md文件。
同时检查design-system/pages/[page-name].md是否存在。
若页面文件存在，优先使用其规则。
若不存在，则仅使用主文件规则。
现在，请生成代码...

Step 3: Supplement with Detailed Searches (as needed)

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

After getting the design system, use domain searches to get additional details:
bash
python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
When to use detailed searches:
NeedDomainExample
More style options
style
--domain style "glassmorphism dark"
Chart recommendations
chart
--domain chart "real-time dashboard"
UX best practices
ux
--domain ux "animation accessibility"
Alternative fonts
typography
--domain typography "elegant luxury"
Landing structure
landing
--domain landing "hero social-proof"
获取设计系统后，可使用领域搜索获取更多细节：
bash
python3 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"

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

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

Get implementation-specific best practices. If user doesn't specify a stack, default to 
html-tailwind
.
bash
python3 scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
astro
, 
vue
, 
nuxtjs
, 
nuxt-ui
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose
, 
threejs
, 
angular
, 
laravel
, 
javafx
, 
wpf
, 
winui
, 
avalonia
, 
uno
, 
uwp
获取特定技术栈的最佳实践。若用户未指定技术栈，默认使用
html-tailwind
。
bash
python3 scripts/search.py "<keyword>" --stack html-tailwind
可用技术栈：
html-tailwind
, 
react
, 
nextjs
, 
astro
, 
vue
, 
nuxtjs
, 
nuxt-ui
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose
, 
threejs
, 
angular
, 
laravel
, 
javafx
, 
wpf
, 
winui
, 
avalonia
, 
uno
, 
uwp

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 (full token sets)saas, 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
icons
Icon set + import guidanceoutline, solid, brand, navigation
react
React/Next.js performancewaterfall, bundle, suspense, memo, rerender, cache
web
App/web interface guidelinesaria, focus, keyboard, semantic, virtualize
gsap
Motion snippets (feeds the 
--motion
dial)		reveal, parallax, stagger, scroll
google-fonts
Google Fonts lookupserif, mono, display, variable
领域用途示例关键词
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
页面结构、CTA策略hero, hero-centric, testimonial, pricing, social-proof
chart
图表类型、库推荐trend, comparison, timeline, funnel, pie
ux
最佳实践、反模式animation, accessibility, z-index, loading
icons
图标集+导入指南outline, solid, brand, navigation
react
React/Next.js性能优化waterfall, bundle, suspense, memo, rerender, cache
web
应用/网页界面指南aria, focus, keyboard, semantic, virtualize
gsap
动效代码片段（供
--motion
参数使用）		reveal, parallax, stagger, scroll
google-fonts
Google Fonts查询serif, mono, display, variable

Available Stacks

可用技术栈

StackFocus
html-tailwind
Tailwind utilities, responsive, a11y (DEFAULT)
react
State, hooks, performance, patterns
nextjs
SSR, routing, images, API routes
astro
Islands architecture, partial hydration, content-driven
vue
Composition API, Pinia, Vue Router
nuxtjs
Nuxt 3, composables, SSR/SSG, auto-imports
nuxt-ui
Nuxt UI components, theming, forms
svelte
Runes, stores, SvelteKit
swiftui
Views, State, Navigation, Animation
react-native
Components, Navigation, Lists
flutter
Widgets, State, Layout, Theming
shadcn
shadcn/ui components, theming, forms, patterns
jetpack-compose
Composables, Modifiers, State Hoisting, Recomposition
threejs
Three.js scenes, materials, R3F patterns
angular
Components, signals, RxJS, standalone APIs
laravel
Blade, Livewire, Tailwind, form patterns
javafx
Scene graph, FXML, CSS, controls
wpf
XAML, MVVM, bindings, styles
winui
WinUI 3, XAML, Fluent, bindings
avalonia
Cross-platform XAML, MVVM, styling
uno
Uno Platform, WinUI XAML cross-target
uwp
UWP XAML, Fluent, adaptive UI
技术栈关注点
html-tailwind
Tailwind工具类、响应式设计、无障碍（默认）
react
状态管理、钩子、性能优化、设计模式
nextjs
SSR、路由、图片处理、API路由
astro
孤岛架构、部分 hydration、内容驱动
vue
组合式API、Pinia、Vue Router
nuxtjs
Nuxt 3、组合式函数、SSR/SSG、自动导入
nuxt-ui
Nuxt UI组件、主题定制、表单
svelte
Runes、状态存储、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
组件、状态、布局、主题
shadcn
shadcn/ui组件、主题定制、表单、设计模式
jetpack-compose
组合式函数、修饰符、状态提升、重组
threejs
Three.js场景、材质、R3F模式
angular
组件、信号、RxJS、独立API
laravel
Blade、Livewire、Tailwind、表单模式
javafx
场景图、FXML、CSS、控件
wpf
XAML、MVVM、绑定、样式
winui
WinUI 3、XAML、Fluent设计、绑定
avalonia
跨平台XAML、MVVM、样式定制
uno
Uno Platform、WinUI XAML跨平台适配
uwp
UWP XAML、Fluent设计、自适应UI

Example Workflow

示例工作流程

User request: "Build a landing page for a professional skincare service"
用户请求： "为专业护肤服务构建一个着陆页"

Step 1: Analyze Requirements

步骤1：分析需求

  • Product type: Beauty/Spa service
  • Style keywords: elegant, professional, soft
  • Industry: Beauty/Wellness
  • Stack: html-tailwind (default)
  • 产品类型：美容/SPA服务
  • 风格关键词：优雅、专业、柔和
  • 行业领域：美容/健康
  • 技术栈：html-tailwind（默认）

Step 2: Generate Design System (REQUIRED)

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

bash
python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
bash
python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
输出： 包含模式、样式、色彩、排版、效果及反模式的完整设计系统。

Step 3: Supplement with Detailed Searches (as needed)

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

bash
undefined
bash
undefined

Get UX guidelines for animation and accessibility

获取动画和无障碍设计的UX指南

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

Get alternative typography options if needed

如需替代排版方案

python3 scripts/search.py "elegant luxury serif" --domain typography
undefined
python3 scripts/search.py "elegant luxury serif" --domain typography
undefined

Step 4: Stack Guidelines

步骤4：技术栈指南

bash
python3 scripts/search.py "layout responsive form" --stack html-tailwind
Then: Synthesize design system + detailed searches and implement the design.
bash
python3 scripts/search.py "layout responsive form" --stack html-tailwind
后续操作： 整合设计系统与详细搜索结果，完成设计实现。

Output Formats

输出格式

The 
--design-system
flag supports two output formats:
bash
undefined
--design-system
参数支持两种输出格式：
bash
undefined

ASCII box (default) - best for terminal display

ASCII框格式（默认）- 适用于终端显示

python3 scripts/search.py "fintech crypto" --design-system
python3 scripts/search.py "fintech crypto" --design-system

Markdown - best for documentation

Markdown格式 - 适用于文档

python3 scripts/search.py "fintech crypto" --design-system -f markdown

---
python3 scripts/search.py "fintech crypto" --design-system -f markdown

---

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
规则正确做法错误做法
禁用表情符号图标使用SVG图标（Heroicons、Lucide、Simple Icons）使用🎨 🚀 ⚙️等表情符号作为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
  • 未使用表情符号作为图标（改用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 375px, 768px, 1024px, 1440px
  • No horizontal scroll on mobile
  • 浮动元素与边缘有适当间距
  • 无内容被固定导航栏遮挡
  • 在375px、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
    设置