UI UX Pro Max

Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating...

Join 0+ developers using this skill

skill

Creative & Media

intermediate

0 installs

View Source

Last updated: April 23, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Manual Installation

No automatic installation available. Please visit the source repository for installation instructions.

View Installation Instructions

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

UI UX Pro Max - 专业设计资源库

完整的 UI/UX 设计资源库，让 AI 生成的界面像专业设计师作品一样精美。

何时使用此 Skill

设计任何用户界面时需要专业参考
选择配色方案（品牌色、功能色、中性色）
挑选字体组合（标题+正文）
设计数据可视化图表
需要 UX 最佳实践指导
寻找特定行业/风格的设计灵感

资源导航

资源类型	文件	内容
🎨 UI 风格库	references/ui-styles.md	50+ 种界面设计风格
🌈 配色方案	references/color-palettes.md	100+ 专业调色板
🔤 字体配对	references/typography.md	精选字体组合
📊 图表类型	references/charts.md	数据可视化指南
📘 UX 模式	references/ux-patterns.md	用户体验最佳实践
🎯 组件库	references/components.md	常用组件设计规范

快速开始

1. 确定设计风格

先读取

references/ui-styles.md

，选择适合项目的设计风格：

SaaS/企业应用 → Minimalist / Corporate
电商 → Modern E-commerce / Luxury
创意作品 → Brutalist / Glassmorphism
社交应用 → Neumorphism / Soft UI

2. 选择配色

读取

references/color-palettes.md

，根据品牌调性选择：

科技/专业 → Blue/Cyan 系列
自然/健康 → Green/Earth 系列
时尚/美妆 → Purple/Pink 系列
金融/法律 → Navy/Gray 系列

3. 搭配字体

读取

references/typography.md

：

现代科技感 → Inter + JetBrains Mono
优雅精致 → Playfair Display + Inter
友好亲和 → Nunito + Open Sans

4. 应用 UX 模式

读取

references/ux-patterns.md

获取具体场景的交互模式。

设计决策框架

选择 UI 风格的 3 个问题

目标用户是谁？
- 企业用户 → 简洁、专业、高效
- 年轻消费者 → 活泼、大胆、有趣
- 高端客户 → 精致、留白、质感
产品类型是什么？
- 工具类 → 功能优先，清晰直观
- 内容类 → 阅读体验，排版优雅
- 社交类 → 情感连接，互动感强
品牌调性如何？
- 创新先锋 → 尝试新风格（Glassmorphism）
- 稳定可靠 → 经典风格（Material Design）
- 独特个性 → 大胆风格（Brutalist）

配色选择矩阵

场景	主色	辅助色	强调色
科技产品	Blue-600	Slate-500	Cyan-400
健康医疗	Teal-600	Gray-500	Emerald-400
金融科技	Indigo-700	Gray-600	Amber-500
电商零售	Rose-600	Gray-500	Violet-500
教育培训	Violet-600	Slate-500	Yellow-400
娱乐社交	Fuchsia-600	Gray-500	Pink-500

实用技巧

Tailwind CSS 快速应用

/* 配色示例 */
.bg-brand { @apply bg-blue-600; }
.text-muted { @apply text-gray-500; }
.border-accent { @apply border-cyan-400; }
/* 字体示例 */
.font-heading { @apply font-display text-3xl font-bold; }
.font-body { @apply font-sans text-base leading-relaxed; }

响应式断点建议

Mobile First:
- 默认: 320px+
- sm: 640px+
- md: 768px+
- lg: 1024px+
- xl: 1280px+

间距系统

/* 8px 基础倍数 */
space-1: 4px
space-2: 8px
space-3: 12px
space-4: 16px
space-6: 24px
space-8: 32px
space-12: 48px
space-16: 64px

专业提示

不要混合太多风格 - 选择1种主风格，2-3个设计元素点缀
颜色不超过5种 - 主色、辅助色、中性色、成功色、错误色
字体最多2种 - 1种标题字体 + 1种正文字体
留白是设计 - 不要害怕空白，它是呼吸空间
一致性 > 创新 - 保持设计系统的一致性比追求独特更重要

参考资源

UI Styles → 选择界面风格
Color Palettes → 选择配色方案
Typography → 选择字体配对
Charts → 选择图表类型
UX Patterns → 学习交互模式
Components → 查看组件规范

记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。

UI UX Pro Max

AI Skill Market Insights

Quick Start

Manual Installation

TEAR & SHARE

Tags

Chart MCP Server

Be Part of the 0+ Developer Community

UI UX Pro Max - 专业设计资源库

何时使用此 Skill

资源导航

快速开始

1. 确定设计风格

2. 选择配色

3. 搭配字体

4. 应用 UX 模式

设计决策框架

选择 UI 风格的 3 个问题

配色选择矩阵

实用技巧

Tailwind CSS 快速应用

响应式断点建议

间距系统

专业提示

参考资源

Heddy IP — Brand Illustration

KiCad MCP Server

Shadcn UI MCP Server

Douyin MCP Server

Channels

Learn

Compare

Company

Agents