Evalua tu codigo generado por AI con Web Codegen Scorer

Hace poco estaba comparando el output de Gemini y Claude para un componente Angular. Los dos compilaban. Los dos "funcionaban". Pero uno usaba *ngFor con trackBy y el otro signals con @for. Ambos modelos producian codigo que pasaba la prueba de "compila y corre", pero solo uno seguia las convenciones actuales del framework.

El problema es que sin metricas concretas, toda comparacion es anecdota. "Mejor" o "peor" no sirve cuando tu jefe te pregunta cual modelo usar en produccion. Necesitas números.

Ahi entra el Web Codegen Scorer.

Que es

Web Codegen Scorer es una herramienta open source desarrollada por el equipo de Angular en Google. Su proposito: evaluar y puntuar la calidad del codigo web generado por LLMs.

"Web Codegen Scorer is a tool for evaluating the quality of web code generated by Large Language Models." - Source: GitHub - angular/web-codegen-scorer

No es otro benchmark generico. Se enfoca especificamente en codigo web y usa metricas establecidas de calidad: build exitoso, errores en runtime, accesibilidad, seguridad, mejores practicas del framework, y una evaluacion automatizada por otro LLM (autorater).

"The speed of AI is very tempting, but the code it produces sometimes isn't code you can actually trust. It's not always production-ready, and this is the central challenge we face as developers today." - Source: Simona Cotin, Google - The New Stack

Por que nació?

La historia es curiosa. Dentro del equipo de Angular en Google, no se ponian de acuerdo sobre cual LLM generaba mejor codigo Angular. Cada developer tenia una experiencia distinta. Uno de ellos se tomo el reto y vibe-codeo un prototipo que pudiera poner numeros a la discusion.

Ese prototipo se convirtio en Web Codegen Scorer.

La herramienta tambien nacio de una necesidad concreta: testear el MCP server de Angular. Cada cambio en el MCP o en las APIs del framework necesitaba una forma de verificar que los LLMs seguian generando codigo correcto.

"Working on this tool was incredibly helpful for us to be able to assess code generation quality, and, more importantly, also be able to iterate on APIs, on some of the AI feature work." - Source: Simona Cotin - The New Stack

Cómo funciona?

El scorer tiene dos componentes principales:

1. Environments

Un "environment" es un conjunto de configuracion para un framework especifico. Incluye system prompts, prompts de aplicacion, y las instrucciones de mejores practicas que el LLM deberia seguir.

El environment de Angular incluye instrucciones como:

# System prompt del environment Angular
You are an expert in TypeScript, Angular, and scalable web application
development. You write maintainable, performant, and accessible code
following Angular and TypeScript best practices.

## Angular Best Practices
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the
  default in Angular v20+.
- Use signals for state management
- Use `input()` and `output()` functions instead of decorators
- Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor
- Use the `inject()` function instead of constructor injection

"Source: Angular Docs - LLM prompts and AI IDE setup"

2. Raters y evaluaciones

Despues de que el LLM genera el codigo, el scorer ejecuta una bateria de checks:

Build: Compila sin errores?
Runtime: Hay errores al ejecutar?
Best practices: Sigue las convenciones del framework?
Accesibilidad: Pasa los checks de Axe (WCAG AA)?
Seguridad: Tiene vulnerabilidades conocidas?
Autorater: Otro LLM evalua la calidad general

Cada check resta puntos de un score de 0 a 100. Una vulnerabilidad de seguridad resta 50 puntos (critico). Un patron no-optimo resta menos.

"Something interesting that we also did was collaborate with one of the Google security teams, and we've added a set of security checks so now we're also validating that the code being generated includes best practices related to security." - Source: Simona Cotin - The New Stack

Instalación y uso

La instalación es directa:

npm install -g web-codegen-scorer

Configura las API keys de los modelos que quieras probar:

export GEMINI_API_KEY="tu-key"
export OPENAI_API_KEY="tu-key"
export ANTHROPIC_API_KEY="tu-key"

Y ejecuta una evaluacion con el environment de Angular:

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

Para crear tu propio environment con tus system prompts y mejores practicas:

web-codegen-scorer init

Los flags mas utiles:

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

# Comparar modelos
web-codegen-scorer eval --model=claude-sonnet-4-5 --env=angular-example

# Usar Claude Code como runner
web-codegen-scorer eval --runner=claude-code --env=angular-example

# Limitar prompts para pruebas rapidas
web-codegen-scorer eval --limit=3 --env=angular-example

Los hallazgos del equipo de Angular

Durante las primeras semanas de uso, el equipo descubrio patrones comunes de fallo en los LLMs. Algunos eran bugs del framework que podian arreglarse. En otros casos, era mas facil modificar Angular para acomodar al LLM.

"We've done a little bit of LLM-hallucination-driven development. We saw some common failure modes, and we were able to actually fix those and make changes to the framework itself so that we would no longer see those errors." - Source: Simona Cotin - The New Stack

Un ejemplo concreto: mejoraron el soporte para clases de Tailwind y la sintaxis de atributos ARIA porque los LLMs tenian problemas consistentes en esas areas.

Iteraron sobre el system prompt hasta que los modelos consistentemente puntuaban entre 97 y 100. Eso les permitio tomar decisiones basadas en datos: el system prompt "corto" inicial no era suficiente, pero el refinado con feedback del scorer si.

No es solo para Angular

Aunque fue creado por el equipo de Angular, la herramienta funciona con cualquier framework web. El equipo de Solid.js fue el primero en crear su propio environment con acceso anticipado.

"We're very grateful to the Angular team for reaching out to us and providing us early access to the Web Codegen Scorer tool. We have used it to test the performance of GPT 5, Claude Sonnet, as well as Gemini models on building a variety of apps using Solid." - Source: Dev Agrawal, Solid.js contributor - The New Stack

La roadmap incluye: Core Web Vitals, interaction testing, y medicion de la efectividad de ediciones LLM sobre codebases existentes.

Mi experiencia

Hace poco estuve probando el scorer para comparar instrucciones de sistema para un proyecto Angular. El resultado fue revelador: el mismo modelo con dos system prompts distintos podia variar 20 puntos en el score. El system prompt es tan importante como el modelo que elijas.

Si ya configure tu proyecto con Genkit y Gemini para AI en Angular, el Web Codegen Scorer te sirve para validar que el codigo que genera tu pipeline de AI sigue las mejores practicas del framework. Y si estas explorando herramientas como Google AI Studio, puedes usar el scorer para medir la calidad de los diferentes modelos antes de comprometerte con uno.

Referencias

Keywords: Web Codegen Scorer, AI code quality, Angular LLM evaluation, vibe coding metrics, AI-generated code scoring

Meta description: Web Codegen Scorer evalua y puntua la calidad del codigo web generado por LLMs con metricas de build, seguridad, accesibilidad y mejores practicas.