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!