UI UX Pro Max website introduction — user-supplied screenshot; website figures may differ from the current repository.
项目截图关于这个 Skill
为 AI 编程 Agent 提供设计知识：生成项目设计系统，检索风格、配色与字体组合，并把适合技术栈的 UI/UX 建议应用到网站和应用界面。
为什么推荐
适合在编写界面代码前，先给 Agent 一套具体的设计方向。本地检索将产品场景与风格、配色、字体和 UX 建议结合起来；保存后的设计系统文件也方便后续页面沿用同一组决策。
合集中的 Skills
6 个 Skills- 查看 →
Banner Design
按不同平台尺寸和视觉方向设计社交媒体、广告、网站主视觉与印刷横幅。
- 查看 →
Brand Identity
制定品牌语气、信息和视觉识别指南，并检查素材的一致性。
- 查看 →
Design System
制定分层设计 token、组件规范和设计交付开发的说明。
- 查看 →
Design Workflows
将品牌、界面、标志、演示、横幅、图标和社交图片任务导向配套设计工作流。
- 查看 →
HTML Slides
使用布局、设计 token 与 Chart.js 图表制作 HTML 演示文稿。
- 查看 →
UI Styling
结合 shadcn/ui、Tailwind CSS 与设计系统指引制作响应式界面组件。
适合用来做什么
- 借助 AI 编程助手制作落地页、产品界面或数据看板的开发者。
- 希望在实现前统一配色、字体和组件方向的产品团队。
- 需要改善已有项目的响应式布局、可访问性与界面一致性的前端工程师。
可以帮助你完成哪些设计工作
结合产品场景生成设计系统
组合页面结构、视觉风格、配色、字体与交互建议。可以保存主设计系统和页面覆盖文件，让后续工作复用已有决策。
按具体问题检索设计资料
按风格、字体、图表和 UX 等领域检索。需要解决某个组件、交互或布局问题时，可以使用范围更明确的查询。
面向实现技术栈的建议
上游资料覆盖 Web、移动端与桌面技术栈，包括 React、Next.js、Vue、SwiftUI 和 Flutter。UX 建议也涉及文字换行、键盘焦点与减少动态效果。
安装并开始用于你的项目
| 命令 | 用途与使用时机 |
|---|---|
uipro init --ai claude | 为 Claude Code 安装。 |
uipro init --ai cursor | 为 Cursor 安装。 |
uipro init --ai gemini | 为 Gemini CLI 安装。 |
uipro init --ai universal | 使用上游通用 Agent Standard 安装方式。 |
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill | 在 Claude Code 添加上游插件市场，然后执行下一条插件命令。 |
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill | 从该市场安装 Claude Code 插件。 |
安装上游当前 CLI
npm 包名是 ui-ux-pro-max-cli，安装后的命令是 uipro。README 标明旧 uipro-cli 版本已过时。
npm install -g ui-ux-pro-max-cli为所用助手安装到项目
在项目目录运行。这里以 Codex 为例；其他助手使用对应的 --ai 参数。可以添加 --dry-run 预览安装内容。
uipro init --ai codex给 Agent 一个具体任务
例如：用 React 设计 SaaS 数据分析看板，保留现有品牌色，并让导航与表格在手机上方便使用。任务中写明技术栈与约束。
检索并保存设计系统
以下命令使用 Codex 安装路径。其他助手应使用各自安装生成的 search.py 路径。本地检索不需要模型 API Key；Agent 编写代码时仍使用自身配置的模型。
| 命令 | 用途与使用时机 |
|---|---|
python3 .agents/skills/ui-ux-pro-max/scripts/search.py "SaaS analytics dashboard" --design-system -f markdown | 以 Markdown 输出设计建议。 |
python3 .agents/skills/ui-ux-pro-max/scripts/search.py "SaaS analytics dashboard" --design-system --persist -p "MyApp" | 保存项目主设计系统，供后续会话复用。 |
python3 .agents/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react | 检索 React 表单校验建议。 |
python3 .agents/skills/ui-ux-pro-max/scripts/search.py "keyboard focus" --domain ux | 检索键盘焦点相关 UX 建议。 |
查看上游示例
上方画廊使用本次提供的两张官网截图：项目介绍和部分设计示例。官网截图中的数量可能对应较早版本；功能范围与安装说明以当前 README 为准。
README 还附有运营看板的改版前后对比，维护者将其标注为社区贡献的示意案例，可用于了解一种视觉方向。
UI UX Pro Max 的替代选择
合适的替代选择取决于具体任务。UI UX Pro Max 提供本地设计知识检索，并可保存项目设计系统；下面的工具各有侧重，其中一些也可以与它搭配使用。
Frontend Design
适合根据需求建立有辨识度的视觉方向并制作网页。其说明强调字体、构图和有目的的设计选择；与 UI UX Pro Max 不同，它的工作流不以本地设计资料库检索为中心。
Impeccable
适合通过 audit、polish、typeset 等具体操作审查或改进已有页面和组件，也能用于制作新界面。它侧重按任务迭代，与 UI UX Pro Max 的设计资料检索及设计系统生成方式不同。
Anti Slop Skills
适合用 UI、响应式布局和可访问性专项规则检查模板化视觉或界面质量。它可以补充 UI UX Pro Max 生成的设计方向；专项检查并不等同于设计系统资料库。
上游 README：功能、安装与用法Frontend Design 原始说明Impeccable 原始仓库Anti Slop UI 原始说明设计 Skills 对比指南
使用前需要了解
- 可读取和修改项目的 AI 编程助手；模型使用按该助手自身的服务方案计费。
- 使用 CLI 安装需要 Node.js 与 npm；上游也为 Claude Code 提供插件安装方式。
- 本地检索与设计系统脚本需要 Python 3，使用 Python 标准库。
支持的 Agent
常见问题
这个 GitHub Skill 免费吗？
本页链接的仓库按 MIT 许可开源。官网另有 Premium 服务；编程助手的模型费用按其自身服务方案计费。
可以改善已有界面吗？
可以。描述页面、具体问题和需要保留的规则，例如现有品牌配色或组件库。该 Skill 的适用任务包括界面设计、评审和修复。
本地检索需要模型 API Key 吗？
不需要。随附 Python 检索使用本地资料与标准库；AI 辅助实现使用编程工具中配置的模型。
在哪里查看最新安装说明？
查看下方链接的上游 README。按助手选择 CLI 的 --ai 目标，也可以使用 Claude Code 插件方式。当前 CLI 包名为 ui-ux-pro-max-cli。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
