Hören Sie auf, fehlerhafte KI-UIs manuell zu korrigieren

Ihre KI-Coding-Tools scheitern oft am Design.

Sie fragen nach einem Button. Die KI liefert Ihnen einen Blauton. Sie fragen nach einer weiteren Komponente. Die KI liefert Ihnen einen anderen Blauton. Das passiert, weil der KI ein striktes Designsystem fehlt.

Google Labs hat design.md veröffentlicht, um dieses Problem zu lösen.

Es handelt sich um eine Spezifikation, die es Tools wie Cursor, Claude Code und GitHub Copilot ermöglicht, Ihre Designregeln zu lesen. Dies verhindert inkonsistente Abstände, falsche Schriftarten und abweichende Farben.

So funktioniert es:

design.md ist eine Markdown-Datei mit zwei Teilen.

  • YAML Front Matter: Dieser enthält präzise Design-Tokens. Hier definieren Sie Farben, Typografie, Abstände und Eckenradien.
  • Markdown Body: Dieser enthält die Design-Rationale. Er erklärt, warum Sie eine Farbe verwenden und wann man sie vermeiden sollte.

Diese Struktur hilft der KI, sowohl die Daten als auch die Logik zu verstehen. Sie sieht nicht nur einen Hex-Code, sondern versteht, dass eine bestimmte Farbe für Überschriften gedacht ist und nicht für den Fließtext verwendet werden sollte.

Hauptmerkmale des design.md CLI:

  • Linting: Es prüft, ob Ihre Tokens korrekt sind. Es prüft sogar den WCAG AA-Barrierefreiheitskontrast.
  • Diffing: Es zeigt Ihnen genau an, welche Tokens sich geändert haben, wenn Sie Ihr Design aktualisieren.
  • Exportieren: Es konvertiert Ihre Designdatei in Tailwind CSS, JSON oder W3C Design Tokens.
  • Spec: Es generiert einen Leitfaden, den Sie Ihrer KI geben können, um ihr beizubringen, wie sie Ihre Datei liest.

Warum das wichtig ist:

Die meisten Entwickler nutzen CLAUDE.md oder AGENTS.md für allgemeine Regeln. Obwohl diese hilfreich sind, bestehen diese Dateien meist aus natürlicher Sprache. Die KI muss dennoch spezifische Werte erraten.

design.md verwandelt Ihr Designsystem in maschinenlesbare Daten.

So verwenden Sie es:

  1. Legen Sie DESIGN.md in Ihr Projektverzeichnis (Root).
  2. Fügen Sie in Ihrer CLAUDE.md oder Ihren Cursor-Regeln diese Zeile hinzu: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Hören Sie auf, Ihrer KI ständig „falsche Farbe“ zu sagen. Geben Sie ihr eine einzige Quelle der Wahrheit (Single Source of Truth).

Quelle: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Optionale Lern-Community: https://t.me/GyaanSetuAi