Zeig ihm den Bildschirm

Was es ist und warum es zählt

Claude Code schreibt den Code, aber von allein sieht es nicht, was du siehst. Wenn es keine Möglichkeit hat, die Seite anzuschauen, gibt es den schiefen Button oder das Formular, das nicht abschickt, für es nicht. Und am Ende entdeckst du sie, nachdem es dir „fertig“ geschrieben hat.

Dieser Leitfaden löst das Problem in beide Richtungen. Du zeigst Claude den Bildschirm, mit einem Screenshot. Und Claude schaut sich den Bildschirm selbst an, mit einem Browser, den es benutzen kann: Es öffnet die Seite, klickt, füllt aus, schaut sich das Ergebnis an.

Es zählt, weil ein optischer Fehler, mit Worten erklärt, langsam und ungenau ist. „Der Button ist ein bisschen weiter unten“ kann zehn verschiedene Dinge heißen, ein Bild nicht. Und wenn Claude den Ablauf selbst durchgeht, findet und behebt es die banalsten Fehler, bevor sie bei dir ankommen.

Die allgemeine Regel, kein „fertig“ ohne Beweis, habe ich schon in einem anderen Leitfaden erklärt. Hier konzentriere ich mich auf den optischen Teil: wie Claude die Seite sieht und wie es dir zeigt, dass sie funktioniert.

1. Der Satz für Claude

Das ist der Satz, den ich benutze. Ich füge ihn ein, nachdem ich um eine Änderung gebeten habe, oder ich schreibe ihn ein für alle Mal in die CLAUDE.md. Kopier ihn genau so:

Öffne nach jeder Änderung die Seite im Browser und geh den Ablauf selbst durch wie ein echter Nutzer: klicken, ausfüllen, abschicken. Mach einen Screenshot vorher und einen nachher. Dann sag mir Schritt für Schritt, was du gesehen hast. Schreib nicht "fertig", bevor du es funktionieren gesehen hast: Häng mir die Screenshots als Beweis an. Wenn etwas nicht stimmt, behebe es und prüf noch einmal.

Jeder Teil hat einen Grund:

• „Geh den Ablauf selbst durch wie ein echter Nutzer“: Die Seite nur zu öffnen reicht nicht. Es muss tun, was ein Mensch tun würde, in derselben Reihenfolge.
• „Einen Screenshot vorher und einen nachher“: Der Vergleich zeigt, was sich wirklich geändert hat, nicht nur, dass die Seite lädt.
• „Sag mir Schritt für Schritt, was du gesehen hast“: Wenn ein Schritt im Bericht fehlt, hat es ihn wahrscheinlich nicht gemacht.
• „Wenn etwas nicht stimmt, behebe es und prüf noch einmal“: So macht es die Korrekturrunde, nicht du.

Der Satz funktioniert nur, wenn Claude einen Browser hat, den es benutzen kann. Ohne kann es nichts öffnen: In Abschnitt 3 siehst du, wie du ihm einen gibst. Und wenn es die Seite nicht öffnen kann, muss es dir das sagen, statt trotzdem „fertig“ zu schreiben.

Schreib ihn in die CLAUDE.md

Die CLAUDE.md ist die Anweisungsdatei des Projekts. Sie liegt im Hauptordner, als CLAUDE.md oder .claude/CLAUDE.md, und Claude Code liest sie zu Beginn jeder Sitzung. Wenn du den Satz dort hineinschreibst, musst du ihn nicht jedes Mal wiederholen. Du kannst ihn von Claude selbst eintragen lassen:

Füg der CLAUDE.md diese Regel für jede Änderung an der Oberfläche hinzu: [hier den Satz einfügen]

Dann öffne eine neue Sitzung: Die Datei wird beim Start geladen. Um zu prüfen, ob es sie übernommen hat, schreib /context und schau unter Memory files.

2. Zeig du ihm den Bildschirm

Manchmal siehst du das Problem vor ihm. Statt es zu beschreiben, schick ihm das Bild. In Claude Code hast du vier Wege:

1. Im Terminal: Kopier das Bild und füg es mit Ctrl+V ein. Auf dem Mac ist es auch im Terminal Ctrl, nicht Cmd (in iTerm2 geht auch Cmd+V). Unter Windows ist es Alt+V. In der Nachricht erscheint [Image #1].
2. Oder zieh die Bilddatei in das Fenster von Claude Code.
3. Oder schreib den Pfad der Datei in die Nachricht, wie im Prompt unten.
4. In der Desktop-App: die Taste + neben dem Nachrichtenfeld, um die Datei anzuhängen, oder zieh das Bild ins Feld.

schau dir diesen Screenshot an: /pfad/zum/bild.png

Dann reicht eine Zeile. [Image #1] sagt Claude, welches Bild du meinst, praktisch, wenn du mehrere in dieselbe Unterhaltung einfügst.

[Image #1] dieser Button ist schief, behebe das

Für einen Screenshot von einem Teil des Bildschirms: Auf dem Mac kopiert Cmd+Ctrl+Shift+4 ihn direkt in die Zwischenablage, unter Windows Win+Shift+S. So ist er gleich bereit zum Einfügen.

3. Gib Claude einen Browser

Damit Claude den Ablauf selbst durchgehen kann, muss es die Seite öffnen können. Es gibt zwei Wege, je nachdem, wo du es benutzt.

Die Desktop-App: der eingebaute Browser

In der Desktop-App von Claude gibt es im Tab Code einen Browser-Bereich. Du öffnest ihn mit der Taste Browser in der oberen Leiste der Sitzung oder mit Cmd+Shift+B auf dem Mac (Ctrl+Shift+B unter Windows). Claude startet deine Seite lokal, öffnet sie dort, klickt, füllt Formulare aus, macht Screenshots und behebt, was es findet. Und du schaust ihm dabei zu.

Es gibt auch eine Option, Auto-verify changes, die standardmäßig an ist: Nachdem Claude Dateien geändert hat, prüft es selbst mit Screenshots und Fehlern, bevor es die Antwort abschließt. Der Satz aus Abschnitt 1 hilft trotzdem: Er verlangt den ganzen Ablauf des Nutzers und einen Bericht darüber, was es gesehen hat.

Das Terminal: Claude in Chrome

Wenn du Claude Code im Terminal benutzt, ist der Weg Claude in Chrome: eine Erweiterung für Chrome oder Edge, die auch mit anderen Chromium-basierten Browsern funktioniert. Du installierst die Erweiterung aus dem Chrome Web Store und startest Claude Code dann so:

claude --chrome

In der Sitzung zeigt dir /chrome, ob die Verbindung funktioniert, und lässt dich Enabled by default wählen, damit die nächsten Sitzungen schon verbunden starten. Ich schalte es nur ein, wenn ich es brauche, denn wenn der Browser immer an ist, belegen die Werkzeuge Platz im Kontext. Du brauchst einen kostenpflichtigen Claude-Plan (Pro, Max, Team oder Enterprise), mit Anmeldung über /login: Nur mit einem API-Schlüssel lässt es sich nicht einschalten.

Hier benutzt Claude deinen echten Browser, in einem Fenster, das du siehst, auch auf Seiten, auf denen du schon eingeloggt bist. Wenn es auf eine Login-Seite oder ein Captcha stößt, hält es an und fragt dich. Es kann auch Fehler in der Konsole lesen, praktisch, wenn die Seite gut aussieht, aber darunter etwas nicht stimmt.

Screenshots als Beweis

Wenn du die Screenshots, die Claude im Browser macht, selbst öffnen willst, bitte es, sie als Dateien zu speichern: Es sagt dir den Pfad, und du schaust sie dir an, wann du willst.

Speichere die Screenshots von vorher und nachher in einem Projektordner und sag mir die Pfade.

Wenn du iPhone-Apps baust

Der Browser ist für Websites und Web-Apps. Für eine iOS-App hat die Desktop-App auf dem Mac einen iOS-Simulator-Bereich, in der Beta: Claude baut die App, startet sie im Simulator, tippt sich durch die Bildschirme und liest sie, um seine Änderungen zu prüfen. Du brauchst Xcode, und es funktioniert nur mit simulierten Geräten, nicht mit einem echten iPhone.

Häufige Fehler

• Einen optischen Fehler mit Worten beschreiben. Füg den Screenshot ein und schreib eine Zeile dazu: Das ist schneller und lässt keine Zweifel.
• Claude den Satz geben, ohne ihm einen Browser zu geben. Öffne den Browser-Bereich in der Desktop-App oder starte Claude Code mit claude --chrome, sonst hat es nichts zum Anschauen.
• „Ich habe es geprüft“ ohne Bilder akzeptieren. Verlang die Screenshots von vorher und nachher: Wenn es keine gibt, hat die Prüfung nicht stattgefunden.
• Beim ersten Bildschirm aufhören. Prüf, ob Claudes Bericht bis zum Ende des Ablaufs reicht, bis zum Abschicken.

Checkliste

• Der Satz steht in der CLAUDE.md des Projekts
• Nach dem Hinzufügen habe ich eine neue Sitzung geöffnet
• Claude hat einen Browser: Browser-Bereich oder claude --chrome
• Ich weiß, wie man einen Screenshot einfügt (Ctrl+V, Alt+V unter Windows)
• Jedes „fertig“ kommt mit einem Screenshot vorher und einem nachher
• Claudes Bericht deckt den ganzen Ablauf ab

Häufige Fragen