快速参考

1. 无障碍访问（关键）

• color-contrast - 普通文本的最小对比度为 4.5:1
• focus-states - 交互元素上显示可见的焦点环
• alt-text - 为有意义的图像提供描述性替代文本
• aria-labels - 为纯图标按钮提供 aria-label
• keyboard-nav - Tab 键顺序与视觉顺序匹配
• form-labels - 使用带有 for 属性的 label 标签

2. 触摸与交互（关键）

• touch-target-size - 最小触摸目标尺寸为 44x44 像素
• hover-vs-tap - 主要交互使用点击/轻触
• loading-buttons - 异步操作期间禁用按钮
• error-feedback - 在问题附近提供清晰的错误信息
• cursor-pointer - 为可点击元素添加 cursor-pointer

3. 性能（高）

• image-optimization - 使用 WebP、srcset、懒加载
• reduced-motion - 检查 prefers-reduced-motion
• content-jumping - 为异步内容预留空间

4. 布局与响应式（高）

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - 移动端正文文本最小为 16 像素
• horizontal-scroll - 确保内容适应视口宽度
• z-index-management - 定义 z-index 层级（10, 20, 30, 50）

5. 字体排版与色彩（中）

• line-height - 正文文本行高使用 1.5-1.75
• line-length - 每行限制在 65-75 个字符
• font-pairing - 匹配标题/正文字体的风格

6. 动画（中）

• duration-timing - 微交互使用 150-300 毫秒
• transform-performance - 使用 transform/opacity，而非 width/height
• loading-states - 骨架屏或加载指示器

7. 样式选择（中）

• style-match - 样式与产品类型匹配
• consistency - 在所有页面使用相同样式
• no-emoji-icons - 使用 SVG 图标，而非表情符号

8. 图表与数据（低）

• chart-type - 图表类型与数据类型匹配
• color-guidance - 使用无障碍配色方案
• data-table - 为无障碍访问提供表格替代方案

使用方法

使用下面的 CLI 工具搜索特定领域。

先决条件

检查是否已安装 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：生成设计系统（必需）

始终以 --design-system 开始，以获取包含推理的全面推荐：

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. 包含需要避免的反模式

示例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

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

要保存设计系统以便跨会话进行分层检索，请添加 --persist：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

这将创建：

• design-system/MASTER.md — 包含所有设计规则的全局单一事实来源
• design-system/pages/ — 用于存放页面特定覆盖的文件夹

使用页面特定覆盖：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

这还会创建：

• design-system/pages/dashboard.md — 页面特定的与主文件的差异

分层检索的工作原理：

1. 当构建特定页面（例如，“Checkout”）时，首先检查 design-system/pages/checkout.md
2. 如果页面文件存在，其规则将覆盖主文件中的规则
3. 如果不存在，则仅使用 design-system/MASTER.md

上下文感知检索提示：

我正在构建 [Page Name] 页面。请阅读 design-system/MASTER.md。
同时检查 design-system/pages/[page-name].md 是否存在。
如果页面文件存在，请优先使用其规则。
如果不存在，则仅使用主文件规则。
现在，生成代码...

步骤 3：补充详细搜索（根据需要）

获取设计系统后，使用领域搜索获取更多细节：

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

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

获取特定于实现的最佳实践。如果用户未指定技术栈，默认为 html-tailwind。

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

搜索参考

可用领域

可用技术栈

示例工作流程

用户请求： "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

步骤 1：分析需求

• 产品类型：美容/水疗服务
• 样式关键词：优雅、专业、柔和
• 行业：美容/健康
• 技术栈：html-tailwind（默认）

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

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

输出： 包含模式、样式、色彩、字体排版、效果和反模式的完整设计系统。

步骤 3：补充详细搜索（根据需要）

# 获取动画和无障碍访问的用户体验指南
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 如果需要，获取替代字体排版选项
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

步骤 4：技术栈指南

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

然后： 综合设计系统和详细搜索结果，并实现设计。

输出格式

--design-system 标志支持两种输出格式：

# ASCII 方框（默认）- 最适合终端显示
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - 最适合文档
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

获取更好结果的技巧

1. 关键词要具体 - "healthcare SaaS dashboard" > "app"
2. 多次搜索 - 不同的关键词会揭示不同的见解
3. 组合领域 - 样式 + 字体排版 + 色彩 = 完整的设计系统
4. 始终检查用户体验 - 搜索 "animation"、"z-index"、"accessibility" 以查找常见问题
5. 使用技术栈标志 - 获取特定于实现的最佳实践
6. 迭代 - 如果第一次搜索不匹配，请尝试不同的关键词

专业 UI 的通用规则

这些是经常被忽视、导致 UI 看起来不专业的问题：

图标与视觉元素

交互与光标

浅色/深色模式对比度

布局与间距

交付前检查清单

在交付 UI 代码之前，请验证以下项目：

视觉质量

• 未使用表情符号作为图标（请使用 SVG）
• 所有图标均来自一致的图标集（Heroicons/Lucide）
• 品牌标志正确（已从 Simple Icons 验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色（bg-primary）而非 var() 包装器

交互

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

浅色/深色模式

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

布局

• 浮动元素与边缘有适当的间距
• 没有内容隐藏在固定导航栏后面
• 在 375px、768px、1024px、1440px 下响应式显示
• 移动端无水平滚动

无障碍访问

• 所有图像都有替代文本
• 表单输入有标签
• 颜色不是唯一的指示器
• 尊重 prefers-reduced-motion

每周安装量

51.6K

仓库

nextlevelbuilde…ax-skill

GitHub 星标数

38.5K

首次出现

Jan 19, 2026

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

opencode41.5K

gemini-cli39.9K

codex39.7K

github-copilot36.4K

kimi-cli31.7K

amp31.6K

Quick Reference

1. Accessibility (CRITICAL)

• 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

2. Touch & Interaction (CRITICAL)

• 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

3. Performance (HIGH)

• image-optimization - Use WebP, srcset, lazy loading
• reduced-motion - Check prefers-reduced-motion
• content-jumping - Reserve space for async content

4. Layout & Responsive (HIGH)

• 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)

5. Typography & Color (MEDIUM)

• 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

6. Animation (MEDIUM)

• duration-timing - Use 150-300ms for micro-interactions
• transform-performance - Use transform/opacity, not width/height
• loading-states - Skeleton screens or spinners

7. Style Selection (MEDIUM)

• style-match - Match style to product type
• consistency - Use same style across all pages
• no-emoji-icons - Use SVG icons, not emojis

8. Charts & Data (LOW)

• chart-type - Match chart type to data type
• color-guidance - Use accessible color palettes
• data-table - Provide table alternative for accessibility

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

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:

Step 1: Analyze User Requirements

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

Step 2: Generate Design System (REQUIRED)

Always start with--design-system to get comprehensive recommendations with reasoning:

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:

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)

To save the design system for hierarchical retrieval across sessions , add --persist:

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:

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...

Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

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

Get implementation-specific best practices. If user doesn't specify a stack, default tohtml-tailwind.

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

Search Reference

Available Domains

Available Stacks

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

• Product type: Beauty/Spa service
• Style keywords: elegant, professional, soft
• Industry: Beauty/Wellness
• Stack: html-tailwind (default)

Step 2: Generate Design System (REQUIRED)

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.

Step 3: Supplement with Detailed Searches (as needed)

# Get UX guidelines for animation and accessibility
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

Step 4: Stack Guidelines

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.

Output Formats

The --design-system flag supports two output formats:

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
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

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

Pre-Delivery Checklist

Before delivering UI code, verify these items:

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

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

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

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

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Weekly Installs

51.6K

Repository

nextlevelbuilde…ax-skill

GitHub Stars

38.5K

First Seen

Jan 19, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

opencode41.5K

gemini-cli39.9K

codex39.7K

github-copilot36.4K

kimi-cli31.7K

amp31.6K