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

ui-ux-scan

测试与质量

查看项目

更新于 10-16 08:19

技能介绍

UI/UX Deficiency Scan 用于发现常见的影响用户体验的 UI/UX 问题，无需注册。

用途 该技能面向页面级 UI/UX 快速扫描，帮助识别触控目标、对比度、字体一致性、间距、空状态、加载指示和常见 UX 反模式等问题。

前提条件 需要 Playwright MCP（Claude Code 自带）。

触发方式 用户可通过以下类似指令触发：

  • "Scan UX issues on https://..."
  • "Check UI quality of my site"
  • "Find design problems on this page"
  • "UX review this URL"

工作流程

  1. 使用 mcp__playwright__browser_navigate 导航到 URL。
  2. 使用 mcp__playwright__browser_take_screenshot 截取整页截图。
  3. 使用 mcp__playwright__browser_snapshot 获取无障碍快照。
  4. 针对每个类别使用 mcp__playwright__browser_evaluate 运行评估脚本。

检查项 触控与点击目标 通过脚本查找小于 44x44px 的可交互元素（a、button、input、select、[role="button"]），并收集其标签、文本、宽高等信息；凡是小于 44x44px 的交互元素会被标记。

字体一致性 统计页面中出现的字体族和字号。若字体族超过 3 种，或不同字号超过 8 种，则会被标记。

间距与对齐 检查相邻元素内边距/外边距是否一致；标记文本距离边缘过近（内边距小于 8px）；标记元素重叠或被裁剪。

空状态 检查列表/网格是否 0 项且没有“空”提示；检查空白无内容区块；标记仍可见的占位文本（"Lorem ipsum"、"TODO"、"placeholder"）。

加载与反馈 检查按钮是否有 cursor: pointer；检查表单是否有可见的提交反馈；标记没有文本或 aria-label 的按钮/链接。

视觉层级 检查 CTA 按钮是否视觉上区分明显（大小、颜色、对比度）；标记一个屏幕上有超过 3 个相互竞争的主 CTA；检查标题字号是否按 h1 > h2 > h3 递减。

常见反模式

  • 大段文字墙（段落超过 200 词且无换行）
  • 缺少 favicon
  • 缺少 meta viewport 标签
  • 禁用右键或文本选择（对用户不友好）
  • 自动播放音频/视频
  • 粘性元素覆盖超过 20% 视口

在扫描过程中，还会导航到 2-3 个关键页面（如 about、pricing、login，若存在）并重复上述检查。

评级 A（0-2 个问题）、B（3-5）、C（6-10）、D（11-15）、F（16+）。

输出格式 输出为 Markdown 报告，包含标题、评级、检查页面数、问题数，问题分为“严重”和“警告”两类，并列出通过项。示例结构如下：

UI/UX Scan: [URL]

Grade: C | Pages checked: 3 | Issues: 8

Critical

  1. [TOUCH] 12 buttons smaller than 44x44px

    • "Subscribe" button: 32x28px
    • Nav links: 40x20px each

  2. [HIERARCHY] No clear primary CTA on homepage

    • 4 competing buttons with similar styling above the fold

Warnings

  1. [FONTS] 5 different font families detected

    • Inter, Roboto, Arial, Georgia, monospace
    • Recommend consolidating to 2 families max

  2. [SPACING] Inconsistent card padding

    • Feature cards: 16px, 24px, 20px (should be uniform)

  3. [EMPTY] Search results page shows blank when no results

    • No "No results found" message

  4. [FEEDBACK] 3 buttons missing cursor: pointer

    • "Download", "Share", "Export"

  5. [TEXT] Wall of text on /about (340 words, no breaks)

  6. [CONTRAST] Footer links on dark background — low contrast

Passed

  • Meta viewport: OK
  • Favicon: OK
  • Heading hierarchy: OK
  • No auto-play media
  • Text selection not blocked

适用场景 适合对网站或页面进行快速 UI/UX 质量审查，尤其是需要在开发或测试流程中低成本发现常见交互与视觉问题的情况。

限制 资料中未说明除 Playwright MCP 之外的其他平台或工具限制，也暂未提供关于定价、收费、更详细平台支持范围的信息。