13万星开源项目UI UX Pro Max：用设计规则库治好AI生成前端的“AI味”

让 AI 写前端，最难的不是写不出来，而是写出来那股味儿太冲。它给你调的色、选的字体、摆的版式，一眼就能看出是机器凑出来的。今天聊的这个项目，就是专门治这个毛病的。

项目名叫 UI UX Pro Max，作者是 nextlevelbuilder，目前在 GitHub 上已经有 13 万星。

我一开始没太当回事。给 AI 加设计能力的技能包我见多了，多半就是往提示词里塞一句“请遵循无障碍规范”，聊胜于无。

但这个不一样。它背后压了一套 192 个行业的设计规则库，AI 做页面之前得先去里头检索一遍，再动手。

一句话说清它解决啥

你让 AI 写一个“给医美诊所做的预约落地页”，通用模型会给你什么？

大概率是一套蓝紫渐变、圆角卡片、大号无衬线字体——就是那种一眼 AI 的量产货。放哪个行业都行，等于放哪个行业都不对。

UI UX Pro Max 会先查规则库：医美属于“健康与美容”大类，推荐 柔和界面演进（Soft UI Evolution） 风格，主色给一套低饱和的暖粉配鼠尾草绿，字体用 Cormorant 衬线体配 Montserrat 无衬线体，还在清单里明确写着 避免用 AI 紫粉渐变。

有意思的地方就在这儿：它不光告诉你该用什么，还专门列了一张 反模式清单，告诉你这个行业千万别碰什么。后面这条其实更值钱。

它手里到底压了多少货

作者把家底全摊在说明文档里了，我照抄一遍，你们感受下体量：

• 192 个行业分类：不只大类，牙科、宠物医院、心理诊所、处方式记账工具都有单独的规则。
• 192 套配色：不是随便凑数，是按行业配的。金融行业的色和儿童玩具的色，取法完全不同。
• 74 组字体搭配：直接给能跑的引入代码，不是光报个字体名。
• 79 种界面风格：玻璃拟态、黏土拟态、新拟态、粗野主义、Bento 网格……冷门风格也收。
• 119 条体验规则：含无障碍和文本折行，这条后面单独说。
• 22 套技术栈：主流框架全覆盖，连 JavaFX、WinUI 3 这类偏门桌面端框架都包含在内。

数据量本身不稀奇，稀奇的是它能 针对性检索。

光堆数据没意义。你往提示词里塞十万字设计规范，模型该跑偏还是跑偏，因为上下文塞不进去。这个技能包的思路是：与其把知识全塞给模型，不如让模型自己来查。

五路并行检索，怎么干活

作者画了张流程图，我看完觉得这个设计比功能本身更有意思。你提一句需求，它同时开五路去查：

路径	任务	说明
第一路	匹配产品类型	192 个分类里找最接近的那个
第二路	推荐界面风格	79 种风格里排优先级，用 BM25 算法排序
第三路	选配色	192 套色板里挑，带上这个行业的用色忌讳
第四路	找落地页版式	34 种页面结构模板
第五路	配字体	74 组搭配里选情绪对得上的

五路查完，结果汇进一个推理引擎：匹配分类规则、按优先级排序风格、过滤行业反模式、跑一遍条件判断。这一套走完，吐出一份完整的设计系统——版式、风格、配色、字体、动效，外加一张交付前自查清单。

BM25 是信息检索里的经典排序算法，跟搜索引擎给网页排名的思路一脉相承。拿它来排界面风格，说明作者是真按“检索系统”的路子在做，不是拿提示词糊一层。

那 119 条体验规则，说得挺细

这部分是我觉得它比同类项目扎实的地方。大多数所谓“AI 设计技能”，体验规则就三条：“注意对比度”“别忘了焦点状态”“支持响应式”。

它的 119 条里，有几条是真的踩过生产环境才总结得出来的：

• 大标题折行只能当“渐进增强”，不能当成保证某个词一定落在特定行的承诺。
• 长网址和长标识符要能安全折行，窄屏、放大、用户自定义字号下都不能被裁切。
• 标签和徽章不能只靠颜色传意，色盲用户得看得出来区别。
• 徽章集合太长得能折行，或者给个可操作的“+n”展开入口。
• 快速连点可以打断动画，但最终状态和焦点必须是对的。

最后这条我特别有共鸣。用户手快连点三下，动画被打断，状态卡在半路——这种毛病我修过不止一次。

如果你对这类开源项目的源码分析、规则引擎设计感兴趣，可以看看这份 开源实战精选，里面整理了 GitHub 上值得研究的项目案例和最佳实践。

装起来什么感觉

它是标准技能包，一条命令进去：

npm install -g ui-ux-pro-max-cli

然后对着你的项目跑一句初始化：

uipro init --ai codex

我实际跑了一遍，安装过程会往项目里的技能目录写文件，跑完吐出一句安装成功的提示。

落盘的数字比文档描述更有体感：172 个文件、4.6 MB，其中 7 个技能说明文件、53 张 CSV 数据表、57 个说明文档。拆开看是七个独立技能包，分别管横幅设计、品牌、通用设计、设计系统、幻灯片、界面样式，外加一个主入口。

那 53 张表格才是本体。比如行业表，字段是“编号、行业、关键词、风格、主色、辅色、字体、交付物、调性、最佳实践、禁忌”。科技行业那一行的主色是 #6366F1 #0EA5E9 #10B981，金融银行那行是 #003366 #1E3A8A #D4AF37。它不是给你一段建议，是给你一张能查的表。

装完在主流 AI 编程工具里就能用。正常提需求即可，不用额外写什么咒语。协议是 MIT，作者还配了简体中文说明文档，对国内用户相当友好。

说点实际的

不能光说好话。三点你得心里有数：

第一，它管不了审美上限。 规则库能保证你不犯低级错误、不碰行业忌讳，但出不来让你“哇”一下的设计。它治的是及格线，不是天花板。

第二，十三万星里有水分。 这类技能项目的星数涨得普遍快，装起来零成本、传播成本低。真实日常使用率肯定低于星数给人的感觉，别拿星数当质量证明。

第三，规则多了也烦人。 192 条行业规则、119 条体验规则压下来，偶尔会给出跟场景不符的建议，得手动挑一挑。说到底它是辅助，不是替你拍板。

什么时候值得装？ 你自己审美没底，或者做的是不熟的行业，这两种情况下价值最大。你要是干了十年的老设计，它给的这套东西你早就在脑子里了。

如果你平时也在用 AI 辅助写前端、搭设计系统，前端开发与工程化资源集 里整理了 React、Vue、Next.js、Tailwind 等常用技术栈的资料，可以作为补充参考。

跟同类比一下

拿几个常见做法对照：

• 直接提需求：快，但那个 AI 味儿你懂的。
• 自己写提示词：效果看你功力，能想到的规则写死就不会自动更新。
• 这个技能包：规则库化加检索，行业规则可持续扩充，你不写它也知道。
• 找设计模板：保真度最高，但改不动，跟自己的项目对不上。

我的看法：它填的是“通用模型 + 专业设计知识”中间那段空档。这段空档以前只能靠人补，现在至少有东西能垫一层了。

写在最后

十三万星的东西，我写完这篇，给你的建议是：装上，当个校验器用。

你自己出方案，让它过一遍，看有没有踩行业忌讳、有没有漏掉无障碍项。这比指望它从零给你变出一个惊艳设计靠谱得多。