Communitygithub.com

UX Writing

Erstelle oder überprüfe UI-Texte – Buttons, Fehler, Leerzustände, Mikro-Texte, Benachrichtigungen, Labels – unter Verwendung des Stimmen-&-Ton-Systems (klar, prägnant, nützlich, menschlich, ehrlich) mit der Was→Warum→Wie-Fehlerformel und den Regeln für inklusive Sprache. Nutze es, wenn du Interface-Texte, Fehlermeldungen, Leerzustandstexte oder eine Textüberprüfung benötigst.

Was ist UX Writing?

Dieses Skill ermöglicht es einem KI-Agenten, konsistente und benutzerfreundliche UI-Texte zu verfassen oder zu kritisieren, die der definierten Stimme und dem Ton des Projekts folgen. Es ist besonders nützlich für Entwickler:innen und Designer:innen, die sicherstellen möchten, dass Buttons, Fehlermeldungen, Leerzustände, Bestätigungsdialoge und andere Mikro-Texte klar, prägnant und inklusiv sind. Das Skill basiert auf einer detaillierten `voice-tone.md`-Datei, die Prinzipien, Tonabstufungen und Formeln vorgibt, darunter die Was→Warum→Wie-Fehlerformel und die Regel, dass Bestätigungsbuttons die Aktion und das Objekt wiederholen müssen (z. B. „Account löschen“ statt „Löschen“). Es unterstützt die Arbeit an beliebigen Projekten und erzwingt eine abschließende, obligatorische Checkliste mit 10 Punkten, bevor ein Ergebnis als fertig erklärt wird. Der Agent liest die Stimmrichtlinien, passt den Ton an den emotionalen Zustand der Nutzer:innen an, wendet die Mikro-Text-Formeln an und überprüft die Mechanik (Satzanfänge, Ziffern, Labels statt Platzhalter, keine farb- oder richtungsabhängigen Anweisungen).

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Skill: UX Writing

Erstelle oder kritisiere Interface-Texte in der Stimme des Projekts.

Schritte

  1. Lies content/voice-tone.md (Stimmprinzipien, Tonspektrum, Formeln, Mikro-Text-Muster, inklusive Sprache, Pre-Ship-Checkliste).
  2. Passe den Ton an den emotionalen Zustand der Nutzer:in an (Onboarding/Erfolg/Routine/Fehler/Zerstörerisch). Höherer Stress → einfachere Sprache.
  3. Wende die Formeln an:
    • Buttons: Verb nach vorne ziehen, Ergebnis benennen.
    • Bestätigungsdialoge: Der Bestätigungsbutton wiederholt die Aktion und das Objekt – „Account löschen“, nicht „Löschen“/„OK“/„Ja“/„Bestätigen“. Die Überschrift fragt („Account löschen?“), der Button antwortet mit denselben Wörtern. „Abbrechen“ bleibt „Abbrechen“. Bei irreversiblen/risikoreichen Aktionen ist ein type-to-confirm-Schritt erforderlich (WCAG 3.3.4/3.3.6).
    • Fehler: Was ist passiert → Warum → Wie beheben (keine Sackgassen, keine Codes/Stack-Traces).
    • Leerzustände: Wert → erste Aktion.
  4. Setze die Mechanik durch: Satzanfänge, keine GROSSBUCHSTABEN, Ziffern, keine Schuldzuweisungen an Nutzer:innen, Labels (keine Platzhalter), keine richtungs- oder farbabhängigen Anweisungen.
  5. Führe die 10-Punkte-Pre-Ship-Copy-Checkliste aus.

Ausgabe

Endgültiger Text (oder eine redline-Überprüfung), der sich natürlich vorlesen lässt und die Checkliste besteht. Halte dich an etwaige Zeichenbegrenzungen für enge UI-Elemente.

Überprüfung (obligatorisch vor Fertigmeldung)

Führe jede Zeile durch die 10-Punkte-Pre-Ship-Checkliste in content/voice-tone.md – überspringe sie nicht:

  • Lässt sich vorlesen; Verb nach vorne gezogen bei Aktionen; kein Fachjargon/Schuldzuweisungen/Sackgassen.
  • Fehler folgen Was→Warum→Wie; Leerzustände geben Wert→Aktion; kein bloßes „Keine Daten“/„Fehler“.
  • Mechanik: Satzanfänge, Ziffern, Labels (keine Platzhalter), keine farb- oder richtungsabhängigen Hinweise, inklusive Sprache.
  • Innerhalb von Zeichenbegrenzungen; übersetzbar (keine Verkettung – siehe accessibility/i18n-rtl.md).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community