DOCSEARCHbyAlgolia
Submit Docs

App Store & Google Play Screenshots Generator

repository·main·Indexed 27 days ago

https://github.com/parthjadhav/app-store-screenshots

An AI-agent-driven tool that scaffolds a Next.js-based editor for creating professional marketing screenshots for the Apple App Store and Google Play Store. It features a connected canvas for spanning elements across slides, real device frames, and one-click bulk export of store-ready PNG bundles for various iPhone, iPad, and Android resolutions. The tool supports both Connected and Isolated modes, interactive layout editing, and project state management via app-store-screenshots.json.

Tokens
26.9K
Snippets
18
Records
116
Agent score
91%

What's inside app-store-screenshots

  1. Apply the Glossy 3D K-Beauty Creator style

    main
    The glossy-3d-kbeauty-creator style is a high-energy, social-first aesthetic inspired by K-pop and K-beauty influencer culture. It uses a deep purple gradient atmosphere, glossy chrome 3D typography, kawaii ghost mascots, and yellow hashtag pill stickers to create a 'Y2K social media moodboard' feel. This style is ideal for apps targeting creators, social networks, or community-driven platforms.

  2. Use the App Store & Google Play Screenshots Generator

    main

    Use this skill to scaffold a pre-built Next.js + ShadCN editor designed for creating marketing screenshots for iOS and Android apps. The tool is optimized for creating 'advertisement-style' screenshots rather than simple UI showcases.

    Key features include:

    • Live Preview: Real-time preview at true canvas resolution.
    • Interactive Editor: Drag-to-reorder screens, inline text editing, and layout switching.
    • Cross-screen Mockups: Move device frames, captions, and layered elements across adjacent screens for clipped crop exports.
    • Asset Management: Drop-target screenshot picker that saves files to public/screenshots/uploaded/<hash>.png.
    • Persistence: Auto-saves state to app-store-screenshots.json at the project root and mirrors to localStorage.
    • Platform Support: Easy switching between iOS and Android slide decks.
    • Bulk Export: One-click PNG export for all Apple/Google required resolutions using html-to-image.
    • Customization: Light/dark variants, theme presets, and locale selection.

    Supported Devices:

    • iPhone (portrait) — Apple App Store
    • iPad (portrait) — Apple App Store
    • Android Phone (portrait) — Google Play
    • Android Tablet 7" (portrait + landscape) — Google Play
    • Android Tablet 10" (portrait + landscape) — Google Play
    • Feature Graphic (1024×500 banner) — Google Play store listing header

  4. Implement the Closer Slide (Feature Wordlist) format

    main

    The 'Closer Slide' (Slide 5) is a typographic poster spread used as a payoff. It does not include a phone.

    Layout Requirements:

    • Background: Cream #F5EFDF with 3% noise.
    • Wordmark: "Superlist" top-left in navy #1B2336.
    • Content: A vertical stack of feature names, left-aligned, starting ~12% from top and ending ~10% from bottom. Margin left is ~8% of canvas width.
    • Typographic Rhythm:
      • Alternate between Script Coral and Sans Navy.
      • Script entries: 56–82pt.
      • Sans entries: 40–60pt.
      • Rotation: Each entry may rotate -2° to +3° independently.
      • Indentation: Some entries may be indented (0–60px) to break the left rag.
      • Bleed: Entries may intentionally bleed off the right edge of the slide.

  5. Implement Slide-by-Slide layout for Retro Rubberhose style

    main

    Follow this mandatory breakdown for the 5-slide sequence:

    1. Slide 1 (Cover): Warm cream #F4E6CC background + 7% noise. Top 'App Store' badge. Large Cooper Black headline. Bullet list with mascot-colored circles. Mascot row at bottom (partially cropped).
    2. Slide 2 (Stats/Wordmark): Mustard #F2BB46 background with vertical gradient to #E5A52E. Centered phone showing step count. 'CAN COCO' wordmark in bottom-right.
    3. Slide 3 (Companion): Soft butter cream #FBEFD2 background. Centered headline. Phone showing a 3-column grid of character cards. Large mascots outside the phone.
    4. Slide 4 (Interaction): Bubblegum pink #F3A6B7 background with large cream polka dots. Slightly tilted phone showing a chat bubble. Wide pink mascot inside the phone.
    5. Slide 5 (Data/Charts): Sage mint #BFD9B6 background. Phone showing a stats card with a bar chart. Tiny mascot inside the phone waving.

  6. Use layout variations and narrative arcs for slide decks

    main

    To create a professional deck, vary your layouts and follow a logical narrative flow.

    Recommended Narrative Arc

    • #1 Hero / Main Benefit: The most important slide.
    • #2 Differentiator: What makes the app unique.
    • #3 Ecosystem: Widgets, watch, or extensions (if applicable).
    • #4+ Core Features: One feature per slide, most important first.
    • 2nd-to-last Trust Signal: Social proof or target audience (e.g., "made for people who [X]").
    • Last More Features: A list of extra features (pills).

    Available Layouts

    • hero: Centered headline + bottom-anchored device.
    • device-bottom: Centered headline + bottom-anchored device (smaller headline).
    • device-top: Device above caption (high contrast).
    • two-devices: Layered front and back phones.
    • no-device: Large standalone headline.
    • split-landscape: Caption left + device right (optimized for tablets).
    • feature-graphic: 1024×500 Play Store banner.

    Tip: Never repeat the same layout twice in a row. Use inverted (dark) slides to create visual rhythm.

  7. Apply Retro Rubberhose Mascot style rules

    main

    To achieve the 1930s rubber-hose cartoon style (inspired by Cancoco), follow these strict visual constraints for App Store screenshots:

    Layout & Device

    • Phone Scaling: On phone-bearing slides (including the Hero), the phone height must be 80–88% of the canvas height (approx. 2300–2520px on a 1320×2868 canvas). The bottom of the phone must bleed off the canvas edge by 4–10% of its own height.
    • Device Frame: Use the default iPhone mockup PNG provided in the template. Do not use custom or hand-drawn bezels.
    • Mascot Scale: Hero/cover mascots must be ≥ 420px tall (on 1320×2868 canvas). Companion mascots must be ≥ 300px.

    Visual Effects & Texture

    • Paper Grain: Apply paper grain noise to every background at 7–9% opacity using SVG feTurbulence (baseFrequency 0.65, mix-blend multiply).
    • Ink Outlines: Use a solid black #1A1A1A stroke with a width of 3–4px. Use stroke-linecap: round and stroke-linejoin: round. Avoid hairlines.
    • UI Stickers: Inside the phone, all cards and buttons must have a 2-3px black border and a hard offset shadow: 0 3-4px 0 #1A1A1A. Do not use soft blur shadows.
    • Headline Squiggle: Use a hand-drawn SVG path (4–6 control points, 4–5px stroke) to underline emphasized words.

  8. Style Backgrounds and Images (Paper Style)

    main

    Avoid using real photographs in this style. Surfaces must consist of:

    • Flat paper textures (for backgrounds).
    • Solid color paper cards (for phones, notes, and ID card bodies).
    • Pixel-art stickers (for a vinyl cutout look).
    • Hand-drawn marker illustrations (squiggles, stars, arrows).

    Polaroid Exception: If a real product photo is required, it must be styled as a Polaroid:

    • Border: 12px white paper border with a 24px chunky bottom border.
    • Attachment: Taped to the surface with two washi-tape strips at the top corners.
    • Rotation: Between -6° and +6°.

  9. Design specifications for Hand-Drawn Editorial (Tasks Edition) style

    main

    This style guide defines a specific visual identity for app screenshots, characterized by a 'Superlist canonical' look: hand-drawn doodles, mixed typography (sans-serif and script), and a specific color palette.

    Core Visual Rules:

    • Typography: Use a clean sans-serif for headlines and a hand-drawn script for emphasis. Script text should be rotated -3° to +5° and have a shifted baseline.
    • Doodles: Mandatory hand-drawn accents (squiggles, underlines, stars, or arrows) must accompany script text. Use ~4–6px strokes with round caps.
    • Phone UI: Use a slim modern iPhone frame in dark mode (#0E1018). The phone should be tilted 10–25° and bleed off the bottom edge of the canvas by 15–30%.
    • Layering: Every slide requires a 3% noise overlay on top of the solid background color.
    • Floating Elements: Use 'sticker' cards (reactions, toasts) floating just off the phone edge to create a 3D collage effect.

  10. Visual Specifications for Glossy 3D K-Beauty Creator Style

    main

    The 'Glossy 3D K-Beauty Creator' style is a high-density, moodboard-inspired aesthetic characterized by deep purple/magenta gradients, glossy 3D chrome typography, and floating K-beauty UI elements.

    Core Visual Elements

    • Color Palette: Deep purple to magenta gradients with radial blooms. Primary accents are Pink (#FF5FA5) and Yellow (#FBE254).
    • Typography: Bold sans-serif only (e.g., Pretendard, Noto Sans KR, Inter, SF Pro) with weights 800-900. Use all-caps for emphasis (e.g., CONNECTED, VIP).
    • 3D Chrome Treatment: For hero numbers or words (e.g., "100K"), use a front-face gradient, side extrusion, bevel, white specular streak, warm yellow outer glow, and a deep purple drop shadow. Tilt elements by 4-6°.
    • UI Design: Inside the phone, use white or off-white card-based UI with ~16-20px corner radius. Use a soft 1px rgba(255,255,255,0.04) inner stroke for cards.
    • Decorative Accents: Scatter sparkles (✦), tiny stars, glitter specks, and a soft purple lens flare. Use floating yellow hashtag pill chips at random rotations (-15° to +15°).
    • Mascot: A soft, amorphous lavender 'ghost-blob' with sparkle eyes, appearing to peek from behind objects or UI cards.

  11. Visual Design Principles for App Store Screenshots

    main

    To create high-quality screenshots, follow these design rules:

    • Backgrounds: Use deliberate surfaces (saturated colors, warm creams like #F4F1EC, dark navies, or gradients). Avoid plain white.
    • Headlines: Occupy the top 30–40% of the canvas. Use mixed emphasis (one word with a different color, weight, or style) to create visual interest.
    • Accents: Layer in decorative elements like hand-drawn squiggles, sparkles, label badges, or floating widget chips.
    • Framing: Vary phone framing (Bezelless, Tilted/Floating, or Full Device) across the deck to maintain rhythm.
    • Density: Keep the phone UI dense (real data/charts) but keep the area outside the phone sparse (one headline, one visual).
    • The Last Slide: Use either a Feature Wall (vertical list of one-word features) or a Phone Mosaic (grid of mini-screenshots).

  12. Implementation Guide: Glossy 3D K-Beauty Creator Style

    main

    Follow these steps to construct a slide in the Glossy 3D K-Beauty Creator style:

    1. Canvas Setup: Create a 1242×2688 (or 1290×2796) canvas. Apply a global purple gradient background with radial bloom, starfield, and corner vignette.
    2. Device Placement: Place a phone mockup centered with a soft purple bloom and drop shadow. Tilt it between 0-6° for energy.
    3. UI Rendering: Render K-beauty UI (product feeds, chat, or profiles) on white/off-white cards inside the phone using Pretendard or Noto Sans KR.
    4. Headline Construction: Place headline copy above or below the phone in bold white sans. Reserve one word per slide for emphasis using yellow color, larger scale, or chrome 3D treatment.
    5. 3D Hero Elements: Build chrome 3D text with front-face gradients, side extrusion, bevels, white specular streaks, and a warm yellow outer glow.
    6. Sticker Layering: Scatter yellow hashtag pill chips at random rotations (-15° to +15°) around the phone. Ensure every floating element (chips, mascot, 3D objects) casts a small, consistent drop shadow to create a layered moodboard effect.
    7. Final Polish: Add decorative sparkles (✦), tiny stars, glitter dots, and a soft purple lens flare. Include the lavender ghost-blob mascot at least once.