13 KiB
Website and App Store marketing workflow
This file is the durable source of truth for Termind website screenshots, MockUPhone device renders, Figma App Store artwork, localization, and export verification. It covers marketing infrastructure only. Do not change product behavior to make a screenshot easier to capture.
Scope and invariants
- Production SwiftUI, persistence, navigation, networking, and settings behavior are out of scope. Screenshot-only tests and scripts may construct real app views with in-memory fixtures.
- Source screenshots are immutable inputs. Never overwrite a source while framing, composing, or exporting marketing artwork.
- The screenshot tree is feature-first. Do not reorganize it by device.
- All fixtures use in-memory fake hosts, files, metrics, and conversations. They never connect to a real host, account, or network service.
- Terminal commands and output stay in English in every locale. Only app chrome, marketing titles, and explanatory copy are localized.
- iPhone and iPad captures must include the real system status bar, navigation title, back/sidebar controls, toolbar controls, and home indicator. Do not draw any of them by hand in Figma, CSS, or an image editor.
- A Mac capture is valid only while the capture window is the active key window. The colored traffic lights and blue focused-pane outline are visible evidence.
- Website CSS may position and shadow device artwork, but must never recreate a bezel, notch, laptop body, screen mask, status bar, or traffic lights.
- Traditional Chinese follows Taiwan usage. In particular, Server is
伺服器. Use PingFang SC for Simplified Chinese and PingFang TC for Traditional Chinese.
Asset layout
Raw and framed files live together under:
LandingPage/public/screenshots/<feature>/
iphone-<locale>.png
iphone-<locale>-framed.png
ipad-<locale>.png
ipad-<locale>-framed.png
mac-<locale>.png
mac-<locale>-framed.png
Locales in filenames are en, zh-hans, and zh-hant. Current feature folders
include workspace, ssh, sftp, metrics, assistant, vault, and
command-generator. A missing platform file is not permission to fabricate UI.
Raw captures have no -framed suffix. Framing scripts may replace a framed file,
but must never replace its raw input. The Mac capture script backs up previous raw
Workspace files under .build/screenshot-backups/<timestamp>/ before replacement.
iPhone and iPad source captures
The source is TFITests/MobileMarketingScreenshotTests.swift. It mounts the real
SwiftUI feature views in a system window and uses in-memory demo models. The test
and the external script exchange a ready/acknowledgement marker so simctl captures
the complete simulator display rather than only a rendered view hierarchy.
Generate every mobile source:
Scripts/run-mobile-marketing-screenshots.sh
The required devices and outputs are:
- iPhone 17 Pro Max, portrait,
1320x2868. - iPad Pro 13-inch (M5), landscape,
2752x2064. - Five scenes per locale:
vault,sftp,ssh,metrics, andassistant. - Three locales, producing 15 screenshots per device and 30 total.
For a targeted recapture, set both filters. This example refreshes only the three localized iPad Assistant sources:
TERMIND_MARKETING_SCENES=assistant \
TERMIND_MARKETING_DEVICES=ipad \
Scripts/run-mobile-marketing-screenshots.sh
The runner sets a deterministic 9:41 status bar, charged battery, Wi-Fi, and
cellular state. iPad framebuffer output is rotated after capture because simctl
keeps portrait pixel orientation for a landscape display. Confirm the final file
dimensions rather than trusting Simulator orientation alone.
Whenever SFTP, Metrics, Assistant navigation, or system chrome changes, recapture the affected device and every locale. A marketing fixture may be updated to expose the current UI, but it must not add production behavior.
Mac Workspace source captures
The source is TFMTests/MacMarketingScreenshotTests.swift. It constructs the real
RootView and ScreenshotDemoConfiguration inside a native NSWindow. Before it
publishes the ready marker, it requires both NSApp.isActive and
window.isKeyWindow.
Generate all three localized Workspace sources:
Scripts/run-mac-marketing-screenshots.sh
The runner:
- builds the TFM test host from the pinned package resolution;
- launches one locale at a time with matching Apple language and region;
- waits for an active/key window marker;
- captures the system window by window number;
- removes only the two-pixel transparent capture edge when present;
- verifies a final
2360x1480sRGB source.
The current Workspace contains focused English terminal panes and the current SFTP browser. SFTP filenames, types, dates, and app chrome localize; terminal transcripts do not. Re-run this flow whenever desktop SFTP or Workspace UI changes.
MockUPhone device renders
Scripts/generate-mockuphone-assets.py uses MockUPhone's front-facing Apple device
templates and its screen geometry. Run it with the workspace Python runtime, which
provides Pillow:
/Users/kaede/.cache/codex-runtimes/codex-primary-runtime/dependencies/python/bin/python3 \
Scripts/generate-mockuphone-assets.py
Selected device templates are the highest-end suitable models currently available in MockUPhone:
- iPhone 15 Pro Max, Black Titanium, portrait.
- iPad Pro 13-inch, Space Gray, landscape.
- MacBook Pro 16-inch, front.
The generator creates 15 framed iPhone files, 15 framed iPad files, and three framed Mac Workspace files. Device templates are credited by MockUPhone to Apple Design Resources.
The Mac source is a window, not a complete desktop. Before it enters the MacBook screen, the generator places it over a deterministic Termind-owned blue/cyan abstract background. The background contains no Apple wallpaper, third-party photography, Dock, desktop icons, or user data. The window occupies approximately 91% of screen width and 88% of screen height, leaving a visible border of the background. Do not add a second titlebar or another set of traffic lights.
Website integration
The Astro homepage reads *-framed.png files. Keep explicit image dimensions in
LandingPage/src/pages/index.astro synchronized with generated assets:
- iPhone framed:
1530x3036. - iPad framed:
2960x2290. - MacBook framed:
4340x2860.
Device images use their intrinsic aspect ratio and object-fit: contain. Feature
containers may clip decorative shadows, but never device pixels. A complete device
must remain visible from status/title bar through the bottom toolbar or home
indicator.
Formal locale routes are /, /zh-hans/, and /zh-hant/. /zh/ and its child
paths remain compatibility redirects to Simplified Chinese. Automatic language
detection runs only on the root English path and respects termind.locale after a
manual selection. Taiwan displays 正體中文; Hong Kong, Macau, and generic Hant
display 繁體中文.
The App Store call-to-action uses the restored Apple silhouette path. Do not replace it with a dot, text glyph, emoji, or CSS circle.
Homepage messaging
The primary story is a capable, permission-aware remote workspace, not merely the number of supported devices. Keep the established line:
Your terminal, with judgment.
你的终端,自有判断。
The concise Hero description is:
SSH, SFTP, workspaces, and a bring-your-own-key AI assistant—built as one native
app. It can inspect, explain, and act, but only inside boundaries you control.
Platform-specific marketing must state a useful workflow rather than physical screen size or implementation trivia:
- SFTP:
Move files. Keep your flow./传文件,不必换工具。Emphasize browse, preview, drag-to-upload, background transfers, and opening the same path in SSH. - Metrics:
Know which server needs you./哪台服务器需要你,一眼就知道。Emphasize finding abnormal hosts, drilling into pressure, and continuing over the same SSH connection. Sync exclusions belong in FAQ or Privacy, not the feature pitch. - Assistant:
An agent that knows when to ask./会行动,也懂得先询问。 - Vault:
Your Vault, protected by design./你的保管库,安全为先。Explain private iCloud sync and separate Keychain protection in one concise sentence. - Built-in MCP Server remains a prominent Mac-only section. Keep tool-level control, loopback-default access, and auditability visible without turning the Hero into a protocol description.
Figma and Figwright workflow
The App Store source of truth is the connected Figma design file named Termind.
Use the Figwright MCP connection, not the rate-limited hosted Figma MCP, for this
file. The Figwright plugin must be running in the target Figma tab.
Before any write:
- call
ping; - call
list_files; - claim
Termindwhen more than one file is connected; - inspect variables, local components, styles, fonts, and existing pages;
- stop rather than writing into a different or unclaimed file.
The file pages are Foundations, Components, App Store Mac,
App Store iPhone, App Store iPad, and Promo. Reuse the established Termind
color, scale, typography, title-block, platform-label, and screenshot-surface
assets. Build and screenshot-check English first, then expand to both Chinese
locales.
The final matrix is exactly 54 store boards:
3 locales x 3 platform sets x 6 boards = 54
Board sizes:
- Mac:
2880x1800. - iPhone 6.9-inch:
1320x2868. - iPad 13-inch:
2752x2064.
Content order:
| Number | iPhone / iPad | Mac |
|---|---|---|
| 01 | Mac + iPhone + iPad | Mac + iPhone + iPad |
| 02 | SSH | Workspace |
| 03 | SFTP | Metrics |
| 04 | Metrics | Assistant |
| 05 | Assistant | Vault |
| 06 | Vault | Command Generator |
Mockup rules are strict:
- iPhone and iPad use MockUPhone artwork on all six boards.
- Mac uses MockUPhone only on board 01.
- Mac boards 02-06 use native window screenshots with one consistent soft window shadow. Do not add another hardware or window frame.
- The first board uses Mac Workspace, iPhone SSH, and iPad SFTP as complementary scenes. All three devices remain completely visible.
English uses SF Pro. Simplified Chinese uses PingFang SC. Traditional Chinese uses
PingFang TC and Taiwan terminology. Platform labels remain MAC, IPHONE, and
IPAD; do not translate product platform names.
Useful Figma node IDs from the completed file:
- Foundations:
25:54. - Components:
25:96. - Mac locale sections:
25:106,25:308,25:374. - iPhone locale sections:
25:173,25:440,25:511. - iPad locale sections:
25:236,25:582,25:653.
App Store exports
Export the 54 final boards as high-quality, opaque, sRGB JPG files:
Marketing/AppStore/<locale>/mac/01-06-*.jpg
Marketing/AppStore/<locale>/iphone-6.9/01-06-*.jpg
Marketing/AppStore/<locale>/ipad-13/01-06-*.jpg
No .DS_Store, preview, manifest, temporary PNG, or Figma helper file belongs in
the delivery tree. A quick verification is:
test "$(find Marketing/AppStore -type f -name '*.jpg' | wc -l | tr -d ' ')" = 54
test -z "$(find Marketing/AppStore -type f ! -name '*.jpg' -print -quit)"
for platform in mac iphone-6.9 ipad-13; do
find Marketing/AppStore -path "*/$platform/*.jpg" -print0 \
| xargs -0 identify -format '%wx%h %[colorspace] %[channels] opaque=%[opaque]\n' \
| sort | uniq -c
done
Expected grouped results are 18 opaque sRGB three-channel images at each platform size. Review every board at 100% in Figma and inspect contact sheets for each platform/locale before delivery.
Verification checklist
Run after screenshot, copy, route, or marketing changes:
cd LandingPage && npm run build
cd .. && Scripts/check-zh-localization.sh
xcrun swift-format lint --strict \
TFITests/MobileMarketingScreenshotTests.swift \
TFMTests/MacMarketingScreenshotTests.swift
zsh -n \
Scripts/run-mobile-marketing-screenshots.sh \
Scripts/run-mac-marketing-screenshots.sh
/Users/kaede/.cache/codex-runtimes/codex-primary-runtime/dependencies/python/bin/python3 \
-m py_compile Scripts/generate-mockuphone-assets.py
Also confirm manually:
- all formal and compatibility routes build;
- the Apple icon renders in the App Store button;
- no CSS bezel obscures a screenshot;
- iOS status/navigation chrome is real and complete;
- SFTP reflects the current production UI on every platform;
- iPad Assistant is the latest capture;
- Mac traffic lights are colored, one pane has the active blue outline, and the MacBook render contains no Dock or copyrighted wallpaper;
- Chinese glyphs use the intended PingFang family;
- Traditional Chinese uses
伺服器and other Taiwan-standard terms; - the store export directory contains exactly 54 final JPG files.
As of 2026-09-13, these checks pass and the 54 exported files are present under
Marketing/AppStore.