Modules
Module: marketing images rendered from the app
The strongest landing page among the source projects illustrated each claim with a picture of the real app — rendered out of the binary, not drawn in a design tool. A picture rendered from the code cannot show a control the app does not have, and it updates the day the UI does. This is how.
The mechanism already exists
-AppRenderScreens <dir> (mac/App/App/ScreenRenderer.swift) renders every
screen state to PNGs, light and dark. For the site you want a variant:
- Transparent backgrounds where the image sits on the page's own colour —
drop the
.background(Palette.bone)for these renders. - The components that sell, not every state: add a second list, e.g.
-AppRenderShots <dir>, next to the screen list. - Built inline, never from
PreviewFixtures, which are#if DEBUG: a page selling the product must not be illustrated by a build nobody ships, and building-configuration Releaseproves it.
Then a small script copies the PNGs into site/public/shots/ and the site
references them with next/image.
Three things that cost something to rediscover
- Pass the locale. Anything formatted with the current locale renders
1 750instead of1,750on a European Mac. Launch the render with-AppleLocale en_US -AppleLanguages "(en)", from the script, every time. - Fix the instant, and choose it. Anything time-based (a countdown, "3 days left") must render from a constant date, chosen so the numbers match whatever the page's copy says beside the picture. A live clock makes the picture contradict the paragraph under it.
- AppKit controls do not render.
ImageRendererhas no window, so text fields and switches come out as placeholders and groupedForms as nothing (mac/AGENTS.md). Shoot components built from SwiftUI; for anything else, capture a real window.
Honesty
Root AGENTS.md §7 applies to pictures as much as to words: a shot may not
show a feature the shipped build lacks, and a mock drawn in HTML beside a
rendered shot must agree with it — in one source project, the drawn mock was
what caught a menu-bar item the page promised and the app no longer had.
This page is docs/modules/marketing-shots.md in the repository, copied 2026-09-25.