01 / 它能帮你做哪些活
它能帮你做哪些活
UI UX Pro Max 把界面设计资料和检查规则交给 Agent 使用。你说明要做什么、给谁用,Agent 查找建议,再结合项目写代码或提出修改。
它擅长先定一套设计系统:让整个项目共用颜色、字体、间距和组件状态,避免每做一页就换一种样子。已有项目也可以只处理眼前的一个问题。
| 你要做的事 | 它能提供什么 |
|---|---|
| 做一个新网页或应用界面 | 按产品用途推荐页面结构、风格、配色、字体、效果和需要避开的做法。 |
| 选择视觉风格与素材 | 查询风格、色板、字体搭配、单独字体和图标建议;已有深浅主题也可继续调整。 |
| 安排落地页或数据看板 | 参考页面结构与行动按钮位置;按趋势、比较等数据用途选择图表。 |
| 修复一个界面问题 | 针对键盘焦点、表单反馈、文字换行、窄屏布局、触控或动画等问题查规则。 |
| 给已有项目换主题 | 先读当前组件和样式,把颜色、字体等共用规则逐步应用到组件,保留业务功能。 |
| 按项目框架实施 | 查询对应技术栈的实现建议,让 Agent 结合当前版本修改代码。 |
| 让多页沿用同一套规则 | 把确认后的设计保存成项目总规则和页面例外;也可调整视觉变化幅度、动效强度与信息密度。 |
官方提供22种技术栈的指导。提出请求时说出自己正在用的框架,或让 Agent 先读项目判断:
- 网页:HTML + Tailwind、React、Next.js、shadcn/ui、Vue、Nuxt.js、Nuxt UI、Angular、Laravel、Svelte、Astro、Three.js。
- 原生移动应用:SwiftUI、Jetpack Compose。
- 跨平台应用:React Native、Flutter。
- 桌面应用:JavaFX、WPF、WinUI 3、UWP、Avalonia、Uno Platform。
这里的查询使用技能自带的本地数据。实际生成、修改和预览界面,由你使用的 Agent 及项目工具完成。
02 / 装到哪、怎么装
装到哪、怎么装
准备一个能读取技能、访问项目文件并执行所需命令的 Agent。先让它打开要制作或修改的项目;已有代码和设计要求是它判断框架、保持风格的依据。
安装工具需要 Node.js 和 npx。Node.js 提供运行环境,npx 用来调用安装工具。在项目的终端里检查:
node --version如果找不到命令,先从 Node.js 官网安装,再重新打开终端。运行下面这条已核对的单项安装命令:
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max按安装工具的提示选择正在使用的 Agent 和当前项目范围。它会取得技能文件;Agent 怎样发现和加载这些文件,仍取决于该 Agent 的技能支持方式。
本地检索脚本还需要 Python 3,只使用标准库。可以检查:
python3 --version有的环境使用 python 或 py -3,显示的版本应为 Python 3。缺少时可从 Python 官网自行安装;如果暂时不装,就让 Agent 只按技能中的规则参考提出建议,并说明没有运行本地检索。
装好后,把这条请求发给当前项目里的 Agent:
发送给 Agent 的请求
请读取 ui-ux-pro-max 技能,确认它的说明、数据和检索脚本分别在哪里,并检查当前环境能否运行 Python 3。脚本请按实际安装目录定位;遇到其它宿主的插件路径占位符时,不要原样套用。先报告准备情况,缺少依赖时告诉我需要准备什么。
如果 Agent 没有找到技能,先按它自己的技能加载说明检查安装目录,再重新加载项目。把它给出的完整错误交给它排查;安装命令结束和 Agent 已读取技能,需要分别确认。
03 / 怎么开口
怎么开口
下面三条是本站编写的请求示例。按你的项目替换用途、框架和限制;请求越具体,Agent 越容易选到合适的规则。支持自动发现技能的 Agent 可以自然提问;采用工作流入口的宿主,按其说明在请求前加 /ui-ux-pro-max。
新做一页
发送给 Agent 的请求
请使用 ui-ux-pro-max,为当前项目设计一个小型工作室的服务预约页。用户主要用手机浏览,需要看服务内容、价格和预约入口,风格简洁、亲切。先读项目,确认框架与已有样式,再给出页面结构、配色、字体和按钮状态的建议;说明这些选择怎样服务预约。等我确认方案后,再按项目现有方式实施。
给已有项目换主题
发送给 Agent 的请求
请使用 ui-ux-pro-max,检查当前 React 项目的框架和样式库版本、组件、主题变量与硬编码颜色。我希望界面更简洁、文字更清楚。先沿用现有主题系统,建议怎样调整颜色、字体、间距和交互状态;保留组件结构、业务逻辑及现有功能。先给修改计划,确认后再分批修改,并检查深浅主题、键盘焦点和手机布局。
主题变量是项目集中保存的颜色、字号等值。让组件继续引用这些值,后续换颜色或调整间距时就容易保持一致。
只修一个表单问题
发送给 Agent 的请求
请使用 ui-ux-pro-max,检查当前项目预约表单提交失败后的焦点定位。现在用户用键盘提交后,不容易找到第一个填写错误的位置。先读取表单实现,按这一交互问题查询相关 UX 建议,再结合当前技术栈给出最小修改方案;说明修改后怎样用键盘验证。先给方案,确认后再改代码。
需要更鲜明的风格、更少的动画或更紧凑的看板时,可以直接说明。先让 Agent 解释建议,再决定是否调整。
多页项目可以让 Agent 把已确认的规则保存到 design-system/项目名/MASTER.md,页面的特殊要求放在 pages/ 下。已有规则先读取,保存时确认项目位置;覆盖旧规则前先看清改动。
04 / 看一份官方设计建议
看一份官方设计建议
官方 README 用 Serenity Spa 的服务网站展示设计系统输出。下面是该文字示例的中文整理;它说明建议包含哪些内容。
| 项目 | 官方示例的建议 |
|---|---|
| 页面结构 | 首屏介绍 → 服务 → 用户评价 → 预约 → 联系方式;预约按钮放在首屏,评价后再次出现。 |
| 风格 | Soft UI Evolution:柔和阴影、轻微层次与自然形状,营造平静的服务体验。 |
| 颜色 | 主色粉色 #E8B4B8,辅色鼠尾草绿 #A8D5BA,行动按钮金色 #D4AF37,背景暖白 #FFF5F5,文字炭黑 #2D3436。 |
| 字体 | Cormorant Garamond / Montserrat,表达优雅、平静的感觉。实际中文页面还需选择合适的中文字体。 |
| 效果 | 柔和阴影、符合当前交互的过渡、轻微悬停反馈。 |
| 本例避开的方向 | 明亮霓虹色、强烈动画、深色模式、紫粉渐变;这些选择服务于本例的定位。 |
| 交付前检查 | 图标用 SVG;可点击元素有相应光标;文字对比度、键盘焦点、减少动态效果偏好、文字换行和多种屏宽分别检查。 |
这份建议还需要由 Agent 实施,才能在网页里检查效果。例如浅粉和金色能表达氛围,但按钮上的文字是否清楚,要按最终前景色、背景色和字号重新核对。你也可以据此提出“保持平静的感觉,把金色按钮换成更清楚的方案”这样的修改。
官方文字示例 · Next Level Builder · MIT。这里没有展示本站生成的网页结果。
05 / 边界与费用
边界与费用
开源核心采用 MIT 许可。 官方另有 Premium 扩展,介绍了品牌、Logo、横幅、幻灯片和素材生成等能力;采用时需要另查包含范围与费用。Agent 的模型、项目部署,以及另外使用的字体、图标或图片服务,也按各自条件计费或授权。
当前采用的数据包含79种可搜索风格,其中50种进入常规推荐、29种用于明确的补充方向;另有9种废弃项。还有192套产品色板与推理规则、74组字体搭配、25类图表、119条UX指导和34种落地页结构。这些是资料范围,实际项目仍需检查视觉、键盘操作、不同屏宽和业务功能。
本地检索脚本查找自带资料,不发起网络请求。你交给 Agent 的项目材料会按所用 Agent 的模型服务规则处理;让它保存设计规则时,也应检查文件中是否包含不必要的私人或业务信息。
本站核对了官方资料和安装入口,尚未实际安装、生成界面或逐一验证22种技术栈。
06 / 来源与更新
来源与更新
采用官方仓库 2.15.0 的资料,快照日期为2026年10月26日,核对日期为北京时间2026年10月29日。安装入口的归档时间为UTC 2026年10月28日20:26,与该北京时间日期一致。安装工具可能取得后续版本,实际文件与参数以安装后的说明为准。
Serenity Spa 示例由官方提供,本页作中文翻译与表格整理;开口请求由本站编写。Copyright (c) 2024 Next Level Builder。
查看 MIT 许可原文
MIT License
Copyright (c) 2024 Next Level Builder
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.