Deine KI baut Einheitsbrei? Bring ihr Geschmack bei.

„Mach es modern“ ist noch keine Designrichtung.

Du kennst das vielleicht: Du bittest eine KI um eine moderne Website. Zurück kommen ein großer Slogan, ein paar gleichförmige Kacheln und Effekte, die schon auf der letzten KI-Seite standen. Technisch kann das funktionieren. Nach dir sieht es deshalb noch lange nicht aus.

Meine These: Du musst der KI genauer zeigen, woran du gutes Design erkennst. „Geschmack beibringen“ ist hier ein praktisches Bild für Referenzen, begründete Entscheidungen, wiederverwendbare Regeln und ehrliche Korrekturen. Ein Skill trainiert dabei nicht automatisch die Modellgewichte neu. Er gibt der KI einen Arbeitsauftrag und einen Maßstab.

Du brauchst dafür nicht jedes verfügbare Design-Repo. Für den Einstieg reichen eine klare Richtung, ein passender Gestaltungs-Skill und eine Prüfung am echten Ergebnis. Ich zeige dir fünf Bausteine, die an unterschiedlichen Stellen helfen.

Fünf Bausteine gegen austauschbare Websites.

Taste Skill: Eine Richtung statt Zufall.

Taste Skill bündelt Anweisungen für die Gestaltung von Oberflächen. Der aktuelle Standard heißt design-taste-frontend; die Projektseite kennzeichnet Version 2 als experimentell. Das ist ein Grund, Änderungen zunächst in einer Kopie deines Projekts auszuprobieren.

Für einen Coding-Agenten mit Terminal und Node.js dokumentiert das Projekt diesen Einstieg:

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Wähle im Installationsdialog den tatsächlich verwendeten Agenten und den gewünschten Projektumfang. Lies die installierten Regeln. Wenn ein Skill deiner festgelegten Marke widerspricht, soll er den Widerspruch benennen und deine Vorgaben respektieren.

Vercels Web Design Guidelines: Schönheit muss bedienbar bleiben.

Der Skill web-design-guidelines prüft UI-Code anhand der Web Interface Guidelines. Das hilft beispielsweise bei Fokuszuständen, Formularbeschriftungen, Tastaturbedienung und Bewegung. Er gibt dir nicht automatisch eine unverwechselbare Markenidee.

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Fordere eine Prüfung konkreter Dateien und nachvollziehbare Fundstellen an. Kläre, ob die aktuellen Regeln geladen werden konnten. Eine reine Codeprüfung ersetzt den Blick auf die gerenderte Seite nicht.

Awesome DESIGN.md: Deine Richtung wird lesbar.

VoltAgent sammelt Beschreibungen bekannter Designsysteme in Markdown. Eine DESIGN.md ist zunächst eine Textdatei, kein selbststartendes Plugin. Sie kann Farben, Schriftwahl, Abstände und Komponenten erklären. Sag deiner KI ausdrücklich, dass sie diese Datei lesen soll.

Nutze die Sammlung, um Prinzipien zu erkennen: Warum ist die Hierarchie klar? Wie viel Raum bekommt ein Bild? Formuliere daraus deine eigene Richtung. Ein kompletter Markenklon ist weder nötig noch eine eigene gestalterische Haltung.

Image to Code: Erst sehen, dann bauen.

Im Taste-Skill-Repo gibt es den Skill image-to-code. Sein Ablauf beginnt mit visuellen Referenzen, geht über deren Analyse und führt erst dann zur Umsetzung. Dafür braucht deine verwendete Oberfläche die passenden Bild- und Coding-Funktionen.

Meine Empfehlung: Lass zuerst zwei deutlich verschiedene Entwürfe entstehen. Entscheide dich begründet für einen. Danach soll die KI Bildaufteilung, Schriftgrößen und Abstände in echte Komponenten übersetzen. Ein schönes Bild verrät noch nicht, wie sich ein Formular, ein Menü oder eine Handyansicht verhalten soll.

Playwright CLI: Die Seite tatsächlich anschauen.

Microsofts Playwright CLI ist ein Browserwerkzeug. Es kann unter anderem Seiten öffnen, Bedienelemente ansprechen und Screenshots aufnehmen. Es entwickelt keine Markenpersönlichkeit, liefert aber die Grundlage für eine Prüfung der Umsetzung.

Die Projektdokumentation nennt Node.js ab Version 18 und einen Coding-Agenten mit Zugriff auf lokale Befehle. Im Terminal:

npm install -g @playwright/cli@latest
playwright-cli --help
playwright-cli install --skills

Bitte deinen Agenten anschließend, die lokal gestartete Website bei Handy- und Desktopbreite zu prüfen. Lass ihn Navigation, Formularfehler und Fokuszustände bedienen. Nur tatsächlich ausgeführte Prüfungen dürfen als bestanden gelten. Ein gewöhnlicher KI-Chat bekommt durch diese Befehle im Text noch keinen Browserzugriff.

So bringst du deiner KI deinen Geschmack bei.

# DESIGN.md: Deine visuelle Richtung

## Aufgabe
Eine verständliche Website für [Zielgruppe], die [konkretes Ziel] erfüllt.
Die wichtigste Handlung ist [Handlung].

## Charakter
[Drei konkrete Eigenschaften, zum Beispiel: ruhig, direkt, menschlich]

## Referenzen
[Referenz A]: Ich mag die klare Schrift-Hierarchie.
[Referenz B]: Ich mag die großzügigen Bildflächen.
Nicht übernehmen: Logos, Texte oder eine vollständige Markenidentität.

## Gestaltung
Schriften: [vorhandene Schriftfamilien und erlaubte Schnitte]
Farben: [Hexwerte für Hintergrund, Text und Akzent]
Abstände: [wiederkehrende Werte]
Bilder: [Motiv, Stil, Herkunft und Alternativtexte]
Komponenten: [Buttons, Links, Formulare und Zustände]

## Grenzen
Bestehende Inhalte und funktionierende Abläufe erhalten.
Keine erfundenen Kundenstimmen, Kennzahlen oder Funktionen.
Keine Effekte ohne erkennbaren Nutzen.

## Prüfung
Bei 390 und 1440 Pixeln prüfen, zusätzlich bei 320 Pixeln.
Text, Bilder und Formulare dürfen nicht abgeschnitten sein.
Tastaturbedienung, Fokus, Kontrast und reduzierte Bewegung prüfen.
Keine durchgeführte Prüfung behaupten, die nicht stattgefunden hat.

Ich möchte eine Website für [Zielgruppe] zu [Thema].
Die wichtigste Handlung ist [Handlung].
Lies zuerst meine DESIGN.md und die beigefügten Referenzen.
Erkläre konkret, welche Gestaltungsprinzipien du daraus ableitest.
Zeige mir zwei unterschiedliche visuelle Richtungen mit kurzer Begründung.
Setze erst die von mir gewählte Richtung um.
Nutze vorhandene Farben, Schriften und Inhalte als verbindliche Grundlage.
Prüfe den fertigen Entwurf auf einem schmalen Handy und am Desktop.
Berichte getrennt: tatsächlich geprüft, noch offen, persönliche Designentscheidung.

Dein erster Test: Eine Seite, zwei klare Richtungen.

Nimm eine überschaubare Aufgabe: eine Startsektion für ein lokales Reparaturcafé. Ziel ist, dass Besucher Termin, Ort und mitbringbare Gegenstände schnell finden. Verwende fiktive Beispieldaten und kennzeichne sie im Entwurf.

1. Richtung A: ruhig und sachlich, große Terminangabe, wenige Farben, klare Reihenfolge.
2. Richtung B: lebendig und gemeinschaftlich, ein starkes Motiv, freundlichere Schriftwirkung, derselbe Inhalt.
3. Deine Entscheidung: Begründe, welche Richtung zur Zielgruppe passt. „B gefällt mir“ wird zu „B vermittelt Gemeinschaft, aber die Terminangabe aus A ist klarer“.
4. Umsetzung: Lass genau diese Entscheidung bauen und dokumentieren. Übernimm nicht nebenbei neue Texte oder Funktionen.
5. Prüfung: Öffne die Seite mobil. Finde den Termin ohne Zoomen. Bediene den Hauptlink mit der Tastatur. Prüfe außerdem einen langen Ortsnamen.

Das ist eine vorbereitete Übung, kein hier durchgeführter Leistungsvergleich der Anbieter. Der Erfolg zeigt sich an der Aufgabe: Finden Menschen schneller, was sie brauchen? Eine spektakulärere Animation ist dafür kein Ersatz.

Der wichtigste Design-Skill bleibt deine Entscheidung.

Repos können deiner KI bessere Regeln geben. Du lieferst Ziel, Kontext und Urteil. Wenn du erklären kannst, warum eine Richtung passt, wird aus „mach schön“ eine wiederholbare Zusammenarbeit.

Mein Einstieg wäre: eigene DESIGN.md schreiben, einen Gestaltungs-Skill wählen, eine Sektion bauen, im Browser prüfen. Erst danach erweitern. So bekommt deine Website einen erkennbaren Charakter, ohne dass du die Kontrolle an den nächsten Standardentwurf abgibst.

Häufige Fragen