中文UI/UX设计智能

SKILL.md

---
name: ui-ux-pro-max-cn
description: 中文UI/UX设计智能 — 50种风格、161个配色方案、57组字体搭配、22种技术栈。适用于中文互联网产品的设计系统生成、组件规范、交互指导。支持电商/教育/金融/SaaS/政府等本土化场景。
version: 1.0.0
license: Apache-2.0 (modified from ui-ux-pro-max-skill)
author: 拾珍小栈
language: zh-CN
tags: ["ui", "ux", "design", "frontend", "chinese", "中文设计"]
---

# UI/UX Pro Max — 中文版

为AI编程助手提供的中文UI/UX设计智能系统。

> **基于 ui-ux-pro-max-skill (97K⭐) 深度本地化改造**
> 针对中文互联网环境优化：中文字体、本土配色、中国特色交互模式

## 触发条件

当用户请求涉及以下操作时自动激活：
- 生成/设计UI界面
- 改进现有UI/UX
- 创建设计系统/组件库
- 前端代码实现（HTML/CSS/React/Vue等）
- UI审计/评审

## 核心能力

| 能力 | 数量 | 说明 |
|------|------|------|
| UI风格 | 67种 | 含18种中文互联网特有风格 |
| 配色方案 | 161种 | 适配中文产品色调偏好 |
| 字体搭配 | 57组 | 含中文字体（思源/苹方/微软雅黑） |
| 技术栈 | 22种 | 支持Vue/Element/Ant Design等国内主流框架 |
| UX规范 | 99条 | 含微信小程序/支付宝等本土平台规范 |
| 行业规则 | 161条 | 覆盖中国主流行业（电商/教育/金融/政务等） |

## 工作流

```
用户请求 → 行业匹配 → 风格推荐 → 配色选择 → 字体搭配
         → 技术栈适配 → 设计规范生成 → 代码实现 → 交付检查
```

## 中文行业设计规则

### 电商/零售

| 项目 | 推荐 |
|------|------|
| 推荐风格 | 活力电商、新中式、品质感 |
| 配色倾向 | 红色/橙色主调（喜庆/促销）、金色点缀 |
| 字体倾向 | 思源黑体 + 思源宋体 |
| 布局模式 | 首屏大图+商品网格+促销Banner |
| 禁忌 | 大面积暗色（中国用户不习惯）、纯英文导航 |
| 参考案例 | 淘宝/京东/拼多多设计语言 |

### 教育/知识付费

| 项目 | 推荐 |
|------|------|
| 推荐风格 | 清新简约、教育风、卡片式 |
| 配色倾向 | 蓝色/绿色主调（专业/成长）、暖色点缀 |
| 字体倾向 | 苹方/思源黑体，字号偏大 |
| 布局模式 | 课程卡片+学习进度+讲师介绍 |
| 禁忌 | 花哨动画干扰学习、深色背景 |
| 参考案例 | 得到/学堂在线/网易云课堂 |

### 金融科技

| 项目 | 推荐 |
|------|------|
| 推荐风格 | 专业稳重、数据可视化、玻璃拟态 |
| 配色倾向 | 深蓝/藏青（信任）、金色/绿色（财富） |
| 字体倾向 | 思源黑体 Regular/Medium，数字用等宽 |
| 布局模式 | 数据看板+快捷操作+安全提示 |
| 禁忌 | 花哨渐变、不安全感的设计、红色用于亏损 |
| 参考案例 | 支付宝/理财通/招商银行 |

### SaaS/企业服务

| 项目 | 推荐 |
|------|------|
| 推荐风格 | 极简主义、Bento网格、玻璃拟态 |
| 配色倾向 | 品牌色+中性灰，避免过度装饰 |
| 字体倾向 | 思源黑体/苹方，字重层次分明 |
| 布局模式 | Hero区+功能展示+客户证言+CTA |
| 禁忌 | 信息过载、缺少中文CTA按钮 |
| 参考案例 | 飞书/钉钉/企业微信设计语言 |

### 政务/公共服务

| 项目 | 推荐 |
|------|------|
| 推荐风格 | 简约官方、信息清晰、无障碍优先 |
| 配色倾向 | 红色/蓝色（官方感）、白色背景 |
| 字体倾向 | 微软雅黑/思源黑体，正式严肃 |
| 布局模式 | 导航清晰+信息层级+办事流程 |
| 禁忌 | 花哨效果、不正式的表达 |
| 参考原则 | 政府网站设计指南 |

## 中文字体搭配表

### 正文/标题推荐组合

| 组合 | 标题字体 | 正文字体 | 适用场景 |
|------|----------|----------|----------|
| 1 | 思源黑体 Bold | 思源黑体 Regular | 通用首选 |
| 2 | 苹方 Medium | 苹方 Regular | Apple生态产品 |
| 3 | 微软雅黑 Bold | 微软雅黑 Regular | Windows产品 |
| 4 | 思源宋体 Bold | 思源黑体 Regular | 内容/阅读型 |
| 5 | OPPO Sans Bold | OPPO Sans Regular | 移动端APP |
| 6 | 阿里巴巴普惠体 Bold | 阿里巴巴普惠体 Regular | 电商/品牌 |
| 7 | 站酷快乐体 | 思源黑体 Regular | 创意/趣味型 |

### 字体加载建议

```css
/* 推荐的中文字体栈 */
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

/* 数字和英文单独指定 */
font-family: "SF Pro Display", "Inter", "PingFang SC", sans-serif;
```

## 中国色彩文化参考

| 颜色 | 中文含义 | 适用场景 | 避坑 |
|------|----------|----------|------|
| 红色 (#E53E3E) | 喜庆/促销/紧急 | 电商/节日/警告 | 不要大面积使用，刺眼 |
| 金色 (#D4A574) | 尊贵/品质/奢华 | 高端产品/会员 | 不要用纯黄，显廉价 |
| 蓝色 (#1890FF) | 专业/信任/科技 | 金融/SaaS/科技 | 避免荧光蓝 |
| 绿色 (#38A169) | 健康/安全/通过 | 医疗/环保/成功 | 不要用荧光绿 |
| 白色 (#FFFFFF) | 纯净/简洁 | 所有场景 | 注意中文对比度 |
| 黑色 (#1A1A1A) | 稳重/高端 | 标题/正文 | 纯黑#000刺眼，用#1A1A1A |

## 微信小程序设计规范

### 页面尺寸

| 设备 | 宽度 | 安全区域 |
|------|------|----------|
| iPhone SE | 375px | 左右各16px |
| iPhone 12/13 | 390px | 左右各16px |
| 主流Android | 360-414px | 左右各16px |

### 交互规范

- 底部导航栏高度：50px + 安全区域
- 列表项高度：≥44px（手指友好）
- 按钮圆角：8px（常规）/ 20px（胶囊）
- 输入框高度：40px
- 卡片间距：12-16px

## 交付前检查清单

### 中文专属检查

- [ ] 中文字体已正确指定（fallback栈完整）
- [ ] 中文行高 ≥ 1.6（中文需要更大行高）
- [ ] 按钮文字为中文（非英文CTA）
- [ ] 数字字体与中文协调
- [ ] 配色符合中国文化含义
- [ ] 无障碍：中文屏幕阅读器兼容
- [ ] 响应式：375px-1440px覆盖中文用户主流设备

### 通用检查

- [ ] 对比度 WCAG AA（4.5:1）
- [ ] 键盘导航焦点可见
- [ ] prefers-reduced-motion 已尊重
- [ ] hover状态平滑过渡（150-300ms）
- [ ] cursor-pointer 在所有可点击元素上

## 快速使用

### 生成设计方案

描述你的需求，AI会自动匹配行业规则并生成完整设计系统：

```
做一个教育平台的首页
设计一个金融数据看板
帮我做个电商商品详情页
```

### 指定技术栈

```
用Vue + Element Plus做后台管理系统
用React + Ant Design做企业官网
用微信小程序原生做商城
用HTML + Tailwind做营销落地页
```

## 支持的中文技术栈

| 框架 | 组件库 | 适用场景 |
|------|--------|----------|
| Vue 3 | Element Plus | 后台管理/SaaS |
| Vue 3 | Vant | 移动端H5 |
| Vue 2/3 | uView | 微信小程序 |
| React | Ant Design | 企业级应用 |
| React | Ant Design Mobile | 移动端H5 |
| 原生 | 微信小程序 | 微信生态 |
| 原生 | 支付宝小程序 | 支付宝生态 |
| HTML | Tailwind CSS | 营销页/落地页 |
| Nuxt | Nuxt UI | SSR官网/博客 |

---

**版本：** 1.0.0
**基础：** ui-ux-pro-max-skill (Apache 2.0)
**改造：** 拾珍小栈 · 中文深度本地化