Web Design Reviewer

Web Design Reviewer ist ein offizieller Skill aus GitHubs Repository awesome-copilot. Die direkte Primärquelle befindet sich unter https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer. Der Skill beschreibt einen Arbeitsablauf, mit dem ein Coding-Agent Websites visuell inspiziert, konkrete Designprobleme erkennt und Verbesserungen direkt im Quellcode vorbereitet oder umsetzt. Laut Anbieter reicht der Anwendungsbereich von statischen HTML-, CSS- und JavaScript-Seiten über React, Vue, Angular und Svelte bis zu Next.js, Nuxt, SvelteKit, WordPress, Drupal und anderen Webanwendungen.

Zweck und Einordnung

Der Eintrag ist eine prozedurale Wissensbasis und kein eigenständiger Designscanner, kein Hostingdienst und keine Garantie für fehlerfreie Benutzeroberflächen. Sein Wert liegt in der Verbindung aus Browsernavigation, Screenshot-Aufnahmen, DOM-Informationen und Zugriff auf den Projektquelltext. Der Agent soll zuerst das Ziel, das Framework, die Styling-Methode und den Prüfbereich verstehen. Anschließend untersucht er die Oberfläche in einem laufenden lokalen, Staging- oder Produktionssystem. Produktionsprüfungen sollten dabei grundsätzlich lesend und ohne mutierende Aktionen erfolgen.

Visuelle Prüfungen

Laut Anbieter betrachtet der Ablauf Layout, Responsivität, Barrierefreiheit und visuelle Konsistenz. Dazu gehören überlaufende oder überlappende Elemente, fehlerhafte Ausrichtung, uneinheitliche Abstände und abgeschnittene Texte. Für mobile Ansichten nennt die Quelle typische Breiten von 375 und 768 Pixeln sowie Desktop-Ansichten mit 1280 und 1920 Pixeln. Ein solcher Vergleich kann sichtbar machen, ob ein Raster bei einem kleinen Bildschirm bricht, ob Berührungsziele zu klein werden oder ob ein Wechsel zwischen Breakpoints unnatürlich wirkt. Bei der Barrierefreiheit achtet der Agent unter anderem auf Kontrast, sichtbare Fokuszustände und alternative Bildtexte.

Arbeitsweise und Reparaturen

Der Workflow beginnt mit Informationssammlung und URL-Bestätigung. Danach folgen visuelle Inspektion, priorisierte Fehlerbehebung und erneute Prüfung. Die Quelle empfiehlt minimale Änderungen, die vorhandene Designsysteme respektieren und keine unnötige Umstrukturierung einführen. Für stabile Interaktionen sollen robuste Selektoren wie Rollen oder data-testid verwendet werden, statt zufälliger CSS-Klassen. Ein Fehlerbericht sollte die betroffene Seite, das Element, die Auswirkung und die geänderte Quelldatei nachvollziehbar nennen. Nach einer Reparatur lädt der Agent die Seite neu, nimmt erneut Screenshots auf und prüft, ob andere Ansichten oder Bildschirmgrößen unbeabsichtigt beschädigt wurden. Mehr als drei Reparaturversuche für dasselbe Problem sollen laut Anbieter Anlass sein, den Auftraggeber einzubeziehen.

Voraussetzungen und Grenzen

Die Zielwebsite muss laufen und über eine erreichbare URL verfügen. Für visuelle Prüfungen braucht der Agent Browserautomatisierung mit Navigation, Screenshots und DOM-Zugriff. Wenn Änderungen vorgenommen werden sollen, muss der Quellcode im Arbeitsbereich erreichbar sein. Der Skill schreibt kein bestimmtes Framework und keine einzelne Automatisierungsbibliothek vor. Die offizielle Quelle nennt Playwright als Referenz und erwähnt auch Selenium, Puppeteer, Cypress und WebDriver BiDi. Daraus folgt jedoch keine vollständige Browser-, Geräte-, Netzwerk- oder Authentifizierungsabdeckung. Native mobile Anwendungen gehören nicht zum beschriebenen Webumfang.

Sicherheit und E-E-A-T

Browseraktionen können Formulare absenden, externe Ziele öffnen und sichtbare Daten aufnehmen. Vor jeder Aktion mit Nebenwirkungen müssen Zielumgebung, Umfang und Berechtigung geklärt sein. Synthetische Testdaten und nicht produktive Umgebungen sind für reproduzierbare Reviews vorzuziehen. Keine Zugangsdaten, Tokens, personenbezogenen Inhalte oder vertraulichen Screenshots gehören in Skill-Dateien oder Testartefakte. Ein lokaler Browserlauf bedeutet außerdem nicht automatisch, dass alle Inhalte lokal bleiben, wenn ein verbundener Agent Informationen an einen Modellanbieter übermittelt. Diese Einordnung basiert auf der offiziellen SKILL.md von github/awesome-copilot, der GitHub-Dokumentation zu Copilot-Kontext und dem offiziellen MIT-lizenzierten Repository. Sie wurde am 9. September 2026 geprüft. GitHub ist als Anbieter verifiziert; seine Aussagen werden hier ausdrücklich als laut Anbieter gekennzeichnet.