Build Mac AppDocsMenu

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 Release proves 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

  1. Pass the locale. Anything formatted with the current locale renders 1 750 instead of 1,750 on a European Mac. Launch the render with -AppleLocale en_US -AppleLanguages "(en)", from the script, every time.
  2. 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.
  3. AppKit controls do not render. ImageRenderer has no window, so text fields and switches come out as placeholders and grouped Forms 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.