Wie man KI-Agenten das richtige Design füttert anstatt langweiliger Vorlagen

Jeder, der versucht hat, Interfaces über Cursor, Claude Code oder andere Coding-Assistenten zu erstellen, stößt schnell auf dasselbe Problem. Man sagt dem Agenten „erstelle eine schöne Landing Page mit Neon-Glow und sanften Animationen", aber was man bekommt, ist ein typisches Bootstrap-ähnliches Layout mit matten Farbverläufen. Modelle sind großartig darin, Boilerplate-Code zu schreiben, aber ohne strenge Einschränkungen erzeugen sie durchschnittliche Visuals aus ihren Trainingsdaten.

Designer und Entwickler Meng To hat ein Repository namens Skills veröffentlicht, das 123 fertige Szenarien für die Arbeit mit KI-Agenten enthält. Die Kernidee ist einfach: Anstatt langer abstrakter Erklärungen in einem Chat, füttert man den Agenten mit strukturierten Markdown-Dateien, die klare Design-Systeme, Animations-Timings und technische Einschränkungen enthalten.

Warum Prompts in Repository-Dateien umwandeln

Normalerweise werden Anweisungen für neuronale Netze in Notizen gespeichert oder aus dem Chat-Verlauf kopiert. Meng To schlägt vor, Prompts wie Code zu behandeln: Versionierung über Git, Organisation in Ordnern und Einbindung nach Bedarf.

Jede Skill im Repository ist als separates Verzeichnis formatiert. Darin befindet sich eine SKILL.md-Datei mit präzisen Anweisungen: wann die Technik anzuwenden ist, welche Schritte zuerst auszuführen sind, welche Standard-Parameterwerte zu verwenden sind und wo Agenten am häufigsten Fehler machen. Bei Bedarf enthält sie Links zur Dokumentation, einen detaillierten Artikel und ein fertiges Demo in HTML-Format.

Dieser Ansatz löst zwei Probleme gleichzeitig. Erstens verschwendet man keine Zeit damit, dem Agenten wiederholt Scroll-Physik zu erklären. Zweitens wird das Kontextfenster des Modells nicht mit unnötigem Rauschen überladen, da der Agent nur eine schmale Datei für einen bestimmten Block lädt.

Was sich im Katalog befindet

Die Bibliothek ist in fünf Bereiche unterteilt. Der größte Teil ist der Webgestaltung und 3D-Grafik im Browser gewidmet.

Webdesign und visuelle Effekte

Dieser Abschnitt enthält 81 Anweisungen für komplexe Layouts und Animationen. Es gibt beispielsweise Vorlagen für das Erstellen von Cursor-Trails mit Shadern, Hintergrund-Weichzeichner durch progressiven Blur, Masks in purem CSS und die Integration von Bibliotheken wie GSAP, Matter.js, Three.js oder Vanta.js.

Mit einer solchen Datei erhält ein Agent nicht nur einen Befehl wie „erstelle eine Animation", sondern spezifische Regeln: Übergangsdauern, Bezier-Kurven für das Timing, Z-Index-Einstellungen und Performance-Prüfungen auf Mobilgeräten.

Workflows für die Arbeit mit Referenzen

Statt Layouts manuell zu beschreiben, bietet das Repository die Automatisierung der Kontextsammlung:

• video-to-superprompt zerlegt eine Bildschirmaufnahme einer fertigen Animation in Frames und generiert ein detailliertes Briefing, das der Agent verwenden kann, um die Layout-Logik in einem Durchgang neu zu erstellen.
• html-to-interaction-prompts nimmt eine existierende Webseite und teilt sie in separate Prompts für jede Schaltfläche, jeden Hover-Effekt oder jede WebGL-Szene auf.
• stitched-full-page-capture erstellt einen nahtlosen Screenshot einer langen Landing Page mit komplexem dynamischem Laden, damit das Modell die gesamte Seitenhierarchie auf einen Blick sehen kann.
• daily-ui-inspiration-capture verknüpft Browser-Scripts und Prompt-Generierung in einem einzigen Zyklus zur Analyse der Entdeckungen anderer Designer.

Web-Spielentwicklung

Ein separater Block mit 20 Skills deckt Three.js und Browser-Spielentwicklungsaufgaben ab. Er enthält Anweisungen für isometrische Kameras, Gegner-Verhaltenseinstellungen, Inventar, Kampfsysteme und Rendering-Optimierung auf Smartphones.

Arbeit mit Medien und allgemeinem Design

Ein kleiner Abschnitt der Sammlung hilft dem Agenten, hochwertige Assets von Unsplash und Grafikdiensten mit korrekten Seitenverhältnissen, Zuschnitten und der Farbpalette des Projekts abzurufen.

Um die Sammlung zu nutzen, müssen Sie das Repository auf Ihren lokalen Rechner klonen. Die Dateien sind als Markdown mit YAML-Frontmatter organisiert, was sie einfach zu bearbeiten und zu erweitern macht. Jeder Skill kann für spezifische Projektanforderungen angepasst werden, ohne die Kernlogik zu brechen.

So verbinden Sie Skills mit Agenten

Die Dateien sind nicht an ein bestimmtes proprietäres Tool gebunden. Sie funktionieren mit jedem Tool, das Kontext aus einem lokalen Ordner lesen kann.

In Cursor können Sie eine bestimmte .cursorrules referenzieren oder den Pfad zum benötigten Ordner direkt in das Chat-Fenster einfügen agent-skills/web-design/<название>/SKILL.md.

In Claude Code wird der Dateipfad in CLAUDE.md angegeben oder die Anweisung wird als Kontext für die Arbeitssitzung geladen.

Bei der Arbeit mit Codex wird die SKILL.md-Datei in den Speicher geladen, bevor die Code-Generierung beginnt, damit der Agent die Checkliste und Validierungsregeln befolgt.

Grundprinzipien der Prompt-Zusammenstellung

Der Autor formulierte vier Regeln, auf denen die gesamte Repository-Struktur aufgebaut ist:

1. Klare Spezifikationen sind besser als abstrakte Wünsche. Layout-Geschwindigkeit und Stabilität hängen von Einschränkungen für Abstände, Raster und Schriften ab, nicht von Adjektiven in der Aufgabenbeschreibung.
2. Screenshots und Links sind genauer als Textabsätze. Eine visuelle Referenz vermittelt sofort den Layout-Rhythmus, die Proportionen und den Icon-Stil.
3. Prompts sind wertvolle Assets. Eine erfolgreiche Formulierung sollte in einer Datei gespeichert, versioniert und in anderen Projekten wiederverwendet werden.
4. Die Fähigkeit eines Agenten sollte wie eine Stellenbeschreibung funktionieren. Eine gute Datei legt direkt fest, unter welchen Bedingungen sie geöffnet werden soll, was zuerst zu tun ist und welche typischen Fehler zu vermeiden sind.

Wer von der Sammlung profitiert

Wenn Sie bereits von Hand Frontend schreiben und den gesamten GSAP- oder Three.js-Stack im Kopf haben, könnten die Regeln anderer übertrieben erscheinen. Aber das Projekt wird für diejenigen nützlich sein, die Prototypen, Hobbyprojekte oder Kunden-Landing-Pages in Kombination mit neuronalen Netzen erstellen und es leid sind, gegen typische Modell-Halluzinationen anzukämpfen.

Anstatt eigene Anweisungen von Grund auf zu erfinden, können Sie Meng Tos fertige Vorlagen nehmen, die entsprechenden Ordner in Ihr Repository-Root kopieren und die Parameter für Ihr Projekt anpassen. Repository-Link: https://github.com/MengTo/Skills.