Angular-Entwicklung mit Cursor: Wie AI-Agents die NG-DE Webseite in Rekordzeit gebaut haben
angular typescript ai-development cursor agents | Robin Böhm • | 7 Minuten
TL;DR: Mit Cursor und AI-Agents haben wir die neue NG-DE Konferenz-Webseite in einem Bruchteil der üblichen Zeit entwickelt. 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. Da
Der neue Entwicklungsworkflow
Der traditionelle Workflow hat sich grundlegend verändert:
Früher:
- Requirements analysieren (30 min)
- Architektur planen (60 min)
- Komponenten implementieren (4 Stunden)
- Styling und Responsive Design (2 Stunden)
- Testing und Bugfixes (1 Stunde)
Gesamt: ~8 Stunden
Mit Cursor Agents:
- Requirements in natürlicher Sprache formulieren (10 min)
- Agent implementiert und iteriert (30 min)
- Code Review und Anpassungen (45 min)
Gesamt: ~1,5 Stunden
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 {
// Signal-based state
selectedTicket = signal<Ticket | null>(null);
// Computed derived state
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
- Starte mit einem guten Rules-File: Investiere Zeit in die Definition deiner Projektstandards
- Iteriere in kleinen Schritten: Lass Agents einzelne Features implementieren, nicht die komplette App
- Review ist essentiell: AI generiert guten Code, aber Senior-Review bleibt wichtig
- 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
Robin Böhm
Robin beschäftigt sich seit 2012 intensiv mit der Erstellung client-seitiger Web-Applikationen. 2014 hat er das erste deutschsprachige Buch zum Thema AngularJS geschrieben und ist Mitgründer der Platform Angular.DE. Mit seinem Schulungs-Team hat er bereits über 1200 Unternehmen den erfolgreichen Start mit Angular ermöglicht.
