使用大语言模型 (LLM) 生成代码是开发者目前关注的一个快速增长的领域。虽然 LLM 通常能够生成可运行的代码，但要为 Angular 这种持续演进的框架生成代码，仍是一项挑战。
高级指令和提示词工程是支持现代领域特定代码生成的新兴标准。本节包含精选的内容和资源，旨在帮助提高 Angular 相关代码生成的准确性。
自定义提示词与系统指令
通过使用以下特定于领域的自定义文件，提升您的 LLM 代码生成体验。
注意：这些文件将定期更新，以保持与 Angular 最新规范同步。
这是一套有助于 LLM 生成符合 Angular 最佳实践的正确代码的指令。此文件可以作为系统指令包含在您的 AI 工具中，也可以作为上下文与您的提示词一起使用。
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, 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 in Angular v20+.
- 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.
## Accessibility Requirements
- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
### 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
- When using external templates/styles, use paths relative to the component TS file.
## 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
- Do not assume globals like (`new Date()`) are available.
## Services
- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection
规则文件
包括 Firebase Studio 在内的多个编辑器都支持使用规则文件，这对于向 LLM 提供关键上下文非常有用。
| 环境/IDE | 规则文件 | 安装说明 |
|---|---|---|
| Firebase Studio | airules.md | 配置 airules.md |
| 支持 Copilot 的 IDE | copilot-instructions.md | 配置 .github/copilot-instructions.md |
| Cursor | cursor.md | 配置 cursorrules.md |
| JetBrains IDE | guidelines.md | 配置 guidelines.md |
| VS Code | .instructions.md | 配置 .instructions.md |
| Windsurf | guidelines.md | 配置 guidelines.md |
Angular CLI MCP 服务端设置
Angular CLI 包含一个实验性的 模型上下文协议 (MCP) 服务器，允许您开发环境中的 AI 助手与 Angular CLI 进行交互。
使用 llms.txt 提供上下文
llms.txt 是一项建议标准，旨在帮助 LLM 更好地理解和处理网站内容。Angular 团队开发了该文件的两个版本，以帮助 LLM 和使用 LLM 的工具生成更现代、更优质的 Angular 代码。
- llms.txt - 一个索引文件，提供指向关键文件和资源的链接。
- llms-full.txt - 一组更完备的编译资源，描述了 Angular 的工作原理以及如何构建 Angular 应用程序。
请务必查看概览页面，了解有关如何将 AI 集成到 Angular 应用程序中的更多信息。
Web 代码生成评分器 (Web Codegen Scorer)
Angular 团队开发并开源了 Web Codegen Scorer，这是一个用于评估和衡量 AI 生成的 Web 代码质量的工具。您可以使用此工具做出基于证据的决策，例如通过微调提示词来提高 Angular 相关代码生成的准确性。这些提示词可以作为 AI 工具的系统指令或提示词上下文。您还可以利用该工具比较不同模型生成的代码质量，并随着模型和代理的演进持续监控质量。