5分钟上手Web Codegen Scorer：从安装到跑出第一份LLM代码评测报告的完整新手教程

5分钟上手Web Codegen Scorer从安装到跑出第一份LLM代码评测报告的完整新手教程【免费下载链接】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-scorerWeb Codegen Scorer 是由 Google Angular 团队开源的LLM 代码质量评测工具专门用来评估大语言模型生成的 Web 代码好不好用。它会自动完成生成代码 → 构建 → 运行 → 打分的完整流程从构建成功、运行时错误、可访问性、安全性等多个维度给 LLM 生成的网页应用打分让你用数据而不是感觉来挑选模型、调优提示词。本文是一份面向新手的上手教程只需 3 条命令5 分钟即可跑出你的第一份 LLM 代码评测报告。 Web Codegen Scorer 是什么解决什么问题如果你正在用 Gemini、GPT、Claude 等模型生成前端代码多半遇到过这些疑问换个模型生成的代码质量到底差多少我改了一版系统提示词System Prompt效果真的变好了吗模型升级后代码质量是涨了还是跌了Web Codegen Scorer 正是为解决这些问题而生。它与其他代码基准测试最大的不同在于聚焦 Web 代码并依赖构建成功率、运行时异常、可访问性a11y、安全扫描这些业界成熟的度量标准配合 LLM 自动打分Autorater给出综合分数。它能帮你做到三件事迭代提示词对比不同系统提示词下代码质量的量化差异横向对比模型同一套题目比较不同模型/框架下的产出质量持续监控跟踪模型升级后代码质量的变化趋势下面这张图就是工具生成的评测报告界面一眼就能看到总分和各项指标 安装前准备环境要求与 API Key环境要求非常轻量Node.js npm建议 Node 18 以上至少一个大模型厂商的 API Key工具默认使用gemini-2.5-pro生成代码、gemini-2.5-flash做自动打分见 runner/configuration/constants.ts当然也可以切换到 OpenAI、Anthropic、xAI 的模型。第一步全局安装npm install -g web-codegen-scorer第二步配置 API Key环境变量以 Gemini 为例按需只配置你要用的厂商即可export GEMINI_API_KEY你的API_KEY export OPENAI_API_KEY你的API_KEY # 用 OpenAI 模型时 export ANTHROPIC_API_KEY你的API_KEY # 用 Claude 模型时 export XAI_API_KEY你的API_KEY # 用 xAI Grok 模型时 在 macOS/Linux 的 bash 中可用echo export GEMINI_API_KEY... ~/.bashrc持久化。 5分钟跑通三条命令生成第一份报告Web Codegen Scorer 内置了angular-example和solid-example两套评测环境自带题目和系统提示词零配置即可开跑。命令一运行评测web-codegen-scorer eval --envangular-example这条命令会从内置题库中随机抽取5 个提示词如 Todo 应用、小游戏、表单等题目文件位于 examples/prompts/ 目录调用 LLM 生成 Web 应用代码自动安装依赖、构建项目、启动本地服务器并真实访问页面执行内置检查项打分包括构建是否成功、有无运行时异常、CSS 是否合法、axe 可访问性检测、Safety Web 安全扫描以及 LLM 对代码质量和视觉效果的评分检查项定义见 runner/ratings/built-in.ts构建失败时还会自动让 LLM 尝试修复一次统计修复后成功的情况命令二打开报告评测结束后运行web-codegen-scorer report然后浏览器访问 http://localhost:4200 就能看到下面这样的可视化报告列表和详情页命令三可选本地运行生成的应用想亲眼看下 LLM 写出的应用长什么样web-codegen-scorer run --envangular-example --prompttodo-app报告会存放在项目下的.web-codegen-scorer/reports目录中方便反复回看。 看懂报告核心指标说明报告详情页的每个区块都对应一组评分项指标含义Score总分综合得分0–100由各项检查加权得出Build构建结果一次成功 / 修复后成功 / 失败Runtime应用真实运行时是否抛出异常SecuritySafety Web 等安全扫描的例外数量Accessibilityaxe 可访问性检测的违规数量Usage Details本次评测消耗的输入/输出/总 token 数⚡ 常用命令与参数速查命令/参数用途web-codegen-scorer init交互式向导引导你创建自己的评测环境--model名称指定生成代码的模型如--modelgemini-2.5-flash--limit数量控制本次处理的题目数量默认 5--prompt-filter关键词只跑指定题目方便调试如--prompt-filtertic-tac-toe--concurrency数量并发请求数默认 5--report-name名称自定义报告目录名默认为时间戳--local跳过 LLM 生成直接读取缓存输出重跑评估省 token 费用小技巧先用--prompt-filter只跑 1 道题验证配置没问题再放开--limit跑全量可以大幅节省 API 开销。️ 进阶搭建你自己的评测环境跑通内置示例后下一步就是换成自己的项目。运行web-codegen-scorer init按照交互式提问依次填写框架、模型、题目等即可生成一套完整的环境配置。环境的核心是一个config.js文件例如 Angular 示例的配置只有寥寥几行export default { displayName: Angular (example), clientSideFramework: angular, sourceDirectory: ./project, ratings: getBuiltInRatings(), generationSystemPrompt: ./system-instructions.md, executablePrompts: [../../prompts/**/*.md], packageManager: npm, };完整的配置项说明如何自定义评分、多步骤提示词、MCP 服务等可参考官方文档环境配置参考docs/environment-reference.md如何接入新模型docs/model-setup.mdAngular 环境示例examples/environments/angular/config.js✅ 小结到这里你已经完成了 Web Codegen Scorer 的完整闭环安装 → 配 Key → 跑评测 → 看报告。接下来建议按这个节奏深入用--prompt-filter挑一道题分别对比 2–3 个模型的得分修改system-instructions.md观察提示词对总分的影响用init创建自己业务项目的评测环境把它纳入日常 CI持续监控模型升级带来的质量变化让 AI 写代码不再靠玄学用数据说话吧【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考