Agent Design Skills: UI-Feinschliff und Barrierefreiheit für KI-Agenten

X-PostAdham DannawaySammlung

Designer Adham Dannaway empfiehlt eine Sammlung spezialisierter Agent-Skills von Jakub Krehel. Das Paket erweitert KI-Agenten um konkretes Fachwissen in den Bereichen UI-Design, Typografie, OKLCH-Farben, Barrierefreiheit, Layout und Product Writing.

Das Wichtigste

  1. Installation der Skills über den Befehl 'npx skills add jakubkrehel/skills'.
  2. /better-ui und /better-typography behandeln visuelle Feinheiten wie optische Ausrichtung, hierarchische Radien, variable Fonts und Umbrüche.
  3. /better-colors unterstützt bei der Umstellung auf OKLCH, Palettengenerierung, Kontrastprüfungen und Gamut-Clamping.
  4. /better-accessibility optimiert Tastaturnavigation, Fokus-Zustände, Screenreader-Kompatibilität, ARIA und Klickflächen.
  5. /better-writing verbessert UX-Texte wie Fehlermeldungen, Onboarding-Texte, Button-Labels und leere Zustände.
  6. Zusätzliche Analyse-Werkzeuge wie /break und /variant ermöglichen Stresstests von Komponenten in allen Zuständen sowie automatisierte Variantengenerierung.

Warum das relevant ist

Standard-KI-Modelle erzeugen im Frontend-Code oft funktionale, aber optisch unausgereifte und unzugängliche Interfaces. Vordefinierte Prompts und Regelsätze schließen diese Lücke und verankern etablierte Design-System-Standards direkt in KI-unterstützten Entwicklungsworkflows.

Einordnung

Die Skill-Sammlung von Jakub Krehel setzt an typischen Schwachstellen automatisierter Code-Generierung an. Während Entwickler KI-Agenten bereits routiniert für Boilerplate und Logik einsetzen, vernachlässigen diese oft Details wie optisches Alignment, konsistente Microcopy oder WCAG-Konformität. Mit modularen Kommandos wie /break für Zustands-Stresstests und /better-interface für ganzheitliche Reviews fungieren die Skills als gezielte Qualitätsprüfung innerhalb von Frontend-Pipelines.

Original-Post

Adham Dannaway

@AdhamDannaway · 5. September 2026

🦾 A collection of agent design skills that help with animation, UI polish, accessibility and product writing. → t.co/WqxrypH0G2 By Jakub Krehel t.co/VWU4sNgem6

373 Likes2 Antworten492 Lesezeichen28.585 Aufrufe

Auf X ansehen
Ausgewählte Antworten (2)
  • @OlgaRotenberg @AdhamDannaway Those agent design skills are basically a tiny UI-polish gym for AI. Curating animation, accessibility, and product writing fits your Practical UI eye nicely. I’d rather show in DM; follow back if open, since X requires it, with examples and a quote for adhamdannaway . com
  • @Marwan_3atef @AdhamDannaway agent design skills for animation, a11y, and product writing is the pack I keep wishing default agent kits shipped with. bookmarked.

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Jakub Krehel

    Skills: Agenten-Toolkit zur Optimierung von UI und UX

    Jakub Krehel stellt eine Sammlung spezialisierter Agent Skills vor, die Frontend-Teams bei Interface-Details wie Typografie, OKLCH-Farben, Barrierefreiheit, Layouts und Microcopy unterstützen.

    KI & AI· Tool

  • X-Post:Kiyotaka

    Fünf UI-Skills für Design Engineers mit KI-Coding-Agenten

    Kiyotaka (@SubhanHQ) empfiehlt fünf spezialisierte Regelwerke („Skills“) für KI-Agenten, die Frontend-Entwicklern bei UI-Polishing, Animationen, Barrierefreiheit und visueller Präzision helfen.

    986Lesezeichen39.486Aufrufe

    KI & AI· Sammlung

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • X-Post:Kailash

    UI-Skills: Prompts und Richtlinien für besseres Interface-Design mit KI

    Kailash empfiehlt fünf spezialisierte Agenten- und Prompt-Skills von ui-skills.com, mit denen Entwickler und KI-Assistenten die Qualität von Frontend-Designs, flüssigen Animationen, Schatten und Barrierefreiheit verbessern können.

    7289Lesezeichen248.342Aufrufe

    Webentwicklung· Sammlung

  • Link:Emil Kowalski

    Design-Engineering-Skill für KI-Agenten von Emil Kowalski

    Emil Kowalski stellt einen installierbaren Skill für KI-Agenten bereit, der auf seiner Design-Engineering-Philosophie basiert. Das Modul soll Coding-Agenten dabei unterstützen, Benutzeroberflächen mit höherem Anspruch an Ästhetik und Detailgenauigkeit zu gestalten.

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.