Prompt-Tipps für die KI-App-Entwicklung -- So formulierst du bessere Anweisungen

Hast du schon einmal Claude Code oder ChatGPT gebeten, eine „TODO-App zu bauen", und etwas völlig anderes erhalten, als du dir vorgestellt hattest? Generative KI ist leistungsstark, aber wenn deine Anweisungen vage sind, füllt die KI die Lücken mit eigenen Annahmen.

Dieser Artikel behandelt 5 praktische Tipps für bessere Prompts, mit konkreten Vorher-Nachher-Beispielen, denen jeder folgen kann -- auch absolute Anfänger.

1. Warum dein Prompt das Ergebnis bestimmt

Generative KI schreibt Code ausschließlich auf Basis deiner Anweisungen (Prompt). Ein menschlicher Kollege würde nachfragen „Meinst du das so?", aber KI generiert die plausibelste Antwort nur anhand der gegebenen Informationen -- unzureichender Kontext führt daher zu unpassenden Ergebnissen.

Probleme durch vage Anweisungen

• Die KI wählt ein anderes Framework als gewünscht
• Die Benutzeroberfläche entspricht nicht deinen Erwartungen
• Wichtige Funktionen fehlen oder unnötige werden hinzugefügt
• Fehlerbehandlung und Validierung sind unzureichend

Die Kehrseite: Allein durch Präzision in deinem Prompt verbessert sich die Qualität der KI-Ausgabe drastisch. Mehr darüber, wie generative KI funktioniert, erfährst du in unserem Artikel Was ist generative KI?.

2. 5 Tipps für effektive KI-Prompts

Beherrsche diese fünf Kernpunkte, um die Qualität von KI-generiertem Code deutlich zu verbessern.

Tipp 1: Den Tech-Stack angeben

Statt „baue eine Web-App" solltest du die genaue Programmiersprache, das Framework und die Datenbank angeben.

❌ Schlecht:
"Baue eine TODO-App"

✅ Gut (für Entwickler):
"Baue eine TODO-App mit React + TypeScript.
Verwende useState für die Zustandsverwaltung und
localStorage für die Datenpersistenz."

✅ Gut (für Nicht-Entwickler):
"Baue eine TODO-App, die im Webbrowser läuft.
Die Daten sollen nicht verloren gehen, wenn ich
die Seite schließe. Die Technologieauswahl
überlasse ich dir, aber bitte anfängerfreundlich."

Tipp 2: Funktionen klar auflisten

Führe die gewünschten Funktionen als Aufzählung auf und markiere sie als erforderlich oder optional. KI verarbeitet Aufzählungspunkte genauer als lange Absätze.

✅ Gut:
"Bitte implementiere folgende Funktionen:
[Erforderlich]
- Aufgaben hinzufügen (Texteingabe + Hinzufügen-Button)
- Aufgaben als erledigt markieren
- Aufgaben löschen
[Optional]
- Fälligkeitsdatum für Aufgaben setzen
- Erledigte Aufgaben filtern"

Tipp 3: Die Benutzeroberfläche konkret beschreiben

„Mach es hübsch" sagt der KI fast nichts. Gib konkrete Angaben zu Farben, Layout und Verhalten an.

✅ Gut (für Entwickler):
"UI-Anforderungen:
- Verwende Tailwind CSS
- Dark Mode (Hintergrund: slate-900)
- Karten-Layout mit 8px border-radius
- Mobile-first responsives Design
- Schwebender Aktions-Button fixiert unten rechts"

✅ Gut (für Nicht-Entwickler):
"So soll es aussehen:
- Dunkles Hintergrund-Design
- Jede Aufgabe als Karte anzeigen
- Einfach auf dem Handy zu bedienen
- Hinzufügen-Button immer sichtbar unten rechts
- Schlicht und übersichtlich, wie Apples Notizen-App"

Tipp 4: Einschränkungen und Ausschlüsse festlegen

Neben dem, was du möchtest, verbessert es die Genauigkeit erheblich, der KI auch mitzuteilen, was du nicht möchtest.

✅ Gut (für Entwickler):
"Einschränkungen:
- Einzige erlaubte externe Bibliothek ist Tailwind CSS
- Keine State-Management-Bibliotheken wie Redux oder Zustand verwenden
- Kein Backend nötig (nur Frontend)
- Kommentare auf Deutsch schreiben"

✅ Gut (für Nicht-Entwickler):
"Einschränkungen:
- Keine Server- oder Datenbank-Einrichtung nötig
- Keine Login-Funktion benötigt
- So einfach wie möglich halten
- Erklärende Kommentare im Code hinzufügen"

Tipp 5: Das Ausgabeformat festlegen

Wenn du der KI sagst, wie sie ihre Ausgabe strukturieren soll, wird der Code sofort in echten Projekten einsetzbar.

✅ Gut (für Entwickler):
"Ausgabeformat:
- In separate Dateien pro Komponente aufteilen
  (App.tsx, TodoList.tsx, TodoItem.tsx, AddTodo.tsx)
- Typdefinitionen in types.ts ablegen
- Dateipfad als Kommentar am Anfang jeder Datei"

✅ Gut (für Nicht-Entwickler):
"Ausgabeformat:
- Nicht alles in eine riesige Datei packen --
  nach Funktion aufteilen
- Am Anfang jeder Datei verständlich erklären,
  was diese Datei macht
- Schritt-für-Schritt-Einrichtungsanleitung beifügen,
  damit ich es kopieren und ausführen kann"

3. Schlechter vs. guter Prompt (echte Beispiele)

Vergleichen wir Prompts am Beispiel einer „Haushaltsbudget-App", um zu sehen, wie die Prompt-Qualität das Ergebnis beeinflusst.

Schlechter Prompt

Baue eine Haushaltsbuch-App.
Sie soll Einnahmen und Ausgaben erfassen
und Diagramme anzeigen.

Bei dieser Anweisung muss die KI raten:

• Sprache (Python? JavaScript? Swift?)
• Web oder mobil?
• Diagrammtyp (Balken? Kreis? Linie?)
• Datenspeicherung (Datenbank? Lokale Datei?)

Guter Prompt (für Entwickler)

Baue eine Haushaltsbuch-Web-App mit
Next.js (App Router) + TypeScript.

[Tech-Stack]
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Diagramme: recharts-Bibliothek
- Datenspeicherung: localStorage (keine Datenbank nötig)

[Funktionen]
1. Transaktionen erfassen (Datum, Kategorie, Betrag, Notiz)
2. Kreisdiagramm nach Kategorie (monatlich)
3. Liniendiagramm mit monatlichen Einnahmen-/Ausgabentrends
4. Listenansicht mit Löschfunktion

[UI-Anforderungen]
- Mobile-first
- Tab-Navigation unten (Eingabe / Liste / Diagramme)
- Tailwind CSS Standardfarben

[Einschränkungen]
- Keine externen APIs
- Keine Authentifizierung
- In separate Komponentendateien aufteilen

[Ausgabeformat]
- Dateipfad als Kommentar am Anfang jeder Datei
- Code-Kommentare auf Deutsch

Guter Prompt (für Nicht-Entwickler)

Auch ohne Programmierkenntnisse reicht es, zu beschreiben „was die App tut", „wie sie aussehen soll" und „was du nicht brauchst", um großartige Ergebnisse zu erzielen.

Baue eine Haushaltsbuch-App, die im Browser läuft.
Ich bin Anfänger, bitte wähle die besten Technologien.

[Was ich möchte]
1. Einträge mit Datum, Kategorie (Lebensmittel, Verkehr
   usw.), Betrag und einer Notiz erfassen
2. Ein Kreisdiagramm mit Ausgaben nach Kategorie sehen
3. Ein Liniendiagramm sehen, ob ich mehr ausgebe
   als letzten Monat
4. Alle Einträge in einer Liste anzeigen und Fehler löschen

[So soll es aussehen]
- Einfach auf dem Handy zu bedienen
- Tab-Umschaltung unten (Eingabe / Liste / Diagramme)
- Schlichte, saubere Farben

[Was ich nicht brauche]
- Login-Funktion
- Alles, was eine Server-Einrichtung erfordert
  (soll komplett im Browser funktionieren)

[Außerdem bitte]
- Anfängerfreundliche Einrichtungsanleitung bereitstellen
- Erklärende Kommentare im Code hinzufügen

4. Kopierbare Prompt-Vorlagen

Fülle einfach diese Vorlagen aus, um hochwertige Prompts zu erstellen. Kopiere und verwende sie direkt.

Baue eine [Art der App].

[Tech-Stack]
- Sprache: [z.B. TypeScript]
- Framework: [z.B. React / Next.js / Laravel]
- CSS: [z.B. Tailwind CSS]
- Datenspeicherung: [z.B. localStorage / SQLite / MySQL]

[Funktionen] (als Erforderlich / Optional markieren)
1. [Funktion A] (Erforderlich)
2. [Funktion B] (Erforderlich)
3. [Funktion C] (Optional)

[UI-Anforderungen]
- [Layout-Ansatz]
- [Farbschema / Design]
- [Responsives Design: ja/nein]

[Einschränkungen]
- [Zu vermeidende Bibliotheken / nicht benötigte Funktionen]

[Ausgabeformat]
- [Dateiaufteilung]
- [Kommentarsprache]

Vorlage für Nicht-Entwickler

Auch ohne technisches Wissen gibt diese Vorlage der KI alles, was sie braucht.

Baue eine [Art der App].
Ich bin Programmieranfänger, bitte wähle
die besten Technologien für mich.

[Was ich möchte] (als "Muss" / "Wäre schön" markieren)
1. [Was ich möchte Nr. 1] (Muss)
2. [Was ich möchte Nr. 2] (Muss)
3. [Was ich möchte Nr. 3] (Wäre schön)

[So soll es aussehen]
- [Für Handys? Für Computer?]
- [Referenz-App: "wie Notion", "wie Trello"]
- [Helles Design? Dark Mode?]

[Was ich nicht brauche]
- [Login, Zahlungen usw.]

[Außerdem bitte]
- Anfängerfreundliche Einrichtungsanleitung bereitstellen
- Erklärende Kommentare im Code hinzufügen
- Die Gesamtstruktur so einfach wie möglich halten

5. Ergebnisse durch Iteration verbessern

Perfekten Code beim ersten Prompt zu erhalten, ist selten. Qualität schrittweise durch Dialog mit der KI aufzubauen ist der effizienteste Ansatz.

Schritt 1: Mit dem Grundgerüst beginnen

Bitte zunächst nur um die grundlegende Struktur.

"Richte zuerst die grundlegende Projektstruktur ein
und implementiere nur die Aufgaben-Hinzufügen-Funktion."

Schritt 2: Testen und konkretes Feedback geben

Führe den generierten Code aus und melde konkrete Probleme.

"Das Textfeld wird nach dem Klick auf den
Hinzufügen-Button nicht geleert. Bitte leere die
Eingabe nach dem Hinzufügen. Außerdem können leere
Zeichenketten hinzugefügt werden --
bitte füge eine Validierung hinzu, um das zu verhindern."

Schritt 3: Funktionen schrittweise hinzufügen

Sobald die Grundlagen funktionieren, füge Funktionen Schritt für Schritt hinzu.

"Hinzufügen und Löschen von Aufgaben funktioniert
jetzt korrekt. Als Nächstes bitte hinzufügen:
1. Erledigt-Status umschalten (Checkbox)
2. Filter zum Ein-/Ausblenden erledigter Aufgaben
Bitte zum bestehenden Code hinzufügen, ohne das
zu ändern, was bereits funktioniert."

Einen umfassenderen Überblick über das Erstellen von Apps mit KI findest du in unserem Artikel darüber, ob auch Anfänger Apps mit KI bauen können.

6. Häufige Anfängerfehler

Fehler 1: Alles auf einmal verlangen

Mehr als 10 Funktionen in einem einzigen Prompt zu fordern, überfordert die KI und führt zu halbfertigen Implementierungen. Frage nach 3-5 Funktionen gleichzeitig für die besten Ergebnisse.

Fehler 2: Vage Formulierungen verwenden

„Mach es hübsch" oder „füge Beispieldaten hinzu" sind genau die Art vager Anweisungen, mit denen KI am meisten Probleme hat. Verwende stattdessen konkrete Zahlen und Beispiele.

❌ Schlecht: "Füge Beispieldaten hinzu"
✅ Gut: "Füge diese 5 Beispieleinträge als Anfangsdaten hinzu:
   - Lebensmittel 12,50 € (Essen)
   - Busfahrkarte 2,80 € (Verkehr)
   - Mittagessen 9,90 € (Essen)
   - Buch 16,99 € (Bildung)
   - Stromrechnung 78,00 € (Nebenkosten)"

Fehler 3: Nur die Fehlermeldung einfügen

Nur die Fehlermeldung ohne Kontext einzufügen, kann die KI zu einer falschen Lösung führen. Beschreibe, was du getan hast und was passiert ist.

❌ Schlecht: "TypeError: Cannot read properties of null"

✅ Gut: "Wenn ich auf den Löschen-Button einer Aufgabe
klicke, bekomme ich diesen Fehler:
TypeError: Cannot read properties of null
Der Fehler tritt in Zeile 42 von TodoList.tsx auf.
Hinzufügen und Anzeigen von Aufgaben funktioniert."

Fehler 4: Einen neuen Chat starten statt fortzufahren

KI-Chats behalten den Kontext über die gesamte Konversation bei. Einen neuen Chat zu starten, bedeutet, alle bisherigen Design-Entscheidungen zu verlieren. Fahre im selben Chat fort für maximale Effizienz.

7. Zusammenfassung

FAQ