Ui Ux Promax Plus Free

专业UI/UX设计资源库,含风格库、配色方案、字体配对基础查询,适合个人设计师快速参考

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环境不可用
• 复杂业务场景建议结合人工经验判断
• 执行效率受模型能力与网络环境影响
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力