UI/UX ProMax+ - 免费版

概述

UI/UX ProMax+免费版是一款面向个人设计师和开发者的UI/UX设计资源库。内置50+种界面设计风格、100+套专业配色方案、精选字体配对组合,通过设计决策框架帮助快速选择适合项目的设计方案。提供Tailwind CSS快速应用指引,让设计建议即刻落地。

核心能力

1. UI风格库

提供50+种界面设计风格,按产品类型分类:

输入: 用户提供UI风格库所需的指令和必要参数。 处理: 按照skill规范执行UI风格库操作,遵循单一意图原则。 输出: 返回UI风格库的执行结果,包含操作状态和输出数据。

2. 配色方案查询

100+套专业调色板,按行业和调性分类:

输入: 用户提供配色方案查询所需的指令和必要参数。 处理: 按照skill规范执行配色方案查询操作,遵循单一意图原则。 输出: 返回配色方案查询的执行结果,包含操作状态和输出数据。

3. 字体配对推荐

精选字体组合,按风格分类:

输入: 用户提供字体配对推荐所需的指令和必要参数。 处理: 按照skill规范执行字体配对推荐操作,遵循单一意图原则。 输出: 返回字体配对推荐的执行结果,包含操作状态和输出数据。

4. 设计决策框架

选择UI风格的三个核心问题:

问题1:目标用户是谁?
  - 企业用户 -> 简洁、专业、高效
  - 年轻消费者 -> 活泼、大胆、有趣
  - 高端客户 -> 精致、留白、质感

问题2:产品类型是什么?
  - 工具类 -> 功能优先,清晰直观
  - 内容类 -> 阅读体验,排版优雅
  - 社交类 -> 情感连接,互动感强

问题3:品牌调性如何?
  - 创新先锋 -> 尝试新风格(玻璃态)
  - 稳定可靠 -> 经典风格(Material Design)
  - 独特个性 -> 大胆风格(粗野主义)

输入: 用户提供设计决策框架所需的指令和必要参数。 处理: 按照skill规范执行设计决策框架操作,遵循单一意图原则。 输出: 返回设计决策框架的执行结果,包含操作状态和输出数据。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

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

输入: 用户提供Tailwind CSS快速应用所需的指令和必要参数。 处理: 按照skill规范执行Tailwind CSS快速应用操作,遵循单一意图原则。 输出: 返回Tailwind CSS快速应用的执行结果,包含操作状态和输出数据。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：设计资源库、含风格库、字体配对基础查询、适合个人设计师快、速参考、面向个人设计师和、开发者的、提供界面风格、字体配对的基础查、询和设计决策框架、核心能力、风格库浏览、种界面风格、精选组合、基础设计决策框架、快速应用指引等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一:个人项目风格选择

独立开发者构建一款笔记应用,需要确定设计方向。

步骤1:确定目标用户 -> 个人用户,需要简洁高效
步骤2:确定产品类型 -> 工具类,功能优先
步骤3:确定品牌调性 -> 稳定可靠,经典风格

结论:选择 Minimalist 风格
  配色: Blue-600 + Slate-500 + Cyan-400
  字体: Inter + Inter
  布局: max-w-4xl, 8px间距体系

场景二:电商配色决策

为一个新的美妆电商平台选择配色方案。

行业: 电商零售
调性: 时尚、优雅
推荐配色:
  主色: Rose-600 (#E11D48) - 温暖、女性化
  辅助色: Gray-500 (#6B7280) - 中性平衡
  强调色: Violet-500 (#8B5CF6) - 时尚点缀
  背景: White / Rose-50
  文字: Slate-900 / Slate-600

场景三:字体配对选择

为技术博客选择合适的字体组合。

风格: 现代科技
推荐配对:
  标题: 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解答常见疑问

设计资源查询流程

# 1.确定产品类型和行业
# 产品: SaaS | 行业: 生产力工具

# 2.查询推荐风格
# 参考: UI风格库 -> SaaS -> Minimalist

# 3.查询配色方案
# 参考: 配色方案 -> 科技产品 -> Blue-600 + Slate-500 + Cyan-400

# 4.查询字体配对
# 参考: 字体配对 -> 现代科技 -> Inter + Inter

# 5.应用Tailwind配置

Tailwind项目配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563EB',     // 主色
        secondary: '#64748B',   // 辅助色
        accent: '#22D3EE',      // 强调色
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
};

示例

响应式断点建议

移动优先断点:
- 默认: 320px+ (最小手机)
- sm:   640px+ (大屏手机)
- md:   768px+ (平板)
- lg:   1024px+ (笔记本)
- xl:   1280px+ (桌面)

间距系统(8px基础)

space-1:  4px    space-6:  24px
space-2:  8px    space-8:  32px
space-3:  12px   space-12: 48px
space-4:  16px   space-16: 64px

免费版与专业版功能对比

最佳实践

1. 不要混合太多风格

选择1种主风格,搭配2-3个设计元素点缀。避免风格大杂烩。

2. 颜色不超过5种

主色、辅助色、中性色、成功色、错误色。超过5种会导致视觉混乱。

3. 字体最多2种

1种标题字体 + 1种正文字体。太多字体会破坏一致性。

4. 留白是设计

不要害怕空白,它是呼吸空间。适当的留白比堆砌内容更有质感。

5. 一致性优先于创新

保持设计系统的一致性比追求独特更重要。用户习惯一致的模式。

6. 配色选择快速指南

常见问题

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

依赖详情

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文件。

错误处理

已知限制

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