稀饭

UI UX Pro Max：给 AI 注入设计智能——从「一眼 AI」到「像人设计的」

11.4 万 star 的设计技能：84 种 UI 风格、192 套行业配色、74 组字体搭配、161 条行业推理规则，几秒钟为你的需求生成一套完整设计系统——顺便治好「一眼 AI」的紫粉渐变病。

  • AI
  • Agent
  • Claude Code
  • UI
  • UX
  • 设计
  • 开源项目

前面几篇写的都是"让编码代理更守规矩"的项目——Superpowers、ECC、mattpocock/skills、gstack。 但有一个问题它们都没解决:让 AI 写出来的界面好看。

今天这篇就补上这块拼图——UI UX Pro Max(简称 uupm), 一个 11.4 万 star、专门给 AI 注入设计智能的技能。 如果说前面的项目管"代理怎么干活",这个管"代理怎么把东西做得像人设计的"。

一、它是什么:给 AI 注入"设计直觉"

官方定义:

一个提供设计智能的 AI 技能，用于在多个平台和框架上构建专业的 UI/UX。

拆开看，它其实是一个结构化的设计数据库 + 推理引擎:

  • 84 种 UI 风格——玻璃拟态、黏土拟态、极简、粗野主义、拟物、Bento Grid、暗黑模式、AI-Native UI……每一种都标注了"最适合什么"；
  • 192 套配色——与 192 种产品类型一一对应;给银行的和给健康应用的配色显然不一样；
  • 74 组字体搭配——精选的字体系，带 Google Fonts 引入链接；
  • 25 种图表类型——仪表盘和分析页的推荐；
  • 98 条 UX 指南——最佳实践、反模式、无障碍规则；
  • 161 条行业推理规则(v2.0 新增)——按行业定制设计系统的核心；
  • 22 个技术栈——React、Next.js、Astro、Vue、Svelte、SwiftUI、Flutter、Jetpack Compose 等。

它的核心能力是 Design System Generator(设计系统生成器)—— 你只需说"给我做个性价比美容院落地页"，它几秒钟就生成一套完整的设计系统:

TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM
────────────────────────────────────────────
PATTERN: Hero-Centric + Social Proof
  CTA: Above fold, repeated after testimonials
  Sections: Hero / Services / Testimonials / Booking / Contact

STYLE: Soft UI Evolution
  Keywords: Soft shadows, subtle depth, calming, premium
  Best For: Wellness, beauty, lifestyle brands

COLORS:
  Primary:   #E8B4B8 (Soft Pink)
  Secondary: #A8D5BA (Sage Green)
  CTA:       #D4AF37 (Gold)
  Background:#FFF5F5 (Warm White)
  Text:      #2D3436 (Charcoal)

TYPOGRAPHY: Cormorant Garamond / Montserrat
  Mood: Elegant, calming, sophisticated

AVOID (Anti-patterns):
  Bright neon colors + Harsh animations + AI purple/pink gradients

PRE-DELIVERY CHECKLIST:
  [ ] No emojis as icons (use SVG)
  [ ] Text contrast 4.5:1 minimum
  [ ] Responsive: 375px / 768px / 1024px / 1440px

注意到那些"反模式"了吗?给美容院它明确说"避开 AI 紫粉渐变"—— 这是训练过的审美判断，不是随机配色。

二、它解决什么问题:AI 最缺的就是"品味"

用 AI 写代码的人都有这种体验:代码很扎实，但界面一看就是"AI 做的"—— 千篇一律的紫蓝渐变、居中大标题、对称布局、emojis 当图标。这不是模型不行， 而是模型缺乏设计决策的参照系:它不知道银行应用该用什么颜色， 不知道美容院和健身房的气质差异，不知道落地页该按什么结构组织信息。

uupm 的思路是给 AI 一个可检索的设计知识库。它内置了一个搜索脚本(纯 Python 标准库)， 用 BM25 排序匹配你的需求:

# 生成设计系统
python3 scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# 按域搜索
python3 scripts/search.py "glassmorphism" --domain style
python3 scripts/search.py "dashboard" --domain chart

# 按技术栈查
python3 scripts/search.py "form validation" --stack react

当你要"给 SaaS 产品做落地页"时，它会同时跑 5 路搜索——产品类型匹配、风格推荐、 配色选择、落地页模式、字体搭配——然后用推理引擎综合成一套完整方案。 它甚至知道 B2B 和 B2C 落地页模式不同、金融应用要避开花哨动效。

这个"AI 生成的落地页"例子最能说明问题:

一个 Beauty/Spa 的落地页，它推荐 Soft UI Evolution 风格 + 柔粉/鼠尾草绿/金色配色 + Cormorant Garamond/Montserrat 字体，并明确警告避开霓虹色、生硬动效、暗黑模式和 AI 紫粉渐变。

这不是"随机挑个好看的颜色"，而是基于行业知识的审美决策——这正是 AI 默认最缺的东西。

三、和其他项目的关系:管"活干得漂亮"，不管"活干得规矩"

把它放进系列里看，分工就很清晰了:

项目管什么视角
Superpowers开发纪律(TDD、工作流)流程
ECC体系(记忆、安全、技能)系统
mattpocock/skills工程手艺(拷问、共享语言)工程
gstack虚拟团队(CEO→QA→发布)组织
UI UX Pro Max设计(风格、配色、字体、布局)审美

前四篇解决的是"怎么把代码写对"，uupm 解决的是"怎么把界面做得像人做的"。 两者可以叠加——先用 gstack 或 Superpowers 管好流程，再用 uupm 注入设计智能。

四、怎么用:两种方式

方式一:Claude Code 插件

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

方式二:CLI(推荐,支持 20+ 代理)

npm install -g ui-ux-pro-max-cli
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai codex       # Codex
uipro init --ai windsurf    # Windsurf
uipro init --ai all         # 全部代理

装完后，只要自然描述你的需求就会自动激活:

  • "给 SaaS 产品做个落地页"
  • "做一个医疗健康分析仪表盘"
  • "用暗黑模式设计一个作品集网站"
  • "做一个电商移动 App 界面"

提一下技术栈(React/Next/Tailwind/SwiftUI/Flutter)，或用默认的 HTML + Tailwind。 它甚至支持 设计系统的层级检索:生成一个 MASTER.md 作为全局基准， 再为每个页面生成独立的 pages/*.md 覆盖文件——页面级规则优先于全局。

五、诚实的提醒

  • 免费版 vs 付费版——开源版是核心设计智能;付费版加品牌设计(Logo、CIP)、 真实图片生成、企业级设计 token。注意这是"开源 + 高级版"模式;
  • 依赖你的表达——它通过搜索匹配你的需求，需求描述越具体， 推荐越准。一句"做个网站"和"给瑜伽工作室做预约落地页"的差距很大;
  • 是"推荐"不是"裁决"——生成的设计系统是很好的起点， 但最终审美判断还是要你来定。它把 AI 从"没品味"拉到了"有参考"，不代表"有品味";
  • 需要 Python——搜索脚本要求 Python 3.x(仅标准库)。项目明确叮嘱: AI 代理不要替你装软件，应该让你自己装。

我的收获

  1. "设计智能"和"编码纪律"是两个独立的维度——一个代理可以代码规规矩矩、界面却丑得惊人。 要给 AI 补审美，需要单独的知识注入，这就是 uupm 的价值。
  2. 把"品味"结构化是可行的——84 种风格、192 套配色、161 条行业规则， 就是把设计经验编译成 AI 能检索的数据。这比"让模型自己悟"高效得多。
  3. 反模式和正模式一样重要——"避开 AI 紫粉渐变"这种明确的反模式清单， 比再多的"应该这样做"更能提升产出质量。这和 karpathy-skills 的"外科手术式改动"是同一个思路。
  4. 系列拼图齐了——纪律(Superpowers)、体系(ECC)、手艺(mattpocock)、 团队(gstack)、审美(uupm)。要让 AI 成为全能工程师，这五块缺一不可。

想深入了解，推荐GitHub 仓库、官网 uupm.cc。如果你也受够了"一眼 AI"的界面， 从 uipro init --ai claude 开始——下一句话，可能就是让 AI 做出像人设计的界面的开始。