Zur Nutzungsanleitung springen
Localization Designvon Owl-Listener

Localization Design Skill.

Bereiten Sie die Oberfläche auf Sprachunterschiede vor, nicht nur auf übersetzte Strings.

  • Designsysteme
  • Lokalisierung
Quellenprüfung · Localization DesignSKILL.md
Aufgabe Designsysteme Ergebnis • Ein Komponenten-Audit zu Textexpansion, Kürzung und flexibler Größenanpassung. • Eine RTL-Spezifikation, die gespiegelte von beibehaltenen Elementen unterscheidet. • Eine Checkliste für lokale Formate und Schrifttests. Vor dem Start Benötigt Text in der Zielsprache, Schriften sowie eine geeignete sprachliche oder kulturelle Prüfung; es ist keine automatische Lokalisierungsplattform enthalten.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Oberflächen über eine Sprache hinaus gestalten

Ein lokalisierungsbewusster UI-Leitfaden zu flexiblen Textlayouts, Schreibrichtung, nichtlateinischen Schriften und lokalen Konventionen.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Localization Design behandelt, was bricht, wenn ein Layout seine Ausgangssprache verlässt: längere Beschriftungen, andere Schreibrichtung, schriftspezifische Typografie und lokale Formate für Datum, Zahlen, Währung oder Adressen. Empfohlen werden flexible Container, logische CSS-Eigenschaften und Tests mit langem Text sowie einer RTL-Locale.

Außerdem unterscheidet es zwischen Übersetzung und kultureller Prüfung. Ein technisch gespiegeltes Layout kann dennoch ungeeignete Symbole oder Annahmen enthalten. Die Quelle enthält illustrative kulturelle Verallgemeinerungen und Expansionsbereiche; diese sollen eine Prüfung im Zielmarkt anregen und keine universellen Regeln für alle Nutzer eines Landes sein.

Erwartete Ergebnisse

  • Ein Komponenten-Audit zu Textexpansion, Kürzung und flexibler Größenanpassung.
  • Eine RTL-Spezifikation, die gespiegelte von beibehaltenen Elementen unterscheidet.
  • Eine Checkliste für lokale Formate und Schrifttests.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Textexpansion testen

    Nutzen Sie verlängerte oder pseudolokalisierte Strings, um feste Breiten und abgeschnittene Navigationsbeschriftungen aufzudecken, bevor finale Übersetzungen vorliegen.

  2. 02
    Richtungsverhalten abbilden

    Ersetzen Sie physische Annahmen zu links/rechts durch start/end-Semantik. Legen Sie fest, welche Icons gespiegelt werden und welche Zeichen, Zahlen oder Medien unverändert bleiben.

  3. 03
    Lokale Bedeutung prüfen

    Prüfen Sie Schriften, Formate, Adressstruktur und kulturell sensible Bilder mit geeigneter Sprach- oder Marktexpertise.

02 Einsatzbereiche

Wann es passt

Benötigt Text in der Zielsprache, Schriften sowie eine geeignete sprachliche oder kulturelle Prüfung; es ist keine automatische Lokalisierungsplattform enthalten.

Gut geeignet

  • Vor dem mehrsprachigen LaunchNützlich, um Layoutprobleme zu finden, solange Komponenten noch konsistent geändert werden können.
  • Bereitschaft des DesignsystemsErgänzt die Komponentenrichtlinien um Lokalisierungsanforderungen, statt jeden übersetzten Screen einzeln zu reparieren.

Zu prüfende Grenzen

  • Kein ÜbersetzungsdienstEs erstellt oder zertifiziert keine finalen lokalisierten Formulierungen.
  • Keine kulturelle ZertifizierungAllgemeine Beispiele ersetzen nicht die Prüfung durch Personen, die den konkreten Markt und die Zielgruppe kennen.

Diese Eingaben mitbringen

  • Ziel-LocalesListen Sie erforderliche Schriften, Schreibrichtungen und Formatkonventionen auf.
  • KomponentenbeispieleLiefern Sie Navigation, Formulare, Karten, Buttons und dichte Datenansichten.
  • Schriften und InhalteEnthalten sein sollten echte oder pseudolokalisierte Strings und freigegebene Schrift-Fallbacks.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

  1. Gezielt spiegeln

    Richtungspfeile und Layoutfluss können umgekehrt werden; Markenzeichen und mathematische Notation sollten nicht blind gespiegelt werden.

  2. Das System lokalisieren

    Semantische Token-Namen und flexible Komponentengrößen machen spätere Locales weniger abhängig von einmaligen Überschreibungen.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie vor der Verwendung die Einrichtung des Skills.

Einrichtung prüfen

Nutzen Sie den dokumentierten Installationsweg des Repositorys und behalten Sie alle referenzierten Begleitdateien bei. Dieser Eintrag beschreibt eine fokussierte Designmethode, keine ausführbare Anwendung.

Upstream-Quelldatei
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md

Benötigt Text in der Zielsprache, Schriften sowie eine geeignete sprachliche oder kulturelle Prüfung; es ist keine automatische Lokalisierungsplattform enthalten.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellenmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Nutze localization-design, um unsere Kontoeinstellungen für Deutsch und Arabisch zu prüfen. Untersuche Label-Expansion, logische Abstände, gerichtete Icons, Kontonummern mit gemischter Schreibrichtung und Datumsformate. Erstelle Änderungen auf Komponentenebene und eine Testmatrix. Markiere kulturelle Annahmen zur menschlichen Prüfung, statt Länderklischees als Regeln zu behandeln.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

  • Lange Beschriftungen bleiben lesbar, ohne durch feste Breiten abgeschnitten zu werden.
  • Das RTL-Verhalten unterscheidet richtungsbezogene Steuerelemente von nicht richtungsbezogenen Assets.
  • Datumsangaben und Zahlen nutzen lokale Formatierung statt Umstellung von Zeichenfolgen.

OpenDesign bietet einen lokalen Designarbeitsbereich für Coding-Agents. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
Owl-Listener
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Ein lokalisierungsbewusster UI-Leitfaden zu flexiblen Textlayouts, Schreibrichtung, nichtlateinischen Schriften und lokalen Konventionen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Bedeutet RTL, jedes Bild zu spiegeln?

Nein. Die Quelle nennt Ausnahmen, darunter Logos, Zahlen und viele Bilder. Prüfen Sie die Bedeutung, bevor Sie spiegeln.

Kann Pseudolokalisierung die Übersetzungs-QA ersetzen?

Nein. Sie kann Schwächen bei Layout und Zeichenverarbeitung aufdecken, bevor echte Übersetzungen vorliegen, beurteilt aber weder Natürlichkeit noch kulturelle Passung.

Sollten Expansionsprozentsätze als exakt gelten?

Nein. Sie sind grobe Orientierung für Belastungstests. Tests mit echtem Text und Layout sind verlässlicher.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellenmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

Upstream-Quelldatei
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/localization-design/SKILL.md