So bringen Sie KI-Agenten bei, polierte Benutzeroberflächen zu erstellen

Wenn Sie Cursor oder Claude Code gebeten haben, ein Dropdown-Menü oder ein Modal zu erstellen, ist Ihnen wahrscheinlich etwas Seltsames aufgefallen. Der Code funktioniert, die Buttons lassen sich klicken, aber alles sieht etwas unbeholfen aus. Elemente erscheinen mit einer absurd langen Verzögerung, Kartenrahmen werden mit soliden dunklen Linien gezeichnet, und für eine einfache Toast-Benachrichtigung zieht das Modell ein seit fünf Jahren aufgegebenes Paket heran.

Sprachmodelle sind recht gut darin, Komponentenlogik zu schreiben, aber sie haben kein ästhetisches Gespür. Sie wählen whatever Parameter ihnen zuerst aus ihren Trainingsdaten in den Sinn kommen. Das Ergebnis ist generisches Interface-Rauschen.

Emil Kowalski, der zuvor Animationen und Interfaces bei Vercel und Linear leitete, hat das emilkowalski/skills Repository zusammengestellt. Es ist eine Sammlung gebrauchsfertiger Anweisungen für KI-Agenten, die neuronale Netze lehren, poliertere Layouts zu erstellen.

Warum Agenten Design-Regeln brauchen

Ist Ihnen schon aufgefallen, dass KI Fenstererscheinungen zu falschen Zeitpunkten animiert? Ein häufiger Fehler ist die Anwendung der Easing-Funktion ease-in für Elemente, die auf den Bildschirm kommen. In der Realität sollten eingehende Elemente schnell starten und am Ende langsamer werden (ease-out), sonst fühlt sich das Interface träge an.

Das Gleiche gilt für Layout-Details. Neuronale Netze verwenden oft einen soliden Rahmen, wo ein halbtransparentes box-shadow benötigt wird, oder erfinden Lösungen neu, anstatt bewährte Bibliotheken zu verwenden.

Kleine Fehler summieren sich. Das Ergebnis ist eine UI, die billig aussieht. Emil's Skill-Set bringt das neuronale Netz dazu, grundlegende Design-Engineering-Regeln zu überprüfen, bevor es Ihnen den fertigen Code übergibt.

So installieren Sie die Anweisungen

Die Installation verwendet das CLI-Tool skills:

npx skills@latest add emilkowalski/skills

Nach dem Start erhält Ihr neuronales Netzwerk-Agent Zugang zu einer Wissensbasis über Motion, Proportionen und Frontend-Tool-Auswahl.

Was sich im Repository befindet

Drin ist eine Sammlung von Markdown-formatierten Anweisungen, aufgeteilt nach Aufgaben.

Motion verifizieren und verbessern

Die Anweisungen review-animations und improve-animations lassen den Agenten eine strenge Code-Audit durchführen. Das Modell sucht nach verpassten Easing-Funktionen, übermäßig langen Verzögerungen und schlampigen Transforms. Statt zufälliger Fixes erstellt der Agent einen schrittweisen Optimierungsplan, den er dann selbst ausführt.

Regel find-animation-opportunities hilft, Stellen zu finden, an denen Animation tatsächlich notwendig ist, und verbietet explizit das Hinzufügen von Motion, wo sie dem Nutzer nur im Weg wäre.

Apple-Wörterbuch und Richtlinien

Um dem neuronalen Netz zu helfen, genau zu verstehen, welche Art von Micro-Interaction Sie benötigen, kommt animation-vocabulary zum Einsatz. Es enthält präzise Begriffe zur Beschreibung von Animationen.

Eine separate Datei apple-design enthält web-adaptierte Apple-Interface-Prinzipien aus vergangenen WWDC-Konferenzen. Sie helfen, dieses responsive UI-Gefühl zu reproduzieren.

Bibliotheksauswahl und Prototyping

Wenn Sie ein Modell bitten, einen benutzerdefinierten Toast oder ein Dropdown zu erstellen, schreibt es entweder hundert Zeilen zerbrechlichen Code oder installiert ein seit langem nicht mehr unterstütztes Paket. Regel pick-ui-library zwingt die KI, nur bewährte Lösungen zu verwenden, auf die Produktteams tatsächlich angewiesen sind.

Für schnelle Experimente gibt es prototype. Dieser Skill generiert mehrere Varianten desselben UI-Elements auf einmal und fügt einen Toggle oben hinzu, damit Sie sie live vergleichen können.

Für wen ist das gedacht

Wenn Sie Cursor, Claude Code, Windsurf oder ähnliche CLI-Agenten täglich für Frontend-Arbeit verwenden, wird dieses Repository eine Menge Zeit für manuelle CSS-Fixes sparen. Sie müssen nicht mehr manuell ease-in in cubic-bezier ändern und dem Modell erklären, warum ein solider Rahmen in Dark Mode schlecht aussieht.