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