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

X-PostKiyotakaSammlung

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.

Das Wichtigste

  1. „emil-design-eng“ basiert auf Emil Kowalskis Prinzipien und erzwingt strukturierte Vorher-Nachher-Tabellen sowie klare Richtlinien für Easing und Animationshäufigkeit.
  2. „make-interfaces-feel-better“ von Jakub Krehel konzentriert sich auf Mikrointeraktionen, konzentrische Border-Radii, optische Ausrichtung, minimale Klickflächen und Textumprüche.
  3. „12-principles-of-animation“ von Raphael Salaja wendet Disneys Animationsgrundsätze auf Interfaces an (maximal 300 ms Dauer, Easing-Regeln, Active-States und Staging).
  4. „fixing-accessibility“ von ibelick liefert Prüfregeln für barrierefreie Namen, Tastaturnavigation, Fokusmanagement und minimale WCAG-Korrekturen.
  5. Als fünfte Ressource verlinkt der Autor auf Shadcn bzw. zugehörige Komponenten-Workflows.
  6. Die Skills lassen sich über den Befehl „npx skills add“ direkt in agentenbasierte Entwicklungsumgebungen einbinden.

Warum das relevant ist

KI-Coding-Agenten erzeugen oft funktionalen, aber visuell ungeschliffenen Code. Vordefinierte Regelwerke bringen bewährte Design-Engineering-Prinzipien direkt in den Review- und Generierungsprozess von LLMs.

Einordnung

Agenten wie Cursor, Claude Code oder vergleichbare Tools greifen zunehmend auf standardisierte Skill-Dateien zurück. Die vorgestellten Pakete von ui-skills.com kodifizieren Expertenwissen: Sie verhindern typische Frontend-Flüchtigkeitsfehler (wie „transition: all“, fehlende :active-Zustände oder unsaubere Easing-Kurven) und zwingen das Modell zu präzisen, auditierbaren Änderungen statt willkürlicher Redesigns.

Original-Post

Kiyotaka

@SubhanHQ · 11. September 2026

These are top 5 ui skills for design engineers using agents : 1. emil-design-eng t.co/50EqICOW5V 2. make-interfaces-feel-better t.co/2srfmWS8Nv 3. 12-principles-of-animation t.co/4xuBfnR25M 4. fixing-accessibility t.co/MgLkbjxAAC 5. shadcn t.co/uRd9Ursq7S

583 Likes5 Antworten986 Lesezeichen39.486 Aufrufe

Auf X ansehen
Weitere Posts im Thread (2)
  1. U'll also like this similar ui's t.co/GFURQu36eP
  2. Made this nft ui too t.co/IPLZ1h7HVG
Ausgewählte Antworten (3)
  • @moelkholy95 @SubhanHQ You haven’t tried this yet ? Level up your agent’s front-end game with the Niblet MCP: → Sign up at t.co/B87eQm80qP → Create your token → Grab your pre-configured MCP prompt → Drop it into your agent Instant UI magic. ⚡ Pro tip: Ask your agent to use Niblet on any
  • @abd_mukadam @SubhanHQ Bro how your post got this much reach with almost 0 comments?
  • @I_am_SamY01 @SubhanHQ i love my fyp 😭

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.

  • 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

  • X-Post:Adham Dannaway

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

    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.

    492Lesezeichen28.585Aufrufe

    KI & AI· 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

  • 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

  • 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

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.