古法编程

用 AI 审计网页数据：快速识别 Mock 数据与硬编码

解决“界面好看但数据是假的”痛点：通过 Playwright 驱动浏览器，追踪网页每个可见值的来源，自动判定其为 REAL（真实）、MOCK（模拟）、LLM（AI 生成）或 HARDCODED（硬编码）。

为什么需要这个技能

在当前的“氛围编码（Vibe Coding）”时代，使用 Lovable, v0, Bolt 等 AI 工具快速生成的原型 UI 往往极其精美，但其数据层可能尚未打通。

当你接手一个外包项目、评审队友的交付物，或者在向客户演示 MVP 之前，你无法通过肉眼快速判断页面上的一个数字是来自数据库的真实统计，还是开发者随手写死的一个 42,850。手动检查网络请求和源码非常低效，本技能让 AI 自动完成从“可见值 → 网络请求 → DOM 源码 → 数据库”的溯源分析。

适用场景

  • AI 原型验收：检查由 AI 生成的 UI 中哪些字段真正连接了后端。
  • 交付物评审：在项目签收前，确认所有功能指标是否为真实计算而非 Mock 数据。
  • 数据异常排查：当仪表盘数据“过于完美”（如所有百分比都是 50%、75% 等整数）时，快速验证是否为种子数据。
  • 前端质量审计：识别页面中遗留的硬编码测试文本或失效的 API 接口。

核心工作流

  1. 环境配置与探测：AI 引导用户提供 URL，自动识别技术栈（如 *.v0.app），确认认证方式（公开/表单登录）及操作权限。
  2. 编目与快照：使用 Playwright 访问页面，捕获全页截图和无障碍快照，记录所有标题、按钮、统计卡片等元素。
  3. 交互测试：在用户授权下，点击非破坏性按钮或提交临时表单，观察网络行为和 DOM 变化。
  4. 溯源判定：针对每个可见值运行决策树：
    • 网络请求有值 → 根据状态码（BROKEN）、接口路径（LLM）或数据分布特征（MOCK）判定。
    • 无网络请求 → 检查 DOM 源码（HARDCODED）或计算逻辑（MOCK）。
    • 数据库比对 → 若提供 DB 访问权限，通过只读查询确认是否为 REAL。
  5. 输出报告：生成 mockhunter-report.md，包含判定汇总表、每个元素的详细来源及严重程度。

下载和安装

下载 mock-hunter 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐