跳转到使用指南
ui-ux-pro-max作者 nextlevelbuilder

UI UX Pro Max Skill.

Claude Code 和 Codex 的 UI 设计 skill:适用于 Web、移动端和桌面端的 UI/UX 设计智能,涵盖布局、色彩、字体和 UX 规则。

  • Web & UI
  • UI 代码
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
前置元数据和章节标题读取自上游文件,时间 2026-09-14 · 完整内容 15,922 字符

01 功能说明

ui-ux-pro-max Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

UI/UX Pro Max 是一个面向网页、移动端和桌面界面的可检索设计智能 skill。它可查询 79 种风格(50 种为活跃状态)、192 种带推理依据的产品调色板、74 种字体搭配、119 条 UX 指南、105 个图标、17 个 GSAP 预设、25 种图表类型和 22 种技术栈。可用它来设计页面、选择配色与排版、审查界面的可访问性与一致性、实现导航与动效,或改善可用性。

它会自动从 package.json、pubspec.yaml 或 xcodeproj 中检测技术栈,并生成设计系统,可选持久化以供跨会话检索。三个设计旋钮(变化度、动效、密度)可用于调节输出。该 skill 提供针对 UX、配色、排版、图标、GSAP 以及特定技术栈实现指南的领域专项搜索。

它产出什么

  • 包含模式、风格、颜色、排版、效果和反模式的设计系统,可输出 ASCII、markdown 或 JSON 格式
  • 当传入 --page 时,design-system/project-slug/pages/page-name.md 用于页面级覆盖
  • 领域专项结果(UX 指南、配色方案、字体搭配、图标、GSAP 预设、图表建议、技术栈实现指导)
查看示例提示词 ↗

工作方式

  1. 01
    分析需求

    提取产品类型(SaaS、电商、仪表盘)、目标受众、风格关键词(活泼、简约、暗色模式),并从 package.json、pubspec.yaml、xcodeproj 或 app.json 中检测技术栈。

  2. 02
    生成设计系统

    针对新页面或新项目,使用 --design-system 参数运行 search.py。

  3. 03
    以主文件加覆盖文件的方式持久化

    添加 --persist 和指向项目根目录的 --output-dir,以写入 design-system/project-slug/MASTER.md。页面级覆盖则放在 pages/page-name.md 中。

  4. 04
    补充领域专项搜索

    针对单一领域(ux、color、typography、icons、gsap、chart、landing、google-fonts),用 2-5 个有意义的关键词和一个约束条件进行查询。

  5. 05
    查询 Stack 指南

    使用 --stack 并指定检测到的 stack(react、nextjs、vue、swiftui、flutter 等),以获取针对具体实现的指导。

  6. 06
    检查交付前 Rules

    在交付应用 UI 之前,阅读 references/pro-rules.md,并按照其标准的 Pre-Delivery Checklist 逐项核查,内容涵盖图标使用规范、交互反馈、明暗模式对比度、安全区域布局,以及原生/移动应用 UI 的无障碍性。

02 找到适合场景

何时使用 ui-ux-pro-max Skill

当工作是此类 UI 设计时,在 Claude Code 或 Codex 中使用 ui-ux-pro-max skill。以下适用范围和限制来自 skill 自己的文件。

适合场景

  • 设计新页面,或创建和重构 UI 组件
  • 选择颜色、字体排印、间距或布局系统
  • 从 UX、无障碍性或一致性角度审查 UI
  • 实现导航、动画或响应式行为
  • 提升界面的感知质量和可用性

了解边界

  • 纯后端逻辑、API 或数据库设计
  • 非视觉性能工作、基础设施或 DevOps
  • 非视觉性脚本,除非任务会改变某物的外观、感觉、动效或交互方式

需要提供的信息

  • 产品类型与受众SaaS、电商、作品集、仪表盘、娱乐、工具或效率类产品,以及年龄群体和使用场景(通勤、休闲、工作)
  • 风格关键词活泼、鲜艳、极简、暗色模式、以内容为先、沉浸式,或其他描述所需视觉方向的形容词
  • 用于持久化的项目名称向 --design-system 传入 -p "Project Name",以命名 design-system 子目录和 MASTER.md 文件
  • 设计调节项(可选)三个 1-10 的滑块:--variance(居中到大胆/不对称)、--motion(细微到复杂编排)、--density(宽松到密集/仪表盘间距刻度)

03 Skill 内部

ui-ux-pro-max Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 无障碍优先

    优先级 1(严重)。确保对比度达到 4.5:1,提供替代文本、键盘导航和 aria-labels。切勿移除焦点环,也不要使用无标签的纯图标按钮。

  2. 触控目标最小 44×44px

    优先级 2(严重)。触控与交互元素尺寸须不小于 44×44px,间距不小于 8px,并提供加载反馈。避免仅依赖悬停,也避免瞬时状态变化(0ms)。

  3. 结果为空时重试一次

    如果搜索返回 0 条结果,请用更窄的查询或明确的领域/stack 重试一次。

  4. 使用最小搜索模式

    新项目或新页面选择 --design-system,针对性关注点或组件问题选择一个明确的 --domain,已知实现技术栈选择 --stack。

  5. 切勿假设技术栈

    从 package.json、pubspec.yaml、xcodeproj、Package.swift、composer.json 或 app.json 中检测技术栈。如果无法检测且技术栈指导很重要,请询问用户。

  6. 通过完整路径调用搜索

    始终使用完整路径运行 python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py",而非相对路径。

  7. 未获授权不得覆盖主文件

    如果 design-system/project-slug/MASTER.md 已存在,除非传入 --force,否则 --persist 会跳过写入并保持其不变。

  8. 先查询语义结果,再确定技术栈

    对于文本排版和紧凑组件的问题,先搜索语义化的 UX 结果(孤行标题行平衡、徽章标签换行),然后再针对检测到的技术栈搜索实现方式。

04 投入使用

在 Claude Code 或 Codex 中安装 ui-ux-pro-max

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 ui-ux-pro-max 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
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 的通用 skills CLI 形式;具体仓库可能记录了自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 在应用搜索结果之前,先验证返回的 domain、首个结果的身份,以及是否契合用户的产品和平台
  • 当输出为空或偏离主题时,用更精简的改写或明确的 domain/stack 重试一次。
  • 在决定是否有理由使用 --force 重新生成之前,先阅读已存在的 MASTER.md
  • 在处理无障碍相关工作时,一次只查询一个可观察结果,使用明确的无障碍结果术语,并验证结果是否与具体的交互或 WCAG 标准相匹配

在 OpenDesign 中ui-ux-pro-max 已内置:Plugins → Skills,在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
.claude/skills/ui-ux-pro-max/SKILL.md 内容校验和已在验证时记录;提交 7f69fed
License
MIT 来自 LICENSE。
仓库星标数
127,450 GitHub 快照拍摄于 2026-09-14,针对整个 nextlevelbuilder/ui-ux-pro-max-skill 仓库,该仓库在本目录中包含 7 个 skill。不是 ui-ux-pro-max 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 何时使用用于 UI 结构、视觉设计、交互、UX 质量。后端、API、基础设施则跳过。
  2. 按优先级划分的规则类别10 个类别,从无障碍(关键)到图表(低),包含关键检查点和反模式
  3. 运行搜索工具从 skill 目录中通过完整路径调用 search.py。需要 Python 3.x,无外部依赖。
  4. 查询约定选择最小的搜索模式。一个主导意图,2-5 个词,验证 domain/契合度,为空时重试一次。
  5. 步骤 1:分析用户需求提取产品类型、受众、风格关键词,并从 package.json 或同等文件中检测技术栈。
  6. 步骤 2:生成设计系统新页面/项目使用 --design-system。汇总产品/风格/色彩/落地页/排版方面的匹配结果。
  7. 步骤 2b:持久化设计系统添加 --persist 和 --output-dir 以写入 MASTER.md。已存在的 Master 会被跳过,除非获授权使用 --force。
  8. 步骤 2c:设计调节项可选的 1-10 滑块,用于调整变化度、动效、密度,以微调 --design-system 的输出。
  9. 步骤 3:补充详细搜索查询产品、风格、色彩、排版、google-fonts、图表、ux、落地页、图标、gsap、react、web 等 domain。
  10. 步骤 4:技术栈指南使用 --stack 并指定检测到的技术栈,以获取针对具体实现的指导。共有 22 种技术栈可用。
  11. 如果搜索返回 0 条结果用更窄的查询重试一次。如果仍为空,则回退到优先级表并告知用户。
  12. 获得更好结果的技巧每次查询只表达一个意图,使用 2-5 个词。重试一次。新建时使用 --design-system,聚焦特定领域时使用 --domain。
Skill 自身的描述
"Web、移动端和桌面端的 UI/UX 设计智能。此 skill 应在设计、构建、审查或修复界面时使用,包括页面、组件、设计系统、可访问性、交互、响应式布局、排版、颜色、图表和特定技术栈的 UI 实现。可搜索的本地数据:79 个可搜索样式(50 个活跃)、192 个产品调色板和推理配置、74 个字体配对、119 条 UX 指南、105 个图标、17 个 GSAP 预设、25 种图表类型和 22 个技术栈。"

来自 SKILL.md 的前言描述。完整文件约 15,922 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 ui-ux-pro-max Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

该 skill 运行需要什么?

该搜索脚本需要 Python 3.x,且无外部依赖。必须从 skill 目录使用完整路径调用,通过 python、python3 或 py -3 执行。如果缺少 Python,README 中包含安装说明。

如何为特定页面覆盖设计系统?

持久化时传入 --page "page-name" 以创建 design-system/project-slug/pages/page-name.md。构建该页面时,Agent 会先读取 MASTER.md,然后检查 pages/page-name.md 是否存在。如果存在,其规则会覆盖 Master 中的规则;否则将仅使用 Master 中的规则。

UI UX Pro Max

在真实 UI 设计任务中运行 ui-ux-pro-max。

ui-ux-pro-max skill 内置于 OpenDesign。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上面的提示,并在查看结果之前阅读方案。

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