Skip to content
返回技能库

AGENT SKILL

设计与前端精选

把设计知识变成可检索的本地数据: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
Any agent
UI DesignDesign SystemAccessibilityFrontend
nextlevelbuilder/ui-ux-pro-max-skill12.9万1.4万PythonMITnextlevelbuilder2 min read

它解决的问题:模型不是不会写 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 targetsstack / web
落地页结构34 种 patternlanding

10 类规则按优先级排,这才是重点

它把设计规则切成 10 类并按严重度排序,每类都给「必须做到」和「反模式」两栏。这个排序本身就是一种立场:

#类别级别必做反模式
1AccessibilityCRITICAL对比度 4.5:1、alt、键盘导航、aria-label去掉 focus ring、无标签的纯图标按钮
2Touch & InteractionCRITICAL最小 44×44px、间距 ≥8px、加载反馈只靠 hover、0ms 瞬变
3PerformanceHIGHWebP/AVIF、懒加载、预留空间 CLS < 0.1layout thrashing、布局抖动
4Style SelectionHIGH匹配产品类型、一致性、SVG 图标扁平与拟物混用、emoji 当图标
5Layout & ResponsiveHIGH移动优先断点、viewport meta、无横向滚动固定 px 容器宽、禁用缩放
9Navigation PatternsHIGH可预期的返回、底部导航 ≤5、deep link导航过载、返回行为坏掉
6Typography & ColorMEDIUM正文 16px、行高 1.5、语义色 token正文 <12px、灰上灰、组件里写死 hex
7AnimationMEDIUM时序贴合语境、动效承载含义、空间连续所有过渡同一个时长、动画 width/height、无 reduced-motion
8Forms & FeedbackMEDIUM可见 label、错误就近、渐进披露只有 placeholder 当 label、错误只堆在顶部
10Charts & DataLOW图例、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" 同时命中 typographygoogle-fonts),跑题时就显式传。

做无障碍时它要求一次只查一个可观察结果,先查语义结果("focus not obscured" --domain ux"accessible authentication" --domain ux),再查组件域,最后才查实现栈;不接受用一个泛化的无障碍结论去覆盖具体交互或具体 WCAG 条款。这是很成熟的检索纪律。

安装与仓库构成

npx ui-ux-pro-max-cli init --ai claude

除了主 skill,仓库还带 6 个子 skill:designui-stylingdesign-systembrandslidesbanner-design,以及 scripts/ 下一整套维护工具(validate-csv.pyrefresh-google-fonts.pyrefresh-icon-catalog.pyevaluate-relevance.pysmoke-domains.sh)。数据是 CSV,有校验脚本和冒烟测试——把「审美」当成有 CI 的数据集来维护,这是它和一般 prompt 合集的根本差别。