Install
openclaw skills install @guo123dong/ui-ux-pro-max-cn中文UI/UX设计智能 — 50种风格、161个配色方案、57组字体搭配、22种技术栈。适用于中文互联网产品的设计系统生成、组件规范、交互指导。支持电商/教育/金融/SaaS/政府等本土化场景。
openclaw skills install @guo123dong/ui-ux-pro-max-cn为AI编程助手提供的中文UI/UX设计智能系统。
基于 ui-ux-pro-max-skill (97K⭐) 深度本地化改造 针对中文互联网环境优化:中文字体、本土配色、中国特色交互模式
当用户请求涉及以下操作时自动激活:
| 能力 | 数量 | 说明 |
|---|---|---|
| UI风格 | 67种 | 含18种中文互联网特有风格 |
| 配色方案 | 161种 | 适配中文产品色调偏好 |
| 字体搭配 | 57组 | 含中文字体(思源/苹方/微软雅黑) |
| 技术栈 | 22种 | 支持Vue/Element/Ant Design等国内主流框架 |
| UX规范 | 99条 | 含微信小程序/支付宝等本土平台规范 |
| 行业规则 | 161条 | 覆盖中国主流行业(电商/教育/金融/政务等) |
用户请求 → 行业匹配 → 风格推荐 → 配色选择 → 字体搭配
→ 技术栈适配 → 设计规范生成 → 代码实现 → 交付检查
| 项目 | 推荐 |
|---|---|
| 推荐风格 | 活力电商、新中式、品质感 |
| 配色倾向 | 红色/橙色主调(喜庆/促销)、金色点缀 |
| 字体倾向 | 思源黑体 + 思源宋体 |
| 布局模式 | 首屏大图+商品网格+促销Banner |
| 禁忌 | 大面积暗色(中国用户不习惯)、纯英文导航 |
| 参考案例 | 淘宝/京东/拼多多设计语言 |
| 项目 | 推荐 |
|---|---|
| 推荐风格 | 清新简约、教育风、卡片式 |
| 配色倾向 | 蓝色/绿色主调(专业/成长)、暖色点缀 |
| 字体倾向 | 苹方/思源黑体,字号偏大 |
| 布局模式 | 课程卡片+学习进度+讲师介绍 |
| 禁忌 | 花哨动画干扰学习、深色背景 |
| 参考案例 | 得到/学堂在线/网易云课堂 |
| 项目 | 推荐 |
|---|---|
| 推荐风格 | 专业稳重、数据可视化、玻璃拟态 |
| 配色倾向 | 深蓝/藏青(信任)、金色/绿色(财富) |
| 字体倾向 | 思源黑体 Regular/Medium,数字用等宽 |
| 布局模式 | 数据看板+快捷操作+安全提示 |
| 禁忌 | 花哨渐变、不安全感的设计、红色用于亏损 |
| 参考案例 | 支付宝/理财通/招商银行 |
| 项目 | 推荐 |
|---|---|
| 推荐风格 | 极简主义、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 |
描述你的需求,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) 改造: 拾珍小栈 · 中文深度本地化