Guter Geschmack für Claude Code

Was es ist und warum es zählt

Bitte Claude Code um die Seite deiner App, und du bekommst fast immer dieselbe: zentrierte Überschrift, ein kleines Label darüber, drei Kästen mit Icon, ein weicher Farbverlauf. Nichts daran ist falsch, aber nichts daran ist deins. Es ist der Durchschnitt aller Seiten, die das Modell gesehen hat.

Taste Skill nimmt genau diesen Durchschnitt weg. Es ist ein Agent Skill, also ein Ordner mit Anweisungen und kleinen Programmen, die Claude nutzt, wenn du um eine Seite bittest. Der Code ist offen auf GitHub, unter MIT-Lizenz, also kostenlos. Er gibt Claude eine Art Direction, echte Fotos aus offenen Archiven und eine Prüfung in einem echten Browser, bevor es dir sagt, dass es fertig ist.

Er ist für alle, die alles allein machen und keinen Designer haben: Founder, Indie Hacker, Leute, die mit KI programmieren. Er funktioniert mit jeder Technologie, von React bis zu einfachem HTML. Der Preis ist Zeit: Eine Seite braucht 30 bis 45 Minuten und einige hunderttausend Tokens.

1. Was du brauchst und wie du ihn installierst

Bevor du ihn installierst, prüf zwei Dinge auf deinem Computer:

• Node 22 oder neuer. Node ist das Programm, das JavaScript außerhalb des Browsers ausführt: Deine Version siehst du, wenn du node -v im Terminal eingibst.
• Chrome, Edge oder Chromium installiert. Damit wird die Seite geöffnet und fotografiert.

Du brauchst keine API-Schlüssel, und er installiert nichts Eigenes auf deinem Computer. Das Internet nutzt er nur, um Fotos zu suchen. Dann installierst du ihn als Plugin von Claude Code:

1. Öffne Claude Code und gib /plugin marketplace add Leonxlnx/taste-skill ein. Damit kommt der Katalog dazu, der den Skill enthält.
2. Dann gib /plugin install taste-skill@taste-skill ein. Der Skill landet in Claude Code mit dem Präfix taste-skill, so kommt er deinen anderen Skills nicht in die Quere.
3. Öffne eine neue Sitzung, damit du sicher bist, dass Claude ihn sieht. Zum späteren Aktualisieren gibt es /plugin update.

Oder du installierst ihn im Terminal mit skills, einem Programm, das Skills in Programmierassistenten installiert:

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

2. Wie er arbeitet, in sechs Schritten

Dahinter steckt eine Studie: 248 Websites aus zwei Design-Galerien, 156 von One Page Love und 92 aus den Sites of the Day von Awwwards, davon 247 geladen. Die Noten haben keine Menschen vergeben, sondern KI-Modelle, die sie anhand von Screenshots und Messungen bewertet haben. Das sagt die Studie selbst.

Daraus entstehen die Regeln und zwanzig Richtungen, also zwanzig Arten, eine Seite aufzubauen. Wenn du um eine Seite bittest, macht Claude Folgendes:

1. Er liest die Anfrage und macht eine Bestandsaufnahme: acht bis zwölf Dinge, die nur dein Produkt hat und kein Konkurrent. Der Name und was er bedeutet, die Zahlen, die Einschränkung, mit der es lebt.
2. Ein Programm, draw.mjs, zieht zufällig drei Richtungen aus denen, die zur Anfrage passen, und Claude wählt eine davon. Du wählst nicht: Ein Modell, das frei entscheiden darf, nimmt immer die naheliegendste Lösung.
3. Er findet die Idee: einen Satz, der etwas aus deiner Bestandsaufnahme mit der gewählten Richtung verbindet. Wenn der Satz auch für deinen nächsten Konkurrenten passt, wirft er ihn weg.
4. Er baut die Seite mit echten Fotos: zuerst deine. Hast du keine, sucht assets.mjs Bilder aus deiner Welt in offenen Archiven wie Wikimedia Commons, Openverse, dem Met und dem Art Institute of Chicago (für Videos auch Internet Archive und NASA) und setzt die Credits auf die Seite.
5. Er macht die Prüfung. lint.mjs liest den Code, inspect.mjs öffnet die Seite in einem echten Browser bei 1440, 768 und 390 Pixel Breite, bis hinunter zum Handy, und markiert FAIL, wo eine Regel verletzt ist: Überschriften über zwei Zeilen, Farbverläufe, leere Bildschirme. Claude muss jedes FAIL beheben.
6. Er schaut sich seine Screenshots an, bewertet sie, behebt die drei schlimmsten Probleme und prüft erneut. Höchstens drei Runden.

Am Ende bekommst du einen Bericht: die Richtung, die Idee, was noch nicht überzeugt, und die Liste der Fotos mit Urheber, Lizenz und Quelle.

3. Der erste Prompt: die Seite deiner App

Je mehr du ihm gibst, desto besser arbeitet er. Das ist der Prompt, den ich für die Seite einer Fitness-App nehmen würde, die ein Founder allein baut. Ersetz die Teile in [ ] durch deine:

Nutze den Skill design-taste-frontend, um die Landingpage von [Name der App] zu erstellen, einer iPhone-App, die [was sie macht, in einem Satz].
Für wen: [wer sie nutzt].
Das Einzige, wozu die Seite bringen soll: [die App aus dem App Store laden].
Was nur sie hat: [drei oder vier wahre Dinge: eine Zahl, eine Einschränkung, eine Gewohnheit].
Stack: [einfaches HTML / Next.js].
Meine Fotos: [Ordner mit den echten Fotos, oder: keine].
Erfinde keine Bewertungen, Kunden oder Zahlen. Sag mir am Ende die gezogene Richtung, die Idee und welche Beispieltexte ich ersetzen muss.

Die letzte Zeile zählt. Der Skill erfindet keine Bewertungen, Kunden oder Statistiken, aber er füllt Lücken mit Beispieltexten und listet sie im Bericht auf. Die prüfst du selbst, einen nach dem anderen.

4. Gib ihm das Material, das nur du hast

In der Studie gingen die bestbewerteten Seiten von einer Idee aus, die aus dem Produkt selbst kam, nicht vom Stil. Deine Aufgabe ist also, ihm dieses Rohmaterial zu geben:

• Der Name und was er bedeutet. Er kann zum Mittelpunkt der Seite werden.
• Deine echten Fotos: du, das Produkt, der Ort. Sag ihm, dass sie deine sind, dann kommen sie zuerst. Ein echtes Foto vom Produkt landet groß auf dem ersten Bildschirm.
• Die echten Screenshots deiner App. Für Software sind sie das stärkste Bild, das es gibt.
• Die Einschränkung: was du nicht machst oder nur auf eine bestimmte Art.

Hier ist mein Material für die Seite.
Name: [Name], und er bedeutet [Bedeutung].
Meine Fotos in [Ordner]: Sie sind echt, nimm sie vor allen anderen.
Screenshots der App in [Ordner].
Echte Zahlen: [Zahlen].
Die Einschränkung, die uns anders macht: [Einschränkung].
Geh für die Bestandsaufnahme und die Idee von diesen Dingen aus, nicht von der Kategorie.

5. Eine Seite überarbeiten, die du schon hast

Wenn du die Seite schon hast, fängst du nicht bei null an: Bestehende Seiten zu überarbeiten ist Teil des Skills. Bevor er etwas anfasst, öffnet er deine Seite in einem echten Browser, misst sie und speichert die Vorher-Screenshots. Er behält deine Technologie, die Inhalte und was funktioniert, und ändert Schriften, Farben, Ränder und Überschriften und zuletzt die Blöcke von der Stange. Am Ende zeigt er dir Vorher und Nachher.

Nutze den Skill design-taste-frontend, um die Seite unter [Pfad oder lokale Adresse] zu überarbeiten. Halte zuerst fest, wie sie jetzt aussieht, mit Messwerten und Screenshots. Behalte Stack, Inhalte, Links und Formulare, die funktionieren. Zeig mir am Ende Vorher und Nachher in allen drei Breiten und sag mir, was du geändert hast.

6. Dashboards und App-Bildschirme

Er funktioniert auch für Bildschirme, auf denen man arbeitet: Dashboards, Admin-Bereiche, Einstellungen. Hier folgt er einem eigenen Weg, aus einer eigenen Studie mit 23 Bildschirmen echter Produkte: draw.mjs --app zieht einen Stil für deine Art von Produkt, und inspect.mjs --app prüft mit eigenen Regeln, etwa Farbe nur auf den Daten und ausgerichtete Zahlen.

Nutze den Skill design-taste-frontend für das Dashboard von [App]: Es ist ein Bildschirm zum Arbeiten, keine Seite zum Lesen. Wer es nutzt: [wer]. Die Frage, die es zuerst beantworten muss: [Frage]. Realistische Daten, die aufgehen: [Daten oder Datei]. Nimm dieselben Farben und Schriften wie auf meiner Landingpage.

Häufige Fehler

• Ihn starten, ohne zu schauen, wie viel Nutzung dir noch bleibt. Eine Seite sind 30 bis 45 Minuten und einige hunderttausend Tokens: Bei einem Plan mit Limits ist das ein großer Teil. Mach es, wenn du Spielraum hast.
• Ihm eine Anfrage von einer Zeile geben. Ohne dein Material kommt die Idee aus der Kategorie, und die Seite sieht wieder aus wie alle anderen.
• Ihn ohne Node 22 oder ohne Chrome nutzen. Der Inspektor startet nicht: Claude prüft nur den Code, schaut sich Screenshots an, die anders entstanden sind, und sagt dir, dass der Inspektor nicht gelaufen ist.

Checkliste

• Ich habe Node 22 oder neuer und Chrome, Edge oder Chromium
• Taste Skill ist installiert und Claude erkennt ihn
• Im Prompt stehen Name, was es macht, für wen und das Einzige, wozu die Seite bringen soll
• Der Inspektor endet mit null FAIL bei 1440, 768 und 390
• Ich habe die im Bericht aufgelisteten Beispieltexte ersetzt
• Die Foto-Credits stehen unten auf der Seite

Häufige Fragen