Prompts de LLM y configuración de IDE con IA

Generar código con modelos de lenguaje grandes (LLMs) es un área de interés en rápido crecimiento para los desarrolladores. Aunque los LLMs a menudo son capaces de generar código funcional, puede ser un desafío generar código para frameworks en constante evolución como Angular.

Las instrucciones avanzadas y el prompting son un estándar emergente para soportar la generación de código moderna con detalles específicos del dominio. Esta sección contiene contenido y recursos curados para apoyar una generación de código más precisa para Angular y LLMs.

Prompts Personalizados e Instrucciones del Sistema

Mejora tu experiencia generando código con LLMs usando uno de los siguientes archivos personalizados, específicos del dominio.

NOTA: Estos archivos se actualizarán regularmente manteniéndose al día con las convenciones de Angular.

Aquí hay un conjunto de instrucciones para ayudar a los LLMs a generar código correcto que sigue las mejores prácticas de Angular. Este archivo puede incluirse como instrucciones del sistema para tus herramientas de IA o incluirse junto con tu prompt como contexto.

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.## TypeScript Best Practices- Use strict type checking- Prefer type inference when the type is obvious- Avoid the `any` type; use `unknown` when type is uncertain## Angular Best Practices- Always use standalone components over NgModules- Must NOT set `standalone: true` inside Angular decorators. It's the default.- Use signals for state management- Implement lazy loading for feature routes- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead- Use `NgOptimizedImage` for all static images.  - `NgOptimizedImage` does not work for inline base64 images.## Components- Keep components small and focused on a single responsibility- Use `input()` and `output()` functions instead of decorators- Use `computed()` for derived state- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator- Prefer inline templates for small components- Prefer Reactive forms instead of Template-driven ones- Do NOT use `ngClass`, use `class` bindings instead- Do NOT use `ngStyle`, use `style` bindings instead## State Management- Use signals for local component state- Use `computed()` for derived state- Keep state transformations pure and predictable- Do NOT use `mutate` on signals, use `update` or `set` instead## Templates- Keep templates simple and avoid complex logic- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`- Use the async pipe to handle observables## Services- Design services around a single responsibility- Use the `providedIn: 'root'` option for singleton services- Use the `inject()` function instead of constructor injection

Haz clic aquí para descargar el archivo best-practices.md.

Archivos de Reglas

Varios editores, como Firebase Studio tienen archivos de reglas útiles para proporcionar contexto crítico a los LLMs.

Configuración del Servidor MCP de Angular CLI

Angular CLI incluye un servidor de Model Context Protocol (MCP) experimental que permite a los asistentes de IA en tu entorno de desarrollo interactuar con Angular CLI.

Aprende cómo configurar el Servidor MCP de Angular CLI

Proporcionando Contexto con llms.txt

llms.txt es un estándar propuesto para sitios web diseñado para ayudar a los LLMs a entender y procesar mejor su contenido. El equipo de Angular ha desarrollado dos versiones de este archivo para ayudar a los LLMs y herramientas que usan LLMs para generación de código a crear mejor código Angular moderno.

• llms.txt - un archivo índice que proporciona enlaces a archivos y recursos clave.
• llms-full.txt - un conjunto compilado más robusto de recursos que describen cómo funciona Angular y cómo construir aplicaciones Angular.

Asegúrate de consultar la página de visión general para más información sobre cómo integrar IA en tus aplicaciones Angular.

Web Codegen Scorer

El equipo de Angular desarrolló y publicó como código abierto el Web Codegen Scorer, una herramienta para evaluar y puntuar la calidad del código web generado por IA. Puedes usar esta herramienta para tomar decisiones basadas en evidencia relacionadas con código generado por IA, como ajustar prompts para mejorar la precisión del código generado por LLM para Angular. Estos prompts pueden incluirse como instrucciones del sistema para tus herramientas de IA o como contexto con tu prompt. También puedes usar esta herramienta para comparar la calidad del código producido por diferentes modelos y monitorear la calidad a lo largo del tiempo a medida que los modelos y agentes evolucionan.