web-design-reviewervon GitHub

Web Design Reviewer Skill.

Ein Claude Code- und Codex-Skill für Design-Review: inspiziert eine laufende Website visuell und findet und behebt Layout-Probleme.

Design Review & Accessibility
Review-Bericht

OpenDesign herunterladen Anleitung ansehen

github/awesome-copilot · skills/web-design-reviewer/SKILL.mdSKILL.md

--- name: web-design-reviewer description: This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. --- ## Scope of Application ## Prerequisites ## Step 1: Information Gathering Phase ## Step 2: Visual Inspection Phase ## Step 3: Issue Fixing Phase ## Step 4: Re-verification Phase

Einleitungstext und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 10.577 Zeichen insgesamt

01 Was es tut

Was die Skill web-design-reviewer in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Web Design Reviewer steuert eine laufende Website über ein Browser-Automatisierungstool, prüft sie visuell und behebt gefundene Probleme im Quellcode. Es deckt statische Websites, SPAs auf React, Vue, Angular oder Svelte, Full-Stack-Frameworks wie Next.js und Nuxt, CMS-Plattformen wie WordPress und Drupal sowie jede andere Webanwendung ab.

Der Workflow umfasst vier Phasen: Kontext sammeln und Framework sowie Styling-Methode automatisch erkennen, Seiten anhand einer visuellen Checkliste prüfen, Probleme priorisiert von P1 bis P3 beheben, dann erneut verifizieren und wiederholen. Befunde werden gruppiert nach Layout, Responsivität, Barrierefreiheit und visueller Konsistenz, jeweils mit einem Schweregrad. Fixes folgen dem Prinzip minimaler Änderungen und enden in einem Markdown-Review-Bericht.

Was er erzeugt

Ein Markdown-Bericht mit Review-Ergebnissen, überschrieben mit Web Design Review Results.
Eine Übersichtstabelle zu Ziel-URL, erkanntem Framework, Styling, getesteten Viewports, erkannten Problemen und behobenen Problemen.
Einträge je Problem mit Priorität, Seite, Element, Beschreibung, Pfad der korrigierten Datei, Fix-Details und Vorher/Nachher-Screenshots.
Ein Abschnitt zu ungelösten Problemen mit dem Grund, warum jedes Problem offen gelassen wurde, und einer empfohlenen Maßnahme für den Nutzer, sowie allgemeine Empfehlungen.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Kontext Sammeln und Stack Erkennen
Es fragt nach der URL, falls keine angegeben ist, versucht dann eine automatische Erkennung anhand von Workspace-Dateien wie package.json, tsconfig.json, tailwind.config, next.config, vite.config und nuxt.config und fragt, welche Seiten im Umfang enthalten sind.
02
Navigieren und Erfassen
Es öffnet die Ziel-URL, erstellt Screenshots, ruft die DOM-Struktur oder einen Snapshot ab, sofern möglich, und durchläuft weitere Seiten über die Site-Navigation.
03
Prüfung anhand der Visuellen Checkliste
Layout-, Responsive-, Barrierefreiheits- und visuelle Konsistenzprobleme werden anhand einer Referenz-Checkliste systematisch geprüft, die nach den Korrekturen erneut angewendet wird.
04
Die Quelle jedes Problems lokalisieren
Problematische Elemente werden bis zur Quelle zurückverfolgt, indem die Codebasis nach Klassennamen oder IDs durchsucht wird, die Komponente über Elementtext oder -struktur gefunden wird und Style-, Komponenten- und Seitendateimuster gefiltert werden.
05
Korrigieren, dann erneut prüfen
Korrekturen werden gemäß framework-spezifischen Vorgaben durchgeführt, danach wird der Browser neu geladen oder auf das HMR des Dev-Servers gewartet, die korrigierten Bereiche werden erneut per Screenshot erfasst und Vorher und Nachher werden verglichen.

02 Finden Sie Ihren Favoriten

Wann der web-design-reviewer Skill zu verwenden ist

Verwenden Sie den web-design-reviewer Skill in Claude Code oder Codex, wenn es um Design-Review dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Überprüfung einer statischen Website, die mit reinem HTML, CSS und JS erstellt wurde.
Überprüfung einer Single-Page-App mit React, Vue, Angular oder Svelte.
Überprüfung einer Full-Stack-Framework-App wie Next.js, Nuxt oder SvelteKit.
Überprüfung einer CMS-gestützten Website wie einer WordPress- oder Drupal-Installation.
Prüfung eines lokalen Entwicklungsservers, der während der Entwicklung etwa unter http://localhost:3000 läuft.

Grenzen kennen

Produktionsumgebungen werden nur für reine Lesezugriffe unterstützt, sodass dort keine Änderungen vorgenommen werden können.
Korrekturen setzen voraus, dass der Projektquellcode im Workspace vorhanden ist, sodass eine Remote-Website ohne lokalen Code nicht reparierbar ist.
Groß angelegtes Refactoring ohne Bestätigung des Nutzers wird ausdrücklich als etwas aufgeführt, das zu vermeiden ist.
Korrekturen, die die Performance ignorieren, werden als Anti-Pattern aufgeführt.

Was Sie bereitstellen sollten

Die URL der zu überprüfenden WebsiteSie ist für die Navigation erforderlich; liefert der Nutzer sie nicht, fragt der Skill danach, mit http://localhost:3000 als Beispielform.
Framework und Speicherort der StylesDer Skill fragt, welches Framework und welche Styling-Methode verwendet werden und wo Style-Dateien und Komponenten liegen, um das richtige Bearbeitungsziel zu finden.
Umfang der ÜberprüfungDer Nutzer gibt an, ob die Überprüfung nur bestimmte Seiten oder die gesamte Website betrifft.

03 Innerhalb des Skills

Regeln, die der web-design-reviewer-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Nach drei Versuchen abbrechen
Der Skill setzt eine Iterationsgrenze: Benötigt ein bestimmtes Problem mehr als 3 Korrekturversuche, muss der Nutzer konsultiert werden, statt fortzufahren.
Ein Problem nach dem anderen
Jedes Problem wird einzeln korrigiert und verifiziert, bevor mit dem nächsten fortgefahren wird, statt Änderungen zu bündeln.
Screenshot, bevor der Code angefasst wird
Screenshots des fehlerhaften Zustands müssen immer gespeichert werden, bevor Korrekturen vorgenommen werden, damit Vorher und Nachher verglichen werden können.
Nur minimale Änderungen
Das Prinzip der Behebung besteht darin, nur die minimal notwendige Änderung zur Lösung des Problems vorzunehmen, den bestehenden Code-Stil zu respektieren und Breaking Changes an anderer Stelle zu vermeiden.
Nach der Prioritätsmatrix arbeiten
Layout-Probleme, die die Funktionalität beeinträchtigen, sind P1 und werden sofort behoben, visuelle Probleme, die die UX verschlechtern, sind P2 und werden als Nächstes behoben, kleinere visuelle Inkonsistenzen sind P3 und werden behoben, wenn möglich.
Vier Viewports testen
Responsive-Prüfungen laufen bei 375px (Mobile, iPhone SE/12 mini), 768px (Tablet, iPad), 1280px (Desktop) und 1920px (Wide).
Bestehende Muster respektieren
Fixes müssen dem bestehenden, im Projekt bereits verwendeten Code-Stil folgen, statt eine neue Konvention einzuführen.
Vor größeren Änderungen bestätigen lassen
Großangelegte Refactorings werden nicht eigenständig durchgeführt: Der Nutzer wird vor größeren Änderungen um Bestätigung gebeten, und mehrere Probleme werden nicht gleichzeitig behoben, da dies schwer zu verifizieren ist.

04 In Betrieb nehmen

web-design-reviewer in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

web-design-reviewer zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

Generische skills-CLI-Form für skills/web-design-reviewer/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Design-Review-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Review the design of the website running at http://localhost:3000. It is a [Next.js] app styled with [Tailwind CSS], please check the [home and pricing] pages at mobile and desktop widths. Find the layout, responsive and accessibility problems like element overflow, weak contrast or tiny touch targets, then fix them in the source and verify the fixes.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Laden Sie den Browser neu oder warten Sie auf das HMR des Entwicklungsservers, und erfassen Sie dann Screenshots der behobenen Bereiche.
Vergleichen Sie die Vorher- und Nachher-Screenshots für jedes behobene Element.
Führen Sie Regressionstests durch, um zu prüfen, dass die Fixes andere Bereiche nicht beeinträchtigt haben.
Bestätigen Sie, dass die responsive Darstellung nach der Änderung weiterhin intakt ist.
Lesen Sie Browser-Konsolenmeldungen, um JavaScript-Fehler zu erkennen, über das browser_console_messages-Tool im Playwright-Referenzsetup.

In OpenDesign importieren Sie web-design-reviewer über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill-Datei: skills/web-design-reviewer/SKILL.md Content-Prüfsumme bei Verifizierung aufgezeichnet; Commit 1899b18
License: MIT Aus LICENSE.
Repository-Sterne: 38.981 GitHub-Snapshot vom 14.09.2026 für das gesamte github/awesome-copilot-Repository, das 6 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für web-design-reviewer.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

AnwendungsbereichListet statische Websites, SPA- und Full-Stack-Frameworks, CMS-Plattformen und andere Web-Apps auf, die abgedeckt werden.
VoraussetzungenEine laufende Zielseite, Browser-Automatisierung mit Screenshot- und DOM-Zugriff sowie Quellcode für Fixes.
Schritt 1: Phase der InformationsbeschaffungBestätigt die URL, fragt nach Framework, Styling und Umfang, erkennt Konfigurationsdateien und Styling-Methode automatisch.
Schritt 2: Phase der visuellen PrüfungDurchläuft Seiten, erstellt Screenshots, prüft Layout, Responsive-Verhalten, Zugänglichkeit und Konsistenzprobleme bei vier Viewports.
Schritt 3: Phase der FehlerbehebungPriorisiert P1 bis P3, findet Quelldateien anhand von Selektor, Komponente oder Muster, wendet framework-spezifische minimale Fixes an.
Schritt 4: Phase der erneuten ÜberprüfungLädt neu, erstellt erneut Screenshots, vergleicht Vorher und Nachher, führt Regressionstests durch, wiederholt den Vorgang, falls Probleme bestehen bleiben.
AusgabeformatDefiniert die Markdown-Vorlage für den Prüfbericht mit Zusammenfassungstabelle, Problemen, ungelösten Punkten und Empfehlungen.
Erforderliche FähigkeitenTabellarisiert Navigation, Screenshot, Bildanalyse, DOM-Abruf, Datei-Lesen/-Schreiben und Codesuche.
ReferenzimplementierungOrdnet Fähigkeiten den Playwright MCP Tools zu, liefert eine MCP-Server-Konfiguration und listet weitere kompatible Tools auf.
Best PracticesDO- und DON'T-Listen: Screenshots speichern, jeweils einen Fehler beheben, keine umfassenden Refactorings ohne Bestätigung.
FehlerbehebungBehandelt nicht gefundene Style-Dateien, nicht übernommene Korrekturen und Korrekturen, die andere Bereiche beeinflussen.

Die eigene Beschreibung des Skills

„Dieser Skill ermöglicht die visuelle Inspektion von Websites, die lokal oder remote laufen, um Design-Probleme zu identifizieren und zu beheben. Wird ausgelöst bei Anfragen wie „Website-Design überprüfen", „prüfe die UI", „Layout reparieren", „Design-Probleme finden". Erkennt Probleme mit Responsive Design, Barrierefreiheit, visueller Konsistenz und Layout-Fehlern und führt Korrekturen auf Quellcode-Ebene durch."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 10.577 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum web-design-reviewer Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Muss die Website bereits laufen, bevor ich beginne?

Ja. Die erste erforderliche Voraussetzung ist ein laufendes Ziel, sei es ein lokaler Entwicklungsserver, eine Staging-Umgebung oder Produktion für rein lesende Reviews.

Browser-Automatisierung mit Screenshot-Erfassung, Seitennavigation und DOM-Abruf ist ebenfalls erforderlich, und Korrekturen setzen voraus, dass das Projekt im Workspace vorhanden ist.

Ändert es meinen Code, oder meldet es nur Probleme?

Es führt Korrekturen auf Quellcode-Ebene durch und bearbeitet jeweils die Ebene, die der Styling-Methode des Projekts entspricht: className in Komponenten für Tailwind, CSS-Modul-Dateien für CSS Modules, einfache CSS- oder SCSS-Dateien sowie JS/TS-Dateien für styled-components und Emotion. Kann etwas nicht behoben werden, listet der Bericht den Grund und eine empfohlene Maßnahme auf.

Welches Browser-Automatisierungstool wird benötigt?

Als Referenzimplementierung wird Playwright MCP empfohlen, mit Tools für Navigation, Snapshot, Screenshot, Klick, Größenänderung und Konsolenmeldungen. Der Workflow funktioniert auch mit Selenium, Puppeteer, Cypress oder WebDriver BiDi, solange Navigation, Screenshots und DOM-Abruf verfügbar sind.

Web Design Reviewer

web-design-reviewer für eine echte Design-Review-Aufgabe ausführen.

OpenDesign herunterladen, web-design-reviewer über seinen SKILL.md-Link importieren, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen