做页面先定设计系统，35.4 万人装的 UI Skill 怎么用

你大概见过这种 AI 生成页面，三栏卡片、渐变背景、按钮漂浮在半空，代码能跑，截图也挺像那么回事。可一旦要接进真的产品，问题就开始排队，哪个动作最重要，深色模式怎么配，窄屏时标题会不会断成两截，错误态和加载态放哪儿。

模型通常不缺 CSS，它缺的是一份先做哪些决定的顺序。

最近在 skills.sh 上刷到一个叫 UI UX Pro Max 的 UI 设计 Skill。它单项安装量约 35.4 万，整包约 70.7 万。GitHub 公开数据则是约 12.7 万 Star、1.35 万 Fork，9 月 10 日还有推送。好家伙，这已经不是一个藏在角落里的提示词小抄了。

我想聊它，不是因为它又塞进了一堆色卡和字体名，而是它给了一个特别适合 AI 写页面的动作，把设计决策放到代码前面。别让模型一上来就画卡片，先让它交一张设计选择题。

它解决的不是审美，而是开工顺序

官方仓库把它描述成一个跨框架的 UI／UX 设计知识库。当前公开版本里有 192 条按产品类别整理的推理规则、79 种可检索的界面风格、192 组色彩方案、74 组字体搭配、25 种图表建议和 119 条 UX 指南。

这些数字不是让人收藏一个更大的资料库。真正有用的是它把一个模糊需求拆成一连串该先回答的问题。

你要做的是 B 端项目管理工具还是面向消费者的订阅页。信息密度应该高还是留白优先。按钮该把注意力推向哪里。颜色和字体能不能服务这个场景。手机上哪些内容必须留下。交互出错时用户有没有退路。

很多页面返工，代码并没写错，前面这几道题没人答。于是模型只能凭训练里最常见的网页去猜，猜到最后就很容易落在一片看似精致、其实谁家都不像的紫蓝渐变里。第一屏挺兴奋，第二屏开始不知道该放什么，这种产物并不少见。

官方页面展示了该项目的设计知识库和安装入口。图为源站截图，非本文实测。

这类 Skill 的价值，是先给模型一个设计系统草案。它会把产品类型、页面模式、视觉风格、色彩、字体、关键效果、反模式和交付前检查放在同一张纸上。后面你再让它写 React、Vue、Tailwind 或 SwiftUI，讨论终于有了共同坐标。

不是做一个漂亮的偶然结果，是把下一页也怎么做写进规则里。

装上之后，第一句别再是帮我做个高级页面

官方给了两条安装路。习惯从 skills.sh 装包的，直接用下面这条。

npx skills add nextlevelbuilder/ui-ux-pro-max-skill

想用官方 CLI 安装到 Codex 的项目目录，也可以走这一条。

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

装完后不用背一堆命令。对支持自动触发的编码助手，直接把需求说清楚就行，比如“给一个面向销售团队的 SaaS 仪表盘做 UI，信息密度高，技术栈是 Next.js”。它的公开文档还提供了一个更直接的设计系统命令，适合你想先拿到一份可审的方案再开写。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "B2B SaaS 项目管理 高信息密度" \
  --design-system -p "Project Desk" -f markdown

路径按你实际安装的位置替换。这个命令的意义不是神秘，它要求模型先输出页面模式、风格、配色、字体、效果和需要避开的做法。厉害了，原本只有“做个页面”的一句需求，终于能变成团队可以讨论的设计合同。

先定产品、版式、颜色、字体与可用性边界，再进入组件实现。

一份可以直接复制的开工 Brief

如果你不想碰命令行，也可以把下面这段直接丢给已经装好它的编码助手。重点在于让它先停在设计阶段，别急着生成几百行组件。

我要做一个面向销售团队的项目管理 Web 应用。
用户每天要看项目进度、风险和待处理审批。
技术栈是 Next.js 加 Tailwind，优先桌面端，同时必须适配 375px 宽度。

先不要写代码。请先输出一份设计系统草案，包含
1. 产品类型和页面信息层级
2. 推荐的版式与视觉风格，并写明不该使用的风格
3. 颜色、字体、间距和圆角的 token 建议
4. 首页、项目列表、审批抽屉的组件边界
5. 空白、加载、报错和无权限状态
6. 可访问性与响应式验收项

我确认后，再按这份规则实现页面。

这里最容易被跳过的是第 5 和第 6 项。演示稿里没有数据、网络慢、权限不够，这些都很扫兴。真实产品偏偏天天撞上。官方指南把文本对比度、键盘焦点、触控目标、加载反馈、窄屏换行和减少动态效果放在优先级里，原因也很朴素，用户不在乎你用了什么风格，他只在乎按钮能不能点、信息看不看得懂。

有点子牛逼的页面，不是第一眼最花的那张，而是在信息突然变长、状态突然变差、屏幕突然变窄时还站得住的那张。

它也有不该上场的时候

别把它当成设计师替身，更别拿安装量替代判断。35.4 万次安装只能说明很多人愿意试，不能说明它替你的用户做完了取舍。

一个成熟产品有已有的设计 token、组件库、品牌规范和无障碍要求，项目规则应该永远排在这类通用建议前面。官方文档也明确提醒，现有仓库的组件、图标、字体、资源和交互约束需要先读。硬把一套新风格压进去，往往会让产品从统一变成拼贴，棒棒的，返工又多了一轮。

它也不适合替你验证真实用户反应。它能帮你建立假设和验收项，却不能凭空告诉你客户会不会看懂定价、愿不愿意点审批、会不会在移动端放弃。那部分还得看数据、可用性测试和真实反馈。

所以我会把它放在开工前，不放在交付后。先让 AI 用设计系统把猜测摊在桌上，再让代码去执行，最后用真实用户把它打回去或留下来。

页面需求刚来的那一刻，你更希望 AI 先给你一张漂亮截图，还是先给你一份能让团队少吵三轮的设计系统草案？

公开资料为 skills.sh 安装页 和 项目官方仓库。