Claude-Workflow
Am schnellsten verlierst du bei einem Projekt für Vibe Coding den Überblick, wenn du auf einmal nach einer ganzen App fragst. Beginne mit einem Bildschirm oder einer Funktion, sag Claude, was unverändert bleiben muss, und bitte um eine Möglichkeit, das Ergebnis zu testen. Vibe Code hilft dir, aus deiner Idee einen gezielten ersten Prompt zu machen.
Eine vage Anfrage kann eine überzeugende Vorschau liefern, ohne dass die benötigte Funktion vorhanden ist. Diese drei Ausgangspunkte zeigen, wo eine gezieltere Anfrage an Claude hilft – und wann ein anderer Workflow besser passen könnte.
Du kannst eine Aufgabenliste beschreiben, weißt aber noch nicht, wie du Claude nach Zuständen, leeren Ansichten oder dauerhafter Speicherung fragst. Beginne mit einer funktionierenden Interaktion und bitte um eine leicht verständliche Erklärung jeder Datei, bevor du weitere Funktionen hinzufügst.
Wenn du Vorschläge direkt neben dem Code bevorzugst, den du gerade bearbeitest, beschreibt der Copilot-Leitfaden diesen editorbasierten Ansatz.
Dein Mockup sieht gut aus, aber ein statischer Bildschirm zeigt nicht, was passiert, wenn ein Feld leer bleibt oder eine Aktion fehlschlägt. Bitte Claude, die Interaktion umzusetzen und die Zustände aufzulisten, die du prüfen solltest.
Wenn du bei der Ideenfindung ein anderes dialogbasiertes Modell vergleichen möchtest, beschreibt der Gemini-Leitfaden diesen Weg.
Du hast bereits Dateien und möchtest einen Filter hinzufügen, ohne die App neu zu schreiben. Stelle nur die relevanten Komponenten bereit, beschreibe das bestehende Verhalten und bitte Claude, die betroffenen Dateien zu benennen, bevor es Änderungen vorschlägt.
Wenn du Änderungen vorrangig in deinem Editor vornehmen möchtest, erklärt der Copilot-Leitfaden, wie du dich dabei an den aktuellen Dateien orientierst.
In der linken Spalte erkennst du ungenaue Anfragen. Die rechte Spalte gibt Claude eine klar abgegrenzte Aufgabe mit einem überprüfbaren Ergebnis. Jeder Workflow enthält eine Anfrage zur Umsetzung und eine anschließende Prüfung.
| Anfrage ohne klaren Umfang | Eingegrenzter Claude-Workflow | |
|---|---|---|
| Neuer Bildschirm · erstellen | „Erstelle mir eine Produktivitäts-App.“ Zielgruppe, Bildschirm und wesentliche Funktionen sind nicht definiert. | „Erstelle einen Bildschirm mit einer Aufgabenliste und Funktionen zum Hinzufügen, Erledigen und Löschen. Die Oberfläche muss auch auf einem schmalen Smartphone gut nutzbar sein.“ |
| Neuer Bildschirm · prüfen | Einen Screenshot als Beleg dafür akzeptieren, dass die Bedienelemente funktionieren. | Manuelle Tests für eine leere Liste, eine erledigte Aufgabe und das Löschen nach dem Neuladen anfordern. |
| Bestehende App · ändern | „Verbessere meine App.“ Claude hat keine Vorgaben dazu, was ersetzt werden darf. | Die relevanten Dateien bereitstellen und um einen Statusfilter bitten, wobei die bestehende Aufgabenspeicherung und das Layout erhalten bleiben sollen. |
| Bestehende App · prüfen | Eine umfassende Neufassung übernehmen, ohne die Änderungen zu prüfen. | Eine Zusammenfassung der Änderungen für jede Datei anfordern und anschließend die bestehende Funktionalität und den neuen Filter testen. |
| Fehlerbehebung · untersuchen | „Es funktioniert nicht.“ Es gibt keinen reproduzierbaren Fehler, der untersucht werden könnte. | Den Fehlertext, Schritte zum Reproduzieren, das erwartete Verhalten und den kleinsten relevanten Codeausschnitt angeben. |
| Fehlerbehebung · prüfen | Annehmen, dass eine plausible Erklärung bedeutet, der Fehler sei behoben. | Claude nach der vermuteten Ursache, einer minimalen Korrektur und einem Regressionstest fragen, den du ausführen kannst. |
So könnte eine hilfreiche Antwort auf eine Anfrage zu einer Aufgabenliste aussehen. Dies sind illustrative Textbeispiele, keine Behauptung, dass eine der Anweisungen ausgeführt oder ihr Code überprüft wurde.
Erster Entwurf
Beispielausgabe: „Ich erstelle eine Ansicht für eine Aufgabenliste mit Funktionen zum Hinzufügen, Erledigen und Löschen. Die Aufgaben werden im lokalen Speicher gespeichert. Ich füge weder Konten noch Freigabefunktionen oder einen Server hinzu. Nach der Implementierung erkläre ich die Logik für den Zustand und die Speicherung.“ Durch diese Abgrenzung lässt sich das erste Ergebnis beim Vibe Coding leichter prüfen als ein ausufernder App-Entwurf.
Überarbeitung
Beispiel für eine Rückfrage: „Nach dem Aktualisieren der Seite werden erledigte Aufgaben als unerledigt angezeigt. Behalte das aktuelle Layout bei und korrigiere nur die dauerhafte Speicherung. Sag mir, welcher gespeicherte Wert fehlte und wie ich die Korrektur überprüfen kann.“ Damit benennen Sie Claude einen konkreten Fehler und begrenzen die Änderung. Beschreiben Sie bei schrittweisem Vibe Coding, was Sie beobachtet haben, statt um eine allgemeine Verbesserung zu bitten.
Übergabe
Beispiel für eine Übergabe: „Die Aufgabenliste unterstützt das Hinzufügen, Erledigen und Löschen von Aufgaben. Starten Sie das Projekt mit dem dokumentierten lokalen Befehl und testen Sie dann einen leeren Eintrag, eine erledigte Aufgabe nach dem Aktualisieren der Seite und das Löschen. Für die dauerhafte Speicherung wird der Browserspeicher verwendet; die Daten stehen einem Nutzer in einem anderen Browser nicht zur Verfügung.“ Eine gute Übergabe beim Vibe Coding benennt Einschränkungen ebenso klar wie Funktionen.
Claude kann Code vorschlagen, aber eine verständliche Erklärung belegt nicht, dass er sicher oder korrekt ist. Geben Sie keine Zugangsdaten, privaten Kundendaten oder Code, den Sie nicht weitergeben dürfen, in einen Prompt ein. Prüfen Sie Abhängigkeiten und Lizenzen, untersuchen Sie die Verarbeitung von Eingaben und testen Sie das tatsächliche Verhalten, bevor Sie etwas veröffentlichen. Bei sensiblen Daten oder einer öffentlich zugänglichen App sollten Sie eine qualifizierte Sicherheitsprüfung veranlassen. Nutzen Sie Vibe Code, um mit einer klar begrenzten Anfrage zu beginnen, und sorgen Sie dafür, dass ein Mensch für das Ergebnis verantwortlich bleibt.
Bitten Sie um eine einzelne Ansicht oder Funktion mit einem erkennbaren Erfolgskriterium, etwa eine Aufgabenliste, deren Einträge nach dem Aktualisieren der Seite erhalten bleiben. Legen Sie fest, was nicht zum Umfang gehört, und bitten Sie Claude dann, die Implementierung zu erklären und manuelle Tests vorzuschlagen. Mit einer kleinen ersten Anfrage lässt sich ein Ergebnis beim Vibe Coding leichter beurteilen.
Sie können damit beginnen, die Benutzeroberfläche und ihr Verhalten in Alltagssprache zu beschreiben. Sie müssen das Ergebnis trotzdem ausführen, Fehler beobachten und bei Code nachfragen, den Sie nicht verstehen. Wenn Menschen sich auf das Ergebnis verlassen werden, lassen Sie die Implementierung überprüfen, statt davon auszugehen, dass eine funktionierende Vorschau ausreicht.
Sagen Sie Claude genau, was Sie getan haben, was passiert ist und was Sie stattdessen erwartet haben. Fügen Sie die Fehlermeldung oder die relevante Datei hinzu, falls Sie sie haben, und bitten Sie um eine minimale Änderung, die bereits funktionierendes Verhalten erhält. Führen Sie sowohl den fehlgeschlagenen Test als auch einen Test des Verhaltens, das bereits funktioniert hat, erneut aus.
Claude kann einen umfangreichen ersten Entwurf erstellen, aber ein einzelner Prompt kann nicht belegen, dass jede Interaktion, jede Abhängigkeit und jeder Sonderfall funktioniert. Teilen Sie die App in testbare Teile auf und überprüfen Sie jede Ergänzung. So erhalten Sie klareres Feedback, wenn bei einer Vibe Coding-Iteration etwas schiefgeht.
Führen Sie es selbst aus, prüfen Sie geänderte Dateien und Abhängigkeiten und testen Sie die Eingabeverarbeitung, die Speicherung und das Verhalten bei Fehlern. Entfernen Sie Geheimnisse und private Beispieldaten sowohl aus dem Projekt als auch aus dem Prompt-Verlauf. Wenn das Projekt vertrauliche Informationen verarbeitet, lassen Sie vor der Veröffentlichung eine angemessene Sicherheitsprüfung durchführen.