文档中心

主题

UI UX Pro Max 技能 ​

UI UX Pro Max 是一个强大的设计智能技能，为开发者提供专业的 UI/UX 设计能力。

概述 ​

UI UX Pro Max 包含：

  • 50+ 设计风格：从极简主义到新拟态设计
  • 21 种配色方案：专业调配的配色组合
  • 50 组字体配对：和谐的字体组合
  • 20 种图表类型：数据可视化方案
  • 8 个技术栈：支持主流前端框架

支持的技术栈 ​

Web 框架 ​

  • HTML + Tailwind CSS：纯 HTML 配合 Tailwind CSS
  • React：React 组件开发
  • Next.js：Next.js 应用开发
  • Vue：Vue 组件开发
  • Svelte：Svelte 组件开发

移动端 ​

  • React Native：跨平台移动应用
  • Flutter：Flutter 应用开发
  • SwiftUI：iOS 原生开发

设计风格 ​

现代风格 ​

  • Glassmorphism（玻璃拟态）：半透明毛玻璃效果
  • Claymorphism（黏土拟态）：柔和的 3D 黏土质感
  • Neumorphism（新拟态）：柔和的浮雕效果
  • Minimalism（极简主义）：简洁清爽的设计
  • Brutalism（粗野主义）：大胆强烈的视觉冲击

布局风格 ​

  • Bento Grid（便当网格）：卡片式网格布局
  • Split Screen（分屏）：左右分栏布局
  • Hero Section（英雄区）：大幅横幅设计
  • Dashboard（仪表盘）：数据展示布局

特效 ​

  • Dark Mode（深色模式）：护眼深色主题
  • Responsive（响应式）：自适应多种设备
  • Animation（动画）：流畅的交互动画
  • Gradient（渐变）：现代渐变效果

安装 ​

前置要求 ​

在安装 UI UX Pro Max 之前，确保您已经：

安装步骤 ​

使用以下命令初始化 UI UX Pro Max：

bash
uipro init --ai claude

此命令会：

  1. 安装 UI UX Pro Max CLI 工具
  2. 配置 Claude 集成
  3. 下载设计资源库
  4. 初始化项目配置

验证安装 ​

安装完成后，验证是否成功：

bash
uipro --version

您应该看到版本号输出，例如：

UI UX Pro Max v2.0.0

配置 Claude 集成 ​

如果您需要手动配置 Claude 集成：

bash
# 设置 Claude 为 AI 助手
uipro config set ai claude

# 验证配置
uipro config list

更新 ​

更新到最新版本：

bash
uipro update

使用方法 ​

1. 基础用法 ​

直接在对话中请求 UI UX Pro Max 技能：

请使用 UI UX Pro Max 技能设计一个登录页面

2. 指定风格 ​

使用 UI UX Pro Max 技能，采用 Glassmorphism 风格设计一个卡片组件

3. 指定技术栈 ​

使用 UI UX Pro Max，用 React + Tailwind 实现一个现代化的导航栏

4. 指定配色 ​

使用 UI UX Pro Max，采用深色海军蓝配色方案设计仪表盘

实战案例 ​

案例 1：创建现代化着陆页 ​

需求：设计一个 SaaS 产品的着陆页

提示词：

使用 UI UX Pro Max 技能，创建一个 SaaS 产品着陆页：
- 技术栈：Next.js + Tailwind CSS
- 风格：Glassmorphism + 深色模式
- 包含：Hero 区、特性展示、定价表、FAQ
- 配色：深色海军蓝为主色调

案例 2：设计管理后台 ​

需求：构建一个管理系统的仪表盘

提示词：

使用 UI UX Pro Max，设计管理后台仪表盘：
- 技术栈：React
- 风格：现代极简风格
- 组件：侧边栏导航、顶部栏、数据卡片、图表
- 响应式布局

案例 3：移动应用界面 ​

需求：设计一个社交应用的个人主页

提示词：

使用 UI UX Pro Max，创建移动应用个人主页：
- 技术栈：React Native
- 风格：现代卡片式设计
- 包含：头像、个人信息、动态列表、底部导航

设计原则 ​

1. 配色选择 ​

UI UX Pro Max 提供的配色方案遵循以下原则：

  • 主色调：品牌识别色
  • 辅助色：强调和点缀
  • 中性色：文本和背景
  • 对比度：确保可读性

2. 字体配对 ​

推荐的字体组合：

  • 标题 + 正文：
    • Space Grotesk + DM Sans
    • Inter + Source Serif Pro
    • Poppins + Open Sans

3. 间距系统 ​

使用一致的间距尺度：

css
/* Tailwind CSS 间距示例 */
gap-2  /* 8px */
gap-4  /* 16px */
gap-6  /* 24px */
gap-8  /* 32px */
gap-12 /* 48px */

4. 圆角规范 ​

css
/* 圆角尺度 */
rounded-sm   /* 2px - 小元素 */
rounded-md   /* 6px - 按钮、输入框 */
rounded-lg   /* 8px - 卡片 */
rounded-xl   /* 12px - 大卡片 */
rounded-2xl  /* 16px - 面板 */
rounded-full /* 完全圆形 - 头像、徽章 */

高级技巧 ​

1. 搜索设计资源 ​

UI UX Pro Max 包含内置搜索引擎：

python
# 搜索特定风格
python search.py "glassmorphism card" --domain style

# 搜索配色方案
python search.py "dark mode blue" --domain color

# 搜索特定技术栈
python search.py "navigation bar" --stack react

2. 自定义配色 ​

创建自己的配色方案：

css
:root {
  /* 主色调 */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;

  /* 背景色 */
  --bg-primary: #0A0E27;
  --bg-secondary: #1e293b;

  /* 文本色 */
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
}

3. 响应式设计 ​

确保在所有设备上都有良好体验：

css
/* 移动优先 */
.container {
  padding: 16px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1280px;
    margin: 0 auto;
  }
}

4. 性能优化 ​

  • 使用 CSS 变量：便于主题切换
  • 避免过度动画：尊重用户的运动偏好
  • 优化图片：使用 WebP 格式
  • 懒加载：延迟加载非关键资源

可访问性（A11y） ​

颜色对比度 ​

确保文本和背景的对比度符合 WCAG 标准：

  • 正常文本：至少 4.5:1
  • 大文本：至少 3:1

键盘导航 ​

所有交互元素都应支持键盘操作：

jsx
<button
  onClick={handleClick}
  onKeyPress={(e) => e.key === 'Enter' && handleClick()}
  tabIndex={0}
>
  点击我
</button>

屏幕阅读器 ​

添加适当的 ARIA 标签：

jsx
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

常见问题 ​

Q: 如何在项目中使用 UI UX Pro Max？ ​

A: 在对话中直接提及"使用 UI UX Pro Max"或"use ui-ux-pro-max skill"即可激活技能。

Q: 可以组合多种风格吗？ ​

A: 可以！例如："使用 Glassmorphism + 深色模式 + Bento Grid 布局"。

Q: 如何获取特定技术栈的代码？ ​

A: 在请求中明确指定技术栈，例如："用 Next.js 和 Tailwind CSS 实现"。

Q: 支持自定义品牌色吗？ ​

A: 支持！告诉 Claude 您的品牌色，UI UX Pro Max 会基于该颜色生成协调的配色方案。

最佳实践 ​

  1. 明确需求：清晰描述想要的风格、功能和技术栈
  2. 迭代优化：先创建基础版本，再逐步优化细节
  3. 保持一致：在项目中使用一致的设计语言
  4. 响应式优先：始终考虑多设备适配
  5. 性能为重：避免过度设计影响性能
  6. 可访问性：确保所有用户都能使用

参考资源 ​

更新日志 ​

v2.0 ​

  • 新增 50+ 设计风格
  • 支持 8 个主流技术栈
  • 内置 BM25 搜索引擎
  • 21 种专业配色方案

v1.5 ​

  • 添加 Glassmorphism 和 Claymorphism 风格
  • 优化响应式布局生成
  • 新增移动端支持

v1.0 ​

  • 初始发布
  • 基础 UI 组件生成
  • React 和 HTML 支持