SuperAPI AI 工具集

ui-audit

设计与创作

查看项目

更新于 10-15 17:26

技能介绍

用途:对已渲染界面做视觉优先的 UI/UX 审计,判断界面是否“看起来对、读起来对、翻译得对”,输出结构化、可执行的缺陷报告。它不运行功能性通过/失败流程测试。

可审计输入:实时 URL(用浏览器工具渲染并在多个视口与语言下截图)、截图/图片(直接审计)、设计导出(Figma/PNG/PDF 静态稿)、项目源码(本地服务后渲染,并检查 CSS/组件/i18n 文件)。若同时有渲染与源码,用渲染看缺陷、用源码确认根因与修复。

渲染工具优先级:浏览器 MCP 工具(Playwright/Chrome DevTools)为首选,其次 Playwright CLI,再次用户提供的截图,最后为仅源码的静态分析(需说明结论未经视觉确认)。本地项目先服务:npx serve . 或 python -m http.server 8080,再渲染 http://localhost:<port>,避免 file://。

工作流:1 界定范围(页面、视口、语言);2 截取桌面与移动端及各语言截图;3 运行 scripts/ui_checks.js 获取程序化线索(溢出、对比度、点击目标、缺失 alt、坏图、标题层级、检测到的语言、泄漏的 i18n 键、undefined/NaN/[object Object] 等技术垃圾、溢出文本节点等),这些只是线索,须逐条目视确认;4 按类别审计;5 多语言时做专门本地化审计;6 按严重级别排序并附健康摘要输出报告。

审计类别:布局/网格/构图、排版、颜色与对比、图标与媒体、UI 状态与交互、导航与信息架构、表单、无障碍、内容与本地化、响应式与性能(视觉)、视觉噪声与焦点、安全与用户控制(仅界面可见提示)。

缺陷记录格式:严重级别标题,含 Category、Where、Symptom、Impact、Fix、Evidence;症状与影响须分开,修复建议要具体。严重级别:Critical(阻断使用或内容错乱,上线前必改)、High、Medium、Low;不确定时取下限并说明。

本地化审计:检测产品所有语言(语言切换器、html lang、hreflang、URL 模式、i18n 资源文件),逐语言做视觉检查(溢出/截断、布局破坏、RTL、未翻译/混语言、编码乱码、图中文字),有源码时检查缺失键/回退泄漏、原始键、占位符不匹配、复数形式、硬编码字符串,并检查日期、数字、货币、时间等区域格式。默认语言往往看不到翻译缺陷,必须查看其他语言。

输出结构:标题、Summary(1–2 段健康概览)、Findings(按 Critical/High/Medium/Low)、Localization(逐语言说明或注明单语言产品跳过)、Coverage(已审计的屏幕/视口/语言及跳过项)。可选生成自包含 HTML 报告(内联 CSS、base64 图片),保存到工作目录并给出路径。

常见情形:仅有截图则跳过自动化信号并说明无法程序化运行的检查;需登录的界面请索取测试凭据或只审计公开界面;单页应用等待完整渲染并检查控制台错误;大型应用聚焦高流量屏幕与主流程屏幕并列出未覆盖项;语言过多时审计默认语言加差异最大的语言并说明抽样;未提供设计系统时从重复中推断并用其自身最常见值标记偏差。

限制:仅界面可见层面,深度安全审查不在范围内;自动化脚本为保守启发式,不能替代人的视觉判断;本资料未提供具体收费、价格与平台信息。