App Store screenshot set, one device size

The mobile team builds this set before every App Store submission. One device size. Headlines get rewritten in review three times. Each rewrite has to hit every screen. This is submission work.

The people doing this already have the screens. What they do not have is stable copy. Review will change the headline band. The set has to take that change as a data edit, not as six manual re-crops of a design file.

The job is a screenshot set at one size. Device frame, headline band, screenshot slot. The underlying UI is drawn by the component. You edit { headline, subhead } on each screen and export again. You do not re-crop six frames by hand after the third rewrite.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same components, colocated data, one run. There is no batch product, no queue, no orchestrator.

The component is .lerret/appstore/6-7/screen-*.jsx. Each file is a device frame, a headline band, and a screenshot slot. The underlying UI is drawn by the component, not pasted in from a device photo. The 6-7 group is the one device size this case covers. The glob is the set.

Data is per-screen colocated .data.json with { headline, subhead }. That is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures the set. A headline rewrite is a data edit and a re-export. The subhead is a field on the same file, so it changes the same way.

The image is a PNG at 1080×1920, matching the shipped App Store screenshot example size.

You use Lerret because headlines get rewritten in review three times. Each rewrite is a data edit and a re-export, not six manual re-crops. A design file with six frames means six text layers to chase. Screenshots from a phone will not share the headline band, and they will not stay lined up when the copy changes.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.