UI/UX Pro Max - 智能设计助手 | UI样式、配色方案、字体配对、UX最佳实践

ui-ux-pro-max by guanyang/antigravity-skills

101 周安装量

582 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/guanyang/antigravity-skills --skill ui-ux-pro-max

设计用户体验前端架构

🇨🇳中文介绍

UI/UX Pro Max - 设计智能

可搜索的 UI 样式、配色方案、字体配对、图表类型、产品推荐、UX 指南和特定技术栈最佳实践数据库。

前提条件

检查是否已安装 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、电子商务、作品集、仪表板、落地页等。
风格关键词：简约、活泼、专业、优雅、深色模式等。
行业：医疗保健、金融科技、游戏、教育等。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

步骤 2：搜索相关领域

多次使用 search.py 来收集全面的信息。持续搜索直到获得足够的上下文。

python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

推荐的搜索顺序：

产品 - 获取针对产品类型的风格推荐
风格 - 获取详细的风格指南（颜色、效果、框架）
排版 - 获取字体配对及 Google Fonts 导入
颜色 - 获取配色方案（主色、辅色、行动号召色、背景色、文本色、边框色）
落地页 - 获取页面结构（如果是落地页）
图表 - 获取图表推荐（如果是仪表板/分析页面）
用户体验 - 获取最佳实践和反面模式
技术栈 - 获取特定技术栈的指南（默认：html-tailwind）

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

如果用户未指定技术栈，默认使用 html-tailwind。

python3 scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter

领域	用途	示例关键词
`product`	产品类型推荐	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI 样式、颜色、效果	glassmorphism, minimalism, dark mode, brutalism
`typography`	字体配对、Google Fonts	elegant, 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 关键词	(style name)

技术栈	关注点
`html-tailwind`	Tailwind 工具类、响应式、无障碍访问 (默认)
`react`	状态、钩子、性能、模式
`nextjs`	服务器端渲染、路由、图片、API 路由
`vue`	组合式 API、Pinia、Vue Router
`svelte`	Runes、stores、SvelteKit
`swiftui`	视图、状态、导航、动画
`react-native`	组件、导航、列表
`flutter`	部件、状态、布局、主题化

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

# 1. 搜索产品类型
python3 scripts/search.py "beauty spa wellness service" --domain product

# 2. 搜索风格（基于行业：美容、优雅）
python3 scripts/search.py "elegant minimal soft" --domain style

# 3. 搜索排版
python3 scripts/search.py "elegant luxury" --domain typography

# 4. 搜索配色方案
python3 scripts/search.py "beauty spa wellness" --domain color

# 5. 搜索落地页结构
python3 scripts/search.py "hero-centric social-proof" --domain landing

# 6. 搜索用户体验指南
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux

# 7. 搜索技术栈指南（默认：html-tailwind）
python3 scripts/search.py "layout responsive" --stack html-tailwind

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

获取更好结果的技巧

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

专业 UI 的通用规则

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

图标与视觉元素

规则	应该做	不应该做
不使用表情符号图标	使用 SVG 图标（Heroicons, Lucide, Simple Icons）	使用 🎨 🚀 ⚙️ 等表情符号作为 UI 图标
稳定的悬停状态	在悬停时使用颜色/不透明度过渡	使用会导致布局偏移的缩放变换
正确的品牌标志	从 Simple Icons 研究官方 SVG	猜测或使用不正确的标志路径
一致的图标尺寸	使用固定的 viewBox（24x24）和 w-6 h-6	随意混合不同尺寸的图标

规则	应该做	不应该做
光标指针	为所有可点击/可悬停的卡片添加 `cursor-pointer`	在交互元素上保留默认光标
悬停反馈	提供视觉反馈（颜色、阴影、边框）	没有指示元素是可交互的
平滑过渡	使用 `transition-colors duration-200`	状态瞬间变化或太慢（>500ms）

浅色/深色模式对比度

规则	应该做	不应该做
玻璃态卡片（浅色模式）	使用 `bg-white/80` 或更高不透明度	使用 `bg-white/10`（太透明）
文本对比度（浅色）	文本使用 `#0F172A` (slate-900)	正文文本使用 `#94A3B8` (slate-400)
柔和文本（浅色）	至少使用 `#475569` (slate-600)	使用 gray-400 或更浅的颜色
边框可见性	在浅色模式使用 `border-gray-200`	使用 `border-white/10`（不可见）

规则	应该做	不应该做
浮动导航栏	添加 `top-4 left-4 right-4` 间距	将导航栏固定在 `top-0 left-0 right-0`
内容内边距	考虑固定导航栏的高度	让内容隐藏在固定元素后面
一致的最大宽度	使用相同的 `max-w-6xl` 或 `max-w-7xl`	混合使用不同的容器宽度

交付前检查清单

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

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

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

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

浮动元素与边缘有适当的间距
没有内容隐藏在固定导航栏后面
在 320px、768px、1024px、1440px 下响应式
在移动设备上没有水平滚动

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

🇺🇸English

UI/UX Pro Max - Design Intelligence

Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.

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: Search Relevant Domains

Use search.py multiple times to gather comprehensive information. Search until you have enough context.

python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Recommended search order:

Product - Get style recommendations for product type
Style - Get detailed style guide (colors, effects, frameworks)
Typography - Get font pairings with Google Fonts imports
Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border)
Landing - Get page structure (if landing page)
Chart - Get chart recommendations (if dashboard/analytics)
UX - Get best practices and anti-patterns
Stack - Get stack-specific guidelines (default: html-tailwind)

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

If user doesn't specify a stack, default tohtml-tailwind.

python3 scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter

Search Reference

Available Domains

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`

Available Stacks

Stack	Focus
`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

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

AI should:

# 1. Search product type
python3 scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python3 scripts/search.py "animation" --domain ux
python3 scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python3 scripts/search.py "layout responsive" --stack html-tailwind

Then: Synthesize all search results and implement the design.

Tips for Better Results

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices
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

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix different icon sizes randomly

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use in light mode

Layout & Spacing

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use same `max-w-6xl` or `max-w-7xl`	Mix different container widths

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 320px, 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

Repository

guanyang/antigr…y-skills

GitHub Stars

508

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykPass

Installed on

opencode80

gemini-cli75

codex75

github-copilot71

cursor71

kimi-cli64

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

49,900 周安装