frontend-design (Anthropic)

Bewertung

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning), ein frisches temporäres Projekt pro Lauf, Skill installiert oder nicht vorhanden, zwei Läufe pro Gruppe, Netzwerk aus. Der Skill wurde im Prompt nie erwähnt; das testet also auch die automatische Auslösung. Drei Aufgaben: eine Landingpage für ein erfundenes Algen-Snack-Abo (Tidepool), ein Dashboard zur Wasserqualitätsüberwachung mit Beispieldaten und ein Redesign einer bewusst faden Kletterhallen-Homepage, deren Inhalte vollständig erhalten bleiben mussten. Wir haben jede Seite mit Playwright (Desktop 1440 px und Mobil 390 px) in einer Sandbox ohne Netzwerk gerendert und blind anhand von Screenshots von 0 bis 5 bewertet. Außerdem wurden bestimmte Merkmale im HTML gezählt.

Drei-Arm-Vergleich

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

Urteil: Situationsabhängig (25.5 / 30, der höchste Wert unserer ersten drei). Quelle: anthropics/skills, skills/frontend-design, festgeschrieben auf Commit ca45fc4. Installation: npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

Was es ist

Eine einzelne Prosadatei, keine Skripte. Sie weist den Agenten an, sich wie der Design Lead eines Studios zu verhalten, das klischeehafte Vorschläge bereits abgelehnt hat: eine Palette, Schriften und ein Layout wählen, die zum Briefing passen; gängige „KI-generierte“ Standards vermeiden (cremefarbener Hintergrund mit Terrakotta-Akzent, ein durchgehend großgeschriebenes Eyebrow-Label über jeder Überschrift, nummerierte 01/02/03-Marker, die keine Reihenfolge markieren); in zwei Durchgängen arbeiten (planen, den Plan am Briefing prüfen, dann bauen) und mit einer Selbstkritik abschließen. Außerdem nennt sie Qualitätsmindeststandards: responsiv auf Mobilgeräten, sichtbarer Tastaturfokus, reduzierte Bewegung respektiert.

Wie wir getestet haben

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning), pro Lauf ein frisches temporäres Projekt, Skill installiert oder nicht vorhanden, zwei Läufe pro Gruppe, Netzwerk aus. Wir haben den Skill im Prompt nie erwähnt, das testet also auch die automatische Auslösung. Drei Aufgaben: eine Landingpage für ein erfundenes Algen-Snack-Abo (Tidepool), ein Dashboard zur Wasserqualitätsüberwachung mit Beispieldaten und ein Redesign einer absichtlich fade gestalteten Kletterhallen-Startseite, deren gesamter Inhalt erhalten bleiben musste. Wir haben jede Seite mit Playwright (Desktop 1440 px und Mobil 390 px) in einer Sandbox ohne Netzwerk gerendert und sie blind anhand von Screenshots mit 0 bis 5 bewertet. Außerdem zählten wir bestimmte Merkmale im HTML.

Was passiert ist

Er löst von selbst aus. Die Skill-Datei wurde in allen sechs Treatment-Läufen gelesen, ohne dass jemand dazu aufgefordert hat. Niemand musste einen Befehl eintippen.

Die genannten Erkennungsmerkmale verschwinden tatsächlich. Pro Seite verwendeten Kontrollseiten im Schnitt 3.2 durchgehend großgeschriebene Labels und 1.5 nummerierte Marker; mit dem Skill erstellte Seiten 0.3 und 0. Darin zeigt sich die eigene Empfehlung des Skills. Keine Gruppe verwendete die Creme- und Terrakotta-Hexwerte, vor denen er warnt, und die Gradientennutzung war identisch (0.17 pro Seite). Die Schriftfamilien blieben in beiden Gruppen auf Systemschriften beschränkt, weil die Sandbox offline war — ein Nachteil für einen Skill, dem Typografie wichtig ist. Mit Webfonts erwarten wir andere Ergebnisse.

Die Gesamtqualität war etwa gleich. Die Blindbewertungen lagen im Schnitt bei 3.75 mit dem Skill und 3.5 ohne. Die Landingpages schnitten mit dem Skill besser ab (4.0 vs. 3.25), Dashboard und Redesign waren gleichauf. Bei zwei Läufen pro Zelle ist das Rauschen. Alle Seiten waren solide: klare Hierarchie, sinnvolle Abstände, keine kaputten Layouts.

Die Gleichförmigkeit bleibt unberührt. Drei der vier Landingpages, mit und ohne Skill, nutzten dieselbe Schlagzeile: „Ein bisschen Ozean. Viel Crunch.“; die vierte (ein Treatment-Lauf) schrieb „Ein bisschen Meer.“ mit anderem Text. Alle vier teilten dasselbe Gesamtlayout: Produktbeutel und eine Preiskarte in der Seitenmitte. Der Skill verlangt „einen unverwechselbaren Blickwinkel, der zu diesem Briefing passt“, aber ein Modell, das zweimal mit demselben Prompt läuft, landet trotzdem bei seinem eigenen Standard. Der Skill entfernt oberflächliche Klischees; er bringt keine Vielfalt in die zugrunde liegende Idee. Die Redesign-Aufgabe brachte etwas mehr Vielfalt in der Typografie: Kontroll-Läufe verwendeten Arial/Helvetica und Courier, Treatment-Läufe wählten Display-Schriften im Impact-Stil mit Helvetica Neue oder Avenir Next. Das ist nur Vielfalt bei Systemschriften.

Die Qualitätsmindeststandards wurden gleichermaßen erfüllt. Viewport-Meta-Tag, @media-Abfragen und :focus-Styles erschienen auf jeder Seite in beiden Gruppen. Die Behandlung reduzierter Bewegung fehlte auf beiden Dashboards in beiden Gruppen. Der mobile Überlauf war bei 10 von 12 Seiten null; je eine Landingpage pro Gruppe lief um 2 bis 6 Pixel über.

Keine Mehrkosten. Läufe mit dem Skill verbrauchten im Schnitt 87,900 Token gegenüber 93,000 ohne (0.95x) und dauerten 155 Sekunden gegenüber 189. Die Datei zu lesen ist billig im Vergleich zu den Seiten selbst.

Ein Vorbehalt zu unseren eigenen Checks

Unser automatisierter Check für „behält die Preise $22 / $79 / $720“ schlug bei drei von vier Redesign-Läufen fehl, in beiden Gruppen. Das ist ein Fehler in unserem Regex, nicht in den Seiten: Die Preise waren über <span>-Tags verteilt, und die Screenshots zeigen alle drei Preise. Wir haben diesen Check nicht in die Bewertung einbezogen.

Sicherheitsprüfung

Eine Markdown-Datei und eine Lizenzdatei. Der Scanner fand nichts; die einzige Domain ist apache.org im Lizenztext. Keine Skripte, Binärdateien, versteckten Zeichen oder Anweisungen zu Secrets. Siehe security.md.

Bewertungen

Für wen es geeignet ist

Wenn die Seiten deines Agenten immer wieder mit denselben großgeschriebenen Eyebrow-Labels und 01/02/03-Markern ankommen, stoppt dieser Skill das zuverlässig, ohne zusätzliche Token-Kosten — es gibt also wenig Grund, ihn nicht installiert zu lassen. Wenn du hoffst, er bringt ein durchschnittliches Modell zu sichtbar originellerem Design, haben wir das nicht gesehen: Du bekommst weiterhin eine solide Seite, die aussieht wie das, was das Modell üblicherweise macht. Die zuverlässige Lösung gegen Gleichförmigkeit ist ein stärkeres Briefing von dir (eine Palette, eine Referenz, eine Stimmung), und laut Skill haben die Worte des Briefings immer Vorrang.

Grenzen dieses Tests

Zwei Läufe pro Zelle, ein Modell, Offline-Sandbox mit Systemschriften, drei Aufgaben, bewertet von einem blinden Reviewer statt von einem Panel. Designurteile sind subjektiv. Die Codex-Stufe gilt nach der Regel der Website für Codex und Claude Code.

Update (2. Nov. 2026): Ein-Satz-Gruppe ergänzt

Wir haben eine dritte Gruppe ergänzt: kein Skill, aber ein an den Prompt angehängter Satz, der die Kernregel des Skills trägt („Gib der Seite einen spezifischen, kühnen visuellen Blickwinkel ... vermeide generische KI-Design-Merkmale wie lila Gradienten, Großbuchstaben-Eyebrow-Labels, nummerierte 01/02-Marker und identische Drei-Karten-Raster“). 6 Läufe, auf einem Windows-Rechner mit demselben Codex-Build, Netzwerk aus.

Der eine Satz erreicht dasselbe Ergebnis wie der Skill (Gewinn des Skills gegenüber dem Satz: 0.00) und schlägt „ohne Skill“ um 0.25, alles im Rauschen bei n=2. Die Ein-Satz-Läufe verbrauchten etwa 1.4x die Token der Kontrolle; der Skill nicht. Die bestaussehende Seite des gesamten Sets (eine Serif-Schlagzeile im Dashboard, „Klare Sicht auf dein Wasser.“) stammte aus einem Ein-Satz-Lauf, und die einzige eindeutig fehlerhafte Seite (ein verstümmelter Ticker mit wörtlichem ?/b>-Text) stammte aus dem anderen Ein-Satz-Lauf bei der Redesign-Aufgabe. Die Bewertungen für die neue Gruppe wurden in einer separaten Blind-Sitzung vergeben, getrennt vom ursprünglichen Vergleich mit sechs Läufen, daher ist eine kleine Abweichung möglich (dieselbe Landingpage erhielt in einer Sitzung 4.5 und in der anderen im Schnitt 3.25). Der kostenlose Teil des Skills bleibt gleich: Er entfernt die konkreten Merkmale, die er benennt. Ein Ein-Satz-Prompt leistet das größtenteils auch.