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:

---

Die Anatomie eines guten Anpassungs-Prompts

Ein effektiver Prompt für Anpassungen folgt dieser Struktur:

1. KONTEXT: Was ist die aktuelle Situation?
2. ZIEL: Was soll erreicht werden?
3. DETAILS: Wie genau soll es aussehen/funktionieren?
4. EINSCHRÄNKUNGEN: Was soll NICHT geändert werden?

Beispiel: Schlechter vs. Guter Prompt

---

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

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:

1. Erst die Struktur
2. Dann das Styling
3. Dann die Funktionalität
4. 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:

---

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

---

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)?