Webanwendungen entwickeln mit Claude und anderen KI-Agenten
Kurzbeschreibung
KI-Agenten revolutionieren die Webentwicklung: Was früher Stunden dauerte, entsteht heute in Minuten. In diesem 2-tägigen Praxisseminar lernen Sie, wie Sie Claude Code, GitHub Copilot, Cursor und andere KI-Tools gezielt einsetzen, um Webanwendungen zu planen, zu entwickeln und zu warten. Sie arbeiten von Anfang an hands-on — vom Prompt-Engineering über Frontend- und Backend-Generierung bis hin zu Tests, Code-Reviews und Deployment. Am Ende des Seminars haben Sie nicht nur eine funktionsfähige Webanwendung gebaut, sondern wissen auch, welches Tool wann die beste Wahl ist und worauf Sie bei KI-generiertem Code achten müssen.
Zielgruppe
- Webentwickler:innen (Frontend, Backend oder Fullstack), die KI-Tools produktiv in ihren Workflow integrieren möchten
- IT-Projektleiter:innen und technische Leads, die das Potenzial von KI-gestützter Entwicklung bewerten wollen
- Quereinsteiger:innen mit Grundkenntnissen in HTML/CSS/JS, die ihre Produktivität durch KI-Agenten steigern möchten
Lernziele
Nach diesem Seminar können die Teilnehmer:innen:
- KI-Agenten gezielt einsetzen — Prompts formulieren, die präzise und verwertbare Ergebnisse für Frontend, Backend und Datenbank liefern
- Projektkontext effektiv bereitstellen — mit CLAUDE.md, .cursorrules und ähnlichen Konfigurationen die Codequalität der KI-Ausgabe steuern
- Tools bewerten und auswählen — Stärken und Schwächen von Claude Code, Copilot, Cursor und Windsurf kennen und situationsgerecht einsetzen
- KI-generierten Code kritisch prüfen — Sicherheitslücken, Architekturprobleme und typische Fehler erkennen und beheben
- Vollständige Webanwendungen mit KI-Unterstützung bauen — vom Datenbankschema über die API bis zur fertigen Oberfläche
- KI in bestehende Workflows integrieren — Git, Code-Reviews, Tests und Deployment mit KI-Agenten verbinden
Grundlagen & Einzelkomponenten
Einführung & Landscape
- Überblick: KI-Agenten im Webentwicklungs-Workflow (Claude Code, Copilot, Gemini, …)
- Wie LLMs Code verstehen und generieren — Möglichkeiten und Grenzen
- Erstes Projekt mit Claude Code aufsetzen
Frontend mit KI-Unterstützung
- HTML/CSS/JS-Scaffolding per Prompt
- Komponenten generieren (Formulare, Tabellen, Navigation)
- Praxis: Landing Page mit Claude bauen
- Prompt-Engineering für UI-Aufgaben: präzise Anweisungen, Kontext geben
Backend & Datenbank
- API-Endpunkte generieren (PHP, Node.js oder Python)
- Datenbankschema entwerfen mit KI-Unterstützung
- SQL-Migrationen und Seed-Daten erstellen lassen
- Sicherheit: SQL-Injection, XSS — was die KI richtig macht und wo man prüfen muss
Hands-on Projekt
- Übung: CRUD-Webanwendung von Grund auf mit KI-Agent erstellen
- Arbeiten mit Projektkontext (CLAUDE.md, .cursorrules, etc.)
- Code-Review: Was hat die KI gut gemacht, wo muss nachgebessert werden?
Integration, Workflows & Praxisprojekt
Fortgeschrittene Techniken
- Multi-File-Editing und Refactoring mit KI-Agenten
- Tests generieren und Bugs fixen lassen
- Git-Workflows: Commits, PRs, Code-Reviews mit KI-Unterstützung
- MCP-Server und Tool-Integration (Datenbanken, APIs, Browser)
Agenten vergleichen & kombinieren
- Claude Code vs. GitHub Copilot vs. Cursor vs. Windsurf — Stärken und Schwächen
- Wann welches Tool? Entscheidungshilfen für den Alltag
- KI-Agenten in bestehende Projekte integrieren
- Kosten, Datenschutz und Unternehmenseinsatz
Hands-on Projekt
- Praxisprojekt: Vollständige Webanwendung mit KI-Unterstützung
- Frontend, Backend, Datenbank, Deployment-Konfiguration
- Teilnehmer arbeiten in Kleingruppen mit verschiedenen KI-Tools
- Troubleshooting: Wenn die KI nicht das liefert, was man will
Best Practices & Abschluss
- Prompt-Patterns für wiederkehrende Webentwicklungs-Aufgaben
- Qualitätssicherung: Code-Review-Checkliste für KI-generierten Code
- Diskussion: Wie verändert sich die Rolle des Entwicklers?
- Fragen, Feedback, weiterführende Ressourcen
Dauer: 2 Tage Praxisseminar
Häufige Fragen (FAQ)
Welche Programmiersprachen und Frameworks werden im Kurs unterstützt?
Der Workshop ist methodisch aufgebaut und technologieoffen. Wir demonstrieren Workflows primär anhand gängiger Web-Stacks (z. B. PHP, JavaScript/TypeScript, Python, React, modernem HTML/CSS und SQL), gehen aber flexibel auf den bevorzugten Technologie-Stack Ihres Entwicklungsteams ein.
Wie bleibt mein Quellcode und mein Betriebsgeheimnis beim Einsatz von KI-Tools geschützt?
Datenschutz und IP-Schutz sind zentrale Themen des Kurses. Wir behandeln die DSGVO-konforme Nutzung über API-Schnittstellen (Zero-Data-Retention-Policies), zeigen den sicheren Einsatz lokaler Open-Source-Modelle über Ollama für sensible Daten und konfigurieren Ignore-Regeln, damit Betriebsgeheimnisse und .env-Dateien niemals an externe LLMs gesendet werden.
Welche Vorkenntnisse sollten die Teilnehmer mitbringen?
Teilnehmer sollten praktische Erfahrung in der Webentwicklung (Frontend oder Backend) und im Umgang mit Git mitbringen. Vorkenntnisse im Prompt-Engineering oder in der KI-Programmierung sind nicht erforderlich – der Kurs führt systematisch von den Grundlagen bis zur Automatisierung mit autonomen Coding-Agenten.