/ Verzeichnis / Playground / Claude Design Auditor
← Alle Server ↗ GitHub
● Community Ashutos1997 ⚡ Sofort

Claude Design Auditor

von Ashutos1997 · Ashutos1997/claude-design-auditor-skill

Systematische Designüberprüfung – Typografie, Kontrast, Abstand, A11y, Bewegung, Dunkelmodus, Token, Dunkelmuster – mit Vorher/Nachher-Code mit 0–100 Punkten bewertet.

claude-design-auditor-skill prüft Designs in verschiedenen Formaten (Figma, HTML/CSS, React/Vue, Screenshots, Wireframes, Prosabeschreibungen) anhand von 18 professionellen Regeln. Die Ausgabe ist eine Bewertung von 0 bis 100 mit nach Schweregrad eingestuften Problemen, separaten Zugänglichkeits- und Ethikbewertungen, Codekorrekturen vor/nachher und exportierbaren Berichten (Markdown, Canva, Entwicklerübergabe). Verwenden Sie es, um ein Design vor der Entwicklerübergabe einem Drucktest zu unterziehen, um eine Qualitätsgrenze in PRs durchzusetzen oder um eine Redesign-Prioritätsliste zu selektieren.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

claude-design-auditor-skill.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: Claude Design Auditor

Überprüfen Sie einen Entwurf, bevor Sie ihn an die Konstruktion senden

👤 Produktdesigner bereiten die Übergabe der Entwickler vor ⏱ ~30 min intermediate

Wann einsetzen: Das Design ist „fertig“ und Sie möchten einen letzten Durchlauf, bevor die Entwickler mit dem Klonen beginnen.

Ablauf
  1. Rufen Sie den Auditor an
    Überprüfen Sie diesen Figma-Link: <url>. Umfang: voll.✓ Kopiert
    → Bewerten Sie + bewertete Probleme mit Verweisen auf die 18 Regeln
  2. Beheben Sie die kritischen Punkte
    Wenden Sie die fünf wichtigsten Fehlerbehebungen in Figma an. Vorher/Nachher anzeigen.✓ Kopiert
    → Vorher/Nachher-Vorschauen für jeden Fix
  3. Exportieren Sie die Übergabe
    Exportieren Sie einen Dev-Handoff-Markdown mit Token und A11y-Notizen.✓ Kopiert
    → Markdown ist bereit, in das Ticket eingefügt zu werden

Ergebnis: Das Design kommt bei der Entwicklung an, wobei die wichtigsten Probleme bereits gelöst sind.

Fallstricke
  • Den Punktestand als Ziel betrachten — Der Score misst die Einhaltung von Regeln, nicht den Geschmack. Verwenden Sie die Fundliste, nicht nur die Nummer
Kombinieren mit: claude-code-design-skills

Überprüfen Sie die Barrierefreiheit einer Komponente

👤 Frontend-Ingenieure versenden eine neue Komponente ⏱ ~20 min beginner

Wann einsetzen: Sie haben ein Dialog-/Menü-/Formularsteuerelement erstellt und möchten alle Probleme frühzeitig erkennen.

Ablauf
  1. Fügen Sie die Komponentenquelle ein
    Prüfen Sie diese React Dialog-Komponente, Umfang: Barrierefreiheit + Bewegung.✓ Kopiert
    → Die Ergebnisse beziehen sich auf WCAG-Kriterien mit genauen Änderungen
  2. Wenden Sie Korrekturen an
    Patchen Sie die Komponente mit den vorgeschlagenen Korrekturen; Lassen Sie die API unverändert.✓ Kopiert
    → Diff respektiert die vorhandene API

Ergebnis: Eine Komponente, die eine Überprüfung der Barrierefreiheit übersteht.

Fallstricke
  • Der Prüfer übertreibt den Geschmack (z. B. Stil-Nitpicks im a11y-Modus) — Beschränken Sie den Bereich explizit auf a11y + Bewegung
Kombinieren mit: motion-dev-animations-skill

Sortieren Sie eine ältere Benutzeroberfläche nach Neugestaltungsprioritäten

👤 Design führt zu einem Redesign ⏱ ~60 min advanced

Wann einsetzen: Sie planen eine Neugestaltung und benötigen Daten darüber, wo Sie beginnen sollen.

Ablauf
  1. Feed-Bildschirme oder URLs
    Prüfen Sie die Top-10-Bildschirme von app.<url>. Aggregieren Sie die Ergebnisse nach Schweregrad.✓ Kopiert
    → Bildschirmübergreifendes Rollup mit Hotspots
  2. Wählen Sie die Reihenfolge aus
    Schlagen Sie einen nach Regelkategorie gruppierten Redesign-Sequenzplan vor.✓ Kopiert
    → Der Plan hängt von Erkenntnissen ab, nicht von Stimmungen

Ergebnis: Ein Umgestaltungsplan, der durch konkrete Mängel gestützt wird.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

claude-design-auditor-skill + claude-code-design-skills

Audit → Figma-to-Code → Den Code erneut prüfen

Prüfen Sie Figma, konvertieren Sie es in React und prüfen Sie React dann erneut, um die Parität zu überprüfen.✓ Kopiert
claude-design-auditor-skill + motion-dev-animations-skill

Lassen Sie Bewegungsexperten Animationen hinzufügen/abstimmen und führen Sie dann den Bewegungsumfang des Prüfers aus

Federanimationen pro Motion-Dev hinzufügen; Dann prüfen Sie Bewegung + Verhalten bei reduzierter Bewegung.✓ Kopiert
claude-design-auditor-skill + figma

Ziehen Sie Figma-Assets über MCP, prüfen Sie sie und schreiben Sie Kommentare zurück

Fügen Sie für jeden markierten Frame einen Figma-Kommentar hinzu, der das Ergebnis zusammenfasst.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
design-audit (SKILL) asset (Figma URL / image / code) + optional scope Vor der Übergabe, bei der Codeüberprüfung oder als Teil eines Redesign-Plans 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Keiner
Tokens pro Aufruf
Groß – Screenshots und lange Codeblöcke dominieren
Kosten in €
Frei
Tipp
Aggressiver Umfang (nur a11y oder nur Typografie) für schnelle Iterationen; Vollständige Audits sind tokenlastig.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keiner; Wenn Figma-URLs privat sind, teilen Sie sie per Bildexport oder verwenden Sie das Figma MCP mit dem richtigen Umfang.
Datenabfluss: Kein Netzwerkausgang vom Skill; Ihre Bilder und Ihr Code bleiben im Chat.

Fehlerbehebung

Häufige Fehler und Lösungen

Der Prüfer übersieht offensichtliche Probleme

Erhöhen Sie die Eingabegröße oder stellen Sie mehrere Ansichtsfenster/Screenshots bereit; Heuristiken sind mit Abdeckung besser.

Prüfen: Re-run with extra screenshots
Tokens warnen vor zu viel Output

Legen Sie den Geltungsbereich auf eine Teilmenge der 18 Regeln fest.

Prüfen: Ask for 'scope: typography + contrast + a11y' only
Korrekturen zerstören das bestehende Designsystem

Weisen Sie den Prüfer an, innerhalb Ihres Tokensatzes zu bleiben; liefern Sie tokens.json.

Prüfen: Before/after diffs reference token names

Alternativen

Claude Design Auditor vs. andere

AlternativeWann stattdessenKompromiss
claude-code-design-skillsSie möchten von Figma zum Code wechseln und nicht bestehende Arbeiten prüfenDeckt die andere Seite der Rohrleitung ab
ai-friendly-web-design-skillSie wünschen sich eine umfassende Webdesign-Anleitung und keinen strengen PrüferWeniger strukturierte Ausgabe
apple-hig-designer-skillSie entwerfen speziell für Apple-PlattformenPlattformspezifisch statt universell

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen