SuperAPI AI 工具集

ux-audit

前端与建站

查看项目

更新于 10-16 08:08

技能介绍

用途:对 Web 项目执行结构化 UX/UI 审计,分两次会话进行。会话一为发现与评审:扫描代码库、识别问题并与团队交互式逐条确认、否决或重排优先级,产出 reviewed-findings.json。会话二在设计工作(Figma 稿、原型)完成后生成面向客户的报告,含截图、视频走查与交互嵌入。

主要能力:检测技术栈与代码库扫描;设计令牌映射;覆盖 10 个部分的启发式审计;交互式问题评审;报告生成;Figma 交付物与可选令牌 JSON;发布到 Vercel、Netlify 或 Surge。输出格式有 reveal(自包含 reveal.js 幻灯片,支持 ?print-pdf 导出 PDF)、figma(经 Plugin API 直接写入画布,需 Figma Desktop MCP)、html(可滚动单页)。reveal 与 figma 仅适用于 --client 模式;默认客户模式为 reveal,内部模式为 html。

使用方式:先运行 ./scripts/setup.sh 检查依赖(Claude Code CLI、Node.js 18+ 必需;Figma 插件推荐;ripgrep、GitHub CLI 可选)。常用命令为 /ux-audit(会话一)与 /ux-audit report(会话二);进阶可单独运行 /ux-audit scan、tokens、audit、review、report、figma、publish。脚本示例:./scripts/run-audit-agent.sh ~/Development/my-app --client --reveal;./scripts/publish-report.sh。审计模式用 --internal 或 --client 指定,也可在 .ux-audit.json 中设置 audience。配置项包括受众、输出格式、目标设计系统(默认 @rolemodel/optics)、品牌色与字体、作品集与案例研究 URL、Figma 文件键、发布提供商与输出目录。

适用场景:需要系统化评估 Web 项目 UX/UI 质量、设计令牌漂移与无障碍问题的团队,以及需要面向客户的可视化审计交付物的场景。

限制:Figma MCP 调用受套餐每日上限约束(企业 600 次/天,Pro/组织 200 次/天,Starter 或查看/协作席位 6 次/月),完整审计约消耗 20–55 次调用;figma 格式需 Figma Desktop MCP 连接;无 Figma 插件时跳过相关功能,改用 reveal.js 或 HTML 输出;DTCG 令牌 JSON 仅在明确需要可导入令牌产物时生成。其余细节暂未提供。