Deine App-Store-Screenshots macht ein Skill

Was es ist und warum es zählt

Die Screenshots deiner App im App Store sind das Erste, was die Leute ansehen. Und bei Apps, die jemand allein baut, sind sie meistens der hässlichste Teil: nackte Aufnahmen, winziger Text, kein einziger Satz, der sagt, wofür die App gut ist.

app-store-screenshots ist ein kostenloser Open-Source-Skill, unter MIT-Lizenz und mit mehr als 7.000 Sternen auf GitHub. Ein Skill ist ein Paket von Anweisungen, das Claude Code lädt, wenn es gebraucht wird. Dieser zeichnet nicht ein Bild nach dem anderen: Er baut dir einen Editor im Browser, ein kleines eigenes Next.js-Projekt, in dem du die echten Aufnahmen deiner App in Handyrahmen setzt, große, lesbare Sätze schreibst und auf einen Schlag alle Größen exportierst, die Apple und Google verlangen.

Er ist für alle, die eine App im App Store oder bei Google Play veröffentlichen, ohne Designer. Er funktioniert auch mit anderen Agenten wie Cursor und Codex, aber hier geht es um Claude Code.

1. Installieren

Du brauchst Node.js in einer aktuellen Version (die Mindestversion steht im README) und eins von bun, pnpm, yarn oder npm. Dann im Terminal:

• npx skills add ParthJadhav/app-store-screenshots installiert ihn in dem Projekt, in dem du gerade bist.
• Häng -g an, um ihn in allen deinen Projekten zu haben: Er landet im Ordner deines Benutzers statt im Projekt.
• Häng -a claude-code an, um ihn nur für Claude Code zu installieren.

Von Hand schlägt das README vor, das Repository nach ~/.claude/skills/app-store-screenshots zu klonen. Aber Achtung: Im Repository liegt die Datei SKILL.md in skills/app-store-screenshots/, während Claude Code persönliche Skills unter ~/.claude/skills/<Name>/SKILL.md sucht. Ich würde das Repository in einen Zwischenordner klonen und nur diesen Unterordner kopieren:

git clone https://github.com/ParthJadhav/app-store-screenshots /tmp/app-store-screenshots
cp -R /tmp/app-store-screenshots/skills/app-store-screenshots ~/.claude/skills/

Dann öffne eine neue Sitzung von Claude Code und tipp /: In der Liste muss app-store-screenshots auftauchen.

2. Die Anfrage und die Fragen, die er dir stellt

Öffne Claude Code in einem leeren Ordner neben dem Ordner deiner App: Der Skill kopiert das Editor-Projekt dort hinein. Dann bitte um die Screenshots. Je mehr Details du gleich gibst, desto weniger Fragen stellt er:

Mach mir die Screenshots für App Store und Google Play für meine App <Name>.
In einem Satz: <was sie macht>.
Die Funktionen, die wichtigste zuerst: <1>, <2>, <3>.
Die Aufnahmen liegen in <Ordner>, das Icon ist <Pfad>.
Ich will 6 Screenshots, Stil <klar, warme Farben>, auf Deutsch und Englisch.

Bevor er irgendetwas anlegt, stellt dir der Skill seine Fragen. Diese sind Pflicht:

1. Hast du schon Bildschirmaufnahmen, und wo liegen sie? Wenn nicht und die App ist iOS in Swift, schlägt er einen Begleit-Skill vor, ios-marketing-capture, der sie automatisch macht. Bei Android, React Native, Flutter oder Web machst du die Aufnahmen selbst.
2. Wo das App-Icon liegt, als PNG.
3. Wie die App heißt.
4. Die Funktionen nach Wichtigkeit: Was ist das Wichtigste, was sie kann.
5. Der Stil: einer der 18 fertigen Stile, oder du beschreibst ihn in Worten und er baut eine eigene Farbpalette.

Dann die optionalen: welche Stores, ob du iPad, Mac, Android-Tablets, Apple TV, Apple Watch oder CarPlay brauchst, wie viele Screenshots, die Farben und die Schrift deiner Marke. Nach den Sprachen fragt er immer, auch wenn du sie nicht genannt hast. Unter den Stilen gibt es Neon Athletic Night für Fitness und Laufen, Swiss Grid Bold für Finanzen und Entwickler-Tools, Soft Clay Wellness für Meditation und Schlaf. Nennst du einen in der Anfrage, wendet er den ganzen Stil an.

3. Der Editor, den er dir baut

Sind die Fragen geklärt, kopiert er die Editor-Vorlage in den Ordner, installiert die Abhängigkeiten, legt Aufnahmen und Icon an ihren Platz, startet den Server und gibt dir die Adresse, meistens http://localhost:3000. Du öffnest sie im Browser und findest:

• Die verbundene Leinwand (Connected canvas): Du siehst die ganze Reihe von Screenshots auf einmal und kannst ein Handy oder einen Text über zwei Screenshots hinweg ziehen. Beim Export wird jeder genau so zugeschnitten, wie er auf der Leinwand liegt.
• Echte Rahmen: iPhone, iPad, Mac, Apple Watch und Apple TV nutzen Apples Rahmen aus den Apple Design Resources, die Apple nur für Apps auf seinen eigenen Plattformen freigibt. Für Android hat der Editor eigene.
• Die Seitenleiste links, um Screenshots hinzuzufügen und umzusortieren, und der Inspektor rechts, um Layout, Überschrift, Aufnahme und Elemente zu ändern. Neben der Überschrift gibt es das Menü Copy ideas mit fertigen Formeln zum Umschreiben.
• Style Lab: Es zeigt dir vier komplette Looks deines Sets nebeneinander. Du sperrst die Teile, die dir gefallen (Farben, Schrift, Layout, Szene), und mischst den Rest neu. Oben in der Leiste gibt es außerdem die Themenauswahl, mit einer Palette pro Stil.
• Export bundle: Es lädt ein Zip mit allen Größen herunter, sortiert nach Plattform, Gerät, Auflösung und Sprache.

Alles speichert sich von selbst in der Datei app-store-screenshots.json, und die Aufnahmen, die du in den Editor ziehst, in public/screenshots/uploaded/. Leg sie auf git, dann machst du auch an einem anderen Computer weiter. Um den Editor an einem anderen Tag wieder zu öffnen: im Ordner beim ersten Mal npm install und dann npm run dev, oder dasselbe mit bun, pnpm oder yarn.

4. Saubere Aufnahmen aus dem Simulator

Der Editor ist nur so gut wie die Aufnahmen, die du ihm gibst. Das README hat einen Tipp: Fürs iPhone fang mit dem 6,1-Zoll-Simulator an, weil du dort die Bilder in den Rahmen am wenigsten von Hand anpassen musst. Eine saubere Aufnahme zeigt außerdem 9:41 Uhr und einen vollen Akku. Bei laufendem Simulator, im Terminal:

1. Leg die Statusleiste fest: xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Öffne in der App den Bildschirm, den du willst, voll mit erfundenen, aber glaubwürdigen Daten.
3. Aufnehmen: xcrun simctl io booted screenshot 01.png speichert ein PNG.
4. Am Ende stellst du die normale Leiste mit xcrun simctl status_bar booted clear wieder her.

booted heißt: der laufende Simulator. Wenn du mehrere hast, setz stattdessen den Namen oder die Kennung ein. Apple akzeptiert keine Bilder mit Transparenz: Kommt eine Aufnahme mit transparenten Ecken heraus, mach sie noch mal mit --mask=ignored, das speichert den ganzen Bildschirm ohne die abgerundete Form. Für Demo-Bildschirme, die schon gefüllt aufgehen, gibt es die Anleitung SIMULATORE (strikt.fit/simulatore-ios). Oder du bittest Claude:

Mach die Aufnahmen für die Store-Screenshots. Bau die App und starte sie im Simulator des 6,1-Zoll-iPhones.
Leg die Statusleiste auf 9:41 mit vollem Akku und vollem Empfang fest (xcrun simctl status_bar booted override).
Öffne dann nacheinander diese Bildschirme: <Liste>, jeder voll mit erfundenen, aber glaubwürdigen Daten, und speichere sie mit xcrun simctl io booted screenshot in public/screenshots/apple/iphone/de/ als 01.png, 02.png und so weiter.
Stell am Ende die normale Statusleiste wieder her und schick mir die Liste der Dateien.

5. Die Größen für die Stores

Die Größen wählt der Export, nicht du. Für Handys und Tablets nennt das README diese, in Pixeln:

• App Store, iPhone: 1320 × 2868 (6,9"), 1284 × 2778 (6,5"), 1206 × 2622 (6,3"), 1125 × 2436 (6,1").
• App Store, iPad: 2064 × 2752 (13") und 2048 × 2732 (iPad Pro 12,9").
• Google Play: Handy 1080 × 1920; 7"-Tablet 1200 × 1920 oder 1920 × 1200; 10"-Tablet 1600 × 2560 oder 2560 × 1600; Feature Graphic 1024 × 500.

Dazu kommen Mac, Apple TV, Apple Watch, CarPlay und die großen Bilder für die Produktseite. Prüf vor dem Hochladen die Seite Screenshot specifications in App Store Connect, weil Apple die Größen mit neuen Handys anpasst. Derzeit verlangt Apple mindestens einen Screenshot fürs iPhone und nimmt bis zu 10 pro Größe an, als JPEG oder PNG, ohne Transparenz. Google Play nimmt bis zu 8 pro Gerätetyp an.

Häufige Fehler

• Winziger Text. Der Skill sieht den Miniaturtest vor: Verkleinere den Screenshot auf etwa 160 Pixel Breite, wie in den Suchergebnissen. Wenn du die Überschrift nicht lesen kannst, ist sie zu lang oder zu dünn.
• Zu viele Wörter. Eine Idee pro Überschrift, 3–5 Wörter pro Zeile, kurze Wörter. Nie zwei Dinge mit „und“ verbunden.
• Screenshots, die nicht die echte App zeigen. Apples Richtlinien verlangen, dass die Screenshots die App im Einsatz zeigen, nicht nur Titelbild, Login oder Startbildschirm (Punkt 2.3.3), und dass sie das Kernerlebnis der App wiedergeben (Punkt 2.3). Den Text drumherum wählst du, aber ins Handy gehört die App, wie sie ist.
• Preise in den Screenshots. Punkt 2.3.7 von Apples Richtlinien sagt, dass Screenshots keine Preise enthalten sollen.
• Aufnahmen mit Transparenz: Der Export kann schwarze Rechtecke statt des Bildschirms zeigen. Nimm Aufnahmen ohne Alphakanal.
• Claude bitten, den Code des Editors von Hand umzuschreiben. Änderungen macht man im Editor, im Browser.

Checkliste

• Der Skill app-store-screenshots taucht in Claude Code auf, wenn ich / tippe
• Echte Aufnahmen der neuesten App-Version, mit der Statusleiste auf 9:41
• Der erste Screenshot sagt den wichtigsten Nutzen in einer Sekunde
• Jede Überschrift ist in der 160-Pixel-Miniatur lesbar
• app-store-screenshots.json und die hochgeladenen Aufnahmen liegen auf git
• Export bundle für jedes Gerät heruntergeladen, Größen in App Store Connect geprüft

Häufige Fragen