Cursor und Claude Code für Websites: Workflows, die Zeit sparen

Cursor ist ein Code-Editor, der auf der gleichen Basis wie Visual Studio Code aufbaut, mit KI-Funktionen für Chat, Inline-Bearbeitungen und einem Agenten-Modus, der mehrere Dateien gleichzeitig ändern kann. Er kann Modelle von verschiedenen Anbietern nutzen.

Claude Code ist das Kommandozeilen-Coding-Tool von Anthropic. Es läuft in einem Terminal oder innerhalb von Editoren, liest das Projekt, führt Befehle aus und bearbeitet Dateien mit der Zustimmung des Entwicklers. Teams fügen oft eine Projektnotizdatei hinzu, wie z. B. CLAUDE.md, die dem Tool Konventionen und anfällige Teile der Codebasis mitteilt.

Andere Tools in diesem Bereich sind GitHub Copilot, Windsurf und OpenAIs Codex. Die unten aufgeführten Workflows gelten für die meisten von ihnen.

Die Fehlerbehebung ist der Bereich, in dem sich diese Tools oft zuerst auszahlen, da die Aufgabe ein klares Ende hat: Der Fehler ist behoben und nichts anderes ist kaputt gegangen.

• Beschreiben Sie den Fehler als kurzen Bericht: Seite, Schritte zur Reproduktion, erwartetes und tatsächliches Ergebnis
• Geben Sie dem Tool den Bericht und bitten Sie es, die Ursache zu finden, bevor Sie etwas ändern
• Überprüfen Sie die Erklärung; wenn sie falsch ist, korrigieren Sie sie frühzeitig
• Lassen Sie es eine Korrektur vorschlagen, die auf die betroffenen Dateien beschränkt ist
• Führen Sie die Website lokal aus und überprüfen Sie die Seite auf Mobil- und Desktop-Breiten
• Committen Sie mit einer Nachricht, die die Ursache erklärt, nicht nur die Korrektur

Zuerst nach der Ursache zu fragen, verhindert, dass das Tool nur Symptome flickt. Eine falsche Theorie, die bei Schritt drei erkannt wird, spart später eine Stunde Arbeit beim Rückgängigmachen.

Das Hinzufügen einer Preistabelle, eines Testimonial-Sliders oder eines FAQ-Blocks ist Routinearbeit mit vielen kleinen Entscheidungen über Benennung, Styling und Struktur.

Schritte

• Weisen Sie das Tool auf eine bestehende Komponente hin, die dem Hausstil folgt
• Beschreiben Sie die neue Komponente: Inhaltsfelder, Layout auf Mobilgeräten und Desktop, Anforderungen an die Barrierefreiheit
• Bitten Sie es, dieselbe Dateistruktur und CSS-Benennung zu befolgen
• Überprüfen Sie das Markup auf Überschriftenreihenfolge, Labels und Tastaturunterstützung
• Testen Sie mit echtem Inhalt, einschließlich langem Text und fehlenden Bildern

In einem WordPress-Block-Theme könnte dies zum Beispiel ein neues Block-Pattern plus eine CSS-Datei bedeuten, die in der Asset-Liste des Themes registriert ist. Dem Tool mitzuteilen, wo sich diese Liste befindet, verhindert einen häufigen Fehler: Styles, die geschrieben, aber nie geladen wurden.

KI-Coding-Tools können kleine Skripte schreiben, die viele Seiten gleichzeitig überprüfen. Dies ist nützlich für Audits, die manuell langweilig wären.

• Fragen Sie nach einem Skript, das eine Liste von URLs abruft und Titellänge, Meta-Beschreibung, H1-Anzahl und Bild-Alt-Text überprüft
• Führen Sie es zuerst auf einer Staging-Kopie aus
• Überprüfen Sie die Ausgabe als Tabelle
• Bitten Sie das Tool, Probleme nach Template zu gruppieren, da eine Template-Korrektur oft Hunderte von Seiten abdeckt
• Korrigieren Sie das Template, führen Sie das Skript erneut aus und vergleichen Sie

Das Verschieben von Inhalten von einer alten Website, das Bereinigen von HTML oder das Massenaktualisieren von Beiträgen ist riskant. Ein von einem KI-Tool geschriebenes Skript kann schnell erstellt, aber gefährlich in der Ausführung sein.

• Sichern Sie die Datenbank vor jedem Durchlauf
• Fragen Sie nach einem Trockenlauf-Modus, der Änderungen meldet, ohne sie zu speichern
• Testen Sie mit zehn Datensätzen, dann hundert, dann allen
• Machen Sie das Skript sicher für eine zweimalige Ausführung, damit ein erneuter Durchlauf keine Duplikate erstellt
• Führen Sie ein Protokoll der geänderten Datensatz-IDs

Diese Tools handeln schnell und können mit Überzeugung falsch liegen. Regeln verhindern, dass kleine Fehler die Besucher erreichen.

• Arbeiten Sie mit Versionskontrolle und überprüfen Sie jeden Diff vor dem Commit
• Geben Sie dem Tool niemals Produktionsanmeldeinformationen oder Live-API-Schlüssel
• Führen Sie nach jeder Änderung Tests und Linter aus, zum Beispiel php -l für PHP-Dateien
• Halten Sie eine Projektnotizdatei mit Konventionen und bekannten Fallen auf dem neuesten Stand
• Bitten Sie das Tool, jede Änderung zu erklären, die Sie nicht verstehen
• Beschränken Sie Berechtigungen: Genehmigen Sie Befehle, die Dateien löschen oder die Datenbank berühren

Eine Projektnotizdatei zahlt sich schnell aus. Wenn das Tool weiß, dass ein bestimmtes Template nicht gelöscht werden darf oder dass Styles in separaten Dateien liegen, hört es auf, dieselben Fehler zu wiederholen.

Das Bauchgefühl ist hier ein schlechter Ratgeber. Entwickler fühlen sich mit KI-Tools oft schneller, selbst bei Aufgaben, bei denen Review und Nacharbeit den Gewinn auffressen. Verfolgen Sie stattdessen einen Monat lang ein paar Zahlen.

• Zeit vom Aufgabenstart bis zur zusammengeführten Änderung, nach Aufgabentyp
• Anzahl der Review-Runden vor der Genehmigung
• In der Woche nach der Veröffentlichung gefundene Fehler
• Rückgängig gemachte Commits

Vergleichen Sie die Zahlen mit einem ähnlichen Monat vor den Tools. Einige Aufgabentypen werden klare Gewinne zeigen, andere keine; verlagern Sie die KI-Nutzung auf die erste Gruppe.