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

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

何时使用此 Skill

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

资源导航

快速开始

1. 确定设计风格

先读取references/ui-styles.md，选择适合项目的设计风格：

• SaaS/企业应用 → 极简主义 / 企业商务风
• 电商 → 现代电商风 / 奢华风
• 创意作品 → 粗野主义 / 玻璃拟态
• 社交应用 → 新拟态 / 柔和用户界面

2. 选择配色

读取references/color-palettes.md，根据品牌调性选择：

• 科技/专业 → 蓝色/青色 系列
• 自然/健康 → 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 个问题

1. 目标用户是谁？

   • 企业用户 → 简洁、专业、高效
   • 年轻消费者 → 活泼、大胆、有趣
   • 高端客户 → 精致、留白、质感

2. 产品类型是什么？

   • 工具类 → 功能优先，清晰直观
   • 内容类 → 阅读体验，排版优雅
   • 社交类 → 情感连接，互动感强

3. 品牌调性如何？

   • 创新先锋 → 尝试新风格（玻璃拟态）
   • 稳定可靠 → 经典风格（Material Design）
   • 独特个性 → 大胆风格（粗野主义）

配色选择矩阵

实用技巧

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

参考资源

• UI 风格 →选择界面风格
• 配色方案 →选择配色方案
• 字体排版 →选择字体配对
• 图表 →选择图表类型
• 用户体验模式 →学习交互模式
• 组件 →查看组件规范

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