Von Kevin Coo · cooexistenz 12. Oktober 2026 Etwa 16 Minuten · je nach KI-Auswahl Beste GitHub-Repos für deine KI
GitHub öffnet sich in einem neuen Tab. Mit diesen Links verlässt du cooexistenz. Für Inhalte auf GitHub sind die jeweiligen Betreiber verantwortlich; cooexistenz übernimmt dafür keine Verantwortung. Dieser Beitrag bleibt hier geöffnet.
„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
- Gestaltungsentscheidungen anleiten: Typografie, Layout, Farbe und Bewegung.
- Web Design Guidelines
- Den vorhandenen UI-Code auf Bedienbarkeit und typische Fehler prüfen.
- Awesome DESIGN.md
- Designsysteme als Text verstehen und eine eigene Richtung festhalten.
- Image to Code
- Erst ein visuelles Ziel entwickeln, dann analysieren und in Code übertragen.
- Playwright CLI
- Die gebaute Website im Browser bedienen und Zustände kontrollieren.
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-frontendWä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-guidelinesFordere 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 --skillsBitte 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.
1. Sag, wofür die Website da ist.
Beginne mit Menschen und Aufgaben. Eine Beratungsseite muss Vertrauen und Orientierung schaffen. Ein Nachschlagewerk muss Begriffe auffindbar machen. „Premium“ oder „modern“ allein sagt noch nicht, welche Entscheidung die Besucherin treffen soll.
2. Wähle Referenzen mit Begründung.
Nimm zwei oder drei Beispiele. Schreibe zu jedem: Das gefällt mir daran, das passt nicht zu mir. „Die Überschrift führt meinen Blick sofort“ ist hilfreicher als „Mach es so“. Eigene Screenshots und klar benannte Details machen Unterschiede besprechbar.
3. Halte die Richtung in DESIGN.md fest.
Ersetze die Platzhalter in dieser Vorlage. Wenn Farben oder Schriften schon feststehen, trägst du sie verbindlich ein. Die Datei ist ein gemeinsamer Maßstab für dich und deine KI.
# 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.4. Gib jedem Werkzeug eine Aufgabe.
Taste unterstützt die Gestaltung, Vercels Guidelines die Prüfung. Mit Image to Code kannst du vorher eine visuelle Richtung erarbeiten. Aktiviere nicht mehrere widersprüchliche Stil-Skills gleichzeitig. Eine verbindliche Richtung spart dir mehr Korrekturen als ein Stapel unklarer Regeln.
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.5. Prüfe den echten Aufbau.
Öffne die Website auf kleinen und großen Bildschirmen. Kannst du ohne Erklärung erkennen, worum es geht? Sind wichtige Links sichtbar? Funktioniert die Tastatur? Passt der Text noch, wenn eine Überschrift zwei Zeilen länger wird? Lass Fehler gezielt korrigieren statt die gesamte Seite wieder zufällig neu gestalten.
6. Bewahre die Entscheidung.
Wenn ein Ergebnis passt, aktualisiere DESIGN.md mit den tatsächlichen Regeln. Ergänze ein Screenshot-Beispiel und den Grund für die Entscheidung. Beim nächsten Beitrag oder der nächsten Unterseite beginnt die KI dann mit deiner Richtung.
Deine KI. Dein Weg zum besseren Design.
Wähle die Werkzeuge, die du nutzt. Entscheidend ist die Oberfläche: Ein Chat kann Regeln auswerten, ein Coding-Agent kann bei passenden Rechten auch Dateien ändern und Browserwerkzeuge bedienen.
ChatGPT & Codex
Im Chat: Füge die ausgefüllte DESIGN.md und deine Referenzen hinzu. Nutze den Designauftrag oben und lass zuerst die Richtung erklären. Ohne Projekt- und Browserwerkzeuge bleibt das eine Beratung oder ein Entwurf.
- Öffne für die Umsetzung dein Website-Projekt in Codex.
- Installiere den ausgewählten Taste- oder Guidelines-Skill über den oben genannten Installer mit Ziel Codex. Alternativ lege den vollständigen Skill-Ordner unter
.agents/skills/ab. - Prüfe die verfügbaren Skills. In CLI/IDE kannst du
/skillsöffnen oder den Namen mit$aufrufen, etwa$design-taste-frontend. - Lass zunächst die DESIGN.md lesen und eine einzelne Sektion umsetzen. Prüfe danach den Browser statt nur den erzeugten Code.
OpenAI unterscheidet lokale Skills und über Plugins verteilte Skills. In unterstützten ChatGPT-Oberflächen kannst du Skills mit @ auswählen; Verfügbarkeit und Werkzeuge müssen zu deinem konkreten Setup passen. OpenAI: Skills einrichten (neuer Tab)
Claude & Claude Code
Im Claude-Chat: Verwende DESIGN.md und Referenzen als Kontext. Prüfe die Skills-Einstellungen deines Kontos, wenn du die Arbeitsweise wiederverwenden möchtest. Ein nur lokal abgelegter Ordner ist nicht automatisch in einer Cloud-Sitzung verfügbar.
- Öffne dein Website-Projekt in Claude Code und installiere einen passenden Skill über den Installer.
- Für eine manuelle Einrichtung liegt ein Projekt-Skill unter
.claude/skills/<skill-name>/SKILL.md. Übernimm benötigte Begleitdateien mit. - Rufe beispielsweise
/design-taste-frontendauf und gib die DESIGN.md ausdrücklich als Grundlage an. - Nutze anschließend die Guidelines für eine getrennte Prüfung. Ein Browserwerkzeug muss in der verwendeten Umgebung tatsächlich bereitstehen.
Microsoft Copilot
Gemeint sind Microsoft Copilot und Microsoft 365 Copilot. Die Terminal-Anleitungen dieses Artikels sind kein Installationsweg für den gewöhnlichen Copilot-Chat.
- Füge den Designauftrag und deine eigenen Regeln in den Chat ein. Lass beispielsweise die Informationshierarchie einer Unternehmensseite prüfen.
- Wenn eure Organisation Agent Builder bereitstellt, erstelle einen Agenten und hinterlege die Arbeitsweise als Anweisungen. Ergänze freigegebene Designdokumente als Wissen.
- Prüfe mit einem fiktiven Beispiel, ob der Agent eure Markenregeln konkret anwendet. Beurteile die Vorschläge mit dem Team, bevor du Änderungen übernimmst.
- In Copilot Studio lassen sich Wissen und separat eingerichtete Werkzeuge verbinden. Ein hochgeladenes Repo führt aber nicht von selbst seine Installationsskripte aus.
Eigene Skills im Microsoft-365-Agent-Builder sind derzeit eine Frontier-Vorschau mit besonderen Voraussetzungen. Die Kompatibilität dieser Design-Repos ist damit nicht bestätigt. Für den normalen Einstieg reichen klare Agentenanweisungen und geprüftes Wissen. Achte beim Teilen auf die Zugänglichkeit eingebetteter Dateien.
Microsoft: Agent Builder (neuer Tab) · Microsoft: Skill-Vorschau (neuer Tab)
Google Gemini
Gemini-App: Beginne mit dem Designauftrag und der ausgefüllten DESIGN.md. Google bietet für berechtigte persönliche Konten Skills an; für Arbeits- und Schulkonten gelten derzeit andere Verfügbarkeiten.
- Wenn „Skills“ in deinen Gemini-Einstellungen verfügbar ist, erstelle dort eine eigene Anweisung oder lade eine geprüfte
SKILL.mdmit unterstützten Begleitdateien hoch. - Prüfe die Vorschläge an einem kleinen Entwurf. App-Skills unterstützen derzeit nicht alle Funktionen, darunter Canvas. Plane deshalb keinen automatischen Skill-zu-Canvas-Ablauf ein.
- Wenn dein Konto noch Gems nutzt, hinterlege die wiederkehrenden Designregeln dort und füge passende Wissensdateien hinzu. Google kündigt die Umstellung zeitlich nach Kontotyp an.
Gemini CLI für das Website-Projekt: Lege einen geeigneten vollständigen Skill-Ordner unter .gemini/skills/ ab. /skills list zeigt die erkannten Skills. Bitte Gemini ausdrücklich um Anwendung der Designregeln; prüfe angefragte Zugriffe. Für Playwright braucht es zusätzlich die lokale CLI und eine erreichbare Website.
Google: App-Skills (neuer Tab) · Google: Gems und Skills (neuer Tab) · Gemini CLI: Skills (neuer Tab)
Grok
Im Grok-Chat: Gib deine DESIGN.md beziehungsweise deren Regeln und das konkrete Gestaltungsproblem mit. Lass Entscheidungen begründen. Ein Textauftrag allein installiert weder Taste noch Playwright.
- Für lokale Umsetzung öffne das Projekt in Grok Build.
- Lege den ausgewählten Skill mit seiner
SKILL.mdund Begleitdateien unter.grok/skills/<skill-name>/ab. - Prüfe den Eintrag über
/skills. Nutzeraufrufbare Skills können als/<skill-name>erscheinen. - Wende ihn zunächst auf einen kleinen Bereich an. Prüfe, ob Bildgenerierung, lokale Befehle und Browserzugriff im konkreten Setup verfügbar sind.
Der dokumentierte Skill-Speicherort ist keine Funktionsgarantie für sämtliche Abhängigkeiten eines fremden Repos. Grok Build: Skills (neuer Tab)
Lokale KI
Ein lokal laufendes Modell bekommt durch einen Ordner mit Markdown-Dateien noch keine neue Schnittstelle. Die Oberfläche um das Modell entscheidet, wie Anweisungen, Dateien und Werkzeuge bereitstehen.
- Nutze zunächst eine kurze DESIGN.md als Kontext. Wähle ein Modell mit Bildverständnis, wenn du Screenshots beurteilen lassen möchtest.
- In Open WebUI kannst du unter „Workspace → Skills“ eine eigene Arbeitsweise anlegen. Übertrage die für dich relevanten Designregeln und prüfe sie an einer konkreten Aufgabe.
- Wenn deine Oberfläche keine Skills unterstützt, nutze den Designauftrag als gespeicherte Vorlage oder passende Modellanweisung.
- Für automatisierte Browserprüfungen braucht der Agent zusätzlich eine eingerichtete Werkzeuganbindung. Ollama als Modellserver allein installiert keine Playwright-Integration.
Teste mit einer kleinen Seite, ob das Modell lange Regeln zuverlässig berücksichtigt. Wenige klare Kriterien sind oft leichter überprüfbar als ein vollständiges fremdes Regelwerk. Open WebUI: Skills (neuer Tab)
Stand: 12. Oktober 2026. Einrichtungswege anhand der verlinkten Dokumentation eingeordnet, nicht in sämtlichen Anbietern ausgeführt. Farben und SVG-Symbole sind redaktionelle Kennungen, keine offiziellen Anbieterlogos.
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.
- Richtung A: ruhig und sachlich, große Terminangabe, wenige Farben, klare Reihenfolge.
- Richtung B: lebendig und gemeinschaftlich, ein starkes Motiv, freundlichere Schriftwirkung, derselbe Inhalt.
- 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“.
- Umsetzung: Lass genau diese Entscheidung bauen und dokumentieren. Übernimm nicht nebenbei neue Texte oder Funktionen.
- 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
Bekommt die KI durch einen Skill echten Geschmack?
Ein Skill gibt ihr Anweisungen, Kriterien und gegebenenfalls Werkzeuge. Er verändert nicht automatisch die Modellgewichte. Was für deine Zielgruppe und Marke passt, musst du weiterhin begründet entscheiden.
Funktionieren alle fünf Werkzeuge in jedem KI-Chat?
Nein. Designregeln lassen sich als Text nutzen. Native Skills benötigen eine passende Oberfläche; Playwright CLI benötigt eine ausführbare Umgebung und Browserzugriff. Die Anbieterabschnitte unterscheiden diese Wege.
Ist DESIGN.md ein Plugin?
Nein. DESIGN.md ist eine Textdatei mit Designregeln. Lass deine KI ausdrücklich darauf Bezug nehmen und prüfe, ob die Umsetzung den Regeln folgt.
Kann ich mit Gemini dieselben Designregeln nutzen?
Ja, als Anweisung oder Kontext. Gemini-App-Skills, Gems und Gemini-CLI-Skills haben unterschiedliche Voraussetzungen. Prüfe die passende Oberfläche und ihre aktuellen Funktionsgrenzen.
Muss ich alle Repos installieren?
Nein. Beginne mit einer eigenen Designrichtung und einem passenden Werkzeug. Ergänze eine Prüfung, wenn du eine echte Website umsetzt. Zusätzliche Skills sollten ein konkretes Problem lösen.