UI UX Pro Max

iReact2Code@ireact2code

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.

Install

openclaw skills install @ireact2code/ui-ux-pro-max-plus

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 快速应用

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; }

响应式断点建议

text

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

间距系统

css

/* 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 → 查看组件规范

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