Angular-Entwicklung mit Cursor: Wie AI-Agents die NG-DE Webseite in Rekordzeit gebaut haben

TL;DR: Mit Cursor und AI-Agents haben wir die neue NG-DE Konferenz-Webseite in Rekordzeit entwickelt – in einem Bruchteil der üblichen Zeit. Durch geschickt definierte Rules und Agent-Dialog entstehen moderne Angular-Anwendungen mit 5x weniger Zeitaufwand – ohne dabei auf Code-Qualität zu verzichten.

Die Entwicklung der NG-DE 2025 Webseite war ein Experiment: Kann man mit AI-Agents eine komplexe Angular-Anwendung entwickeln, die sowohl technisch hochwertig als auch wartbar ist? Die Antwort ist ein klares Ja – und die Zeitersparnis ist dramatisch.

Die wichtigsten Punkte

• 🚀 Entwicklungsgeschwindigkeit: 5x schnellere Entwicklung durch Agent-Dialog statt manueller Implementierung
• 🎯 Code-Qualität: Moderne Angular-Patterns durch gut definierte Cursor Rules
• 💡 Workflow: Senior Developer reviewt nur noch, Agents implementieren
• 🔧 Wartbarkeit: Saubere Architektur durch klare Regeln und Strukturvorgaben

Warum Cursor für Angular-Entwicklung?

Die Kombination aus Cursor und Angular ist besonders mächtig, weil Angular bereits ein sehr strukturiertes Framework ist. AI-Agents können diese Struktur verstehen und konsistent anwenden – vorausgesetzt, man gibt ihnen die richtigen Regeln mit auf den Weg.

Das .cursor/rules/angular.md File als Grundlage

Der Schlüssel für erfolgreiche AI-gestützte Angular-Entwicklung liegt in präzisen Regeln. Unser Rules-File definiert klare Standards:

## 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
- Use `input()` and `output()` functions instead of decorators
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator

Diese Regeln sorgen dafür, dass jede AI-generierte Komponente moderne Angular-Patterns verwendet und konsistent mit dem Rest der Anwendung ist.

Responsive Design per Prompt

Ein gutes Beispiel ist die Responsive-Entwicklung. Anstatt mühsam Breakpoints zu definieren und CSS zu schreiben, sagst du dem Agent einfach:

“Die Tickets-Sektion soll auf Mobile einspaltig, auf Tablet zweispaltig und auf Desktop dreispaltig dargestellt werden. Die Karten sollen bei Hover einen subtilen Schatten-Effekt haben.”

Der Agent implementiert nicht nur das gewünschte Layout, sondern achtet auch auf Accessibility und moderne CSS-Features wie CSS Grid:

.ticket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ticket-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ticket-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Inspiration für Timeline Komponente: Digitale Leute Agenda

Ein besonders schönes Beispiel für die Kraft von AI-Agents zeigt sich bei der Entwicklung unserer Agenda-Komponente. Als Inspiration nutzte ich die wunderschön gestaltete Agenda-Seite unserer Freunde von Digitale Leute.

Anstatt mühsam das Design zu analysieren und nachzuprogrammieren, beschrieb ich dem Agent einfach: “Erstelle eine moderne Agenda-Komponente inspiriert von diesem Design mit Timeline-Layout, Hover-Effekten und einer Animation sobald man an die Stelle scrollt.” Das Ergebnis war eine perfekt umgesetzte Angular-Komponente, die das ursprüngliche Design in unsere NG-DE Ästhetik übersetzt hat.

Was mich früher Stunden an CSS-Grid-Fummelei und Responsive-Anpassungen gekostet hätte, war in 15 Minuten erledigt. Der Agent verstand nicht nur die visuelle Anforderung, sondern implementierte auch gleich die passenden TypeScript-Interfaces für die Agenda-Daten und berücksichtigte Accessibility-Standards.

Der neue Entwicklungsworkflow

Der traditionelle Workflow hat sich grundlegend verändert:

Früher:

1. Requirements analysieren (30 min)
2. Architektur planen (60 min)
3. Komponenten implementieren (4 Stunden)
4. Styling und Responsive Design (2 Stunden)
5. Testing und Bugfixes (1 Stunde)

Gesamt: ~8 Stunden

Mit Cursor Agents:

1. Requirements in natürlicher Sprache formulieren (10 min)
2. Agent implementiert und iteriert (10 min)
3. Code Review und Anpassungen (15 min)

Gesamt: ~35 Minuten

Konkrete Regeln für bessere Ergebnisse

Aus der Entwicklung der NG-DE Webseite haben wir gelernt, welche Rules besonders wichtig sind:

Template-Regeln

## Templates

- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`
- Use the async pipe to handle observables
- Do NOT use `ngClass`, use `class` bindings instead
- DO NOT use `ngStyle`, use `style` bindings instead

Diese Regeln sorgen dafür, dass der generierte Code moderne Angular-Features nutzt und performant ist.

State Management mit Signals

## State Management

- Use signals for local component state
- Use `computed()` for derived state
- Do NOT use `mutate` on signals, use `update` or `set` instead

Der Agent wendet diese Regeln konsequent an und generiert Code wie:

export class TicketComponent {
  selectedTicket = signal<Ticket | null>(null);

  totalPrice = computed(() => {
    const ticket = this.selectedTicket();
    return ticket ? ticket.price * ticket.quantity : 0;
  });

  updateQuantity(quantity: number) {
    this.selectedTicket.update(ticket =>
      ticket ? { ...ticket, quantity } : null
    );
  }
}

Tipps für deine eigenen Angular-Projekte

1. Starte mit einem guten Rules-File: Investiere Zeit in die Definition deiner Projektstandards
2. Iteriere in kleinen Schritten: Lass Agents einzelne Features implementieren, nicht die komplette App
3. Review ist essentiell: AI generiert guten Code, aber Senior-Review bleibt wichtig
4. Nutze konkrete Prompts: “Erstelle eine responsive Navbar” ist besser als “Erstelle Navigation”

Performance und Bundle Size

Dank der konsequenten Anwendung moderner Angular-Patterns durch die Agents ist die NG-DE Webseite nicht nur schnell entwickelt, sondern auch performant:

• Initial Bundle Size: 87KB (komprimiert)
• Lighthouse Score: 98/100 (Performance)
• Lazy Loading: Automatisch für alle Feature-Routes implementiert
• OnPush Change Detection: In allen Komponenten aktiviert

Die Zukunft der Angular-Entwicklung

Was wir bei der NG-DE Webseite erlebt haben, ist vermutlich erst der Anfang. AI-Agents werden nicht den Senior Developer ersetzen, aber sie verändern fundamental, womit wir unsere Zeit verbringen:

• Weniger Boilerplate schreiben
• Mehr Zeit für Architektur und komplexe Problemlösungen
• Fokus auf Code Review und Qualitätssicherung
• Schnellere Iteration bei Design-Änderungen

Fazit: 5x schneller ist erst der Anfang

Die Entwicklung der NG-DE Webseite hat gezeigt: Mit den richtigen Tools und Regeln können AI-Agents die Angular-Entwicklung dramatisch beschleunigen. Die 5x Zeitersparnis ist dabei nur der quantifizierbare Teil – die qualitative Verbesserung durch weniger repetitive Arbeit und mehr Fokus auf die wichtigen Entscheidungen ist mindestens genauso wertvoll.

Für Angular-Teams bedeutet das: Wer jetzt die AI-gestützte Entwicklung erlernt, hat in einem Jahr einen enormen Vorsprung gegenüber Teams, die noch traditionell arbeiten.

Nächste Schritte

Möchtest du selbst AI-gestützte Angular-Entwicklung lernen? In unseren Angular-Schulungen zeigen wir dir, wie du Cursor und AI-Agents effektiv in deinen Workflow integrierst – von den Grundlagen bis zu fortgeschrittenen Patterns.

Quellen & Weiterführende Links

• NG-DE 2025 Webseite
• Cursor Documentation
• Angular & Agentic AI Engineering Schulung