Generate draft translations with screenshots and flow context attached, design-review the results for layout breakage and cultural register, and keep a native-speaker gate for the markets that matter. Translation quality is a design property — a correct string that overflows its button or lands in the wrong register still fails the user.
Workflow area: Content & UX Writing · Tier: Core · Hands-on time: ~30 minutes
Traditional localization ships strings to translators in a spreadsheet: no screen, no flow, no idea whether "Save" is a button, a menu item or a noun. The result is grammatically correct copy that breaks layouts, misses register, and translates the wrong sense of ambiguous words. Multimodal models flip the workflow: they can see the screenshot, read the flow, and draft with context the spreadsheet never carried. That doesn't make them native speakers — it makes them context-aware drafters whose output a designer can review visually and a native speaker can gate efficiently.
Package context, not just strings. For each batch: the string with its ID, a screenshot of the screen it lives on, what the element is (button, title, tooltip), character or width constraints, and one line of flow context ("appears after the user cancels a paid plan"). This package is the whole trick — it is what the spreadsheet never had.
Draft with a register brief per market. Language alone underspecifies: German business software expects Sie, a fitness app might use du. Decide register per market before drafting:
Translate these UI strings to [LANGUAGE] for [MARKET].
PRODUCT: [one line]. REGISTER: [formal/informal, e.g. German Sie;
concise; no anglicisms where a natural native term exists].
For each string you get: ID, English source, element type, max
characters, flow context, and a screenshot reference.
Rules:
1. Fit the character limit. If natural [LANGUAGE] cannot fit,
return your best short form AND flag it OVERFLOW-RISK with the
natural longer form noted.
2. Match the element: buttons are verbs/actions, titles are nouns.
3. Flag AMBIGUOUS any English string whose sense you had to guess.
4. Keep product terms from this glossary untranslated: [TERMS].
ID: btn.trial.start | "Start free trial" | button | max 20 chars |
pricing page, primary CTA | screenshot 1
[PASTE BATCH]
Good output looks like this:
btn.trial.start → "Jetzt kostenlos testen" (22 chars) OVERFLOW-RISK
short form: "Kostenlos testen" (16 chars) — natural, keeps meaning.
dlg.cancel.title → AMBIGUOUS: "Cancel" = abort dialog or cancel
subscription? Screenshot suggests subscription → "Abo kündigen".
Run the visual layout pass on real screens. Get the drafts into the actual UI — a localized staging build, or Figma frames with strings swapped in. Screenshot each screen and have a vision model sweep it: text overflowing buttons, truncated labels, wrapped headings, mixed-language leftovers. German runs ~30% longer than English and will find every fixed-width container you forgot.
Review register and culture like a designer, not a proofreader. Ask the model to self-audit the batch — formality consistency (no Sie/du mixing), date/number/currency formats, idioms that don't travel, imagery or metaphors with unintended local meaning — then read its findings as claims to check, not verdicts to accept.
Gate with a native speaker — efficiently. Send the native reviewer the flagged subset first (OVERFLOW-RISK, AMBIGUOUS, register flags) plus a random 20% sample of the unflagged rest, with screenshots. If the random sample surfaces problems the flags missed, widen the review; if it's clean, ship and log the reviewer's corrections back into the glossary and register brief so the next batch starts smarter.
Screenshots for localization often show real account data — use demo accounts or scrub personal information before sharing screens with any AI tool, and keep unreleased-market plans inside your approved tenant.
Context is what makes translation design work: screenshots in, constraints honored, register briefed, visual pass on real screens — and a native speaker owning the final yes in every market you actually care about.