阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/ai-ui-ux-pro-max-skill/ 「芋道源码」欢迎转载，保留摘要，谢谢！

• 为什么 AI 一出手就是蓝紫渐变
• 它干的事，是写代码之前先让设计过审
• 79 种风格、192 条规矩，它的审美从哪来
• 手把手装，两条路加一个包名坑
• 装完怎么用？它会自己醒，还能记住审美
• 疗效展示，官方画廊直接看图
• 两个坑，装之前先知道
• 要不要装，货架上看完再决定

---

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
4. 新的源码解析文章实时收到通知。每周更新一篇左右。
5. 认真的源码交流微信群。

---

先花 30 秒对号入座。让 Claude Code 出一个 SaaS 产品页，端上来的是不是紫色渐变背景、Hero 区一行大字、三列卡片、每张顶一个 emoji 图标、底下再排一排功能列表这一套？

八九不离十吧。更绝的是换需求也不变，金融后台给你亮紫渐变，医疗还是紫渐变，电商依然是。这个配色在 AI 圈有个外号叫「AI purple」，界面还总带股欧美味儿，不知道你发现没。

圈里人管这套叫「AI 审美三件套」，蓝紫渐变、Inter 系字体、大标题加三卡片，算生成式 UI 的出厂设置了，哪家模型都逃不掉。

为什么 AI 一出手就是蓝紫渐变

病因要从两头找。第一头是训练数据。在去 AI 味的长文里给过一个硬解释，现代网站大量用 Tailwind CSS，默认主色 indigo（#6366F1）恰好是蓝紫色，模型见多了，就把「现代化网站」和「蓝紫渐变」画上等号。

第二头是模型的求生欲。选训练数据里频率最高的组合，就是最不容易出错的答案，紫渐变加圆角卡片加三列布局，恰好就是那个频率冠军。

所以我的判断是这一句。AI 味看着像审美事故，病根其实是决策真空。没有行业约束时，模型只能交出训练数据的平均值。

换句话说，问题不在手艺，在没人拍板，模型分不清银行和水疗中心，只能端出最大公约数，换个更强的模型治不了，得从外面挂一层行业知识。

它干的事，是写代码之前先让设计过审

挂上的这一层叫 ui-ux-pro-max-skill，给 Claude Code 用的 Skill 技能包，作者管它叫「设计智能层」，目标就一个，让界面不再是模板货。

GitHub 上攒了 11 万+ Star，官方口径下载量过了 21 万（官网自述），被 AI 味折磨的人真不少。

它动的环节很靠前，就在写码前那一秒，以前你说「帮我做个页面」，模型上来就糊 HTML，现在会先跑设计系统推理再动手。

v2.0 旗舰功能叫「设计系统生成器」。你说「帮我做一个 Beauty Spa 落地页」，它同时开五路检索，五个库各查各的。

检索维度	查哪个库
产品类型	192 个产品分类里找最接近的
UI 风格	79 种风格里筛
配色方案	192 套行业色板
落地页结构	34 种布局模式
字体搭配	74 套组合

五路结果汇进推理引擎，输出完整设计系统，风格、配色、字体、交互效果、反模式清单、交付前检查项六样一次给齐，Claude Code 照着它写代码。官方门户还把这条流程画成六步图，从一句话 prompt 到成品一路走完，例子是家宠物美容店。

拿官方 Serenity Spa（水疗中心）的例子看，输出字段长这样。

字段	输出内容
PATTERN	Hero-Centric + Social Proof
STYLE	Soft UI Evolution（柔和阴影、克制纵深、平静、高级感）
COLORS	#E8B4B8 柔粉 / #A8D5BA 鼠尾草绿 / #D4AF37 金 / #FFF5F5 暖白
TYPOGRAPHY	Cormorant Garamond / Montserrat
AVOID	亮霓虹色、剧烈动画、AI purple/pink gradients
CHECKLIST	可点元素 cursor-pointer / hover 过渡 150-300ms / 文字对比度 4.5:1 / 375、768、1024、1440px 四档响应式

这份输出不是装饰品，配色精确到 hex，字体是 Google Fonts 真实组合，最妙的是 AVOID 一栏直接点名「AI purple/pink gradients」，你开头对号入座的三件套，在规则库里全写成了禁令，银行禁紫粉渐变，医疗禁高饱和荧光色。

底层实现有点朴素，一组 CSV 数据库，加一个 BM25 算法的 Python 搜索引擎，不调 API 不联网，纯标准库跑。

检索按需做，192 条规则不整包塞进上下文，AI 用到哪个查哪个，鱼皮说这就是 Agent Skills 的精髓，库的规模是一回事，开销只落在被检索到的那一小块上。

79 种风格、192 条规矩，它的审美从哪来

资产库	规模	记住这几个例子
UI 风格	79 种	Glassmorphism、Bento Grid、Brutalism、Y2K、Cyberpunk
行业推理规则	192 条	覆盖金融、医疗、电商、餐饮、法律、游戏、Web3 等
行业色板	192 套	与 192 个产品分类一一对应
字体搭配	74 套	全部 Google Fonts 可用，直接给 @import 链接
UX 准则	119 条	WCAG AA 无障碍、视觉层级、空白量感、反模式检查
图表推荐	25 种	数据看板和 Analytics 界面有专用匹配逻辑
技术栈适配	22 种	React、Next.js、Vue、Svelte、SwiftUI、Flutter、Angular、Laravel 等

风格不是收藏品，每种都写明适用和不适用场景，普通 SaaS 配 Minimalism，游戏配 HUD/Sci-Fi FUI，wellness 配 Soft UI Evolution。禁令也具体，银行界面禁深色模式，游戏不推荐极简风。

字体单说一句，以前 AI 要么给 Arial 系统字，要么随机编个搜不到的字体名，74 套 Google Fonts 真实组合治好了这个老毛病。

手把手装，两条路加一个包名坑

方法一，Claude Code Marketplace，在对话框里依次输入两条。

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

方法二，npm CLI，适合用其他编码工具的人，在终端依次执行三条。

npm install -g ui-ux-pro-max-cli
cd /your/project
uipro init --ai claude

先说那个坑。早期教程里的包名 uipro-cli，现在属于一个毫不相干的第三方包，协议还是禁商用的 CC-BY-NC，装错可能把协议风险带进公司项目。官方包是 ui-ux-pro-max-cli，装完后的命令仍叫 uipro。

动手前确认机器上有 Python 3.x，这是搜索脚本的依赖。支持的平台现在有 21 个，Claude Code、Cursor、Windsurf、Codex CLI、GitHub Copilot、Kiro、Gemini CLI、Warp、Augment 都在列，换宿主就把 --ai 后面的值换掉；要全项目共用，加 --global 装到用户目录。

装完怎么用？它会自己醒，还能记住审美

装完什么都不用做，它是透明的。正常说「帮我做一个 fintech 类的暗色主题 dashboard」，它会自动先跑设计系统推理，再写代码。见到先推理后写码的节奏，就是装对了。

想绕过对话直接调引擎，也可以走这条命令。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

知乎上的老玩家提醒过，这个脚本是给 AI 调用的，人肉跑意义不大。

多页面项目再记一个参数 --persist。带上它，项目根目录会出现一个 design-system/ 文件夹，里面 MASTER.md 存全局设计规范，pages/ 目录存页面级覆盖规则。

它治的是个隐形 bug，首页做完，第二个页面颜色微妙不一样、圆角悄悄变了，这就是跨 session 的风格漂移。有了这份文件，Claude Code 每次开工先读它，审美不掉线。

疗效展示，官方画廊直接看图

官方门户 uupm.cc 挂着一面画廊，39 个成品 demo 按 20 个行业类目陈列，亮 26 暗 13，每张卡片标着风格组合和整套色板。这门户自己就是 skill 生成的，页脚写着 Built with Next.js + Tailwind CSS (by UI UX Pro Max)，自吃狗粮。

来源文章演示的三种路数，音乐站、App 下载页、SaaS 官网，画廊里都有同款成品，下面三张是直接打开官方 demo 页截的高清图。

重头戏。导语那套亮紫渐变还记得吧，规则库给加密金融类的官方答案在下面。

Show Prompt 把生成用的原文公开，一键复制。这条就是模板，先报行业和模式 dark mode fintech，再点质感 glassmorphism cards，再列实时价格、安全特性这些关键模块，最后一句落在价值排序上。给足业务背景这件事，官方示范已经写好了。

深蓝黑底、玻璃拟态卡、霓虹绿的实时价格压阵。同一句帮我做金融页，均值给亮紫渐变，规则库给这套深色答案，谁在拍板，界面上写得明明白白。反正压力给到前端兄弟，挺住。

两个坑，装之前先知道

第一，token 消耗。推理规则和数据量不小，每次激活都多吃一块 context window，好在加载机制是「渐进式披露」，平时沉默，检测到 UI/UX 需求才把规则拉进来，单页短 session 无感，项目大了、轮次多了才显现。

第二，skill 冲突。别同时开多个设计类 skill，有人把 ui-ux-pro-max 和另一个叫 Impeccable 的同时开着，Claude Code 输出了混合风格的奇怪结果。一个项目只用一套主设计 skill，稳。

要不要装，货架上看完再决定

补决策真空的办法不止一种，掘金上有人把 Claude Code 的设计类 skill 拉过榜单，货架长这样。

方案	路线	一句话定位
frontend-design（Anthropic 官方）	品味型	27 万+ 安装，被叫「设计审美破局者」
ui-ux-pro-max	规则型	11 万+ Star，「知识库专家」，行业禁令最全
Impeccable	轻量规则型	跟前两家互斥，别叠加
纯提示词	零依赖	在 AGENTS.md 里写死「禁三件套」，免费但上限低

选型逻辑一句话，官方 skill 管品味，规则库管约束。项目更怕「丑」，先试 frontend-design；更怕「不合规」（金融、医疗这类），规则库更对路。

冷静面也要说掉。它把设计决策显式化，给 AI 外挂知识库和约束，写码前先过设计审查，不指望模型自己变聪明，前提是数据库不能过期，UI 风格迭代快，今年流行 Bento Grid，明年可能就换人。

好消息是作者在勤更，三个月前规则 161 条、风格 67 种，现在 192 条、79 种，只是 CSV 规则算不算过时，用时还得自己留个心眼。

所以回到要不要装，正在用 Claude Code 做有点规模前端项目的，装一个试试无妨，MIT 协议没什么负担。

项目地址在这，https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

平均值可以继续让模型去求，拍板这件事，得拿回自己手里。