SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-ux-pro-max

ui-ux-pro-max

设计与创作

查看项目

更新于 10-15 09:31

技能介绍

用途

UI/UX Pro Max 是一套面向 Web 与移动应用的综合性设计指南（设计智能）。它以可搜索数据库的形式，在用户进行 UI 组件或页面设计、选择配色与字体、审查代码中的 UX 问题、构建落地页或仪表盘、实现无障碍要求时提供参考准则。

主要能力

  • 内容规模：包含 50+ 种风格、97 套配色方案、57 组字体搭配、99 条 UX 准则和 25 种图表类型，覆盖 9 种技术栈。
  • 优先级化规则体系，按类别组织：
    1. 可访问性（CRITICAL，ux 域）：颜色对比度普通文本至少 4.5:1；交互元素有可见焦点环；有意义的图片提供描述性 alt 文本；仅图标按钮加 aria-label；Tab 顺序与视觉顺序一致；表单使用带 for 属性的 label。
    2. 触控与交互（CRITICAL，ux 域）：触控目标最小 44x44px；主要交互使用点击/轻触；异步操作期间禁用按钮；错误提示清晰并靠近问题位置；可点击元素添加 cursor-pointer。
    3. 性能（HIGH，ux 域）：使用 WebP、srcset、懒加载；检查 prefers-reduced-motion；为异步内容预留空间避免跳动。
    4. 布局与响应式（HIGH，ux 域）：viewport meta 使用 width=device-width initial-scale=1；移动端正文最小 16px；确保内容适配视口宽度；定义 z-index 层级（10、20、30、50）。
    5. 排版与颜色（MEDIUM，typography/color 域）：正文行高 1.5-1.75；每行 65-75 字符；标题与正文字体气质匹配。
    6. 动画（MEDIUM，ux 域）：微交互时长 150-300ms；使用 transform/opacity 而非 width/height；提供骨架屏或加载指示。
    7. 风格选择（MEDIUM，style/product 域）：风格与产品类型匹配；所有页面风格一致；使用 SVG 图标而非 emoji。
    8. 图表与数据（LOW，chart 域）：图表类型与数据类型匹配；使用可访问的配色；为无障碍提供表格替代。

使用方式

前置条件：需安装 Python，可用 python3 --version || python --version 检查；未安装时按操作系统安装（macOS：brew install python3；Ubuntu/Debian：sudo apt update && sudo apt install python3；Windows：winget install Python.Python.3.12）。

工作流程：

  1. 分析用户需求，提取产品类型、风格关键词、行业、技术栈（未指定则默认 html-tailwind）。
  2. 生成设计系统（必需），始终先运行：
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

该命令并行搜索 5 个域（product、style、color、landing、typography），依据 ui-reasoning.csv 中的推理规则选择最佳匹配，返回包含模式、风格、配色、排版、效果与应避免反模式的完整设计系统。示例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

2b. 持久化设计系统（Master + 覆盖模式）：添加 --persist 可跨会话分层检索：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

会创建 design-system/MASTER.md（全局事实来源）与 design-system/pages/ 目录。加入页面级覆盖：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

会额外创建 design-system/pages/dashboard.md。分层检索逻辑：构建具体页面时先检查页面文件，若存在则其规则覆盖 Master，否则仅使用 Master。上下文感知检索提示词示例：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
  1. 按需补充详细搜索：
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

例如更多风格 --domain style "glassmorphism dark"、图表建议 --domain chart "real-time dashboard"、UX 最佳实践 --domain ux "animation accessibility"、备选字体 --domain typography "elegant luxury"、落地页结构 --domain landing "hero social-proof"。

  1. 技术栈指南（默认 html-tailwind）：
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

可用域：product、style、typography、color、landing、chart、ux、react、web、prompt。可用技术栈：html-tailwind（默认，Tailwind 工具类、响应式、无障碍）、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose。

输出格式：--design-system 支持 ASCII 框（默认，适合终端）与 Markdown（加 -f markdown，适合文档）。

提升结果的建议：关键词要具体（“healthcare SaaS dashboard”优于“app”）；多次搜索；跨域组合（风格 + 排版 + 颜色）；始终检查 UX；使用 stack 参数；结果不匹配时更换关键词迭代。

适用场景

  • 设计新的 UI 组件或页面
  • 选择配色方案与排版
  • 审查代码中的 UX 问题
  • 构建落地页或仪表盘
  • 实现无障碍要求

通用专业 UI 规则与交付前检查

常见易被忽视的问题包括：图标与视觉元素（不用 emoji 作图标，使用 Heroicons、Lucide、Simple Icons 等 SVG 图标；hover 用颜色/透明度过渡避免布局位移；品牌 logo 从 Simple Icons 核实；图标尺寸固定 viewBox 24x24 配 w-6 h-6）；交互与光标（可点击卡片加 cursor-pointer；提供 hover 视觉反馈；过渡使用 transition-colors duration-200）；明暗模式对比（浅色玻璃卡片用 bg-white/80 或更高不透明度；正文用 #0F172A；弱化文本最低 #475569；浅色模式边框用 border-gray-200）；布局与间距（浮动导航栏加 top-4 left-4 right-4 间距；内容留出固定导航高度；统一 max-width）。

交付前检查清单：视觉质量（无 emoji 图标、图标集一致、品牌 logo 正确、hover 不引起布局位移、直接使用主题色）；交互（可点击元素有 cursor-pointer、hover 有明确反馈、过渡平滑 150-300ms、键盘焦点可见）；明暗模式（浅色文本对比度至少 4.5:1、透明元素浅色下可见、两种模式边框可见、交付前测试两种模式）；布局（浮动元素与边缘间距合适、内容不被固定导航遮挡、在 375px/768px/1024px/1440px 响应式、移动端无横向滚动）；无障碍（图片有 alt、表单输入有 label、颜色不是唯一指示、遵循 prefers-reduced-motion）。

限制

技能的具体授权方式、收费标准、平台支持范围与版本信息，资料中暂未提供。