back
loading skill details...
专业UI/UX设计资源库,含风格库、配色方案、字体配对基础查询,适合个人设计师快速参考
---
name: "ui-ux-promax-plus-free"
description: "专业UI/UX设计资源库,含风格库、配色方案、字体配对基础查询,适合个人设计师快速参考"
license: Proprietary
allowed-tools: read exec
compatibility: "Requires LLM with tool-use capability"
metadata:
displayName: "UI/UX ProMax+免费版"
version: "1.0.0"
summary: "专业UI/UX设计资源库,含风格库、配色方案、字体配对基础查询,适合个人设计师快速参考"
tags:
- "设计"
- "UI"
- "UX"
- "配色"
- "字体"
- "前端"
- "资源库"
source: "SkillHub"
converted_at: "2026-07-22T17:58:36"
---
# UI/UX ProMax+ - 免费版
## 概述
UI/UX ProMax+免费版是一款面向个人设计师和开发者的UI/UX设计资源库。内置50+种界面设计风格、100+套专业配色方案、精选字体配对组合,通过设计决策框架帮助快速选择适合项目的设计方案。提供Tailwind CSS快速应用指引,让设计建议即刻落地。
## 核心能力
### 1. UI风格库
提供50+种界面设计风格,按产品类型分类:
| 产品类型 | 推荐风格 | 特点 |
|----------|----------|------|
| SaaS/企业应用 | Minimalist / Corporate | 简洁、专业、高效 |
| 电商 | Modern E-commerce / Luxury | 现代、高端、转化导向 |
| 创意作品 | Brutalist / Glassmorphism | 大胆、独特、视觉冲击 |
| 社交应用 | Neumorphism / Soft UI | 柔和、亲和、触感 |
| 健康/医疗 | Clean / Trust Blue | 干净、可信、专业 |
| 金融科技 | Corporate / Data Dense | 严谨、数据密集、可靠 |
**输入**: 用户提供UI风格库所需的指令和必要参数。
**处理**: 按照skill规范执行UI风格库操作,遵循单一意图原则。
**输出**: 返回UI风格库的执行结果,包含操作状态和输出数据。
### 2. 配色方案查询
100+套专业调色板,按行业和调性分类:
| 场景 | 主色 | 辅助色 | 强调色 |
|------|------|--------|--------|
| 科技产品 | 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 |
**输入**: 用户提供配色方案查询所需的指令和必要参数。
**处理**: 按照skill规范执行配色方案查询操作,遵循单一意图原则。
**输出**: 返回配色方案查询的执行结果,包含操作状态和输出数据。
### 3. 字体配对推荐
精选字体组合,按风格分类:
| 风格 | 标题字体 | 正文字体 | 适用场景 |
|------|----------|----------|----------|
| 现代科技 | Inter | Inter | SaaS、科技产品 |
| 优雅精致 | Playfair Display | Inter | 奢侈品、高端服务 |
| 友好亲和 | Nunito | Open Sans | 教育、社交 |
| 专业商务 | Roboto | Roboto | 企业、金融 |
| 创意个性 | Space Grotesk | Inter | 创意 agency |
| 代码技术 | JetBrains Mono | Inter | 开发者工具 |
**输入**: 用户提供字体配对推荐所需的指令和必要参数。
**处理**: 按照skill规范执行字体配对推荐操作,遵循单一意图原则。
**输出**: 返回字体配对推荐的执行结果,包含操作状态和输出数据。
### 4. 设计决策框架
选择UI风格的三个核心问题:
```text
问题1:目标用户是谁?
- 企业用户 -> 简洁、专业、高效
- 年轻消费者 -> 活泼、大胆、有趣
- 高端客户 -> 精致、留白、质感
问题2:产品类型是什么?
- 工具类 -> 功能优先,清晰直观
- 内容类 -> 阅读体验,排版优雅
- 社交类 -> 情感连接,互动感强
问题3:品牌调性如何?
- 创新先锋 -> 尝试新风格(玻璃态)
- 稳定可靠 -> 经典风格(Material Design)
- 独特个性 -> 大胆风格(粗野主义)
```
**输入**: 用户提供设计决策框架所需的指令和必要参数。
**处理**: 按照skill规范执行设计决策框架操作,遵循单一意图原则。
**输出**: 返回设计决策框架的执行结果,包含操作状态和输出数据。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 5. 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; }
```
**输入**: 用户提供Tailwind CSS快速应用所需的指令和必要参数。
**处理**: 按照skill规范执行Tailwind CSS快速应用操作,遵循单一意图原则。
**输出**: 返回Tailwind CSS快速应用的执行结果,包含操作状态和输出数据。
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：设计资源库、含风格库、字体配对基础查询、适合个人设计师快、速参考、面向个人设计师和、开发者的、提供界面风格、字体配对的基础查、询和设计决策框架、核心能力、风格库浏览、种界面风格、精选组合、基础设计决策框架、快速应用指引等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
## 使用场景
### 场景一:个人项目风格选择
独立开发者构建一款笔记应用,需要确定设计方向。
```text
步骤1:确定目标用户 -> 个人用户,需要简洁高效
步骤2:确定产品类型 -> 工具类,功能优先
步骤3:确定品牌调性 -> 稳定可靠,经典风格
结论:选择 Minimalist 风格
配色: Blue-600 + Slate-500 + Cyan-400
字体: Inter + Inter
布局: max-w-4xl, 8px间距体系
```
### 场景二:电商配色决策
为一个新的美妆电商平台选择配色方案。
```text
行业: 电商零售
调性: 时尚、优雅
推荐配色:
主色: Rose-600 (#E11D48) - 温暖、女性化
辅助色: Gray-500 (#6B7280) - 中性平衡
强调色: Violet-500 (#8B5CF6) - 时尚点缀
背景: White / Rose-50
文字: Slate-900 / Slate-600
```
### 场景三:字体配对选择
为技术博客选择合适的字体组合。
```text
风格: 现代科技
推荐配对:
标题: Inter (无衬线,现代清晰)
正文: Inter (一致性,易读)
代码: JetBrains Mono (等宽,技术感)
Tailwind配置:
font-sans: Inter, system-ui
font-mono: JetBrains Mono, monospace
```
## 不适用场景
以下场景UI/UX ProMax+免费版不适合处理：
- 3D建模和动画制作
- 照片级写实渲染
- 手绘原创插画
## 触发条件
需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于非本工具能力范围的需求。
## 快速开始
1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问
### 设计资源查询流程
```bash
# 1.确定产品类型和行业
# 产品: SaaS | 行业: 生产力工具
# 2.查询推荐风格
# 参考: UI风格库 -> SaaS -> Minimalist
# 3.查询配色方案
# 参考: 配色方案 -> 科技产品 -> Blue-600 + Slate-500 + Cyan-400
# 4.查询字体配对
# 参考: 字体配对 -> 现代科技 -> Inter + Inter
# 5.应用Tailwind配置
```
### Tailwind项目配置
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#2563EB', // 主色
secondary: '#64748B', // 辅助色
accent: '#22D3EE', // 强调色
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
};
```
## 示例
### 响应式断点建议
```text
移动优先断点:
- 默认: 320px+ (最小手机)
- sm: 640px+ (大屏手机)
- md: 768px+ (平板)
- lg: 1024px+ (笔记本)
- xl: 1280px+ (桌面)
```
### 间距系统(8px基础)
```text
space-1: 4px space-6: 24px
space-2: 8px space-8: 32px
space-3: 12px space-12: 48px
space-4: 16px space-16: 64px
```
### 免费版与专业版功能对比
| 功能项 | 免费版 | 专业版 |
|--------|--------|--------|
| UI风格库 | 50+风格浏览 | 全部+深度分析 |
| 配色方案 | 100+调色板 | 全部+语义令牌 |
| 字体配对 | 精选组合 | 全部+可变字体 |
| 图表类型 | 不支持 | 25种图表推荐 |
| UX模式 | 不支持 | 完整模式库 |
| 组件规范 | 不支持 | 常用组件设计规范 |
| 设计决策框架 | 基础三问 | 完整决策矩阵 |
| 适用对象 | 个人设计师 | 企业设计团队 |
## 最佳实践
### 1. 不要混合太多风格
选择1种主风格,搭配2-3个设计元素点缀。避免风格大杂烩。
### 2. 颜色不超过5种
主色、辅助色、中性色、成功色、错误色。超过5种会导致视觉混乱。
### 3. 字体最多2种
1种标题字体 + 1种正文字体。太多字体会破坏一致性。
### 4. 留白是设计
不要害怕空白,它是呼吸空间。适当的留白比堆砌内容更有质感。
### 5. 一致性优先于创新
保持设计系统的一致性比追求独特更重要。用户习惯一致的模式。
### 6. 配色选择快速指南
| 行业 | 推荐主色系 | 理由 |
|------|-----------|------|
| 科技 | Blue/Cyan | 信任、专业、科技感 |
| 健康 | Green/Teal | 自然、健康、安全 |
| 金融 | Navy/Indigo | 稳重、可靠、专业 |
| 美妆 | Rose/Pink | 温暖、时尚、女性化 |
| 教育 | Violet/Purple | 智慧、创意、学术 |
| 娱乐 | Fuchsia/Pink | 活力、热情、趣味 |
## 常见问题
### Q1: 免费版包含图表类型推荐吗?
免费版不包含图表类型推荐。25种数据可视化图表匹配是专业版功能,支持趋势图、对比图、时间线、漏斗图等。
### Q2: 免费版有UX模式库吗?
免费版不包含UX交互模式库。专业版提供完整的用户体验最佳实践模式库,涵盖加载状态、错误处理、空状态等场景。
### Q3: 免费版有组件设计规范吗?
免费版不包含组件设计规范。专业版提供常用组件(按钮、卡片、表单、表格等)的完整设计规范。
### Q4: 如何选择适合的UI风格?
使用设计决策框架的三个问题:目标用户是谁?产品类型是什么?品牌调性如何?根据答案匹配推荐风格。
### Q5: 配色方案如何应用到代码中?
使用Tailwind CSS的extend配置,将配色方案定义为主题色,然后在HTML中使用bg-primary、text-secondary等语义类名。
## 依赖说明
### 运行环境
- **Agent平台**: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
- **操作系统**: Windows / macOS / Linux
### 依赖详情
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|:-------|:-----|:---------|:---------|
| Tailwind CSS | 前端框架 | 推荐 | npm install -D tailwindcss |
| Google Fonts | 字体服务 | 推荐 | CDN链接引入 |
| LLM API | API | 必需 | 由Agent内置LLM提供 |
### API Key 配置
本Skill基于Markdown设计资源,无需额外API Key。设计建议由Agent内置LLM驱动。Tailwind CSS和Google Fonts为本地/CDN资源,无需配置。
### 可用性分类
- **分类**: MD+EXEC(纯Markdown指令,部分功能需exec命令行执行)
- **说明**: 基于Markdown的AI Skill,通过自然语言指令驱动Agent完成操作。Tailwind CSS配置和Google Fonts引入需要exec工具执行npm命令或编辑HTML文件。
## 错误处理
| 错误场景 | 原因 | 处理方式 |
|---------|------|---------|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案 |
## 已知限制
- 需LLM支持,无LLM环境不可用
- 复杂业务场景建议结合人工经验判断
- 执行效率受模型能力与网络环境影响
- 当前为免费版本,如需完整功能请升级到付费版获取全部能力don't have the plugin yet? install it then click "run inline in claude" again.