design-taste-frontend (Leonxlnx/taste-skill)

Name: design-taste-frontend (Leonxlnx/taste-skill) review
Item: design-taste-frontend (Leonxlnx/taste-skill)
Rating: 16.2
Author: Agent Skills

Gibt Landingpages und App-Ansichten eine eigenständige Designrichtung und prüft Screenshots, um austauschbare Ergebnisse zu korrigieren.

design-taste-frontend: Entfernt die „AI-Slop“-Merkmale (Großbuchstaben-Eyebrows, 01/02-Marker) und gewinnt die Redesign-Aufgabe, liegt im Durchschnitt aber unter der Kontrolle (3.6 vs. 4.0), weil eine Landingpage kaputt herauskam, bei 3.7x den Tokens

SituativVorsicht

Codex CLI · gpt-6-astra

16.2 / 30

Lift gegenüber ohne Skill: -0.38 · Situativ · 18 Läufe

Situativ: die Gesamtpunktzahl 16.2/30 liegt unter 22 und der Lift -0.38 liegt unter +1.0. Für „Empfohlen“ sind insgesamt 22/30, eine Ausgabequalität von 3.5 und ein Lift von +1.0 nötig.

SOTA

Bestanden

Getestet mit Codex.

Gilt für Codex, Claude Code

Codex CLI 0.166 (SOTA-Stufe): 18 bewertete Läufe. Ein Bestehen hier deckt gemäß unserer Stufenregel auch Claude Code ab; über die zweite Stufe sagt es nichts aus.

Punktzahlen

Jede Dimension reicht von 0 bis 5, und die sechs ergeben zusammen die Gesamtpunktzahl von 30. 5 ist in jeder Dimension besser. Kosten 5 bedeutet günstig und schnell. Installation 5 bedeutet einfach.

Trigger-Zuverlässigkeit: 5.0
Lift gegenüber ohne Skill: 1.6
Ausgabequalität: 3.6
Token- und Zeitkosten: 0.0
Installation und Portabilität: 3.0
Sicherheit: 3.0

Sicherheitsprüfung

Vorsicht

Statischer Scan: 10 CRITICAL / 44 HIGH / 9 MEDIUM. Manuelle Prüfung: Geprüft: Läufe mit Einschränkungen (gebündelte Node-Skripte; Scanner-Befunde erklärt). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Installieren

npx skills@latest add Leonxlnx/taste-skill --skill taste-skill

Quelle

Fixierter Commit: 12af471f627f866411b4bd785b19646d3672784c

Getestet: 2026-11-02

Was wir getestet haben

Neue Landingpage aus einem Briefing — Eine einseitige Landingpage für Tidepool erstellen, eine Marke für Algen-Snacks in kleinen Chargen, die im Abo verkauft (drei Sorten, 14 $/Box, monatliche Lieferung). Eine eigenständige index.html mit Inline-CSS und minimalem JS nur bei Bedarf schreiben. Keine Frameworks, kein Build-St…
Datendichtes Dashboard-UI — Eine Dashboard-Seite für ein kommunales Team zur Wasserqualitätsüberwachung bauen: aktuelle Messwerte für 6 Stationen (pH, Trübung, Chlor, Temperatur), einen 7-Tage-Verlauf je Station und ein Alarmpanel. Einzelne eigenständige dashboard.html mit Inline-CSS/JS und fest kodierten Re…
Eine bestehende fade Seite umgestalten — old.html ist die aktuelle Homepage des Granite Peak Climbing Gym (Boulder, CO). Zu new.html umgestalten: alle echten Inhalte (Preise, Kurse, Öffnungszeiten, Adresse) behalten, aber die Seite soll zu genau dieser Kletterhalle passen. Eigenständiges HTML/CSS, keine Fra…

Vorteile

Der Skill wurde erkannt, ohne genannt zu werden: Skill-Datei in 6/6 Treatment-Läufen gelesen.

Nachteile

Kein messbarer Lift gegenüber ohne Skill (-0.38, im Rauschen).
Ein Ein-Satz-Prompt erzielte 4.29 gegenüber 3.58 mit dem Skill (-0.71).
Verbraucht 3.74x die Tokens von ohne Skill.
Testhinweis: Eine Treatment-Seite war kaputt, und der Skill verbrauchte 3.7x die Tokens von ohne Skill. Die Punktzahlen stammen aus blinden Kontaktbögen.
n=2 pro Aufgabe und Variante; Unterschiede unter etwa 1 Punkt sind Rauschen.

Bewertung

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). Dieselben drei Aufgaben für alle Gruppen wie bei ui-ux-pro-max und frontend-design: eine Landingpage für die Algen-Snack-Marke Tidepool, ein Dashboard zur Wasserqualität einer Gemeinde und ein Redesign der Granite-Peak-Kletterhallen-Homepage unter Beibehaltung der Inhalte. Der One-Liner verlangt ein konkretes Konzept und eine Palette, eine markante Schriftpaarung und ein asymmetrisches Layout, keine Violet-Gradienten/Standard-Inter/Drei-Karten-Raster/nummerierten Marker/Großbuchstaben-Eyebrows, Bilder in CSS/SVG und eine Prüfung auf Desktop- und Mobilbreite. Die Seiten wurden offline per Screenshot (Desktop und Mobil) aufgenommen und blind anhand gemischter Kontaktbögen bewertet.

Drei-Arm-Vergleich

Variante	Durchschnittsnote (0-5)	Tokens pro Lauf
Ohne Skill	3.96	115k
Ein-Satz-Prompt	4.29	298k
Mit Skill	3.58	431k

Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 16.2 / 30, Urteil Situativ.

Offenlegung: Eine Treatment-Seite war kaputt, und der Skill verbrauchte 3.7x die Tokens von ohne Skill. Die Punktzahlen stammen aus blinden Kontaktbögen.

Urteil: Situativ (16.2 / 30). Quelle: Leonxlnx/taste-skill, skills/taste-skill, festgehalten auf Commit 12af471. Installation: npx skills@latest add Leonxlnx/taste-skill --skill taste-skill. Lizenz: MIT (Repo-LICENSE).

Was es ist

Der Skill design-taste-frontend (Leonxlnx/taste-skill): ein Art-Direction-Workflow für Webseiten, der mit einem lokalen Skript aus dem Briefing eine Design-„Richtung“ auswählt (zum Beispiel „die Seite ist das Objekt“), eine Richtungsdatei und einen Report in einem Ordner .taste-skill/ ablegt und dann die Seite danach baut, mit Regeln gegen generisch wirkende KI-Layouts, einem festen Satz an Abschnitten und visuellen Prüfungen.

So haben wir getestet

Codex CLI 0.166 (gpt-6-astra, niedrige Denkstufe) auf einem dedizierten Windows-Test-PC, pro Lauf ein frisches temporäres Projekt und temporäre HOME/TMPDIR/Caches, Skill installiert (Skill-Gruppe), nicht vorhanden (Kontrollgruppe) oder nicht vorhanden, aber mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts erwähnen den Skill nie (außer der unten genannten Formulierung).

Dieselben drei Aufgaben für alle Gruppen wie bei ui-ux-pro-max und frontend-design: eine Landingpage für die Algen-Snack-Marke Tidepool, ein kommunales Wasserqualitäts-Dashboard und ein Redesign der Homepage des Kletterstudios Granite Peak unter Beibehaltung der Inhalte. Der Ein-Satz-Prompt verlangt ein konkretes Konzept und eine konkrete Palette, eine unverwechselbare Schriftpaarung und ein asymmetrisches Layout, keine violetten Verläufe, kein Standard-Inter, kein generisches Drei-Karten-Raster, keine nummerierten Marker, keine Großbuchstaben-Eyebrow-Labels, Bilder in CSS/SVG und eine Prüfung bei Desktop- und Mobilbreite. Die Seiten wurden offline per Screenshot (Desktop und Mobil) aufgenommen und anhand gemischter Kontaktbögen blind bewertet.

Neue Landingpage aus einem Briefing — Erstelle eine einseitige Landingpage für Tidepool, eine kleine Algen-Snack-Marke, die im Abo verkauft (drei Sorten, $14/Box, monatlicher Versand). Schreibe eine einzige eigenständige index.html mit Inline-CSS und minimalem JS nur falls nötig. Keine Frameworks, kein Build-Sy…
Datendichtes Dashboard-UI — Baue eine Dashboard-Seite für ein kommunales Team zur Überwachung der Wasserqualität: aktuelle Messwerte für 6 Stationen (pH, Trübung, Chlor, Temperatur), einen 7-Tage-Trend für jede Station und ein Alarmpanel. Eine einzige eigenständige dashboard.html mit Inline-CSS/JS und fest codierten Mess…
Eine bestehende blasse Seite neu gestalten — old.html ist die aktuelle Homepage des Granite Peak Climbing Gym (Boulder, CO). Gestalte sie zu new.html um: Behalte alle echten Inhalte (Preise, Kurse, Öffnungszeiten, Adresse), aber lass die Seite zu genau diesem Studio gehören. Eigenständiges HTML/CSS, keine Fra…

Die Punktzahlen stammen aus einer blinden Bewertung durch Grok Bot (gemischte IDs, keine Bedingung sichtbar) anhand einer festen Rubrik, 0–5 pro Lauf; ein KI-Judge, also kleine Abstände als Rauschen behandeln.

Ergebnisse

Der Ein-Satz-Prompt für die dritte Gruppe: „Mach Art Direction gegen KI-Einheitsbrei: Wähle ein konkretes Konzept und eine konkrete Palette für dieses Thema, vermeide violette Verläufe, Standard-Inter, das generische Drei-Karten-Feature-Raster, nummerierte 01/02-Marker und Großbuchstaben-Eyebrow-Labels, nutze eine unverwechselbare Schriftpaarung und eine asymmetrische Komposition, zeichne Bilder in CSS/SVG und prüfe die Seite bei Desktop- und Mobilbreite und korrigiere, was falsch aussieht.“

Aufgabe	Punktzahl Kontrolle	Ein-Satz	Mit Skill	Token Kontrolle	Token Ein-Satz	Token mit Skill	Skill gelesen
t1-landing	4.12	4.38	2.75	101k	312k	397k	2/2
t2-dashboard	3.75	4.38	3.5	115k	330k	600k	2/2
t3-redesign	4.0	4.12	4.5	128k	252k	296k	2/2

Mittelwert: 3.96 ohne vs. 3.58 mit Skill (Delta -0.38). Token pro Lauf: 115k vs. 431k (3.74x); Zeit 175s vs. 198s. Ein-Satz-Gruppe: 4.29 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: -0.71; Gewinn des Ein-Satz-Prompts gegenüber dem Lauf ohne Skill: +0.33); Token des Ein-Satz-Prompts 298k pro Lauf, der Skill kostet also 1.44x des Ein-Satz-Prompts.

Was dabei herauskam

Blinder Mittelwert: Ein-Satz 4.29, Kontrolle 3.96, Skill 3.58 (je n=6). Pro Aufgabe erreichte der Skill 4.5 / 4.5 beim Redesign (Kontrolle 4.0, Ein-Satz 4.1), 3.5 beim Dashboard (Kontrolle 3.75, Ein-Satz 4.4) und 2.75 bei der Landingpage (Kontrolle 4.1, Ein-Satz 4.4).
Der niedrige Landingpage-Mittelwert kommt von einer kaputten Seite: Die Seite eines Laufs der Skill-Gruppe zeigt verstümmelten Text (der Sortenwähler schreibt Markup als Text, sodass „</span>“ in einem Button erscheint), eine eingeklappte Navigation und verstreute Formen; die andere Landingpage der Skill-Gruppe war in Ordnung (4.0). Der Workflow des Skills meldete „Browser-Verifikation blockiert“, also wurde ohne visuelle Prüfung ausgeliefert. Ohne diesen Lauf läge der Skill bei 4.0, gleichauf mit der Kontrolle.
Der Skill verändert tatsächlich das Aussehen der Seiten: Die Einheitsbrei-Merkmale, die er benennt, sind verschwunden. Großbuchstaben-Eyebrow-Labels pro Seite: Kontrolle 0-5, Skill 0-1; nummerierte 01/02-Marker: Kontrolle 3-6 auf 3 von 6 Seiten, Skill 0 auf allen 6. Der Ein-Satz-Prompt entfernte dieselben Merkmale (0-1 Labels, 0 Marker), der Satz leistet diesen Teil also allein.
Die Kosten sind sehr hoch: 431k Token pro Lauf mit dem Skill vs. 298k Ein-Satz vs. 115k Kontrolle (3.7x und 1.4x), bei 25.7 Shell-Befehlen pro Lauf (Kontrolle 7.7). Jeder Lauf legt außerdem etwa 40 Skill- und Richtungsdateien im Projekt ab (direction.json und report.md des Skills werden unter .taste-skill/ geschrieben).
Dashboards und Landingpages der Skill-Gruppe mit .taste-skill/direction.json sahen unverwechselbar aus (redaktionelle Papier-und-Tinte-Layouts), waren aber nicht durchgehend besser als der schlichte dunkelgrüne Serif-Kursiv-Stil, auf den sich Kontrolle und Ein-Satz zubewegen.

Bewertung nach Dimensionen

Dimension	Punktzahl	Begründung
1_output_quality	3.58	Mittlere Punktzahl 3.58/5 mit dem Skill (programmatische Prüfungen, siehe Tabelle pro Aufgabe).
2_lift_vs_no_skill	1.62	-0.38 Punkte gegenüber 3.96 ohne den Skill (n=2 pro Aufgabe; unter etwa 1 Punkt ist Rauschen).
3_trigger	5.0	Skill-Datei in 6/6 Läufen der Skill-Gruppe gelesen.
4_instructions_portability	3	Umfangreich: SKILL.md, eine Richtungsbibliothek, CSS-Assets und Skripte, die ins Projekt schreiben; setzt einen Browser für visuelle Prüfungen voraus.
5_efficiency	0	3.74x Token (431k vs. 115k pro Lauf) und 1.14x Zeit (198s vs. 175s).
6_safety_hygiene	3	Schreibt `.taste-skill/`-Dateien ins Projekt; siehe security.md.

Grenzen dieses Tests

Blinde visuelle Bewertung durch den Reviewer anhand ganzseitiger Kontaktbögen (Desktop 600 px, Mobil 300 px pro Seite); eine Differenz von 0.25 liegt im Rauschen des Judges. Eine kaputte Seite verschiebt den Mittelwert des Skills um etwa 0.3.
n=2 pro Zelle, drei Aufgaben; die eine kaputte Seite kann Pech statt eines systematischen Defekts sein.
Schriften werden offline nicht geladen, daher sind die Schriftpaarungen nicht sichtbar.
Der eigene Browser-Screenshot-Schritt des Skills konnte in der Sandbox nicht laufen, was ihn wahrscheinlich stärker trifft als die anderen Gruppen.
n = 2 pro Gruppe und Aufgabe: Unterschiede unter etwa 1 Punkt sind Rauschen.
Blinde KI-Bewertung: ein einzelner Judge, keine Prüfung zwischen Bewertern; die ursprünglichen Läufe von Kontrolle und Skill-Gruppe und die späteren Ein-Satz-Läufe wurden in getrennten Sitzungen bewertet (Ein-Satz am 2026-11-02), eine Verschiebung zwischen den Sitzungen ist also möglich.

Sicherheit

Siehe security.md. Scan: 10 CRITICAL / 44 HIGH / 9 MEDIUM. Urteil: sicher ausführbar (Offline-Sandbox). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Fazit

Der Skill entfernt den generischen KI-Look und lieferte hier das beste Redesign, kostete aber 3.7x Token und lieferte in 1 von 6 Läufen eine sichtbar kaputte Seite aus, ohne es zu bemerken; ein Ein-Satz-Art-Direction-Prompt erzielte mit etwa einem Drittel der Token eine höhere Punktzahl. Ausprobieren für art-direktierte Marketingseiten, bei denen ein Mensch das Ergebnis prüft, nicht als unbeaufsichtigter Standard.

Transkript

Laufprotokoll: design-taste-frontend (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Spalten: Aufgabe, Gruppe-Lauf, Punktzahl (0-5), Tokens, Sekunden, bestandene Prüfungen, vom Agenten geöffnete Skill-Dateien.

t1-landing control-1: Punkte 4.25, Tokens 100863, Sek. 169.3, Prüfungen 5/5, nichts geöffnet
t1-landing control-2: Punkte 4.0, Tokens 101753, Sek. 206.0, Prüfungen 5/5, nichts geöffnet
t1-landing oneliner-1: Punkte 4.25, Tokens 279371, Sek. 224.5, Prüfungen 5/5, nichts geöffnet
t1-landing oneliner-2: Punkte 4.5, Tokens 345398, Sek. 247.5, Prüfungen 5/5, nichts geöffnet
t1-landing treatment-1: Punkte 1.5, Tokens 433869, Sek. 267.5, Prüfungen 5/5, geöffnet taste-skill
t1-landing treatment-2: Punkte 4.0, Tokens 360647, Sek. 199.4, Prüfungen 5/5, geöffnet taste-skill
t2-dashboard control-1: Punkte 3.75, Tokens 114229, Sek. 178.7, Prüfungen 4/5, nichts geöffnet
t2-dashboard control-2: Punkte 3.75, Tokens 117234, Sek. 192.6, Prüfungen 4/5, nichts geöffnet
t2-dashboard oneliner-1: Punkte 4.25, Tokens 411906, Sek. 237.5, Prüfungen 4/5, nichts geöffnet

18 Läufe, 3 Artefakte

Beispielausgabe

SOTA · With the skill: index.html (t1-landing, run 1, Codex)

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#163e32"> <meta name="description" content="Meet Tidepool: small-batch seaweed snacks in three big flavours. Your monthly crunch, $14 a box."> <title>Tidepool 鈥?A little sea. A lot of crunch.</title> <style> :root{--green:#163e32;--paper:#f5f3e9;--lime:#e1f184;--pink:#edb7c6;--blue:#bfd9ec;--ink:#163e32;--body:Arial,Helvetica,sans-serif;--display:'Arial Black',Arial,Helvetica,sans-serif;--gutter:clamp(22px,4vw,64px)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--body)}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}a,button{transition:transform .2s}a:hover,button:hover{transform:translateY(-3px)}a:active,button:active{transform:translateY(1px)}::selection{background:var(--pink);color:var(--green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.055em;line-height:.98}h2{font-size:clamp(40px,5.5vw,76px)}h3{font-size:30px}p{max-width:48ch}.skip{position:absolute;top:-100px;background:var(--paper);padding:14px;z-index:10}.skip:focus{top:0}.announcement{background:var(--lime);text-align:center;padding:9px 20px;font-size:14px}.header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--green);color:var(--paper)}.logo{font-family:var(--display);font-weight:900;font-size:38px;letter-spacing:-3px;line-height:1}.logo span{display:inline-block;transform:rotate(-12deg)}nav{display:flex;align-items:center;gap:34px;font-size:15px}.nav-cta{background:var(--paper);color:var(--green);padding:12px 23px;border-radius:50px}.hero{background:var(--green);color:var(--paper);padding:35px var(--gutter) 0;overflow:hidden}.hero h1{font-size:clamp(66px,10.8vw,164px);letter-spacing:-.065em;line-height:.89;position:relative;z-index:1}.hero h1 span{display:block;animation:rise .8s both}.hero h1 span:last-child{animation-delay:.1s}.hero-bottom{display:grid;grid-template-columns: .85fr 1.15fr;min-height:405px;align-items:center}.hero-copy{padding:40px 0 55px;max-width:410px}.hero-copy p{font-size:19px;line-height:1.5;margin-bottom:27px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-radius:50px;background:var(--lime);color:var(--green);padding:17px 27px;font-weight:700;cursor:pointer}.button .arrow{font-size:24px;line-height:1}.note{display:block;font-size:14px;margin-top:13px}.hero-art{height:420px;position:relative;align-self:end}.pack{width:230px;height:315px;background:var(--lime);color:var(--green);padding:22px 18px 17px;position:absolute;display:flex;align-items:center;flex-direction:column;clip-path:polygon(0 0,100% 0,98% 4%,100% 8%,98% 96%,100% 100%,0 100%,2% 95%,0 7%,2% 3%);isolation:isolate}.pack:before,.pack:after{content:'';position:absolute;left [... excerpt: first 3200 of 17282 characters]

Pro ansehen