So nutzt du Taste Skill in Codex und Claude Code.

Taste Skill ist der bekannteste Design-Skill, damit KI-gebaute Websites weniger generisch aussehen. Version 2.5, veröffentlicht am 4. November 2026, ist ein kompletter Neubau für Firmen- und Marketing-Websites. Dieses Tutorial zeigt, was er braucht, wie du ihn in Codex und Claude Code installierst, wie ein Build abläuft und wie du am meisten aus ihm herausholst.

Aktualisiert am 6. November 2026 · 7 Min. Lesezeit

Was Taste Skill 2.5 macht

Taste Skill ist ein Open-Source-Skill (MIT-Lizenz) von Leonxlnx, installiert als design-taste-frontend. Version 2.5 baut Firmenwebsites mit schlichten Texten, einem Designsystem, einem Abschnitt pro Screen, gleich breiten linken und rechten Rändern, echten Fotografien, echten Markenicons und echter Produkt-UI. Shader-Effekte und Scroll-Szenen bleiben Seiten für Software, Tech und Gaming vorbehalten, und ein Checker prüft jede Seite in einem echten Browser, bevor der Agent sie übergibt.

Was du brauchst

Node.js 22 oder neuer.
Chrome, Edge oder Chromium. Setze CHROME_PATH, falls er an einer ungewöhnlichen Stelle installiert ist.
Optional: ffmpeg für WebP-Fotos und den Smartphone-Zuschnitt eines Hero-Fotos.

Er installiert nichts und braucht keine API-Schlüssel. Seine mitgelieferten Fotos funktionieren offline; zusätzliche Fotos, Schriften oder Icons herunterzuladen braucht Netzwerkzugriff.

Installation

Codex:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Starte danach eine neue Codex-Sitzung, damit der Skill geladen wird.

Claude Code:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

In Claude Code hat der Skill den Namensraum taste-skill:. Mit /plugin update aktualisierst du ihn später.

Jeder Agent, der die CLI npx skills unterstützt:

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

Hast du schon eine ältere Version installiert? Führe denselben Installationsbefehl noch einmal aus; der Installationsname hat sich nicht geändert.

Eine Seite damit bauen

Bitte deinen Agenten, eine Firmenwebsite zu bauen oder neu zu gestalten. Der Skill lädt sich von selbst, kopiert seine Assets in dein Projekt und beginnt mit seiner Startseite. Gib ihm echtes Material, denn der Skill ist auf Substanz ausgelegt: den Namen, was das Unternehmen tut, echte Zahlen, Öffnungszeiten und, falls du welche hast, Fotos.

Eine Firmenwebsite briefen

Baue die Website für [Ostra, eine kleine Seafood-Bar in Lissabon mit 24 Plätzen]. Sie hat [Dienstag bis Samstag von 18 Uhr bis Mitternacht] geöffnet, die Karte wechselt [täglich mit dem Fang vom Morgen], und Reservierungen laufen über [eine Telefonnummer und Instagram]. Nutze Taste Skill, um die Seite Screen für Screen zu planen, bevor du Markup schreibst, und führe seinen Checker aus, bevor du die Seite übergibst.

Jeder Build folgt denselben Schritten:

Das Unternehmen einordnen als Software, Gaming, Tech, Produkt, Dienstleistung oder Ort und die Seite Screen für Screen planen.
Tokens und Layout zuteilen. Ein Skript teilt eine Palette und eine Google-Fonts-Paarung für diese Art von Seite zu, dazu eines von elf getesteten Hero-Layouts.
Von einem System ausgehen: ein Abschnitt pro Screen in 1440×900, gleiche Ränder, eine fixierte Navigationsleiste und ein abschließender Footer.
Echtes zeigen: Ausschnitte der Produkt-UI und Diagramme für Software und Tech; ausgewählte Fotografien mit Bildnachweis für Orte, Läden und Dienstleistungen.
Effekte Tech und Gaming vorbehalten. Cafés, Hotels, Läden, Studios und Dienstleister bekommen kein WebGL und keine Scroll-Effekte.
In einem echten Browser prüfen bei 1440, 1024, 768 und 390 Pixeln Breite, wobei leere Visuals, Kontrastabfälle, verschobene Spalten, Platzhaltertexte und mehr auffallen.

Um eine bestehende Seite neu zu gestalten, bittest du genauso darum. Der Skill prüft die aktuelle Seite in einem Browser, bevor er etwas ändert.

Die Werkzeuge selbst ausführen

Alle Werkzeuge sind einfache Node-Skripte im Skill-Ordner. Zwei lohnen sich zu kennen:

# Deal a palette and font pairing for a kind of page
node scripts/start.mjs deal --page software

# Check a built page (a URL or a file) against the rules
node scripts/consistency.mjs <url or file> --page software

Der Checker gibt für jede Regel PASS, WARN oder FAIL aus; so siehst du schnell, warum eine Seite noch nicht stimmt.

Wohin die anderen Taste-Skills gewandert sind

Das Repository enthält jetzt einen einzigen Skill. Die älteren Stil-Skills (high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste) sind nach Leonxlnx/taste-skill-classics umgezogen, und die Bild-zuerst-Skills (imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-code) nach Leonxlnx/imagegen-skills. Sie behalten ihre Installationsnamen:

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

Wann du etwas anderes nutzt

Mobile Apps und Dashboards. Version 2.5 ist für Websites gebaut. Für App-Screens siehe Impeccable und UI UX Pro Max oder starte mit einem App-System aus unserer Designsystem-Bibliothek.
Eine bestehende Marke. Taste Skill teilt seine eigene Palette und Schriften zu. Wenn deine Marke sie schon hat, lege sie in einer DESIGN.md ab und sag dem Agenten, dass er sie behalten soll.
Zwischen Richtungen wählen. Jeder Build teilt eine Palette, eine Schriftpaarung und ein Hero-Layout zu. Wenn du mehrere Looks vergleichen willst, bitte um zwei oder drei Versionen des ersten Screens und sieh sie dir nebeneinander an.

Häufige Fragen

Ist Taste Skill kostenlos?

Ja. Er ist Open Source unter der MIT-Lizenz. Sein Autor bietet außerdem TasteCode an, eine kostenlose Open-Source-Desktop-App mit dem Skill und einem integrierten Design-Agenten.

Funktioniert Taste Skill mit React oder Next.js?

Ja. Du kannst das schlichte HTML, das er baut, direkt ausliefern oder den Agenten bitten, dieselben Tokens, dasselbe Abschnitts-Layout und dieselben Prüfungen nach React, Next.js, Vue, Svelte, Astro oder Tailwind zu übertragen.

Warum braucht Taste Skill Chrome?

Sein Checker rendert jede Seite in Headless Chrome in vier Breiten, um Regeln wie Kontrast und Ausrichtung zu prüfen, statt dem Code zu vertrauen.