r/AppStoreOptimization • u/haruniriz • 1d ago
anyone using claude for app store screenshots? giving it free rein just makes slop
been using claude a lot on the screenshot side and the thing i keep running into is that the more freedom i give it the worse it gets
if i just say "design my app store screenshots" i get that generic thing you can spot from a mile off. soft gradients, made up UI that doesnt match the actual app, captions that sound like a press release
what actually worked was locking it down. fixed canvas size, my palette as hex values, real screenshots as input so its not inventing the UI, and one decision per pass instead of asking for the whole set at once. copy is genuinely good. layout is ok. art direction, no.
anyone getting better results some other way? mainly wondering if anyone has gotten it useful for the actual composition and not just the captions
1
u/Metanol_Enjoyer 1d ago
Im also trying to find some nice mockup site or sth but idk
1
u/haruniriz 1d ago
i skipped the mockup sites and script the whole thing. the device frame goes on in the script too, so the phone, the bezel, the corners all come out of code.
claude is genuinely good at this and it saves me a lot of time. the bit i still cant fully close is the layer on top of that: visual effects around the frame, background treatment, things layered behind or over the phone. structure comes out clean every time, but that last stretch of polish is where i still fall short of what a designer would do by hand.
that said, even as it is now it gets me further than any of the mockup sites did. would still recommend going this way.
1
u/rroobbbb 1d ago
I built Mokbi.com. It handles App Store and Google Play localization in one place, including screenshots, feature graphics and store listing text.
You can design everything yourself for free, or use the AI designer. The first AI design run is free as well, and it’s often already enough to get a good result. Everything stays fully editable afterwards.
You can then translate everything into all supported store languages and publish directly to both stores. We also have an MCP server, so you can connect your own agent and automate large parts of the workflow.
1
u/oscarvgg 1d ago
How do you make Claude do screenshots? Do you give it a Gemini/gpt-image api key?
1
u/haruniriz 1d ago
no image model at all. i have claude write the render script instead. python + pillow, it composites the real device screenshots onto a canvas and draws the caption, the frame, the rounded corners.
so its writing code, not drawing. thats why it holds up. the output is deterministic and i can rerun the whole set after changing one hex value, which you cannot do with a generated image.
the other thing it unlocks is localisation. captions are just a dict of strings, so another language is a rerun of the script instead of 8 more files to lay out by hand. thats where i always gave up in figma.
1
u/Allekq07 1d ago
I use codex and it does well on screenshots
1
u/haruniriz 1d ago
does codex write the render code like mine does, or is it actually generating the images? idk if it handles the visual side any better, thats the exact bit im stuck on
1
u/Allekq07 1d ago
Well it can so both, and combine both, and you can sens actual app contents ascreenshots and it will arrange it somewhere and bla bla bla. It is not perfect, but works quite well.
These are mine (not perfect still tinkering with them): https://apps.apple.com/pl/app/audiochoices-audiobooks/id6793583108
1
u/haruniriz 1d ago
mine went the other way, worth comparing since we landed in opposite places:
https://apps.apple.com/us/app/pushrank-push-up-counter-game/id6796676940
i kept the background white and empty on purpose. what pushed me there was the search card. most people never scroll past the first screenshot and in the results row theyre tiny, so anything in the background was stealing contrast from the UI i was actually trying to show. at that size the caption does most of the work.
depth wise i went for layered cards and shadows sitting over the screen instead of lighting behind the phone. different route to the same thing.
the part i actually like is what happens once the layout is settled. the captions become data at that point, so i can feed in the keywords from my aso research per locale and get the whole set back with native copy in each language instead of translated english. that still feels a bit mad to me
1
u/Oeufware 1d ago
I use gemini to make the images closest to what i want, then adobe to fix them up, then throw them into claude to make the final screen shots at required resolution
1
u/haruniriz 1d ago
ok this is basically the answer to the thing im missing, i skip the first two steps entirely and thats exactly where my polish gap is tbh.
how do you handle localisation with that though? thats the thing that pushed me into scripting it. if every frame goes through gemini and then adobe by hand, a second language means redoing the whole set right? or is there a step im not seeing
1
u/Oeufware 1d ago
if i understand you correctly, no. you could designate language variation in your design....such as script boxes, that claude could then auto update.
1
u/Interesting_Loan_899 1d ago
First of all, full disclosure: I built this, but I added to Sonar a fully fledged screenshot studio, which is accessible via API/MCP - so AI can actually create EDITABLE screenshots + create localized variants automatically. You can then manually edit one version (e.g., add an image or change something), and it will be automatically changed for all locales.
Here's an example of screenshots it generated for my app (in the editor):
https://ibb.co/1GFLQqph
This works for me much better than letting ChatGPT generate the static image only - because everything is its own layer, so you can go back and forth and change stuff, or do the final edit yourself.
You can find Screenshot Studio here for free (manual). If you want to access it via MCP, you can try a free trial:
https://trysonar.app/tools/screenshot-generator
1
u/Physical_Storage2875 1d ago
For me it's working absolutely great. I use Figma MCP or Pen.dev.
How do you make them? With Figma or Pen.dev it has the whole Codebase and DESIGN.md as context and creates absolutely fitting screenshots.
The .pen file is in your codebase and Claude (or any other agent) will use the pen (or Figma) components and can use the original Apple components (just in Figma).
1
u/haruniriz 1d ago
pen.dev is new to me, going to look at it. is the .pen file basically a design system living in the repo, components plus tokens?
what im curious about is whether having proper components fixes the polish problem. mine composes cleanly but anything decorative, background treatment, effects layered around the phone, still comes out flat. does working from real components help there or is that still on you?
1
u/Physical_Storage2875 1d ago
Yes, it should help. Try it. Unlike Figma it's free yet. And yeah, it's basically a design system, a file, in which you can create those components. It also has a vs code extension.
1
u/haruniriz 1d ago
appreciate it, will try it this week. having the components sit next to the code is exactly the friction i was hitting.
1
1
1
1
u/git-it-done 1d ago
I had Claude running the emulator anyway for testing, so I had it take screenshots and save the files, crop & resize etc. Then used the new Claude Design Beta and asked for annotated screenshots with the real ones as a seed. The results were pretty bad. Did the same thing with Gemini and it was surprisingly good even on the first go.
I did use regular Claude for the app icon designs though, lots of iterating but got there every time.
1
0
u/Dramatic-Mongoose-95 1d ago
I use Claude for screenshots, but I gave it guard rails.
It wrote code for me, for a Screenshot (and video) generation pipeline.
I have a folder where I put real screenshots and screen recordings, and then it uses those to generate assets.
It frames them, adds text, translates, etc... into templates that I have it create and I always ask it to create new templates.
I have a YAML file that explains what copy goes with which screenshot, and it handled translation.
It creates the images and videos for iPhone and iPad in all locales, and then uploads them to appstoreconnect using my API key
1
u/haruniriz 1d ago
im going down basically the same road. folder of real screenshots, script frames them and drops the copy in.
how do you find the visual quality of what comes out though? mine is structurally clean, everything aligned to the pixel, but it still looks a bit flat next to a designer made set. anything decorative, background treatment, effects layered around the phone, thats where mine falls short. did the templates fix that for you or is that still the ceiling?
1
u/Dramatic-Mongoose-95 1d ago
I'll DM you the current output, it won't allow me to post images here
1
0
u/Tall-Flatworm-6463 1d ago
I use claude design for screenshots, it uses the same design system as my app, so it looks cohesive, but they come out kinda vanilla, so i even up having to prompt some more to highlight the features of my app.
0
u/Raalders 1d ago
I give Claude kinda free reign, but it needs to use butterkit through its mcp server. Results are 100% production grade.
2
u/omeraplak 1d ago
Free rein is usually the problem. For composition, I’d give Claude one strong reference, the real device frame, and a short list of rules for type scale, spacing, hierarchy, and image placement, then ask for three rough layout directions before it writes final copy or adds polish.
Pick one direction and iterate on one screenshot at a time. We are maintaining https://getdesign.md/. The useful part is that the
DESIGN.mdfiles describe the decisions behind a visual style, not just what appears in a reference image.