Mit der Grundstruktur aus dem letzten Kapitel steht, ist Zeit für das erste echte Feature: Rezepte sollen sich nach Zutaten durchsuchen lassen. Dieses Kapitel zeigt, wie sich die Prompting-Grundlagen aus Kapitel 5 in der Praxis auf ein konkretes Feature auswirken.

Die schlechte Variante

Ein zu vager Prompt für dieses Feature könnte so aussehen:

> Bau eine Suche ein.

Das lässt fast alles offen: Wonach soll gesucht werden - nach Titel, nach Zutaten, nach beidem? Soll die Suche live beim Tippen passieren oder erst nach einem Klick? Muss Groß-/Kleinschreibung beachtet werden? Claude Code wird bei so einem Prompt zwangsläufig eigene Annahmen treffen, die nicht unbedingt mit deiner Vorstellung übereinstimmen - was später zu Nacharbeit führt.

Die gute Variante

Ein präziser Prompt für dasselbe Feature, angelehnt an die Prinzipien aus Kapitel 5:

> Fuege dem Rezept-Planer eine Suche nach Zutaten hinzu:
> 1. Im Backend: ein neuer Query-Parameter "zutat" für GET /api/recipes, der nur Rezepte zurückgibt, deren Zutatenliste den gesuchten Begriff enthält (Gross-/Kleinschreibung soll keine Rolle spielen).
> 2. Im Frontend: ein Suchfeld über der Rezeptliste, das bei jedem Tastendruck die Liste per fetch() neu lädt und filtert.
> Zeig mir vorher kurz deinen Plan, bevor du die Dateien änderst.

Dieser Prompt beantwortet vorab die wichtigsten Fragen: welche Datei betroffen ist, wonach gesucht wird, wie sich Groß-/Kleinschreibung verhalten soll, und wann die Suche ausgelöst wird. Die letzte Zeile bittet zusätzlich um eine kurze Plan-Erklärung, bevor überhaupt etwas geändert wird - ein einfaches, aber wirkungsvolles Sicherheitsnetz.

Das Ergebnis

Mit einem präzisen Prompt wie oben ergänzt Claude Code typischerweise die Route in server.js und die Suchlogik im Frontend:

app.get("/api/recipes", async (req, res) => {
  const { zutat } = req.query;
  const recipes = await loadRecipes();
  if (!zutat) {
    return res.json(recipes);
  }
  const suchbegriff = zutat.toLowerCase();
  const gefiltert = recipes.filter((rezept) =>
    rezept.ingredients.some((zutat) => zutat.toLowerCase().includes(suchbegriff))
  );
  res.json(gefiltert);
});

const suchfeld = document.querySelector("#suche");

suchfeld.addEventListener("input", async () => {
  const antwort = await fetch(`/api/recipes?zutat=${encodeURIComponent(suchfeld.value)}`);
  const rezepte = await antwort.json();
  renderRezeptliste(rezepte);
});

Schrittweise vorgehen statt alles auf einmal

Auch bei einem gut formulierten Prompt lohnt es sich bei größeren Features, in Etappen vorzugehen: erst das Backend fertigstellen und testen ("Ruf die Route testweise per curl auf"), dann erst das Frontend anschließen. So lässt sich jeder Schritt einzeln prüfen, und ein Fehler im Backend fällt nicht erst auf, wenn schon das ganze Frontend darauf aufbaut.

curl "http://localhost:3000/api/recipes?zutat=Tomate"