ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill)

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). Drei Aufgaben, derselbe Prompt für alle Gruppen: eine Landingpage für eine fiktive Snack-Abo-Marke (Tidepool), ein Admin-Dashboard für ein kommunales Wasserqualitätsnetz und ein Redesign einer schlichten Kletterhallen-Homepage (old.html) unter Beibehaltung aller Inhalte. Die One-Liner-Gruppe ergänzt einen Satz mit den Prioritäten des Skills (Kontrast 4.5:1, 44-px-Ziele, Mobile-first, SVG-Icons, Typo-Skala, reduzierte Bewegung). Die Seiten wurden offline per Screenshot (Desktop und Mobil) aufgenommen und blind anhand gemischter Kontaktbögen ohne Bedingungslabels bewertet.

Drei-Arm-Vergleich

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

Urteil: Situativ (20.9 / 30). Quelle: nextlevelbuilder/ui-ux-pro-max-skill, .claude/skills/ui-ux-pro-max, festgehalten auf Commit 3a13158. Installation: npx skills@latest add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. Lizenz: MIT (Repo-LICENSE).

Was es ist

Der Skill ui-ux-pro-max (nextlevelbuilder/ui-ux-pro-max-skill): eine UI/UX-Design-Wissensbasis mit einem lokalen Python-Suchtool (scripts/search.py) über mitgelieferte CSV-Daten (Stile, Paletten, Schriftpaarungen, Regeln nach Produkttyp, UX-Richtlinien). Sein Hauptablauf besteht darin, eine „Designsystem“-Empfehlung für das Produkt zu erzeugen (--design-system -p <name>) und die UI dann danach zu bauen, mit einem nach Priorität geordneten Regelsatz (Barrierefreiheit, Touch-Ziele, Responsivität, Bewegung).

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).

Drei Aufgaben, gleicher Prompt für alle Gruppen: eine Landingpage für eine fiktive Snack-Abo-Marke (Tidepool), ein Admin-Dashboard für ein kommunales Wasserqualitätsnetz und ein Redesign einer schlichten Kletterstudio-Homepage (old.html) unter Beibehaltung aller Inhalte. Die Ein-Satz-Gruppe ergänzt einen Satz mit den Prioritäten des Skills (Kontrast 4.5:1, 44 px große Ziele, Mobile-first, SVG-Icons, eine Typo-Skala, reduzierte Bewegung). Die Seiten wurden offline per Screenshot (Desktop und Mobil) aufgenommen und anhand gemischter Kontaktbögen blind bewertet, ohne Bedingungslabels.

1. 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…
2. 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…
3. 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: „Befolge UI/UX-Best-Practices in Prioritätsreihenfolge: Barrierefreiheit zuerst (4.5:1 Kontrast, Alt-Texte, sichtbare Fokusringe, Labels), Touch-Ziele von mindestens 44 px mit 8 px Abstand, Mobile-first-responsives Layout mit Viewport-Meta und ohne horizontales Scrollen, ein zum Produkt passender Stil mit SVG-Icons (keine Emojis), eine konsistente Typo-Skala (16 px Basis, 1.5 Zeilenhöhe) und semantische Farb-Token sowie Bewegung, die prefers-reduced-motion respektiert.“

Mittelwert: 4.0 ohne vs. 3.96 mit Skill (Delta -0.04). Token pro Lauf: 116k vs. 160k (1.37x); Zeit 186s vs. 184s. Ein-Satz-Gruppe: 3.92 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: +0.04; Gewinn des Ein-Satz-Prompts gegenüber dem Lauf ohne Skill: -0.08); Token des Ein-Satz-Prompts 123k pro Lauf, der Skill kostet also 1.30x des Ein-Satz-Prompts.

Was dabei herauskam

• Kein sichtbarer Qualitätsunterschied: blinder Mittelwert 4.00 Kontrolle, 3.92 Ein-Satz, 3.96 Skill (je n=6). Pro Aufgabe unterscheiden sich die Gruppen um höchstens 0.25 Punkte, was unter der Auflösung von zwei Läufen pro Zelle liegt. Alle 18 Seiten sind poliert, responsiv und teilen einen ähnlichen Look (cremefarbener oder blassgrüner Grund, dunkelgrüner Akzent, Serif-Display-Schrift).
• Der Skill wurde tatsächlich verwendet: Alle 6 Läufe der Skill-Gruppe lasen SKILL.md und führten search.py --design-system aus (z. B. für „snack subscription playful coastal“). Das Skript funktioniert unter Windows mit dem System-Python.
• Grundlagen der Barrierefreiheit sind in der Ausgabe von reinem Codex bereits Standard: Viewport-Meta, @media-Abfragen und Fokus-Stile in 18/18 Seiten und prefers-reduced-motion in 17/18 (der eine Fehlschlag war ein Kontroll-Dashboard). Die Barrierefreiheits-Regeln des Skills hatten also wenig hinzuzufügen.
• Kosten: 160k Token pro Lauf mit dem Skill vs. 116k Kontrolle und 123k Ein-Satz (1.4x und 1.3x); die Laufzeit war gleich (etwa 185 s). Die Läufe der Skill-Gruppe kopierten außerdem den Skill-Ordner ins Projekt (.agents), wohin die zusätzlichen Token gehen.
• Eine Prüfung griff daneben: „behält die Preise ($22/$79/$720)“ scheiterte bei 4 von 6 Redesign-Läufen in Kontrolle und Skill-Gruppe, weil diese Seiten das Dollarzeichen in einem separaten <sup>-Element schrieben (<sup>$</sup>79); die Screenshots zeigen die Preise intakt. Sie zählt nicht zur Punktzahl.

Bewertung nach Dimensionen

Grenzen dieses Tests

• Blinde visuelle Bewertung durch den Reviewer anhand ganzseitiger Kontaktbögen (Desktop 600 px breit pro Seite, Mobil 300 px); Unterschiede von 0.25 liegen im Rauschen des Judges. Die Seiten werden nicht in voller Auflösung oder interaktiv verglichen.
• Nur n=2 pro Zelle und drei Aufgaben; der Wert des Skills für ein langes, mehrseitiges Produkt wird nicht abgedeckt.
• Die datengetriebenen Empfehlungen des Skills (Paletten- und Schriftpaarungen) konnten offline keine Webfonts laden; die Seiten fallen auf Systemschriften zurück, was die Typografie-Entscheidungen verdeckt.
• 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: 0 CRITICAL / 3 HIGH / 3 MEDIUM. Urteil: sicher ausführbar (Offline-Sandbox). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Fazit

Mit einem leistungsfähigen Basismodell sind die Seiten bereits gut; der Skill ergänzt einen Designsystem-Empfehlungsschritt, bringt hier aber keinen messbaren Qualitätsgewinn, bei 1.4x Token. Nutze ihn als Ideengenerator oder Checkliste, nicht als erwartetes Qualitäts-Upgrade.