Taste Skill: warum deine KI-Seite billig aussieht und wie du das fixt.

Wenn du dir gerade Webseiten von einer KI bauen lässt, dann sieht man das deiner Seite oft schon nach einer Sekunde an. Diese lila Farbverläufe, die immer gleichen Abstände, dieselbe Schriftart wie bei tausend anderen Seiten. Das ist der KI-Look, den inzwischen jeder erkennt, und genau der lässt dein Produkt billig wirken, obwohl der Code dahinter vielleicht völlig in Ordnung ist.

In diesem Guide gehe ich mit dir durch, wie du dieses generische Aussehen loswirst. Wir schauen uns das Taste Skill an, also einen kostenlosen Open-Source-Baukasten für KI-Agenten, der genau dieses Problem angeht. Du bekommst die komplette Installation mit echten Befehlen zum Kopieren, du erfährst wie du den Skill in Claude, Cursor und Codex tatsächlich benutzt, welche Fehler die meisten Leute machen, und am Ende ordne ich dir ein, wann du das Taste Skill mit anderen Design-Skills kombinierst und wo der Unterschied zu einem MCP liegt.

Warum Ästhetik gerade der wichtigste Skill ist#

Alle reden über Lovable, v0, Cursor und Claude Code, und diese Tools werden wirklich immer besser darin, funktionierenden Code zu schreiben. Aber genau dadurch verschiebt sich der eigentliche Engpass. Eine Landingpage entwickeln kann heute fast jeder. Eine Landingpage entwickeln, die nicht sofort nach generischem KI-Frontend aussieht, ist eine ganz andere Sache.

Ästhetik heißt dabei nicht, dass jemand einfach schönes Design mag. Ästhetik heißt, dass du erkennst, ob ein Hero wirklich sitzt, ob die Typografie wertig wirkt, ob Farben zusammenpassen, ob die Abstände ruhig sind und ob eine Seite eine eigene Bildsprache hat. Die KI kann dir zehn Varianten bauen, aber sie weiß nicht von allein, welche davon zu deiner Marke, deiner Zielgruppe und deinem Produkt passt. Genau an dieser Stelle führst du, und die KI baut.

Was das Taste Skill ist#

Das Taste Skill ist ein Open-Source-Projekt von Leonxlnx auf GitHub. Das Repo nennt sich selbst "The Anti-Slop Frontend Framework for AI Agents", hat zum Stand dieses Guides rund 45.000 Sterne und steht unter der MIT-Lizenz, ist also frei nutzbar. Slop ist dabei das englische Wort für genau diesen lieblosen KI-Einheitsbrei, den der Skill verhindern soll.

Im Kern ist es kein Programm, das du startest, sondern eine Sammlung portabler Skill-Dateien. Jede dieser Dateien ist eine SKILL.md, also ein Regelwerk, das deinem KI-Agenten beibringt, stärker über Layout, Typografie, Bewegung, Abstände und ein sauberes Designsystem nachzudenken, statt einfach Standard-Oberflächen auszuspucken. Der Haupt-Skill heißt design-taste-frontend.

Das Projekt bringt aber mehr als nur diesen einen Skill mit. Es gibt zum Beispiel Varianten für das Überarbeiten bestehender Seiten, einen strengeren Modus für GPT und Codex, eine Bild-zu-Code-Pipeline und mehrere Stil-Richtungen wie minimalistisch oder brutalistisch. Für den Anfang reicht der Haupt-Skill völlig.

Was der Skill konkret macht#

Damit du verstehst, warum das einen Unterschied macht, hier die Mechanik dahinter.

• Brief-Inferenz. Bevor irgendwas gebaut wird, leitet der Skill aus deinem Auftrag die Design-Richtung ab, also Stimmung, Zielgruppe, Informationsdichte und Layout-Idee. Statt blind loszubauen, denkt die KI erst über die Richtung nach.
• Anti-Slop-Regeln. Der Skill verbietet hart die typischen KI-Muster. Dazu gehört zum Beispiel ein striktes Verbot von Gedankenstrichen im Text, weil die ein klares KI-Erkennungsmerkmal sind, dazu klare Vorgaben für Typografie, Farben und Abstände.
• Bewegung. Für Animationen liefert er fertige, saubere Code-Gerüste auf Basis von GSAP, damit Bewegung gezielt eingesetzt wird und nicht als wildes Gewackel.
• Pre-Flight-Check. Bevor die KI das Ergebnis als fertig ausgibt, läuft eine Art Startchecks-Liste durch, die das Resultat noch einmal gegen die Regeln prüft. Das ist der Schritt, der den größten Qualitätssprung bringt.

Dazu hat der Haupt-Skill in der aktuellen Version drei Regler ganz oben in der Datei, jeweils von eins bis zehn, die du selbst einstellen kannst:

• DESIGN_VARIANCE steuert, wie experimentell das Layout wird. Niedrig heißt zentriert und ruhig, hoch heißt asymmetrisch und modern.
• MOTION_INTENSITY steuert, wie stark Bewegung eingesetzt wird. Niedrig heißt dezente Hover-Effekte, hoch heißt Scroll- und magnetische Effekte.
• VISUAL_DENSITY steuert, wie viel Information pro Bildschirm passt. Niedrig heißt luftig, hoch heißt dichte Dashboards.

Damit kannst du den Skill an dein Projekt anpassen, statt einen festen Look übergestülpt zu bekommen.

Voraussetzungen#

• Node.js mit npx. Die Installation läuft über npx, das bei einer normalen Node-Installation dabei ist. Wenn node -v und npx -v im Terminal eine Version ausgeben, bist du startklar.
• Ein Agent, der Skills versteht, also Claude Code, Cursor oder Codex. Der Skill funktioniert mit allen dreien.
• Ein Projektordner, in dem du arbeitest. Skills werden in dein Projekt geschrieben, nicht irgendwo zentral versteckt.

Schritt für Schritt installieren#

Die schnellste Variante installiert das komplette Set. Geh in deinem Terminal in den Projektordner und führ das hier aus:

npx skills add https://github.com/Leonxlnx/taste-skill

Der skills-Installer legt die Skill-Dateien an der richtigen Stelle für deinen Agenten ab, in Claude Code zum Beispiel im skills-Verzeichnis deines Projekts. Danach kennt dein Agent die Skills über deren Beschreibungsfeld und kann sie nutzen.

Wenn du nicht das ganze Set willst, sondern nur den Haupt-Skill, dann hängst du ihn gezielt an:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Falls du gar nicht installieren willst, geht auch der manuelle Weg. Du kannst die SKILL.md aus dem Repo einfach kopieren und direkt in dein Projekt legen oder ihren Inhalt in deinen Chat mit der KI einfügen. Praktisch, wenn du in einer Umgebung arbeitest, in der der Installer nicht läuft.

Wie du den Skill in Claude, Cursor und Codex nutzt#

Nach der Installation startest du den Skill nicht über einen Knopf, sondern über deinen Auftrag. Du beschreibst einfach normal, was du bauen willst, und der Agent zieht den passenden Skill von selbst, weil er zur Aufgabe passt. Du kannst ihn aber auch direkt ansprechen, damit es sicher greift:

Nutz das design-taste-frontend Skill und bau mir die
Landingpage fuer [dein Produkt]. Zielgruppe ist [...],
Stimmung [...]. Stell DESIGN_VARIANCE auf 6,
MOTION_INTENSITY auf 4 und VISUAL_DENSITY auf 3.

In Claude Code reicht es, den Skill im Projekt zu haben und ihn so im Prompt zu erwähnen. In Cursor und Codex läuft es genauso, nur dass für Codex und GPT die strengere Variante gpt-taste gedacht ist, falls dir das Standard-Skill dort zu locker greift. Wichtig ist nur, dass du die Regler im Prompt oder direkt in der Skill-Datei setzt, sonst nimmt der Skill die voreingestellten Werte.

Vorher und nachher, so testest du den Effekt#

Der ehrlichste Test ist ein direkter Vergleich. Gib denselben Auftrag zweimal, einmal ohne und einmal mit dem Skill, und leg die Ergebnisse nebeneinander.

Bau mir eine Landingpage fuer ein KI-Notiz-Tool.

Gegen:

Nutz das design-taste-frontend Skill und bau mir eine
Landingpage fuer ein KI-Notiz-Tool.

Du siehst sofort, dass die Version mit Skill sauberer über Typografie, Abstände, Farben und Bewegung nachdenkt und am Ende etwas Wertigeres entsteht. Genau dieser Vergleich macht auch im Kopf klick, warum die Richtung wichtiger ist als das nächste Tool.

Häufige Fehler und Tipps#

• Den Skill installieren und trotzdem nicht erwähnen. Wenn dein Prompt zu allgemein ist, greift der Skill manchmal nicht. Sprich ihn beim ersten Mal ruhig direkt mit Namen an, dann bist du auf der sicheren Seite.
• Die Regler vergessen. Ohne eigene Werte baut der Skill nach seinen Voreinstellungen. Wenn das Ergebnis zu wild oder zu brav ist, dreh an DESIGN_VARIANCE, MOTION_INTENSITY und VISUAL_DENSITY, statt den ganzen Skill zu verwerfen.
• Den Skill für dein Auge halten. Der Skill zwingt die KI, ästhetisch zu denken, er ersetzt aber nicht deine Entscheidung, ob das Ergebnis zur Marke passt. Du bleibst die letzte Instanz.
• Alles auf einmal installieren und sich verzetteln. Du musst nicht alle Varianten nutzen. Fang mit design-taste-frontend an und hol dir die Spezial-Skills erst, wenn du sie wirklich brauchst.
• Fremde Skills blind ausführen. Ein Skill kann Anweisungen geben, die dein Agent umsetzt. Das Taste Skill ist offen einsehbar und MIT-lizenziert, aber generell gilt, schau bei fremden Skills vorher rein, bevor du sie in dein Projekt holst.

Einordnung, es gibt nicht nur einen Frontend-Skill#

Das Taste Skill ist gerade das bekannteste, aber nicht das einzige in dieser Richtung. Es lohnt sich zu wissen, wofür die anderen gut sind, weil sie unterschiedliche Lücken schließen.

• Taste Skill ist dein Ausgangspunkt für Richtung und Layout, also die Frage, wie die Seite überhaupt aussehen und aufgebaut sein soll.
• Motion-Skills nach Emil Kowalski setzen beim Feinschliff von Bewegung an. Emil Kowalski ist für seine ruhige, schnelle und sehr bewusste Animationsarbeit bekannt, und es gibt Skills, die genau diese Prinzipien für KI-Agenten einpacken. Die nimmst du, wenn das Layout steht und es nur noch ums Gefühl der Bewegung geht.
• Anti-Slop-Governance im Stil von Impeccable ist eher ein Arbeitsablauf mit mehreren Schritten, in denen die KI dein Produkt lernt, Layout und Typografie schärft und am Ende eine Qualitätsprüfung über den fertigen Code laufen lässt. Das ist das Polier-Tor ganz am Schluss.

Eine einfache Faustregel: Taste Skill für die Richtung und das Layout, Motion-Prinzipien für den Bewegungs-Feinschliff, und eine Polish-Prüfung als letztes Tor, bevor etwas live geht. Du musst nicht alle drei nutzen, aber es hilft zu wissen, an welcher Stelle welcher Skill greift.

Skill oder MCP, kurz erklärt#

Weil die beiden gern verwechselt werden. Ein MCP gibt deiner KI ein neues Werkzeug oder einen neuen Zugang, etwa zu deiner Datenbank oder einem Design-Tool. Ein Skill erklärt der KI, wie sie eine Aufgabe sauber und wiederholbar erledigt. Das Taste Skill ist genau das, also kein neues Werkzeug, sondern ein Regelwerk fürs Vorgehen beim Frontend. Faustregel: Brauchst du eine neue Fähigkeit oder einen Zugang, ist das ein MCP. Geht es um das saubere Vorgehen für eine Aufgabe, ist das ein Skill.

Das Wichtigste zum Mitnehmen#

Coden wird immer mehr zur Commodity, und gerade dadurch werden Ästhetik, Kontext und eine saubere Führung der KI wichtiger, nicht unwichtiger. Das Taste Skill nimmt dir nicht das Denken ab, aber es zwingt deinen Agenten dazu, ästhetisch zu arbeiten, statt dir den nächsten lila Einheitsbrei hinzuwerfen. Wer KI wirklich im Griff hat, hofft nicht auf ein schönes Ergebnis, sondern führt die KI so genau, dass am Ende etwas rauskommt, das eben nicht nach KI aussieht.