ui-ux-pro-max

概览

什么是 ui-ux-pro-max？

ui-ux-pro-max 是一款 UI/UX 设计智能技能，帮助你为 Web 和移动端界面做出更优的设计决策。你无需再凭感觉去猜测布局、配色、字体排版或交互模式，这个技能基于一套结构化数据集来给出建议，包括：

• 50+ 视觉风格
• 161 套配色方案
• 57 组字体搭配
• 161 种产品类型及对应的推理规则
• 99 条 UX 指南
• 25 种图表类型
• 覆盖 10 大技术栈：React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS

这个技能被设计为一个“设计决策层”：帮助你选型设计模式、论证设计选择，并在设计与开发过程中持续维持 UX 质量。

ui-ux-pro-max 适合谁？

ui-ux-pro-max 特别适合以下角色：

• 产品设计师 & UI/UX 设计师：希望在布局、色彩体系、字体排版和交互模式上得到系统化指导。
• 前端工程师：在 React、Next.js、Vue、Svelte、React Native 或 Tailwind 等栈中实现 UI 时，需要具有设计意识的建议。
• 创业者和独立开发者：没有专职设计团队，但仍希望产品具备现代、统一的 UI/UX 体验。
• 设计系统维护者：希望有一层与多种技术栈对齐的风格、图表模式和 UX 指南参考。

在这些场景下尤其有帮助：

• 设计或评审 落地页、数据看板、管理后台、SaaS 应用、电商 以及 移动应用。
• 在多种 风格 中做选择（如 glassmorphism、minimalism、brutalism、neumorphism、bento grid、dark mode 等）。
• 让 按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表 等组件与最佳实践保持一致。

ui-ux-pro-max 解决什么问题？

ui-ux-pro-max 旨在通过以下方式减少设计模糊性和 UX 不一致：

• 有理有据的设计选择：根据产品类型和上下文推荐合适的配色、字体排版和布局模式。
• UX 质量控制：通过 99 条 UX 指南，在问题进入生产环境前发现交互和可用性问题。
• 跨技术栈指导：将设计决策映射为在 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui 和 HTML/CSS 中的具体实现考量。
• 加速创意产出：快速组合已精选、兼容性良好的风格方向、配色方案和字体搭配。

当你需要搞清楚该如何设计某个界面以及为什么某个方向更适合你的产品类型和平台时，ui-ux-pro-max 会特别有价值。

ui-ux-pro-max 适用与不适用的场景

适用场景：

• 你正在决定页面布局、导航结构或交互流程。
• 你在为新产品或现有产品选择配色方案、字体体系和间距系统。
• 你在 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind 或 shadcn/ui 中实现 UI，希望获得具有设计意识的指导。
• 你需要一套系统化方法，对数据看板、落地页或移动端界面的 UI/UX 质量进行评审。

不太适用：

• 你只需要通用的前端工程协助（复杂状态管理、后端集成或 devops），而不涉及设计决策。
• 你已经有非常严格且完备的设计系统，只需要代码层面的重构。
• 你的工作对象是几乎纯文本的界面，几乎没有视觉或交互元素。

如果你的核心需求是视觉方向、交互模式或 UX 质量把控，ui-ux-pro-max 通常会是非常值得启用的能力。

使用方法

1. 安装步骤

要在兼容的 agent 环境中安装 ui-ux-pro-max 作为技能，请使用：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

安装完成后，在上游代码仓库结构中找到 `.claude/skills/ui-ux-pro-max` 目录。主要文件包括：

- `SKILL.md` – 技能主定义与使用意图说明
- `data/` – 设计智能数据集（风格、配色、UX 指南、图表类型等）
- `scripts/` – 用于搜索和解释设计数据的辅助逻辑

你的运行环境可能会以不同方式挂载或映射这些路径，但这些都是技能运行依赖的核心部分。

### 2. 优先阅读的文件
安装完成后，从以下文件入手，了解 ui-ux-pro-max 的行为方式：

#### `SKILL.md`

- 描述整体目的：为 Web 和移动端提供 UI/UX 设计智能。
- 说明覆盖范围：50+ 风格、161 套配色方案、57 组字体搭配、161 种产品类型、99 条 UX 指南、25 种图表类型。
- 明确 **When to Apply** 和 **Must Use** 场景，确保技能只在需要做设计决策时被调用。

这是你了解技能优先级和触发方式的首要参考。

#### `data/`

- 包含驱动 ui-ux-pro-max 的结构化数据集。
- 涵盖产品类型、色彩体系、字体排版选项、UX 指南和图表类型等。
- 允许 agent 根据上下文（例如 SaaS dashboard vs. e-commerce checkout）进行搜索并给出推荐。

安装阶段通常不需要编辑这些文件，它们作为知识库被直接使用。

#### `scripts/`

- 提供用于读取和解释数据的辅助脚本。
- 支持基于优先级的推荐和结构化查找（例如：选择 palette → font pairing → layout pattern）。

如果你需要扩展此技能或将其集成到自定义工作流中，可以在这里寻找可复用的 hook 或逻辑。

### 3. 典型工作流

#### 设计新的页面或界面
在规划下列内容时使用 ui-ux-pro-max：

- **Landing pages** 和营销网站
- **Dashboards 与管理后台**
- **SaaS 应用与电商流程**
- **移动应用界面**

常见工作流如下：

1. 描述产品类型、目标用户和平台（例如：“B2B SaaS analytics dashboard in React with Tailwind”）。
2. 在启用 ui-ux-pro-max 的前提下，让 agent 提出：
   - 整体布局结构和导航方式
   - 推荐的设计风格（如 minimalism、bento grid、dark mode 等）
   - 适合该产品类型的配色方案与字体搭配
   - 关键交互模式和需要遵循的 UX 指南
3. 让技能给出组件级建议，例如按钮、模态框、表单、表格和图表的设计模式。
4. 如果你使用的是 React、Next.js、Vue、Svelte、React Native、Tailwind 或 shadcn/ui，可进一步请求与实现相关的指导，确保代码实现尊重已选定的设计方向。

#### 优化或评审现有 UI
当你已经有一套 UI，希望改进它时：

1. 描述当前设计、痛点以及所用技术栈。
2. 使用 ui-ux-pro-max 来：
   - 将问题映射到 99 条 UX 指南上。
   - 在间距、层级、色彩使用和字体排版方面提出优化建议，以提升清晰度。
   - 为你的数据推荐更合适的图表类型（基于 25 种图表模式）。
3. 请求一组“优化前/优化后”的建议，对应的理由会结合产品类型和最佳实践说明。

#### 对齐设计系统和组件库
如果你在使用设计系统（例如 Tailwind 配置或 shadcn/ui）：

- 可以用 ui-ux-pro-max 来决定针对某类产品应优先采用哪些 **模式** 和 **token 组合**（颜色、字号、间距等）。
- 当环境中存在 shadcn/ui MCP 集成时，你可以：
  - 让 ui-ux-pro-max 先识别合适的组件模式。
  - 再通过 MCP 查找这些模式的具体示例和代码。

这样可以在不反复翻文档的前提下，保持设计决策与组件选择的一致性。

### 4. 何时显式调用该技能
根据 `SKILL.md` 中的上游指引，当任务涉及以下内容时，最适合调用 ui-ux-pro-max：

- **UI 结构**：页面布局、内容层级、导航模式。
- **视觉设计决策**：风格、配色、字体、间距、阴影、渐变等。
- **交互模式**：hover/focus 状态、加载状态、错误处理、微交互。
- **UX 质量控制**：发现摩擦点并应用 UX 指南。

如果任务只是单纯的代码实现、算法或工程问题，并不包含设计层面考虑，则可以不启用该技能，让回答更聚焦在工程本身。


## 常见问题 FAQ

### ui-ux-pro-max 具体包含什么？
ui-ux-pro-max 内置了一套精心整理的设计知识库：50+ 风格、161 套配色方案、57 组字体搭配、161 种带推理规则的产品类型、99 条 UX 指南，以及映射到 10 大技术栈的 25 种图表类型（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS）。它们以数据与脚本的形式存储，供 agent 查询并输出具备设计意识的推荐。

### ui-ux-pro-max 与普通代码助手有什么不同？
普通代码助手主要关注语法、API 和实现细节。ui-ux-pro-max 则聚焦于 **设计决策和 UX 质量**：例如选择什么布局、什么配色更适合你的产品、表单如何结构化、该用哪种图表类型、以及如何避免 UX 反模式。随后，它还能将这些设计决策与前端技术栈对齐。

### ui-ux-pro-max 支持哪些技术栈？
该技能主要覆盖以下方向的设计指导：

- Web 框架：**React、Next.js、Vue、Svelte**
- 移动和应用框架：**SwiftUI、React Native、Flutter**
- 样式与组件：**Tailwind、shadcn/ui 和 HTML/CSS**

你也可以在其他栈中概念性地使用这些指导，但上述生态是它重点适配的对象。

### 我可以在 Tailwind 或 shadcn/ui 项目中使用 ui-ux-pro-max 吗？
可以。ui-ux-pro-max 对 Tailwind 和 shadcn/ui 有专门意识。它可以帮你选择适合的设计模式、色彩体系、间距和字体排版，并将其自然映射到 Tailwind utility classes 或 shadcn/ui 组件上。如果你的环境里有 shadcn/ui MCP 支持，它还可以结合组件搜索和示例进一步指导。

### ui-ux-pro-max 会生成完整的 UI 代码吗？
这个技能的核心是 **设计智能优先**，实现指导是第二层价值。它可以帮助你：

- 定义 UI 组件的结构和行为。
- 给出在 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind 或 HTML/CSS 中的实现建议。

但它的主要价值在于**帮你选择并论证设计决策**，而不仅仅是生成代码片段。

### 什么时候不该使用 ui-ux-pro-max？
在以下情形可以不启用该技能：

- 任务完全是后端或基础设施相关。
- 只是做低层级重构，对 UI 或 UX 不产生影响。
- 聚焦于算法或性能优化等非常窄的工程问题。

这些场景下几乎没有设计决策需求，ui-ux-pro-max 的附加价值会很有限。

### 如何高效上手 ui-ux-pro-max？
安装技能后，你可以这样开始：

1. 阅读 `SKILL.md`，了解其能力范围和推荐用法。
2. 在创建或更新 UI 时，向 agent 清晰描述产品类型、目标用户、平台以及技术栈。
3. 请求结构化输出：例如布局方案、风格方向、配色与字体建议、UX 检查清单以及图表选择等。
4. 持续迭代：根据反馈完善需求描述，并在接近实现阶段让 ui-ux-pro-max 再次评估 UX 质量。

### 我在哪里可以查看底层数据和脚本？
打开技能的 Files 视图，可以查看：

- `SKILL.md`：高层定义与应用规则。
- `data/`：结构化设计数据集。
- `scripts/`：支撑推荐逻辑的辅助脚本。

这些资源能帮助你理解 ui-ux-pro-max 如何进行 UI/UX 推理，从而更有信心地采纳和调整它给出的建议。