Aller au guide d’utilisation
Localization Designpar Owl-Listener

Localization Design Skill.

Préparez l’interface aux différences de langue, et pas seulement aux chaînes traduites.

  • Design systems
  • Localisation
Revue de la source · Localization DesignSKILL.md
Tâche Design systems Produit • Un audit des composants pour l’expansion, la troncature et le dimensionnement flexible. • Une spécification RTL distinguant les éléments inversés de ceux qui sont conservés. • Une liste de contrôle des formats régionaux et des tests d’écritures. Avant de commencer Nécessite des textes dans les langues cibles, des polices et une relecture linguistique ou culturelle appropriée ; aucune plateforme de localisation automatique n’est incluse.
Résumé éditorial · source examinée le 2026-10-07 · ce n’est pas un exemple généré

01 Fonctionnement

Concevoir des interfaces au-delà d’une seule langue

Un guide d’interface sensible à la localisation, couvrant les mises en page de texte flexibles, la directionnalité, les écritures non latines et les conventions régionales.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Localization Design traite de ce qui se casse quand une mise en page quitte sa langue d’origine : libellés plus longs, sens d’écriture différent, typographie propre à chaque écriture et formats locaux de dates, nombres, montants ou adresses. Il recommande des conteneurs flexibles, des propriétés CSS logiques et des tests avec du texte long et une langue RTL.

Il distingue aussi la traduction de la relecture culturelle. Une mise en page techniquement inversée peut encore employer des symboles ou des hypothèses inadaptés. La source contient des généralisations culturelles et des fourchettes d’expansion données à titre illustratif ; elles doivent inciter à une relecture sur le marché concerné, et non devenir des règles universelles sur tous les utilisateurs d’un pays.

Livrables attendus

  • Un audit des composants pour l’expansion, la troncature et le dimensionnement flexible.
  • Une spécification RTL distinguant les éléments inversés de ceux qui sont conservés.
  • Une liste de contrôle des formats régionaux et des tests d’écritures.
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Tester l’expansion du texte

    Utilisez des chaînes allongées ou pseudo-localisées pour révéler les largeurs fixes et les libellés de navigation tronqués avant l’arrivée des traductions finales.

  2. 02
    Cartographier le comportement directionnel

    Remplacez les hypothèses physiques gauche/droite par une sémantique début/fin. Décidez quelles icônes sont inversées et quelles marques, nombres ou médias restent inchangés.

  3. 03
    Examiner le sens local

    Vérifiez les polices, les formats, la structure des adresses et les images culturellement sensibles avec une expertise linguistique ou de marché adaptée.

02 Cas d’usage

Quand l’utiliser

Nécessite des textes dans les langues cibles, des polices et une relecture linguistique ou culturelle appropriée ; aucune plateforme de localisation automatique n’est incluse.

Un bon choix

  • Avant un lancement multilingueUtile pour repérer les problèmes de mise en page tant que les composants peuvent encore être modifiés de façon cohérente.
  • Maturité du design systemAjoute des exigences de localisation aux consignes des composants au lieu de corriger chaque écran traduit séparément.

Limites à vérifier

  • Pas un service de traductionIl ne produit ni ne certifie les formulations localisées finales.
  • Aucune certification culturelleDes exemples généraux ne peuvent remplacer la relecture par des personnes qui connaissent le marché et le public visés.

Éléments à fournir

  • Langues ciblesListez les écritures, sens d’écriture et conventions de format requis.
  • Exemples de composantsFournissez navigation, formulaires, cartes, boutons et vues de données denses.
  • Polices et contenuIncluez des chaînes réelles ou pseudo-localisées et les polices de secours approuvées.

03 Décisions importantes

Décisions importantes

  1. Inverser de façon sélective

    Les flèches directionnelles et le sens de la mise en page peuvent s’inverser ; les marques et la notation mathématique ne doivent pas être retournées aveuglément.

  2. Localiser le système

    Des noms de tokens sémantiques et un dimensionnement flexible des composants rendent les futures langues moins dépendantes de surcharges ponctuelles.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez la méthode d’installation documentée du dépôt et conservez les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée, et non une application exécutable.

Fichier source d’origine
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

Nécessite des textes dans les langues cibles, des polices et une relecture linguistique ou culturelle appropriée ; aucune plateforme de localisation automatique n’est incluse.

Commencer par un seul livrable

Adaptez le périmètre, les documents sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilise localization-design pour auditer nos paramètres de compte en allemand et en arabe. Examine l’expansion des libellés, l’espacement logique, les icônes directionnelles, les numéros de compte à direction mixte et les formats de date. Produis des modifications au niveau des composants et une matrice de tests. Signale les hypothèses culturelles pour une relecture humaine au lieu de traiter les stéréotypes nationaux comme des règles.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Les libellés longs restent lisibles sans troncature due à une largeur fixe.
  • Le comportement RTL distingue les contrôles directionnels des éléments non directionnels.
  • Les dates et les nombres utilisent un formatage adapté à la région plutôt qu’un réarrangement de chaînes.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche n’indique pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Licence
MIT
Version examinée
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Un guide d’interface sensible à la localisation, couvrant les mises en page de texte flexibles, la directionnalité, les écritures non latines et les conventions régionales.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

RTL signifie-t-il inverser toutes les images ?

Non. La source signale des exceptions, notamment les logos, les nombres et de nombreuses images. Examinez le sens avant d’inverser.

La pseudo-localisation peut-elle remplacer le contrôle qualité de la traduction ?

Non. Elle peut révéler des faiblesses de mise en page et de gestion des caractères avant l’arrivée des vraies traductions, mais ne peut évaluer le naturel ni l’adéquation culturelle.

Faut-il considérer les pourcentages d’expansion comme exacts ?

Non. Ce sont des repères approximatifs pour les tests de résistance. Des tests avec le texte et la mise en page réels sont plus fiables.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos documents sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Fichier source d’origine
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md