把设计知识变成可检索的本地数据:79 风格 / 192 配色 / 119 UX 准则
nextlevelbuilder/ui-ux-pro-max-skill
v2.13.0,MIT,12.9 万 star,官网 uupm.cc。它不给模型讲道理,而是塞进一批结构化目录让 agent 动手前先查:79 种 UI 风格、192 套带推理理由的配色、74 组字体搭配、119 条 UX 准则、105 项图标建议、17 套 GSAP 预设、25 种图表类型、22 个技术栈、34 种落地页 pattern。
我们的判断它最准的一句自我定位是:模型不是不会写 CSS,是没有审美数据库。10 类设计规则按严重度排序,Accessibility 与 Touch & Interaction 排 CRITICAL 第一第二、Charts 排最后,这个排序本身就是立场。Design System Generator 走五路并行检索,且明写「Do not persist unverified output」——生成的设计系统必须验证后才允许落盘。
npx ui-ux-pro-max-cli init --ai claude它解决的问题:模型不是不会写 CSS,是没有审美数据库
UI UX Pro Max(v2.13.0,MIT,129,288 stars / 13,778 forks,官网 uupm.cc)是一个把设计知识变成可检索本地数据的 skill。它不给模型讲道理,而是塞进一批结构化目录,让 agent 在动手前先查:
| 数据集 | 规模 | 查询域名 |
|---|---|---|
| UI 风格 | 79 种可检索(50 种 active) | style |
| 配色方案 | 192 套(带推理理由) | color |
| 字体搭配 | 74 组 | typography |
| UX 准则 | 119 条 | ux |
| 图标建议 | 105 项 | icons |
| GSAP 动效预设 | 17 套 | gsap |
| 图表类型 | 25 种 | chart |
| 技术栈 / 平台 | 22 stacks · 19 platform targets | stack / web |
| 落地页结构 | 34 种 pattern | landing |
10 类规则按优先级排,这才是重点
它把设计规则切成 10 类并按严重度排序,每类都给「必须做到」和「反模式」两栏。这个排序本身就是一种立场:
| # | 类别 | 级别 | 必做 | 反模式 |
|---|---|---|---|---|
| 1 | Accessibility | CRITICAL | 对比度 4.5:1、alt、键盘导航、aria-label | 去掉 focus ring、无标签的纯图标按钮 |
| 2 | Touch & Interaction | CRITICAL | 最小 44×44px、间距 ≥8px、加载反馈 | 只靠 hover、0ms 瞬变 |
| 3 | Performance | HIGH | WebP/AVIF、懒加载、预留空间 CLS < 0.1 | layout thrashing、布局抖动 |
| 4 | Style Selection | HIGH | 匹配产品类型、一致性、SVG 图标 | 扁平与拟物混用、emoji 当图标 |
| 5 | Layout & Responsive | HIGH | 移动优先断点、viewport meta、无横向滚动 | 固定 px 容器宽、禁用缩放 |
| 9 | Navigation Patterns | HIGH | 可预期的返回、底部导航 ≤5、deep link | 导航过载、返回行为坏掉 |
| 6 | Typography & Color | MEDIUM | 正文 16px、行高 1.5、语义色 token | 正文 <12px、灰上灰、组件里写死 hex |
| 7 | Animation | MEDIUM | 时序贴合语境、动效承载含义、空间连续 | 所有过渡同一个时长、动画 width/height、无 reduced-motion |
| 8 | Forms & Feedback | MEDIUM | 可见 label、错误就近、渐进披露 | 只有 placeholder 当 label、错误只堆在顶部 |
| 10 | Charts & Data | LOW | 图例、tooltip、可访问配色 | 只用颜色传达含义 |
把 Accessibility 与 Touch 放在 1、2 位、把 Charts 放最后,等于明确告诉 agent:视觉花活优先级最低。这套排序我们直接借用了。
Design System Generator:五路并行检索 + 推理
旗舰功能是给一句需求就产出完整设计系统。内部流程是四步:用户请求 → 五路并行检索(产品类型匹配 192 类、风格推荐、配色选择、落地页 pattern、字体搭配)→ 推理引擎(产品映射到 UI 类别规则、BM25 排风格优先级、按行业过滤反模式、执行 JSON 决策规则)→ 输出 Pattern + Style + Colors + Typography + Effects + 反模式 + 交付前检查清单。
# 一句话生成整套设计系统(可加 -p 项目名,--persist 落盘)
python .../scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
# 三个 1-10 滑杆微调,不改查询词
search.py "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8
# 定向查单一域
search.py "error summary validation" --domain ux
输出的检查清单是可执行的,比如:不用 emoji 当图标(用 Heroicons/Lucide 的 SVG)、所有可点元素加 cursor-pointer、亮色模式正文对比度 ≥4.5:1、键盘焦点可见、尊重 prefers-reduced-motion、文字与 chip 换行不被裁切、响应式必须过 375/768/1024/1440 四档。
查询契约:这段指令写得比数据还值钱
SKILL.md 里对「怎么查」有明确契约,值得逐条抄:选能解决问题的最小检索模式(新项目/整站方向才用 --design-system,定点 bug 用单个 --domain,已知技术栈才用 --stack);每条查询只围绕一个主意图、2–5 个有效词加一个约束(产品/平台/交互);应用前先核对返回的 domain、top result 身份、以及是否真的适配用户的产品与平台;结果为空或跑题只重试一次(收窄改写或显式指定 domain/stack),重试仍失败就声明没有找到经过验证的匹配,并把任何通用建议标注为 fallback。
最后一句是全部:Do not persist unverified output——不许把未经验证的检索结果写进项目。另外它也诚实说明了局限:--domain 省略时会自动推断,但重叠词会误路由(例如 "font" 同时命中 typography 和 google-fonts),跑题时就显式传。
做无障碍时它要求一次只查一个可观察结果,先查语义结果("focus not obscured" --domain ux、"accessible authentication" --domain ux),再查组件域,最后才查实现栈;不接受用一个泛化的无障碍结论去覆盖具体交互或具体 WCAG 条款。这是很成熟的检索纪律。
安装与仓库构成
npx ui-ux-pro-max-cli init --ai claude
除了主 skill,仓库还带 6 个子 skill:design、ui-styling、design-system、brand、slides、banner-design,以及 scripts/ 下一整套维护工具(validate-csv.py、refresh-google-fonts.py、refresh-icon-catalog.py、evaluate-relevance.py、smoke-domains.sh)。数据是 CSV,有校验脚本和冒烟测试——把「审美」当成有 CI 的数据集来维护,这是它和一般 prompt 合集的根本差别。