mcpField
B
build-review-interface

build-review-interface

github.com/hamelsmu测试与质量1.7k638 次安装11 周前更新
代码仓库

关于 build-review-interface

用于构建自定义轨迹标注界面的技能，面向需要收集人工 Pass/Fail 判断的团队。界面展示单条轨迹，支持备注、延后和导航，并将标注自动保存到本地文件。

主要功能

  1. 01从 JSON 或 CSV 加载轨迹
  2. 02逐条展示轨迹并收集 Pass/Fail
  3. 03添加备注或延后不确定项
  4. 04通过按钮和快捷键导航
  5. 05自动保存标签到本地文件

适用场景

  1. 01为人工审核建立轨迹标注界面
  2. 02让评审者记录失败原因和备注
  3. 03按元数据筛选或查看轨迹

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hamelsmu/evals-skills --skill build-review-interface

安装后在 Claude Code 中输入/build-review-interface确认已加载。

详细介绍

构建自定义标注界面

概述

构建一个 HTML 页面，从数据源（JSON/CSV 文件）加载轨迹，每次显示一条轨迹，并提供通过/失败按钮、自由文本备注字段以及“下一条/上一条”导航。将标签保存到本地文件（CSV/SQLite/JSON）。然后根据以下指南针对具体领域进行定制。

数据展示

使用最符合领域习惯、最易于阅读的形式展示所有数据。电子邮件应呈现为电子邮件的样式。代码应带有语法高亮。Markdown 应进行渲染。表格应呈现为表格。JSON 应美化排版并支持折叠。

  • 折叠重复元素。 如果每条轨迹都包含相同的系统提示词，请将其放入 <details> 开关中。
  • 提取并突出显示关键元数据。 如果轨迹中包含埋在数据里的属性名称、客户端类型或会话 ID，请提取出来，并作为标题或徽标醒目显示。
  • 按角色或状态使用颜色编码。 使用左侧边框颜色区分用户消息、助手消息、工具调用和系统提示词，方便快速查看。
  • 通过视觉方式对相关元素分组。 工具调用及其响应应在视觉上相互关联（例如使用缩进和共享边框）。
  • 折叠无助于判断的内容。 冗长的工具响应 JSON、中间推理步骤和调试上下文应放在开关后面。
  • 突出最重要的内容。 让审核者需要判断的主要内容在视觉上最醒目。将关键实体（价格、日期、姓名）加粗。利用字号和间距营造层次感。
  • 展示完整轨迹。 包含所有中间步骤（工具调用、检索到的上下文、推理），而不仅是最终输出。默认折叠这些内容，但应确保它们仍可访问。
  • 清理渲染内容。 渲染前移除大模型输出中的原始 HTML。如果渲染的 Markdown 中的图片可能用于跟踪像素，则禁用这些图片。

反馈收集

在轨迹级别进行标注。审核者评判的是整条轨迹，而不是单个片段。

  • 将二元“通过/失败”按钮作为主要操作。
  • 提供自由文本备注字段，让审核者描述出了什么问题（或做得好的地方）。
  • 为不确定的情况提供“暂缓”按钮。
  • 每次操作后自动保存。

通过错误分析确定失败类别后，之后可以添加预定义的失败模式标签，形式可以是可点击的复选框、下拉菜单或选项列表，让审核者除了填写备注外，还能从已知类别中进行选择。但初始版本不要添加这些功能。

导航和状态

  • 提供“下一条/上一条”按钮以及键盘方向键导航。
  • 显示轨迹计数器，说明当前位置和进度（“剩余 12 条，共 87 条”）。
  • 支持按 ID 跳转到指定轨迹。
  • 显示已标注和未标注轨迹的数量。

键盘快捷键

Arrow keys = Navigate traces
1 = Pass              2 = Fail
D = Defer             U = Undo last action
Cmd+S = Save          Cmd+Enter = Save and next

选择要加载的轨迹

构建应用，使其能够接受来自任意数据源（JSON/CSV 文件）的轨迹。将抽样逻辑放在应用之外的独立脚本中。首先使用随机抽样。

其他功能

参考面板： 可切换的面板，用于在轨迹旁显示标准答案、预期回答或评分标准定义。

筛选： 根据与产品相关的元数据维度（渠道、用户类型、流水线版本）筛选轨迹。

聚类： 按元数据或语义相似度对轨迹分组。显示每个集群的代表性轨迹，并支持深入查看。

设计检查清单

  • 每条轨迹使用相同的布局、控件和术语
  • “通过”和“失败”按钮在视觉上有所区别（颜色、大小）
  • 键盘快捷键适用于所有主要操作
  • 即使内容折叠，也能访问完整轨迹
  • 标签自动保存，无需显式操作
  • 默认在轨迹级别进行标注（而非片段级别）
  • 所有数据均以原生格式渲染（Markdown 渲染为 HTML，代码带语法高亮，JSON 美化排版，表格渲染为 HTML 表格，URL 显示为可点击链接）

测试

构建界面后，使用 Playwright 对其进行验证。

视觉审查： 加载具有代表性的跟踪数据后，截取界面截图。检查每张截图，确认以下方面：

  • 布局和间距：视觉层次是否清晰？是否能立即看出重点？
  • 可读性：所有数据是否都以原生格式呈现？是否存在原始 JSON 块、未渲染的 Markdown 或未设置样式的内容？
  • 美观度：界面是否专业、简洁？领域专家会使用它吗？
  • 响应性：不同窗口尺寸下，布局是否都能正常显示？

功能测试： 编写一个 Playwright 脚本，完成完整的标注工作流：

  1. 加载应用并确认跟踪记录已显示
  2. 点击某条跟踪记录上的 Pass，确认标签已保存
  3. 点击某条跟踪记录上的 Fail，添加备注，并确认二者均已保存
  4. 点击 Defer，确认该操作已记录
  5. 使用按钮和键盘快捷键向前和向后导航
  6. 确认跟踪记录计数器更新正确
  7. 重新加载页面，检查标签是否保留，以确认自动保存生效
  8. 展开折叠的部分（系统提示词、工具调用），并确认其内容可访问
  9. 测试所有键盘快捷键是否都能触发正确操作

评论

支持 Markdown