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 with page standards and audit mode. Contains 85 styles, 115 color palettes, 72 font pairings, 120 UX guidelines, 35 chart types, 61 component patterns, 50 animations, 57 WCAG 2.2 criteria, 42 responsive patterns, 40 dark mode rules, 51 design tokens across 13 stacks, 15 page types with mandatory/recommended sections, 44 audit rules, SEO requirements per page type, navigation/IA patterns, auth flow patterns, and empty state patterns. Includes audit mode to check existing pages against standards.
包含页面标准与审计模式的综合性设计指南。涵盖85种样式、115种调色板、72组字体搭配、120条UX准则、35种图表类型、61种组件模式、50种动画、57项WCAG 2.2标准、42种响应式模式、40条深色模式规则、13种技术栈对应的51个Design Tokens、15类带必填/推荐区块的页面类型、44条审计规则、针对每种页面类型的SEO要求、导航/信息架构模式、身份验证流程模式以及空状态模式。内置审计模式，可对照标准检查现有页面。

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图标，而非emoji

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

前置条件

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, audit), follow this workflow:
当用户提出UI/UX相关需求（设计、构建、创建、实现、评审、修复、改进、审计）时，遵循以下工作流：

Step 0: Page Audit (when reviewing/improving existing pages)

步骤0：页面审计（针对评审/优化现有页面的场景）

When creating or reviewing UI, always audit first to identify missing sections and violations:
bash
python3 skills/ui-ux-pro-max/scripts/search.py "landing" --audit landing
Audit workflow:
  1. Scan existing files in 
    app/
    or 
    pages/
    to identify current pages
  2. For each page, run 
    --audit <page_type>
    to get the standards checklist
  3. Compare existing code against required sections, nav requirements, SEO
  4. Report violations to user with fix suggestions
  5. Ask: "Do you want to fix these to match the standard template?"
  6. If yes: auto-fix the UI to match page standards
Available page types for audit: Landing, Sign Up, Sign In, Dashboard, Dashboard Admin, Settings, Pricing, Blog List, Blog Post, PDP, Search Results, Checkout, 404, Contact, About
创建或评审UI时，始终先执行审计，以识别缺失的区块与违规项：
bash
python3 skills/ui-ux-pro-max/scripts/search.py "landing" --audit landing
审计工作流：
  1. 扫描
    app/
    或
    pages/
    目录下的现有文件，识别当前页面类型
  2. 对每个页面运行
    --audit <page_type>
    ，获取标准检查清单
  3. 将现有代码与必填区块、导航要求、SEO规范进行对比
  4. 向用户报告违规项及修复建议
  5. 询问用户："是否需要修复这些问题以匹配标准模板？"
  6. 若用户同意：自动调整UI以符合页面标准
支持审计的页面类型： Landing（着陆页）、Sign Up（注册页）、Sign In（登录页）、Dashboard（仪表盘）、Dashboard Admin（管理员仪表盘）、Settings（设置页）、Pricing（定价页）、Blog List（博客列表页）、Blog Post（博客详情页）、PDP（产品详情页）、Search Results（搜索结果页）、Checkout（结账页）、404（404错误页）、Contact（联系页）、About（关于页）

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 1.5: Check Page Standards (for specific page types)

步骤1.5：检查页面标准（针对特定页面类型）

Before generating a design system, check what sections are required for the page type:
bash
python3 skills/ui-ux-pro-max/scripts/search.py "landing" --domain page-standards
This confirms:
  • Required sections (Hero, Value Prop, Features, CTA, Footer)
  • Navigation requirements (Logo, CTA button, mobile hamburger)
  • SEO requirements (title format, schema type, indexing)
  • Internal linking requirements (links to pricing, sign-up, etc.)
生成设计系统前，先确认该页面类型所需的区块：
bash
python3 skills/ui-ux-pro-max/scripts/search.py "landing" --domain page-standards
此命令将确认：
  • 必填区块（Hero、价值主张、功能、CTA、页脚）
  • 导航要求（Logo、CTA按钮、移动端汉堡菜单）
  • SEO要求（标题格式、Schema类型、索引规则）
  • 内部链接要求（指向定价页、注册页等的链接）

Step 2: Generate Design System (REQUIRED)

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

Always start with 
--design-system
 to get comprehensive recommendations with reasoning:
bash
python3 skills/ui-ux-pro-max/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 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
始终先使用
--design-system
参数，获取包含推理依据的综合性建议：
bash
python3 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. 包含需避免的反模式
示例：
bash
python3 skills/ui-ux-pro-max/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
:
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
  • design-system/MASTER.md
    — Global Source of Truth with all design rules
  • design-system/pages/
    — Folder for page-specific overrides
With page-specific override:
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
This also creates:
  • design-system/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/pages/checkout.md
  2. If the page file exists, its rules override the Master file
  3. If not, use 
    design-system/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
参数：
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
此命令将创建：
  • design-system/MASTER.md
    — 包含所有设计规则的全局可信源
  • design-system/pages/
    — 存放页面特定覆盖规则的文件夹
添加页面特定覆盖规则：
bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
此命令还将创建：
  • design-system/pages/dashboard.md
    — 与主文件不同的页面特定规则
分层检索机制：
  1. 构建特定页面（如"结账页"）时，先检查
    design-system/pages/checkout.md
  2. 若该页面文件存在，其规则优先于主文件
  3. 若不存在，则仅使用
    design-system/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 skills/ui-ux-pro-max/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"
Animation patterns
animation
--domain animation "hover button loading"
Component patterns
component
--domain component "modal dialog form"
Responsive design
responsive
--domain responsive "container query fluid"
Dark mode rules
darkmode
--domain darkmode "background contrast OLED"
Design tokens
tokens
--domain tokens "spacing shadow elevation"
WCAG accessibility
a11y
--domain a11y "focus keyboard contrast"
Page type standards
page-standards
--domain page-standards "landing dashboard"
Navigation patterns
navigation
--domain navigation "navbar breadcrumb footer"
SEO per page type
seo
--domain seo "landing blog schema"
Global layout rules
layout
--domain layout "z-index container spacing"
Auth page patterns
auth
--domain auth "sign up oauth forgot"
Empty/error states
empty-states
--domain empty-states "skeleton 404 spinner"
获取设计系统后，可使用领域搜索获取更多细节：
bash
python3 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"
动画模式
animation
--domain animation "hover button loading"
组件模式
component
--domain component "modal dialog form"
响应式设计
responsive
--domain responsive "container query fluid"
深色模式规则
darkmode
--domain darkmode "background contrast OLED"
设计令牌
tokens
--domain tokens "spacing shadow elevation"
WCAG可访问性
a11y
--domain a11y "focus keyboard contrast"
页面类型标准
page-standards
--domain page-standards "landing dashboard"
导航模式
navigation
--domain navigation "navbar breadcrumb footer"
页面类型SEO
seo
--domain seo "landing blog schema"
全局布局规则
layout
--domain layout "z-index container spacing"
身份验证页面模式
auth
--domain auth "sign up oauth forgot"
空/错误状态
empty-states
--domain empty-states "skeleton 404 spinner"

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 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: 
html-tailwind
, 
react
, 
nextjs
, 
vue
, 
svelte
, 
swiftui
, 
react-native
, 
flutter
, 
shadcn
, 
jetpack-compose
获取针对特定技术栈的最佳实践。若用户未指定技术栈，默认使用
html-tailwind
。
bash
python3 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

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, view transitions
typography
Font pairings, Google Fontselegant, playful, professional, variable font, Vietnamese
color
Color palettes by product typesaas, ecommerce, healthcare, AI/ML, Web3, EdTech
landing
Page structure, CTA strategieshero, testimonial, pricing, AI demo, developer, PLG
chart
Chart types, library recommendationstrend, funnel, flamegraph, embedding, gantt, topology
ux
Best practices, anti-patternsscroll-driven, view transitions, container queries, WCAG 2.2
react
React/Next.js performancewaterfall, bundle, suspense, memo, rerender, cache
web
Web interface guidelinesaria, focus, semantic, CLS, preconnect, dark mode
animation
Micro-interactions, transitionshover, click, loading, skeleton, scroll, toast, fade
component
Component best practicesbutton, modal, form, table, toast, dropdown, carousel
responsive
Breakpoints, container queriesmobile-first, fluid, clamp, srcset, container query
darkmode
Dark mode design guidedark theme, OLED, surface color, contrast, toggle
tokens
Design tokens, spacing, shadowsspacing, shadow, elevation, z-index, border-radius, scale
a11y
WCAG 2.2 accessibilitywcag, contrast, screen reader, focus, keyboard, aria
prompt
AI prompts, CSS keywords(style name)
page-standards
Required sections per page typelanding, dashboard, pricing, blog, checkout, settings
navigation
Navigation & IA patternsnavbar, sidebar, footer, breadcrumb, mega menu, bottom nav
seo
SEO requirements per page typemeta title, schema, noindex, open graph, canonical
layout
Global layout standardsmax-width, z-index, spacing, grid, sticky footer
auth
Authentication page patternssign in, sign up, oauth, forgot password, 2FA
empty-states
Empty/loading/error statesskeleton, 404, 500, spinner, no results, onboarding
audit-rules
Audit rules and violationscheck, violation, compliance, missing section
领域用途示例关键词
product
产品类型推荐SaaS, e-commerce, portfolio, healthcare, beauty, service
style
UI样式、色彩、效果glassmorphism, minimalism, dark mode, brutalism, view transitions
typography
字体搭配、Google字体elegant, playful, professional, variable font, Vietnamese
color
按产品类型推荐调色板saas, ecommerce, healthcare, AI/ML, Web3, EdTech
landing
页面结构、CTA策略hero, testimonial, pricing, AI demo, developer, PLG
chart
图表类型、库推荐trend, funnel, flamegraph, embedding, gantt, topology
ux
最佳实践、反模式scroll-driven, view transitions, container queries, WCAG 2.2
react
React/Next.js性能优化waterfall, bundle, suspense, memo, rerender, cache
web
Web界面指南aria, focus, semantic, CLS, preconnect, dark mode
animation
微交互、过渡效果hover, click, loading, skeleton, scroll, toast, fade
component
组件最佳实践button, modal, form, table, toast, dropdown, carousel
responsive
断点、容器查询mobile-first, fluid, clamp, srcset, container query
darkmode
深色模式设计指南dark theme, OLED, surface color, contrast, toggle
tokens
设计令牌、间距、阴影spacing, shadow, elevation, z-index, border-radius, scale
a11y
WCAG 2.2可访问性wcag, contrast, screen reader, focus, keyboard, aria
prompt
AI提示词、CSS关键词(样式名称)
page-standards
页面类型必填区块landing, dashboard, pricing, blog, checkout, settings
navigation
导航与信息架构模式navbar, sidebar, footer, breadcrumb, mega menu, bottom nav
seo
页面类型SEO要求meta title, schema, noindex, open graph, canonical
layout
全局布局标准max-width, z-index, spacing, grid, sticky footer
auth
身份验证页面模式sign in, sign up, oauth, forgot password, 2FA
empty-states
空/加载/错误状态skeleton, 404, 500, spinner, no results, onboarding
audit-rules
审计规则与违规项check, violation, compliance, missing section

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
shadcn
shadcn/ui components, theming, forms, patterns
jetpack-compose
Composables, Modifiers, State Hoisting, Recomposition
技术栈重点
html-tailwind
Tailwind工具类、响应式设计、可访问性（默认）
react
状态管理、Hooks、性能优化、模式
nextjs
SSR、路由、图片处理、API路由
vue
组合式API、Pinia、Vue Router
svelte
Runes、状态存储、SvelteKit
swiftui
视图、状态、导航、动画
react-native
组件、导航、列表
flutter
Widget、状态、布局、主题
shadcn
shadcn/ui组件、主题、表单、模式
jetpack-compose
可组合函数、修饰符、状态提升、重组

Example Workflow

示例工作流

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
用户请求： "为专业护肤服务构建着陆页"

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 skills/ui-ux-pro-max/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 skills/ui-ux-pro-max/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 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

Get alternative typography options if needed

若需要，获取替代排版方案

python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
undefined
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
undefined

Step 4: Stack Guidelines

步骤4：技术栈指南

bash
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
Then: Synthesize design system + detailed searches and implement the design.
bash
python3 skills/ui-ux-pro-max/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 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

Markdown - best for documentation

Markdown - 最适合文档记录

python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---
python3 skills/ui-ux-pro-max/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. 关键词要具体 - "医疗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

图标与视觉元素

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图标
稳定的悬停状态悬停时使用颜色/透明度过渡效果使用会导致布局偏移的缩放变换
正确的品牌Logo从Simple Icons获取官方SVG猜测或使用错误的Logo路径
一致的图标尺寸使用固定的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）
  • 品牌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 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
    设置

Learn and Adapt When Things Fail

失败时的学习与调整

When you hit an error:
  • Read the full error message and trace
  • Fix the script and retest (if it uses paid API calls or credits, check with me before running again)
  • Document what you learned in the workflow (rate limits, timing quirks, unexpected behavior)
  • Example: You get rate-limited on an API, so you dig into the docs, discover a batch endpoint, refactor the tool to use it, verify it works, then update the workflow so this never happens again
遇到错误时：
  • 阅读完整的错误信息与堆栈跟踪
  • 修复脚本并重新测试（若涉及付费API调用或配额，需先与我确认再运行）
  • 将学到的内容记录到工作流中（速率限制、时间问题、意外行为）
  • 示例：若遇到API速率限制，可查阅文档发现批量端点，重构工具以使用该端点，验证修复有效后，更新工作流避免再次出现该问题

Keep Workflows Current

保持工作流的时效性

Workflows should evolve as you learn. When you find better methods, discover constraints, or encounter recurring issues, update the workflow. That said, don't create or overwrite workflows without asking unless I explicitly tell you to. These are your instructions and need to be preserved and refined, not tossed after one use.
工作流应随学习不断演进。当发现更好的方法、约束条件或重复出现的问题时，更新工作流。但请注意，除非我明确指示，否则不要创建或覆盖工作流。这些是你的操作指南，需保留并优化，而非使用一次就丢弃。

The Self-Improvement Loop

自我提升循环

Every failure is a chance to make the system stronger:
  1. Identify what broke
  2. Fix the tool
  3. Verify the fix works
  4. Update the workflow with the new approach
  5. Move on with a more robust system
This loop is how the framework improves over time.
每一次失败都是强化系统的机会：
  1. 确定问题所在
  2. 修复工具
  3. 验证修复有效
  4. 使用新方法更新工作流
  5. 继续使用更健壮的系统
这个循环是框架持续改进的方式。