Design Visual Frontend
Erzwingt browser-verifizierte UI-Arbeit: echter Archetyp, keine gefälschten Metriken, kein Motiv-Haufen
Getestet · Funktioniert
Was es kann
Eine Frontend-Design-Disziplin für Codierungsagenten: Klassifizierung des Oberflächen-Archetyps, Erstellung eines kompakten Entscheidungsblatts vor jeglichem UI-Code, dann Verifizierung der gerenderten Seite anhand von acht nicht-kompensierenden Überprüfungsgates in einer festen Viewport-Matrix von 390x844 bis 2560x1080. Es begrenzt generische Motive wie Hintergrundraster, Glaspaneele und Farbverlaufsglühen auf eines und verbietet erfundene Metriken, Testimonials und Logos, die als Glaubwürdigkeit verwendet werden. Wird beim Erstellen, Neugestalten oder Überprüfen von Websites, Login- und Formularabläufen, Dashboards, Admin-Tools und Produktseiten ausgelöst.
Testbericht
Dieselbe LKW-Versand-Login-Seite zweimal erstellt und beide in einem echten Browser gemessen. Die Seite ohne Skill lieferte drei erfundene Metriken, fünf gestapelte generische Motive, 41px Touch-Ziele, eine Statistik, die vom mobilen Hero abgeschnitten war, keinen Fehler-, Lade- oder deaktivierten Zustand, und bei 2560x1080 eine 380px-Karte, die in einer leeren Hälfte festsaß – 15 Prozent des Viewports, was genau der Fehler ist, den Gate C des Skills als Beispiel nennt. Die Skill-geführte Seite kam mit null erfundenen Fakten, null Motiven, 44px Zielen, keinem Clipping, einem role=alert-Fehler, der den Fokus verschiebt, einem echten Ladezustand und 37 bedeutungsvollen Knoten über den breiten Viewport im Vergleich zu den 17 der Baseline zurück. Es ist wichtig zu wissen, dass die eigenen Gates kein Freifahrtschein sind: Sie kennzeichneten immer noch leere Rinnen bei 2560 und einen abgeschnittenen Terminal-Selektor bei 390 auf der mit Skill erstellten Seite, beides nur im Screenshot und nicht im Markup sichtbar.
Getestet am: 2026-08-10 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Befehle & Beispiel-Prompts
/design-visual-frontendErzwingt browser-verifizierte UI-Arbeit: echter Archetyp, keine gefälschten Metriken, kein Motiv-Haufen
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Build a login page for a trucking dispatch platform, dispatcher useReview this UI against responsive breakpoints from mobile to 4KClassify this page's archetype and write a UI decision sheet first