UI UX Pro Max

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

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

何时使用此 Skill

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

资源导航

资源类型文件内容🎨 UI 风格库references/ui-styles.md50+ 种界面设计风格🌈 配色方案references/color-palettes.md100+ 专业调色板🔤 字体配对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-600Slate-500Cyan-400健康医疗Teal-600Gray-500Emerald-400金融科技Indigo-700Gray-600Amber-500电商零售Rose-600Gray-500Violet-500教育培训Violet-600Slate-500Yellow-400娱乐社交Fuchsia-600Gray-500Pink-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 → 查看组件规范 记住： 好的设计不是堆砌特效，而是解决问题。先确保可用性，再追求美观。