- name
- ui-ux-pro-max
- description
- Professional UI/UX design resource library with searchable design patterns, color palettes, font pairings, chart types, and UX guidelines. Use when creating beautiful, professional-grade user interfaces, selecting color schemes, choosing typography, designing data visualizations, or following modern UX best practices. Includes 50+ UI styles, 100+ color palettes, curated font pairings, chart selection guide, and comprehensive UX patterns.
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 → 查看组件规范
记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。