企业官网建设流程全解析

Web Codegen Scorer报告查看器完全指南：如何高效对比不同模型、框架与Prompt的生成质量？

【免费下载链接】web-codegen-scorerWeb Codegen Scorer is a tool for evaluating the quality of web code generated by LLMs.项目地址: https://gitcode.com/gh_mirrors/we/web-codegen-scorer

Web Codegen Scorer 是一款专门用于评估大语言模型（LLM）生成 Web 代码质量的开源评测工具，而它的**报告查看器（Report Viewer）**是整个工具最直观的成果展示台：你可以用它快速对比不同模型、框架与 Prompt 下的代码生成表现，查看构建成功率、运行时报错、无障碍、安全等维度的评分，从而做出有数据依据的技术选型决策。

无论你是想迭代系统提示词（System Prompt）、挑选最优代码生成模型，还是监测生成质量随时间的变化，这份指南都会带你从启动到深度对比，完整掌握报告查看器的每个核心功能。

🚀 5分钟启动 Web Codegen Scorer 报告查看器

报告查看器是内置的 Web 应用，无需额外安装，三步即可打开：

1. 全局安装工具（需要 Node.js 环境）：

npm install -g web-codegen-scorer

2. 运行一次评测，生成报告数据。以最简单的 Angular 示例环境为例：

web-codegen-scorer eval --env=angular-example

3. 启动报告查看器，在浏览器打开本地页面（默认端口 4200）：

web-codegen-scorer report

启动命令的核心逻辑位于 runner/report-cli.ts，支持通过--reports-directory指定本地报告目录、--port修改服务端口，还支持--reports-loader加载远程报告，方便团队共享评测结果。

📋 报告列表页：一眼定位每次评测

打开查看器首页就是报告列表页（report-app/src/app/pages/report-list/report-list.html），每次评测（Run）都会生成一张报告卡片，包含：

• 总分（Score）：按百分制展示该次评测的整体得分，分数越高分色越亮眼；
• 模型 / 框架 / Runner 标签：清晰标注本次评测使用的模型（如 Gemini、Claude）、Web 框架和运行器；
• 分数段分布条形图：直观呈现"优秀 / 良好 / 合格 / 较差"各区间的应用数量。

使用筛选器缩小范围

列表顶部的报告筛选器（report-app/src/app/shared/report-filters/report-filters.html）提供四类筛选维度，只有当对应维度存在多个选项时才会显示：

💡小技巧：运行评测时用--labels打上语义化标签（例如prompt-v2、baseline），后续筛选和复盘会省力很多：

web-codegen-scorer eval --env=angular-example --labels baseline

📊 单份报告详情页：深入每一份评测

点击任意报告卡片进入报告详情页（report-app/src/app/pages/report-viewer/report-viewer.html），这是信息最密集的页面，自上而下分为四大板块：

1. 总览卡片：总分、评测名称、时间戳，以及模型、框架、Runner 三大配置项；
2. 维度分布图：构建（Build）、自动修复尝试次数（Repair）、测试（Tests）、运行时（Runtime）、安全（Security）、无障碍（Accessibility）各维度的通过率条形图；
3. 耗时与成本：生成 / 构建 / 修复的均值与中位数耗时，以及输入、输出、思考 Token 用量——评估"性价比"时必不可少；
4. 应用级结果列表：逐条展示每个 Prompt 生成的应用，可展开查看构建错误详情、Lighthouse 分类得分、生成的源码文件，还能一键下载调试压缩包排查问题，甚至内置 AI 助手帮你解读报告。

按失败项过滤应用

详情页提供了"失败检查项"多选过滤：系统会自动统计本次评测中所有未通过的检查（如无障碍、运行时报错），你可以勾选感兴趣的检查项，只看相关的应用结果，快速定位薄弱环节。

⚖️ 对比页面：横向对比多份报告的核心功能

这是回答"哪个模型 / 框架 / Prompt 更好"的关键页面（report-app/src/app/pages/comparison/comparison.ts），使用流程非常简单：

1. 在报告列表页点击Compare按钮进入对比模式；
2. 勾选 2 份及以上的想要对比的报告，再次点击 Compare 进入对比页；
3. 也可以在对比页里自由增删对比对象，并给每份报告重命名（比如改成"Gemini + Angular""Claude + Solid"），让图表更易读。

对比页会自动渲染三组核心图表：

• 分数分布对比（Score Distribution）：不同分数段应用数量的堆叠对比；
• 构建结果对比（Build Distribution）：一次构建通过、修复后通过、构建失败的比例差异；
• 运行时表现对比（Runtime Distribution）：运行时报错率等运行时指标的横向比较。

💡 建议配合--model与--prompt-filter参数分别跑出多份报告再对比，例如先固定模型换框架，再固定框架换模型，就能把"模型 vs 框架"的贡献分离开来：

web-codegen-scorer eval --model=gemini-2.5-flash --env=angular-example

📈 轨迹页面：监测生成质量随时间的变化

除了单次对比，查看器还内置了轨迹（Trajectory）页面（report-app/src/app/pages/trajectory/trajectory.html），同样支持按框架、模型、Runner 和标签筛选，帮助你观察同一配置下评测分数随时间的演变趋势。当你升级了 Prompt 或模型版本后，这里是最直观的"回归监测"看板。

✅ 高效使用工作流清单

• 迭代 Prompt：用--report-name为每版 Prompt 命名，对比页面量化每一版的提升；
• 模型选型：固定环境与 Prompt，只变--model，看构建成功率和运行时错误率差异；
• 省钱调参：加--local参数复用已生成的代码重跑构建与修复流程，不产生 LLM 费用；
• 环境配置：想自定义系统指令或模型时，参考 docs/environment-reference.md 与 docs/model-setup.md 两份官方文档。

常见问题

报告查看器只能看本地报告吗？不是。web-codegen-scorer report支持--reports-loader传入 JS 文件加载远程报告，方便团队集中查看。

这个工具只支持 Angular 吗？支持任意 Web 框架（甚至无框架），项目内置了 Angular 和 Solid 两套示例环境，可在 examples/environments/ 目录下查看其配置结构。

评分颜色代表什么？分数按区间着色：98 分以上为优秀（Excellence），85 分以上为优秀（Great），71 分以上为良好（Good），其余为较差（Poor），规则实现在 report-app/src/app/shared/scoring.ts。

掌握了报告查看器的列表、详情、对比与轨迹四大板块，你就能把"凭感觉选模型"升级为"用数据说话"，让每一次 Prompt 迭代和模型升级都留下可追溯的质量证据。

【免费下载链接】web-codegen-scorerWeb Codegen Scorer is a tool for evaluating the quality of web code generated by LLMs.项目地址: https://gitcode.com/gh_mirrors/we/web-codegen-scorer