• RAUM
  • TYPO
  • STRUKTUR
  • MENSCH

Design-System-Compliance mit deiner KI prüfen

Verbinde diesen MCP mit deinem KI-Client, um ihn in einen Experten für Design-QA zu verwandeln. Er scannt deine Layouts und stellt sicher, dass sie deine Regeln strikt einhalten.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Kann meine KI prüfen, ob meine Designs dem Design-System entsprechen?

Ja. Deine KI nutzt diesen MCP, um die räumliche Hierarchie, die Rasterausrichtung und die Typografie anhand deiner Vorgaben zu prüfen. Du erhältst eine präzise Auflistung aller Fehler in deinen Layouts.

Prüfergebnisse

Wo jedes Problem landet.

Die KI kategorisiert alle Funde, damit du genau weißt, was du korrigieren musst und was ignoriert werden kann.

RAUM

Raster- und Abstandsfehler

Die KI erkennt, wo Elemente das 8px-Raster verletzen oder festgelegte Padding-Regeln ignorieren. Du erhältst exakte Koordinaten für jede Fehlstellung.

TYPO

Typografie-Abweichungen

Sie markiert Schriftgrößen, Schriftschnitte oder Zeilenabstände, die von deiner definierten Typografie-Skala abweichen. Das sichert die Markenidentität auf allen Screens.

STRUKTUR

Fehler in der visuellen Gewichtung

Die KI erkennt, wenn die räumliche Hierarchie gestört ist, etwa wenn Buttons zu klein sind oder Überschriften nicht genug Aufmerksamkeit erregen. Sie zeigt auf, wo das Auge den Fokus verliert.

MENSCH

Manuelle Design-Prüfung

Die KI markiert komplexe Layout-Logiken, die eine menschliche Einschätzung der Intention erfordern. Du entscheidest, ob eine Abweichung ein Fehler oder eine bewusste Entscheidung ist.

Der Ablauf

Was deine KI tut, sobald das Layout vorliegt.

Die KI agiert als technischer Auditor und analysiert die mathematische Struktur deines Designs statt nur der Ästhetik.

  1. Layout-Geometrie scannen

    Die KI liest die Rohdaten des Layouts aus, um Position und Größe jedes Elements zu erfassen.

    validate_uiux_excellence

  2. Rasterausrichtung prüfen

    Sie vergleicht die Koordinaten jedes Elements mit deinen 8px-Rastervorgaben, um Abweichungen zu finden.

    validate_uiux_excellence

  3. Typografie-Skala prüfen

    Der Agent verifiziert, dass jeder Textblock eine erlaubte Größe und einen erlaubten Schriftschnitt aus deinem System nutzt.

    validate_uiux_excellence

  4. Hierarchie-Brüche identifizieren

    Sie bewertet die Beziehung zwischen den Elementen, um sicherzustellen, dass die visuelle Ordnung logisch ist.

    validate_uiux_excellence

Probieren Sie es

Kopiere diese Vorlagen zum Start.

Nutze diese Prompts, um die Prüfung in deinem KI-Client zu starten.

Startpunkte

Dies sind Vorlagen. Ersetze die Dateinamen oder Design-Links einfach durch deine eigenen.

UI/UX Excellence Prover Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_FQpw75jfl2IVRYLjTKN4BE0xRDUemcd0LH04PmBp/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — UI/UX Excellence Prover capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "uiux-excellence-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_FQpw75jfl2IVRYLjTKN4BE0xRDUemcd0LH04PmBp/mcp"
    }
  }
}
In den Chat kopieren04

  • Prüfe dieses Figma-Layout auf Einhaltung des 8px-Rasters: [link]

  • Entspricht die Typografie in diesem Mockup meiner definierten Skala? [link]

  • Analysiere die räumliche Hierarchie dieses Dashboard-Designs: [link]

  • Finde alle Ausrichtungsfehler in diesem Mobile-UI-Screenshot: [link]

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Starten Sie hier

Einmal verbinden, dann fragen.

Mit einem Klick verbindest du diesen MCP mit deinem Client. Deine Zugangsdaten bleiben verschlüsselt und du behältst die volle Kontrolle über deinen Workflow.

UI/UX Excellence Prover mit deiner KI verbinden

FAQ

Verhalten der Prüfung

  • 01

    Kann die KI das Design für mich korrigieren?

    Nein. Die KI identifiziert die Fehler und zeigt ihre Position auf, aber die eigentlichen Änderungen musst du in deinem Design-Tool vornehmen.

  • 02

    Funktioniert es mit jedem Design-Tool?

    Es funktioniert mit allen Design-Daten oder Screenshots, die du deinem KI-Client zur Verarbeitung zur Verfügung stellst.

  • 03

    Werden meine Designdateien gelöscht?

    Nein. Dieser MCP liest und validiert Daten nur. Er kann deine Dateien weder löschen noch überschreiben.

  • 04

    Kann die KI mein individuelles Design-System automatisch lernen?

    Du musst die Regeln deines Design-Systems, wie das 8px-Raster oder die Typografie-Skala, im Prompt angeben, damit die KI weiß, worauf sie prüfen soll.

  • 05

    Prüft das Tool auch den Farbkontrast?

    Nein. Dieses spezifische Tool konzentriert sich auf die räumliche Hierarchie, Raster und Typografie.

  • Weitere Fragen zum UI/UX Excellence Prover? Die Connector-Seite liefert Antworten. Alle Funktionen des UI/UX Excellence Prover Connectors ansehen

Verbinde UI/UX Excellence Prover mit Claude, Cursor, ChatGPT & mehr