Wir haben dieselbe Landing Page mit und ohne Skill erstellt

Der Skill Bench, Teil 1 von 4. Gleiches Modell, gleicher Prompt, ein Skill installiert oder nicht. Dieser Eintrag: eine Landing Page. Ebenfalls in der Serie: ein Telegram-Bot, Debugging eines Snake-Spiels und Auditierung eines Google zx-Skripts.

Jede Skill-Bewertung auf dieser Website endet mit derselben ungelösten Frage: Führt dieser Skill dazu, dass Claude bessere Arbeit leistet, oder führt er nur dazu, dass Claude mehr Arbeit leistet? Das ist nicht dasselbe, und die meisten Test-Setups können sie nicht unterscheiden, da die Läufe nicht eng genug kontrolliert werden, um die eine relevante Variable zu isolieren.

Wir haben daher ein Experiment durchgeführt. Zwei Läufe, gleiches Modell, gleiches Briefing, bis ins Detail der Interpunktion. Der einzige Unterschied zwischen ihnen ist eine Anweisung: „Diesen installierten Skill lesen und befolgen.“ Lauf eins: Das Modell erstellt ohne Hilfe. Lauf zwei: Wir verweisen es auf den tatsächlichen frontend-design Skill, der in unserem Katalog mit 9,6 von 10 bewertet ist, und lassen es die echte SKILL.md lesen, bevor es Code berührt. Anschließend vergleichen wir die beiden Landing Pages Zeile für Zeile und zählen die Token, die jeder Lauf gekostet hat.

Dies ist der erste von vier solchen Vergleichen. Wir haben eine Landing Page als Ausgangspunkt gewählt, da visuelles Design der Bereich ist, in dem „besser“ am einfachsten zu diskutieren und am schwierigsten zu fälschen ist. Ein gradientenreicher Hero-Bereich sieht entweder aus wie jede andere KI-erstellte Seite oder eben nicht, und man braucht keinen Benchmark, um zu erkennen, welche.

Das Setup

Das Briefing war für beide Läufe dasselbe: eine einteilige Landing Page für „Nimbus“, eine fiktive Wetter-API, erstellt nach einem Stripe-ähnlichen Standard: Hero-Bereich, drei Feature-Blöcke, eine Preistabelle mit Free-, 29-$- und 199-$-Stufen, ein Code-Beispielblock und ein Footer. Keine Frameworks, kein Build-Schritt, eine HTML-Datei mit eingebettetem CSS.

Lauf eins erhielt dieses Briefing und nichts weiter. Lauf zwei erhielt das identische Briefing plus einen Verweis auf den installierten frontend-design Skill, den das Modell dann vor dem Start vollständig gelesen hat.

Eine wichtige Einschränkung, die offen und nicht versteckt genannt wird: Dies ist N=1. Ein Lauf pro Arm, ein Modell, ein Briefing. Wir behaupten nicht, dass diese Zahlen über hundert Versuche hinweg statistisch stabil sind, und wenn Sie dies selbst wiederholen, erhalten Sie andere spezifische Zahlen. Was wir behaupten, ist enger gefasst und unserer Meinung nach nützlicher: Dies ist im Detail bei einem echten Lauf mit echter Telemetrie passiert, und es ist ein Muster, das wir in weniger kontrollierten Tests oft genug gesehen haben, um seiner Form zu vertrauen, noch bevor wir Runde zwei und drei durchführen.

Was die Baseline erstellt hat

Auf sich allein gestellt, produzierte Claude eine Seite, die die meisten Menschen, die viel KI-Output gesehen haben, sofort erkennen würden. 890 Zeilen, ein helles Farbschema, das auf Papier- und Bernsteintönen basiert, und es ist fair zu sagen: Der Code war sauber, der Text war angemessen, das Layout funktionierte, nichts war kaputt.

Die Merkmale lagen alle im Detail. Elf separate Farbverläufe auf der Seite, im Hero-Hintergrund, in Button-Zuständen, in Kartenrändern, an Stellen, wo ein Farbverlauf visuelles Rauschen hinzufügte, anstatt eine Funktion zu erfüllen. Zwei Überschriften verwendeten background-clip: text, um den Text selbst in einem Farbverlauf darzustellen, die derzeit einzigartig erkennbarste KI-Design-Signatur. Statistikzahlen schwebten in ihren eigenen Karten oberhalb des Falzes, losgelöst von jeglicher Layout-Logik, die Art von Element, das aussieht, als wäre es hinzugefügt worden, weil eine Vorlage irgendwo eines hat, nicht weil diese spezielle Seite es brauchte.

Nichts davon ist inkompetent. Es ist der Output eines Modells, das im Allgemeinen gut im Webdesign ist und keine spezifische Sichtweise auf diese Marke im Besonderen hat, daher greift es auf dieselben Muster zurück, die immer dann auftauchen, wenn dieselbe Frage ohne weitere Einschränkungen gestellt wird. Ein Lauf mit 63.329 Token kaufte eine lieferbare Seite. Er kaufte keine Seite, an die sich jemand erinnern würde, und es ist dieselbe Seite, die wir von den meisten Skills in unserem Überblick über die besten Design-Skills erwarten würden, wenn man den Design-Skill wieder entfernt.

Was der Skill-Arm anders erstellt hat

Der Skill-geführte Lauf las die tatsächliche anthropics/skills frontend-design SKILL.md, bevor er etwas schrieb, und die resultierende Seite liest sich, als käme sie von einem völlig anderen Design-Briefing. Dunkel marineblauer Hintergrund (--bg: #0B1119) gepaart mit einem Messingakzent (--brass: #D2A25C), eine Kombination, die nirgendwo im Suchraum der Baseline auftaucht und als bewusste Wahl und nicht als Standard interpretiert wird. 985 Zeilen, vier Farbverläufe statt elf und null Instanzen von Gradient-Text. Nicht weniger, null. Das Schriftsystem war diszipliniert, anders als das der Baseline: konsistente Skalierung, konsistente Gewichtungslogik, Überschriften, die gewählt und nicht nur passend dimensioniert wirken.

Nichts an dieser Seite schreit „Premium“, so wie ein Stockfoto eines Händedrucks „Corporate“ schreit. Es ist subtiler. Die Palette ist ungewöhnlich genug, dass sie nicht als Vorlage gelesen wird, und die Zurückhaltung bei Farbverläufen bedeutet, dass die verbleibenden tatsächlich Gewicht tragen, anstatt alles zu dekorieren, was sie berühren. Wenn Sie einem Kunden beide Seiten übergeben und gefragt hätten, welche ein designbewusster Gründer veröffentlichen würde, wäre dies keine knappe Entscheidung.

Die Zahlen

	Baseline (ohne Skill)	Skill-Arm (frontend-design)	Delta
Verwendete Token	63.329	125.165	+98%
Tool-Aufrufe	6	57	+51
Output-Länge	890 Zeilen	985 Zeilen	+95 Zeilen
Farbverläufe	11	4	-7
Gradient-Text-Instanzen	2	0	-2
Palette	Hell, Papier + Bernstein	Dunkel Marine + Messing	—

Die Token-Zahl ist die Schlagzeile und sie ist nicht subtil: Der Skill-Lauf kostete fast doppelt so viel. Das ist kein Rundungsfehler, den man Rauschen zuschreiben kann, und es ist die Zahl, an der jede andere Behauptung in diesem Artikel gemessen werden muss.

Warum der Skill mehr kostet

Die Token-Lücke liegt nicht wirklich an der Dateigröße des Skills. SKILL.md-Dateien umfassen typischerweise einige tausend Token, nicht genug, um einen 63k-Token-Lauf zu verdoppeln. Was tatsächlich geschah, ist an der Anzahl der Tool-Aufrufe sichtbar: 6 versus 57. Der Baseline-Lauf schrieb die Seite und war fertig. Der Skill-Lauf las den Skill, iterierte dann dagegen, überprüfte seinen eigenen Output anhand einer Checkliste, die der Skill vorgibt, passte Abstände an, überdachte Farbwahlen, hinterfragte eine Layout-Entscheidung, die er bereits einmal getroffen hatte.

Das ist der Mechanismus, und es ist wichtig, ihn zu benennen, denn er bedeutet, dass die Token-Kosten nicht „ein längeres Dokument lesen“ sind. Es ist „die Arbeit mehr als einmal erledigen“. Ein Skill, der beschreibt, wie gutes Design aussieht, verwandelt eine einmalige Generierungsaufgabe in etwas, das einem Selbstüberprüfungs-Loop ähnlicher ist, und Selbstüberprüfungs-Loops sind von Natur aus teuer in Token, egal ob ein Mensch oder ein Modell sie ausführt.

Wann +98% Token ein Schnäppchen sind und wann nicht

Wenn das Ergebnis das Design ist, ist dies keine schwierige Entscheidung. Eine Landing Page, die ein Kunde sehen wird, ein Portfolio-Stück, alles, wo „sieht das aus, als wäre es von jemandem mit Geschmack gemacht worden“ Teil der Stellenbeschreibung ist: Die Token-Kosten hier sind eher ein Rundungsfehler als ein Budgetposten. Niemand diskutiert darüber, einen Designer für einen zweiten Entwurf zu bezahlen. Ein Modell in Token für die äquivalente Iteration zu bezahlen, ist derselbe Handel zu einem viel niedrigeren Preis, selbst bei doppelten Baseline-Kosten.

Wenn das Ergebnis ein internes Tool, ein Prototyp, den niemand außerhalb des Teams sehen wird, oder eine Seite ist, die dazu dient, zu beweisen, dass ein API-Endpunkt funktioniert, anstatt eine Marke zu repräsentieren, überspringen Sie es. Die Papier-und-Bernstein-Seite der Baseline mit ihren verirrten Farbverläufen erfüllt ihren Zweck. Niemand, der ein internes Admin-Panel bewertet, wird bemerken, dass die Überschrift background-clip: text verwendet hat, und doppelte Token zu bezahlen, um einen Fehler zu beheben, den niemand sehen wird, ist kein Qualitätskauf, es ist nur eine höhere Rechnung.

Der Entscheidungspunkt ist nicht die Qualität des Skills, die real ist. Es ist die Frage, ob jemand das Ergebnis genau genug betrachten wird, um sich darum zu kümmern.

So reproduzieren Sie dies selbst

Sie benötigen unser exaktes Briefing nicht, um diesen Vergleich an Ihrer eigenen Arbeit durchzuführen. Das Setup ist einfach genug, um es an einem Nachmittag zu wiederholen.

• Erstellen Sie ein Briefing mit konkreten Einschränkungen: einen Produktnamen, eine spezifische Reihe von Abschnitten, eine spezifische Preisstruktur, „keine Frameworks“, falls Ihnen das wichtig ist. Vage Briefings erzeugen vage Deltas, da es für einen Design-Skill weniger gibt, woran er sich reiben kann.
• Führen Sie es einmal mit einem sauberen Modell und ohne installierte Skills aus. Speichern Sie den Output und notieren Sie die Token-Anzahl aus Ihrer Telemetrie, nicht eine Schätzung.
• Installieren Sie frontend-design (oder welchen Design-Skill Sie auch immer evaluieren), starten Sie Ihre Session neu, damit die Beschreibung des Skills frisch geladen wird, und führen Sie das identische Briefing erneut aus, geändert nur durch eine Zeile, die dem Modell sagt, den Skill zu lesen und zu befolgen.
• Vergleichen Sie die beiden Outputs auf die spezifischen Merkmale, die wir hier gefunden haben: Anzahl der Farbverläufe, Verwendung von background-clip: text, ob die Palette gewählt oder Standard aussieht, ob die Typenskala konsistent ist. Lesen Sie unser Testprotokoll für die vollständigere Version dieses Prozesses, einschließlich der Trigger-Batterie, die wir vor jedem Output-Vergleich durchführen.
• Vergleichen Sie die Token-Anzahlen zuletzt, nachdem Sie sich eine Meinung zum Output gebildet haben. Wenn Sie zuerst auf die Rechnung schauen, beeinflusst dies, wie großzügig Sie bei der visuellen Vergleich sind, und diese Reihenfolge ist wichtiger, als es klingen mag.

FAQ

Verdoppelt der frontend-design Skill immer den Token-Verbrauch? Nicht unbedingt, und wir behaupten keinen festen Multiplikator. Dieser Lauf zeigte +98% bei einem Briefing mit einem Modell. Der Mechanismus hinter der Zunahme, mehr Tool-Aufrufe, weil das Modell seinen Output anhand der eigenen Anleitung des Skills überprüft, sollte sich verallgemeinern lassen, aber der genaue Prozentsatz wird sich mit der Komplexität des Briefings und dem Umfang des Hin und Her ändern, den das Modell für notwendig erachtet.

Ist ein Lauf pro Arm ausreichend, um diesen Zahlen zu vertrauen? Ausreichend, um dem Muster zu vertrauen, nicht ausreichend, um dem genauen Prozentsatz zu vertrauen. Wir nennen dies bewusst N=1, damit niemand es mit einer kontrollierten Studie verwechselt. Was wir mit größerer Zuversicht sagen können, ist die Richtung: Skill-geführte Iteration kostet mehr und erzeugt ein sichtbar durchdachteres Ergebnis, ein Muster, das sich bei jedem Design-Skill-Vergleich zeigt, den wir weniger formell in normalen Tests durchgeführt haben.

Warum Claude nicht einfach anweisen, „Gradient-Text und generisches KI-Design zu vermeiden“? Das können Sie tun, und es wird etwas helfen. Aber eine einzeilige Anweisung trägt nicht die Argumentation eines vollständigen Skills, die spezifische Palettenlogik, die Typenskala-Regeln, die Checkliste, gegen die das Modell iteriert. Unser vollständiges Testprotokoll behandelt, warum Anweisungen auf Prompt-Ebene und auf Skill-Ebene tendenziell unterschiedliche Ergebnistiefen erzeugen, selbst wenn sie auf dasselbe Ziel abzielen.

Wie verhält sich dies im Vergleich zu Claudes Output bei anderen Aufgabenarten? Designaufgaben sind der Fall, in dem ein Skill den offensichtlichsten Spielraum zur Hilfe hat, da „sieht das unverwechselbar aus“ auch ohne Scorecard lesbar ist. Unsere anderen Skill Bench-Einträge testen Skills gegen den Bau eines Telegram-Bots, eine Debugging-Sitzung und ein Skript-Audit, drei Bereiche, in denen der Gewinn, falls vorhanden, anders aussieht als eine schönere Palette. Siehe die vollständige Methodik dazu, wie wir über alle vier hinweg bewerten.

Wir haben dieses Briefing gewählt, weil eine Landing Page den Fall eines Design-Skills für sich selbst ohne jegliche Interpretation darstellt. Betrachten Sie die beiden Seiten nebeneinander, und die Palette, die Anzahl der Farbverläufe und die Typendisziplin sagen Ihnen alles, was die Token-Tabelle nicht kann. Der nächste Eintrag in dieser Serie tauscht diese visuelle Klarheit gegen etwas aus, das schwerer zu beurteilen ist: einen funktionierenden Bot, bei dem „besser“ danach beurteilt werden muss, ob das Ding läuft.