Screenshots aktuell halten mit Claude Code: aufnehmen, hochladen, austauschen

30.09.2026 5 Min. Lesezeit

Sieben iPhones liegen schräg in einem Raster vor einem blauen Verlauf, auf jedem Display ein anderer Screenshot derselben Apps.

Jede neue Version deiner App macht die Bilder im Store ein Stück älter. Neue Screenshots aufnehmen, in jedes Mockup legen und alles neu exportieren kostet von Hand einen Nachmittag. Mit Claude Code und Showoff über MCP wird daraus eine Bitte im Terminal. Claude Code nimmt die Screenshots auf, lädt sie hoch, legt sie auf die Geräte und exportiert die Bilder.

Showoff in Claude Code einrichten

Einmal im Terminal genügt. Danach öffnest du in Claude Code /mcp und meldest dich bei Showoff an.

claude mcp add --scope user --transport http showoff https://showoff.dev/mcp

Die Verbindung gilt für dich in einer Organisation. MCP gehört zu Pro, in Free kannst du es 3 Tage lang ausprobieren. Alles zur Einrichtung steht in der Dokumentation.

Screenshots aufnehmen

Claude Code arbeitet in deinem Terminal und kann die Screenshots selbst aufnehmen, je nach Plattform mit einem dieser Befehle.

Im iOS Simulator mit xcrun simctl io booted screenshot shot.png
Im Android Emulator mit adb exec-out screencap -p > shot.png
Im Browser mit Playwright, etwa npx playwright screenshot --viewport-size "1440, 900" http://localhost:3000 home.png

Für eine saubere Statusleiste stellst du Simulator und Emulator vorher ein, wie in Saubere Statusleiste mit 9:41 beschrieben. Nimm jeden Screen in der Größe des Geräts auf, auf dem er im Mockup landet. Eine Website für das MacBook nimmst du in 16:10 auf, etwa mit 1440 × 900 Pixeln.

Hochladen ohne Umweg

Die Dateien liegen danach auf deinem Rechner. Claude Code fragt Showoff mit get_upload_link nach einem Link zum Hochladen. Der gilt 30 Minuten und nur für dieses eine Projekt, einen Schlüssel braucht er nicht. Dann lädt Claude Code jede Datei mit einem Befehl wie diesem hoch, alle gleichzeitig.

curl -sS -F [email protected] "<Link>?assign_to=<Gerät>"

Mit assign_to landet die Datei gleich auf dem Display dieses Geräts und ersetzt den alten Screenshot. Ohne den Zusatz kommt sie nur in die Mediathek des Projekts. Bilder als Base64 durch den Chat zu schicken wäre dagegen langsam und reißt bei großen Dateien ab, deshalb nimmt Claude Code den Link.

Austauschen in allen Projekten

Deine KI findet deine Projekte mit list_projects und sieht mit get_scene, welche Geräte darin stehen und was auf ihren Displays liegt. So weiß sie, welcher neue Screenshot wohin gehört. Hast du ein Projekt gerade im Editor offen, siehst du jeden Tausch live. Bevor etwas gespeichert wird, prüft Showoff das Ergebnis mit der Bildprüfung.

Neu exportieren

Für ein Standbild rendert export_image das fertige Bild auf dem Server, genau so, wie es der Editor exportiert. Claude Code bekommt einen Link, der sieben Tage gilt, und kann die Datei gleich in deinen Ordner laden. Einen Film exportierst du wie gewohnt im Editor.

Exporte über Full HD zählen auch über MCP zu deinen Exporten in 2K und 4K. Ist das Kontingent in Pro aufgebraucht, fragt dich die KI, bevor sie für 1 € je Bild weiter exportiert. Die Zahlen stehen auf der Seite Preise.

Die Bitte an Claude Code

Einmal eingerichtet, reicht ein Satz. Zum Beispiel so.

Nimm im laufenden Simulator die Screens Home, Suche und Profil mit sauberer Statusleiste auf. Tausch sie in meinem Projekt „App Store“ in Showoff aus und exportier alle Bilder nach ./store.
Mach von http://localhost:3000 einen Screenshot mit 1440 × 900 und leg ihn im Projekt „Website“ in Showoff auf das MacBook.
Welche meiner Projekte in Showoff zeigen noch die alte Startseite?

Machst du das bei jedem Release, leg die Bitte als eigenen Befehl in Claude Code ab. Eine Datei unter .claude/commands genügt, danach rufst du sie mit einem Schrägstrich auf.

Damit es jedes Mal klappt

Gib den Screens feste Namen wie home.png oder search.png. Dann weiß Claude Code auch beim nächsten Mal, welcher wohin gehört.
Schreib in die Datei CLAUDE.md deines Repositorys, welches Projekt in Showoff welche Screens zeigt. Claude Code liest sie bei jedem Start.
Nimm Testdaten, die gut aussehen und nichts Privates zeigen. Die Screenshots landen später öffentlich im Store.
Sieh dir die Bilder an, bevor sie in den Store gehen. Claude Code nennt dir dafür die Links zu den Projekten im Editor.

Für Skripte und CI ohne Anmeldung im Browser gibt es API-Schlüssel. Du legst sie in den Einstellungen im Bereich MCP an, wie in der Dokumentation beschrieben.

Launch Videos auch

Ein Launch Video bekommt neue Screenshots auf demselben Weg. Dort heißt der Zusatz launch_screen und nennt den Platz im Video. Danach renderst du das Video auf seiner Seite neu, mehr dazu in Launch Video mit KI.