
Anpassungen: Mit einem AI IDE kommunizieren
Effektiv mit Cursor kommunizieren — Die Kunst des Prompting
Du hast deine erste Website erstellt — großartig! Aber jetzt kommt der Teil, der den Unterschied zwischen einer guten und einer herausragenden Website macht: Die fortlaufenden Anpassungen und Verbesserungen.
In diesem Tutorial lernst du, wie du effektiv mit Cursor kommunizierst, um schnell und präzise die Änderungen zu bekommen, die du dir vorstellst. Denn die Qualität deiner Ergebnisse hängt direkt von der Qualität deiner Kommunikation ab.
Grundlagen der Cursor-Kommunikation
Cursor bietet mehrere Wege, mit der KI zu interagieren:
Chat (Cmd+L / Ctrl+L)
Für Fragen, Erklärungen und kleinere Änderungen.
- Fragen stellen: "Was macht diese Funktion?"
- Code erklären lassen
- Kleine Änderungen an einzelnen Dateien
- Debugging-Hilfe
Composer (Cmd+I / Ctrl+I)
Für größere Änderungen über mehrere Dateien.
- Neue Features implementieren
- Mehrere Dateien gleichzeitig ändern
- Größere Refactorings
- Komplette Sektionen erstellen
Inline Edit (Cmd+K / Ctrl+K)
Für schnelle Änderungen an markiertem Code.
- Markiere Code, drücke Cmd+K
- Beschreibe die Änderung
- Perfekt für kleine Fixes
Tab Completion
Automatische Code-Vervollständigung.
- Während du tippst, schlägt Cursor Code vor
- Mit Tab akzeptieren
- Beschleunigt das Coding enorm
Die Anatomie eines guten Anpassungs-Prompts
Ein effektiver Prompt für Anpassungen folgt dieser Struktur:
1. KONTEXT: Was ist die aktuelle Situation?
ZIEL: Was soll erreicht werden?
DETAILS: Wie genau soll es aussehen/funktionieren?
EINSCHRÄNKUNGEN: Was soll NICHT geändert werden?
Beispiel: Schlechter vs. Guter Prompt
Schlechter Prompt
"Mach die Navigation besser"
Problem: Was bedeutet "besser"? Welche Navigation? Wie soll sie aussehen?
Guter Prompt
"In der Header-Navigation (src/components/Header.tsx): Füge einen Hover-Effekt hinzu, bei dem die Links unterstrichen werden. Die Unterstreichung soll animiert von links nach rechts einfahren. Farbe: Die Akzentfarbe #E07A5F. Die aktuelle Struktur und Position der Navigation soll unverändert bleiben."
Ergebnis: Exakt das, was du wolltest.
Kontext-Techniken für bessere Ergebnisse
Technik 1: Dateien referenzieren
Sage Cursor genau, welche Dateien betroffen sind:
"In src/components/Hero.tsx: Ändere die Headline von 'Willkommen' zu 'Gewinne deine ersten Kunden'"
Technik 2: @-Mention für Dateien
Du kannst Dateien direkt im Chat erwähnen:
"@src/components/Hero.tsx — Füge unter der Headline eine Subheadline hinzu: 'Authentisches Marketing für Coaches'"
Technik 3: Code-Selection
Markiere den relevanten Code-Abschnitt, bevor du den Chat öffnest. Cursor sieht dann automatisch, worüber du sprichst.
Technik 4: Screenshots beschreiben
Wenn du auf etwas Visuelles verweist:
"Der blaue Button ganz unten auf der Startseite, der 'Kontakt' sagt — ändere die Farbe zu Terracotta (#E07A5F) und den Text zu 'Jetzt Termin buchen'"
Häufige Anpassungen und ihre Prompts
Farben ändern
Global (in Tailwind Config)
"Ändere in tailwind.config.ts die Primärfarbe von Blau zu Terracotta (#E07A5F). Alle Stellen, die die alte Primärfarbe nutzen, sollen automatisch die neue verwenden."
Einzelne Elemente
"Ändere nur die Farbe des CTA-Buttons in der Hero-Section zu einem dunklen Grün (#2D5A3D). Der Rest der Seite soll unverändert bleiben."
Texte anpassen
"Ersetze in der Über-mich-Section den Platzhaltertext durch folgenden Text: [Dein Text hier]. Behalte das vorhandene Styling und Layout bei."
Abstände ändern
"Erhöhe den vertikalen Abstand zwischen den Sektionen auf der Startseite. Aktuell sind es etwa 60px, mach daraus 100px. Nutze dafür die Tailwind-Klassen py-24 oder ähnlich."
Schriften ändern
"Ändere die Headline-Schrift zu einer Serifenschrift. Nutze 'Playfair Display' von Google Fonts für alle h1, h2 und h3 Elemente. Body-Text soll bei Inter bleiben."
Animationen hinzufügen
"Füge Scroll-Animationen hinzu: Sektionen sollen beim Scrollen sanft einfahren (fade-in von unten, 300ms Dauer). Nutze eine Library wie framer-motion oder CSS-only falls möglich."
Debugging mit Cursor
Wenn etwas nicht funktioniert, ist Cursor dein bester Debugging-Partner.
Fehler beheben
"Ich bekomme diesen Fehler in der Konsole:
TypeError: Cannot read properties of undefined (reading 'map')
at Services (Services.tsx:23)Bitte analysiere das Problem und behebe es."
Unerwartetes Verhalten erklären
"Der Button sollte das Formular absenden, aber nichts passiert. Ich sehe auch keine Fehlermeldung. Kannst du prüfen, was in @src/components/ContactForm.tsx passiert?"
Layout-Probleme
"Auf Mobile (unter 768px) überlappt die Navigation das Logo. Kannst du das responsive Verhalten in @src/components/Header.tsx fixen?"
Fortgeschrittene Kommunikations-Strategien
Strategie 1: Inkrementelles Vorgehen
Statt alles auf einmal zu ändern, arbeite in kleinen Schritten:
- Erst die Struktur
- Dann das Styling
- Dann die Funktionalität
- Dann die Animationen
Strategie 2: Referenz-Websites
"Die Testimonial-Section soll ähnlich aussehen wie auf stripe.com/customers — ein horizontales Carousel mit Logos oben und Zitaten darunter."
Strategie 3: Negativ-Anweisungen
Manchmal ist es hilfreich zu sagen, was NICHT passieren soll:
"Füge einen Schatten zum Card-Element hinzu. Aber ändere NICHT die Randfarbe, NICHT die Innenabstände und NICHT die Textformatierung."
Strategie 4: Beispiel-Code zeigen
Wenn du weißt, wie etwas aussehen soll, zeige ein Beispiel:
"Füge einen Button hinzu, der so aussieht:
<button className="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors">
Jetzt starten
</button>Aber mit dem Text 'Termin buchen' und der Farbe Terracotta."
Wenn Cursor nicht versteht
Manchmal liefert Cursor nicht das gewünschte Ergebnis. Hier sind Strategien:
1 Präziser werden
Füge mehr Details hinzu. Welche Datei? Welche Zeile? Welche CSS-Klassen?
2 Kontext geben
Erkläre das Gesamtziel: "Ich will erreichen, dass... Aktuell passiert aber..."
3 Aufteilen
Teile komplexe Anfragen in mehrere einfache auf.
4 Neu starten
Manchmal hilft ein frischer Chat ohne die vorherige Konversation.
5 Selbst Hand anlegen
Bei kleinen Änderungen ist es manchmal schneller, selbst zu editieren. Du lernst dabei auch!
Dokumentation deiner Änderungen
Es ist sinnvoll, wichtige Entscheidungen zu dokumentieren. Bitte Cursor:
"Erstelle eine README.md mit einer Übersicht über die Projektstruktur, die verwendeten Technologien und wichtige Konfigurationen."
Oder für spezifische Komponenten:
"Füge einen Kommentar am Anfang der ContactForm-Komponente hinzu, der erklärt, wie das Formular funktioniert und welche Umgebungsvariablen es braucht."
Best Practices zusammengefasst
Tu das:
- Sei spezifisch und detailliert
- Referenziere Dateien und Zeilen
- Beschreibe das gewünschte Ergebnis
- Arbeite in kleinen Schritten
- Gib Kontext zum Gesamtprojekt
- Nutze Beispiele und Referenzen
- Sage auch, was NICHT geändert werden soll
Vermeide das:
- Vage Anweisungen ("mach es besser")
- Zu viele Änderungen auf einmal
- Widersprüchliche Anforderungen
- Annahmen, dass Cursor "weiß", was du meinst
- Ignorieren von Fehlermeldungen
- Änderungen ohne zu prüfen, ob sie funktionieren
Checkliste: Effektive Kommunikation
Vor jedem Prompt, prüfe:
- ☐ Habe ich die betroffene Datei genannt?
- ☐ Ist klar, WAS geändert werden soll?
- ☐ Ist klar, WIE es aussehen/funktionieren soll?
- ☐ Habe ich gesagt, was NICHT geändert werden soll?
- ☐ Ist meine Anfrage fokussiert (eine Sache auf einmal)?
Nächster Schritt: Deine Website ist fertig und angepasst. Im nächsten Tutorial zeigen wir dir, wie du sie auf Vercel live schaltest und mit deiner eigenen Domain verbindest!


