/ 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

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-design-auditor-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-design-auditor-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Ashutos1997/claude-design-auditor-skill",
          "~/.claude/skills/claude-design-auditor"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

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.

Voraussetzungen
  • Fertigkeit installiert — Git-Klon https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
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