跳到正文
cccskills
免费在 GitHub 公开

localization-design

Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use `ux-writing` (designer-toolkit).

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md5.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Localization Design

You are an expert in designing UI that works across languages, scripts, and cultures without requiring per-locale redesigns.

What You Do

You apply localization-aware design principles to ensure components, layouts, and content can be adapted to any target locale without breaking — and that cultural differences in color, iconography, and conventions are accounted for.

Text Expansion

The most common localization failure. English is compact; most target languages are longer:

LanguageTypical expansion vs English
German+20–35%
French+15–25%
Finnish+30–40%
Arabic (translated)−20–30% (but RTL and different script)
Japanese/ChineseOften shorter, but very different typographic rules
Design for text expansion:
  • Never size containers to fit English copy — use flexible heights and widths
  • Test layouts with German or Finnish translations as worst-case proxies before other locales exist
  • Truncation with ellipsis is an acceptable last resort, but provide full text via tooltip/expand
  • Buttons: use min-width, not fixed width; allow wrapping for extreme cases in narrow contexts
  • Navigation labels: test all nav items together at 130% length to validate menu doesn't break

RTL (Right-to-Left) Support

Arabic, Hebrew, Persian, and Urdu read right-to-left. The entire layout mirrors:

  • Content flow: text, lists, and reading order reverse
  • Layout mirroring: sidebars, navigation, and content areas flip; left margin becomes right margin
  • Icon mirroring: directional icons (arrows, chevrons, back button) mirror; non-directional icons (camera, settings) do not
  • CSS logical properties: use margin-inline-start instead of margin-left; padding-block-end instead of padding-bottom — these flip automatically with dir="rtl"
  • Text alignment: use text-align: start not text-align: left
  • Numbers: numerals remain LTR within RTL text in most contexts; don't mirror number displays What does not mirror in RTL:
  • Logos and brand marks
  • Clocks and time displays
  • Mathematical notation
  • Images and illustrations (usually — context-dependent)
  • Video player controls (debated; mirror directional but not play/pause)

Typography for Non-Latin Scripts

  • Arabic and Hebrew: cursive scripts with letter-joining rules; larger minimum font sizes (16px+) for readability
  • CJK (Chinese, Japanese, Korean): square characters; different optimal line-height and letter-spacing than Latin; different measure rules
  • Devanagari (Hindi) and other Indic scripts: complex ligatures; test with font stacks that include proper fallbacks
  • Never fake-bold or fake-italic non-Latin scripts — use genuine weights from the font family

Cultural Considerations

Color

Color meaning varies significantly by culture:

ColorWestern associationExample alternative association
RedDanger, errorLuck/prosperity (China), mourning (South Africa)
WhiteClean, minimalMourning (many East Asian cultures)
GreenSuccess, goUnfaithfulness (China), danger (some Middle Eastern contexts)
  • Don't rely on color alone for semantic meaning (this is also an accessibility requirement)
  • Test color choices with cultural consultants for high-stakes or global products

Iconography

  • Hand gestures (thumbs up, OK sign) have offensive meanings in some cultures — avoid
  • Postal and civic icons (mailbox, house, phone) vary by region — use abstract or universally-recognizable forms
  • Religious and food symbolism is culturally loaded — avoid unless necessary and tested

Date, Time, and Number Formats

  • Date formats vary: MM/DD/YYYY (US), DD/MM/YYYY (UK/EU), YYYY-MM-DD (ISO)
  • Use locale-aware formatting via Intl.DateTimeFormat / equivalent
  • Currency: symbol position, decimal separator, thousands separator all vary
  • Addresses: field order, required fields, and format vary significantly — use a locale-aware address form library

Design System Implications

  • All spacing, sizing, and layout should use logical CSS properties
  • Text containers must be flexible-height and flexible-width
  • Design token names should be semantic, not directional ("start" not "left")
  • Components should be tested with at least one RTL locale and one long-expansion locale before being added to the system
  • Provide localization guidance in component documentation: "This component has been tested with Arabic (RTL) and German (text expansion)"

Best Practices

  • Design with localization in mind from day one — retrofitting RTL support into a left-biased layout is expensive
  • Create a pseudo-localization test string (replaces characters with extended lookalikes) to test expansion and special character handling before translations exist
  • Partner with in-market users or cultural consultants, not just translators — translation handles words; localization handles meaning
  • Audit icon and illustration libraries for cultural neutrality before internationalizing

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30342026年9月6日 更新

查看 Owl-Listener 的全部技能

报告此技能的问题