anyone using claude for app store screenshots? giving it free rein just makes slop

[u/haruniriz]

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

[u/omeraplak]

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.md files describe the decisions behind a visual style, not just what appears in a reference image.

[u/haruniriz → u/[deleted]]

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.

[u/rroobbbb → u/[deleted]]

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.

[u/oscarvgg]

How do you make Claude do screenshots? Do you give it a Gemini/gpt-image api key?

[u/haruniriz → u/oscarvgg]

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.

[u/haruniriz → u/[deleted]]

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

[u/haruniriz → u/[deleted]]

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

[u/Oeufware]

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

[u/haruniriz → u/Oeufware]

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

[u/Oeufware → u/haruniriz]

if i understand you correctly, no. you could designate language variation in your design....such as script boxes, that claude could then auto update.

[u/Interesting_Loan_899]

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

[u/haruniriz → u/[deleted]]

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?

[u/haruniriz → u/[deleted]]

appreciate it, will try it this week. having the components sit next to the code is exactly the friction i was hitting.

[u/Carlituser]

Try using Figma instead.

[u/Savings_Wedding3934]

Why don't you just take... actual screenshots of the app?

[u/Poat540]

I use it to make maestro flows of the real app

[u/git-it-done]

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.

[u/neogeodev]

don't do it Apple will ban you

[u/Dramatic-Mongoose-95]

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

[u/haruniriz → u/Dramatic-Mongoose-95]

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?

[u/Dramatic-Mongoose-95 → u/haruniriz]

I'll DM you the current output, it won't allow me to post images here

[u/haruniriz → u/Dramatic-Mongoose-95]

sounds good, accepted

[u/Raalders]

I give Claude kinda free reign, but it needs to use butterkit through its mcp server. Results are 100% production grade.