App Store Screenshotsvon ParthJadhav

App Store Screenshots Skill.

Store-Screenshots als einzelne Anzeigen gestalten, die zugleich zusammenwirken.

App-Marketing
Screenshots
Lokalisierung

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · App Store ScreenshotsSKILL.md

Aufgabe App-Marketing Ergebnis • Ein lokaler Screenshot-Design-Editor mit vorbefüllten App-Inhalten • Eine Projektdatei (JSON), geeignet für die Versionskontrolle, plus lokale Screenshot-Assets • PNG-Export-Bundles, geordnet nach Gerät, Abmessungen und Sprache Vor dem Start Erfordert den mitgelieferten Next.js-Editor, eine unterstützte Node-/Paketmanager-Umgebung und einen Browser. Der PNG-Export nutzt html-to-image; Quell-Aufnahmen, Schriften und andere Assets benötigen passende Nutzungsrechte.

Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

App Store Screenshots

Ein vorlagenbasierter Screenshot-Editor mit lokaler Projektspeicherung, getrennten Plattform-Decks, lokalisierten Texten, verbundener Komposition und Exportprüfungen mit Fokus auf Zuschnitte.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

App Store Screenshots richtet einen vorgefertigten Editor auf Basis von Next.js und ShadCN für Marketingbilder in Store-Einträgen ein. Du lieferst echte App-Aufnahmen, ein Icon, Feature-Prioritäten und eine visuelle Richtung; der Editor bietet Geräterahmen, Textbearbeitung direkt im Bild, Layoutoptionen, Bild-Overlays und Exportsteuerung. Das Ergebnis sind Marketing-Grafiken, keine neue App-Oberfläche und keine automatische Aufnahme der Produktscreens jeder Plattform.

Auf der verbundenen Canvas kann sich ein Gerät oder Dekorelement über benachbarte Screenshots erstrecken, während jeder exportierte Ausschnitt dennoch eine vollständige Aussage vermitteln muss. Der Projektstatus liegt in einer JSON-Datei neben lokalen Assets, mit einer Browser-Spiegelung zur Bequemlichkeit. Getrennte Geräte-Decks und lokalisierte Beschriftungen unterstützen mehrere Store-Ziele. Bestehende Projekte erhalten einen Migrationspfad, der auf Bewahrung ausgelegt ist, statt stillschweigend verbundene Exporte zu übernehmen, die zuvor beschnittene Kompositionen verändern könnten.

Erwartete Ergebnisse

Ein lokaler Screenshot-Design-Editor mit vorbefüllten App-Inhalten
Eine Projektdatei (JSON), geeignet für die Versionskontrolle, plus lokale Screenshot-Assets
PNG-Export-Bundles, geordnet nach Gerät, Abmessungen und Sprache

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Bestehende Arbeit prüfen
Prüfe vor dem Einrichten, ob bereits ein Screenshot-Projekt existiert. Falls eine Migration gewünscht ist, bewahre Texte, Decks, Assets und wiederherstellbare Snapshots der Nutzer, statt sie durch Beispiele zu ersetzen.
02
Echtes App-Material bereitstellen
Sammle Geräteaufnahmen, Icon, App-Namen, priorisierte Features, Zielplattformen, Sprachen und Stilrichtung. Das Erstellen der Screenshots ist bei Bedarf eine separate Aufgabe.
03
Das Deck komponieren
Nutze den mitgelieferten Editor, um Layouts zu variieren, und formuliere pro Bild einen klaren Nutzen. Plane jedes screenübergreifende Objekt so, dass wichtige Texte und UI in jedem einzelnen Ausschnitt lesbar bleiben.
04
Die Exporte prüfen
Prüfe Lesbarkeit als Thumbnail, lokalisierte Zeilenumbrüche, das Laden der Assets und die exportierten Ausschnitte. Exportiere das Bundle jedes ausgewählten Geräts und prüfe vor der Einreichung die aktuellen Store-Anforderungen.

02 Einsatzbereiche

Wann du es einsetzt

Erfordert den mitgelieferten Next.js-Editor, eine unterstützte Node-/Paketmanager-Umgebung und einen Browser. Der PNG-Export nutzt html-to-image; Quell-Aufnahmen, Schriften und andere Assets benötigen passende Nutzungsrechte.

Gut geeignet

Wiederholbare Listing-AssetsNützlich, um Store-Marketingbilder neben einem Produkt-Repository zu pflegen, sodass andere Beteiligte dieselben Inhalte und Assets erneut öffnen können.
Koordinierte Screenshot-SetsPasst zu Decks, die gemeinsame visuelle Kontinuität brauchen, ohne dass jeder Screenshot dieselbe zentrierte Smartphone-Komposition nutzen muss.

Zu prüfende Grenzen

Kein Service für App-AufnahmenDer Editor erwartet echte Aufnahmen. Die Quelle verweist für einige iOS-Workflows auf einen separaten Begleitpfad; auf anderen Plattformen ist weiterhin ein geeigneter Aufnahmeprozess nötig.
Keine Garantie für Store-FreigabeExportgrößen in einer Vorlage sind Implementierungsdaten, kein Versprechen aktueller Store-Konformität. Bestätige die neuesten Regeln des Ziel-Stores und prüfe die tatsächlichen Produktaussagen vor dem Upload.

Diese Eingaben mitbringen

App-Aufnahmen und IconStelle Screenshots in nativer Auflösung für die anvisierten Geräte und Sprachen bereit, dazu das freigegebene App-Icon.
Feature-PrioritätenListe die echten Vorteile in der richtigen Reihenfolge auf und liefere Belege für Bewertungen, Auszeichnungen oder Nutzungsaussagen. Erfinde keine Social Proofs, um das Hero-Bild zu füllen.
Plattformen und SprachenNenne die gewünschten Stores, Geräte-Decks, Sprachen, den visuellen Stil und ob ein bestehendes Projekt migriert werden soll.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Verbunden und doch eigenständig
Eine screenübergreifende Komposition kann dem Set Kontinuität geben, während die Einzelprüfung der Ausschnitte verhindert, dass Headlines oder wichtige UI außerhalb des gesamten Streifens unverständlich werden.
Wiederherstellbarer Projektstatus
Die JSON-Datei und hochgeladene Assets machen die Zusammenarbeit belastbarer als ein reines Browser-Mockup. Ältere isolierte Exporte bleiben getrennt, bis die verbundene Komposition bewusst aktiviert wird.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Verwende den gesamten Skill-Ordner mit Editor-Vorlage und Stilreferenzen. Der Installationsbefehl für das Capture-Begleitwerkzeug in der Quelle installiert ein separates Tool; er installiert nicht diesen Screenshot-Editor.

Upstream-Quelldatei

https://github.com/ParthJadhav/app-store-screenshots/blob/82d4ebba770ce821d89e27f6a5bd30a2cb65ab23/skills/app-store-screenshots/SKILL.md

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor du den Skill ausführst.

Beispiel-Briefing

Nutze App Store Screenshots, um ein rein englisches iPhone-Listing-Deck für die bereitgestellte Gewohnheits-App zu erstellen. Verwende das mitgelieferte Icon und sechs echte Aufnahmen, priorisiere Wochenplanung und Streak-Wiederherstellung und erfinde keine Bewertungen oder Auszeichnungen. Befülle den mitgelieferten Editor mit abwechslungsreichen Layouts und einem dezenten screenübergreifenden Dekormoment. Halte jede Headline innerhalb ihres eigenen Ausschnitts und prüfe die exportierten PNGs anschließend in Thumbnail-Größe. Lade nichts in einen Store hoch.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jedes exportierte Bild vermittelt einen vollständigen Nutzen, ohne einen benachbarten Screenshot zu benötigen.
Alle ausgewählten Sprachen lösen auf echte Texte und gültige Aufnahmepfade auf, ohne unerklärten Fallback-Text.
Die Projektdatei und die lokalen Assets können das beabsichtigte Geräte-Deck nach dem erneuten Öffnen reproduzieren.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber: ParthJadhav
Repository: ParthJadhav/app-store-screenshots
Skill-Datei: skills/app-store-screenshots/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 82d4ebba770c

Redaktionelle Quellenzusammenfassung

Ein vorlagenbasierter Screenshot-Editor mit lokaler Projektspeicherung, getrennten Plattform-Decks, lokalisierten Texten, verbundener Komposition und Exportprüfungen mit Fokus auf Zuschnitte.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Erzeugt es die tatsächlichen Screenshots der App?

Seine Hauptaufgabe ist, Marketing-Assets aus bereitgestellten Aufnahmen zu komponieren. Die Automatisierung der Aufnahme ist, sofern relevant, ein separater Begleit-Workflow.

Kann ein Gerät zwei Screenshots überlappen?

Ja, der verbundene Modus exportiert Ausschnitte einer gemeinsamen Canvas. Halte wichtigen Text und UI innerhalb jedes Ausschnitts und prüfe die Bilder einzeln.

Verändert ein Upgrade eines alten Projekts dessen Ausschnitte?

Die Quelle belässt ältere Projekte im isolierten Modus, sofern sie nicht bereits die verbundene Komposition gewählt haben. Eine Migration sollte bestehende Assets und Texte mit einem wiederherstellbaren Backup bewahren.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladen Design-Skills durchstöbern