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 | 创意/趣味型 |
字体加载建议
/* 推荐的中文字体栈 */
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) 改造： 拾珍小栈 · 中文深度本地化