貝老闆：「準備來賺美金啦！國際版要上線啦！五語系：中文、English、日本語、한국어、Español，全都交給 AI 翻一下就行！」

小可： 「行是行，但你看——按鈕變兩行、表單標籤衝出邊界、FAQ 變詩集。還有 ‘%s 位使用者’ 被直翻成 ‘%s users 們’，字距像擠沙丁魚。」

貝老闆：「沒事啦，我把字體縮到 12px……咦怎又爆框？」

小可：「因為西文會變長、日文沒有空格、韓文斷詞不一樣、還有西班牙文名詞性別。你這叫 UI 擠壓事故。」

（打給好威）

好威： 「先別怪 AI。i18n 不是把字丟進翻譯器，而是『字串管理、版面韌性、數字日期單位、複數規則、字體與排版』一組系統工程。沒有模組化，你等於叫每個版面自己求生。」

貝老闆：「那怎救？」

好威：「兩步：先模組化，把文案和元件拆乾淨；再 i18n，用 ICU 規則、fallback、pseudo‑loc 壓力測試。AI 很能幫，但要給它規格書，不是靈感。」

貝老闆：「你..講慢一點，太多無字天書聽不懂....」

好威：「貝哥哥!你又沒付我錢，一直想白嫖...自己記下來去問你家 AI...」

概念拆解

1️⃣ 文案模組化與 Key 設計（不要字串拼接）

把文案集中到 locales/.json，用語意化 key，例如 cta.startTrial、error.networkTimeout。避免把句子切片拼接（例如「您有」+ 數字 +「則訊息」），改用 ICU MessageFormat："inbox.count": "您有 {n, plural, one {# 則訊息} other {# 則訊息}}"。這樣 AI 翻譯才有上下文，不會把 {n} 搞丟，工程也不會為每種語言 if‑else 大亂鬥。

2️⃣ 版面韌性：為字長變化設計

i18n 後文字會 ±30% 變長；德文與西語常更長，日韓無空格。元件請預留彈性：按鈕 min/max-width、flex-wrap、line-height 與 word-break: break-word／overflow-wrap: anywhere。表單標籤與錯誤訊息採多行；避免把文案塞進固定寬度 icon 旁。搭配 pseudo‑localization（如把字拉長、加重音），提前看出爆框點，別等上線才驚叫。

3️⃣ 不是只有翻譯：數字、時間、幣別與複數

用瀏覽器 Intl：Intl.NumberFormat、Intl.DateTimeFormat、Intl.DisplayNames，以及 ICU 複數/選擇處理 1 item 與 2 items 差異，台灣顯示為 NT$、西班牙為 €。避免把日期硬寫 YYYY/MM/DD，用地區化格式；時區以使用者為準。這些交給程式與格式規則，別在翻譯檔硬寫死。

迷你範例（Next.js + i18next 想像稿）

// locales/zh-TW.json
{
  "cta": { "start": "開始免費試用" },
  "inbox": { "count": "您有 {n, plural, one {# 則訊息} other {# 則訊息}}" }
}

// Button.tsx
import { useTranslations } from "next-intl";
export default function StartButton(){
  const t = useTranslations("cta");
  return <button className="px-4 py-2 min-w-36 flex-wrap">{t("start")}</button>;
}

AI 協作怎麼問（Vibe Programming 提示範例）

「幫我把這段繁中文案轉為 English/日本語/한국어/Español，遵守 ICU 變數 {n} 不可更名。」

「檢查下列 JSON i18n 檔是否有遺漏 key、重複 key、或字串拼接風險，請產出修正版。」

「根據這份畫面，生成 pseudo‑loc 版本（字長 +40%），列出會爆版的元件與建議 CSS。」

Takeaways

A. 先模組化，後多語：沒有模組化的字串，就像把醬汁直接倒在便當裡。把文案集中管理、用語意化 key、禁止字串拼接，ICU 管變數與複數。當你告訴 AI 「這是產品詞彙表、這是 key 空間、這些不可更名」，AI 才能穩定產出，多語不會牽一髮動全身。

B. 版面預留 30% 伸縮：把按鈕、標籤、錯誤訊息與導覽列，都設成可換行與彈性寬；圖片旁文案避免硬卡固定寬度。啟用 pseudo‑loc 做壓力測試，請 AI 生成爆框報告與修正 CSS 建議，真的撐過去，正式翻譯就八九不離十。

C. 用規則取代土法煉鋼：數字、日期、幣別、複數、性別稱呼，不要靠手寫例外；交給 Intl 與 ICU。建一份術語表與語氣風格（Tone of Voice），AI 翻譯前先餵上下文，品質與一致性會大幅提升，也便於之後交給翻譯管理系統接手。

精煉重點 1：i18n 不是翻譯功能，而是產品能力。

精煉重點 2：先模組化再多語系，否則只是在放大混亂。

今日提問

1）你的系統有哪些文案是被「拼接」出來的？
2）若把主要頁面做 pseudo‑loc ＋40% 拉長，哪三個區域最容易爆？
3）你會先挑哪兩個頁面進行 i18n 試點？為何？

Prompt 小作業

把當前首頁文案整理成 locales/zh-TW.json，列出 20 個語意化 key，並讓 AI 產出 English/日本語/한국어/Es 版本；使用 ICU {n}、select、plural，再請 AI 生成 pseudo‑loc 版，截圖標記爆框處。