<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ben Spink</title>
    <description>The latest articles on Forem by Ben Spink (@ben_spink_8598a37425e3d0b).</description>
    <link>https://forem.com/ben_spink_8598a37425e3d0b</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3815177%2F3633d328-f4f4-47c2-93e3-8e7f645255e8.png</url>
      <title>Forem: Ben Spink</title>
      <link>https://forem.com/ben_spink_8598a37425e3d0b</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ben_spink_8598a37425e3d0b"/>
    <language>en</language>
    <item>
      <title>I built an App Store Screenshot Generator so indie devs don't need Figma or designers</title>
      <dc:creator>Ben Spink</dc:creator>
      <pubDate>Mon, 09 Mar 2026 17:38:32 +0000</pubDate>
      <link>https://forem.com/ben_spink_8598a37425e3d0b/i-built-an-app-store-screenshot-generator-so-indie-devs-dont-need-figma-or-designers-pl8</link>
      <guid>https://forem.com/ben_spink_8598a37425e3d0b/i-built-an-app-store-screenshot-generator-so-indie-devs-dont-need-figma-or-designers-pl8</guid>
      <description>&lt;p&gt;Every time I shipped an iOS app update, the same problem hit me: screenshots.&lt;/p&gt;

&lt;p&gt;The app itself? Done. App Store description? Easy. But those 5-6 professional screenshots with backgrounds, device frames, and marketing text? That's where I'd lose half a day in Figma — or worse, spend $500 on a designer just to update a few images.&lt;/p&gt;

&lt;p&gt;So I built a tool that generates professional App Store screenshots in under 60 seconds.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works
&lt;/h2&gt;

&lt;p&gt;The core idea is dead simple: &lt;strong&gt;pick any successful app as a style reference&lt;/strong&gt;, and the tool matches that style for your screenshots.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Search for a reference app&lt;/strong&gt; — Type "Spotify" or "Notion" or whatever top app you admire. The tool pulls their real App Store screenshots via the iTunes API.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Upload your screenshots&lt;/strong&gt; — Drag and drop your own app screenshots. Any resolution works.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Generate&lt;/strong&gt; — The engine extracts colors, gradients, and layout patterns from the reference app, then composites your screenshots with professional backgrounds, device frames, and marketing headlines.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You get full App Store resolution images (1290x2796) ready to upload.&lt;/p&gt;

&lt;h2&gt;
  
  
  The tech stack
&lt;/h2&gt;

&lt;p&gt;Built with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Next.js&lt;/strong&gt; (App Router) + TypeScript&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;HTML5 Canvas&lt;/strong&gt; for all image composition — no server-side image processing needed for the generation itself&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supabase&lt;/strong&gt; for auth and user data&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stripe&lt;/strong&gt; for payments ($5/mo Pro plan)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Netlify&lt;/strong&gt; for hosting&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The screenshot generation engine uses canvas to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Extract dominant colors from reference screenshots&lt;/li&gt;
&lt;li&gt;Generate gradient backgrounds that match the reference style&lt;/li&gt;
&lt;li&gt;Render realistic iPhone frames (Dynamic Island, titanium bezels, screen reflections)&lt;/li&gt;
&lt;li&gt;Composite the user's screenshot inside the frame&lt;/li&gt;
&lt;li&gt;Add marketing headline text with proper typography&lt;/li&gt;
&lt;li&gt;Apply one of 16 different composition layouts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All rendering happens client-side in the browser. No waiting for server processing.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AI angle
&lt;/h2&gt;

&lt;p&gt;One feature I'm particularly excited about: &lt;strong&gt;an API that AI assistants can use&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;There's a dedicated &lt;code&gt;/for-ai&lt;/code&gt; page with a script you can paste into Claude, ChatGPT, or Cursor. The AI can then:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Search for reference apps&lt;/li&gt;
&lt;li&gt;Generate screenshots using your API key&lt;/li&gt;
&lt;li&gt;Even upload directly to App Store Connect&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So instead of opening a browser, you can literally tell your AI: &lt;em&gt;"Generate App Store screenshots for my fitness app using Nike Training Club's style"&lt;/em&gt; — and it handles everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned building this
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. The iTunes Search API is surprisingly good.&lt;/strong&gt; Free, no auth required, returns screenshots, icons, descriptions, and genre info. Just hit &lt;code&gt;https://itunes.apple.com/search?term=X&amp;amp;entity=software&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Canvas is incredibly powerful for image composition.&lt;/strong&gt; I was skeptical at first, but you can build production-quality image generation entirely in the browser. No need for Sharp, Puppeteer, or server-side rendering.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. The first screenshot matters 10x more than the rest.&lt;/strong&gt; When analyzing top apps, the first screenshot consistently had the most effort put into it — unique layout, strongest headline, most impactful visual.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it free
&lt;/h2&gt;

&lt;p&gt;Your first generation is completely free — no account required. After that, it's $5/month for unlimited.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://appstorescreenshot.app" rel="noopener noreferrer"&gt;Try the App Store Screenshot Generator&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I'd love feedback from other indie devs. What would make this more useful for you?&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>ios</category>
    </item>
  </channel>
</rss>
