DESIGN.md: Ein Formatspezifikation zur Beschreibung visueller Identität für Coding-Agenten

Google Labs hat DESIGN.md veröffentlicht, eine Format-Spezifikation zur Beschreibung einer visuellen Identität für Codierungsagenten. Die Datei kombiniert maschinenlesbare Design-Tokens (YAML-Frontmatter) mit menschenlesbarer Design-Begründung (Markdown-Prosa). Tokens geben Agenten exakte Werte; Prosa erklärt, warum diese Werte existieren und wie sie anzuwenden sind.

Format-Übersicht

Eine DESIGN.md-Datei hat zwei Ebenen, die oben durch ----Trennzeichen begrenzt werden: YAML-Frontmatter für Tokens und einen Markdown-Textkörper mit ##-Abschnitten. Beispielauszug:

---
name: "Heritage"
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: "Public Sans"
    fontSize: "3rem"
  body-md:
    fontFamily: "Public Sans"
    fontSize: "1rem"
  label-caps:
    fontFamily: "Space Grotesk"
    fontSize: "0.75rem"
rounded:
  sm: "4px"
  md: "8px"
spacing:
  sm: "8px"
  md: "16px"

Die Tokens sind die normativen Werte. Prosa liefert Kontext für die Anwendung.

Schlüsselfunktionen

• Token-Typen: Farben (hex sRGB), Typografie-Objekte (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, fontVariation), Maße (Zahl+Einheit), Token-Referenzen ({path.to.token}).
• Komponenten: Ordnen Sie einen Namen Unter-Token-Eigenschaften zu, z.B. components.button-primary.backgroundColor: "{colors.tertiary}".
• Abschnittsreihenfolge (optional, aber empfohlen): Übersicht, Farben, Typografie, Layout & Abstände, Höhe & Tiefe, Formen, Komponenten, Dos and Don'ts.

CLI-Werkzeuge

Validieren Sie eine DESIGN.md mit dem Linter:

npx @google/design.md lint DESIGN.md
{
  "findings": [
    {
      "severity": "warning",
      "path": "components.button-primary",
      "message": "textColor (#ffffff) on backgroundColor (#1A1C1E) has contrast ratio 15.42:1 — passes WCAG AA."
    }
  ],
  "summary": { "errors": 0, "warnings": 1, "info": 1 }
}

Erkennen Sie Regressionen zwischen Versionen:

npx @google/design.md diff DESIGN.md DESIGN-v2.md
{
  "tokens": {
    "colors": {
      "added": ["accent"],
      "removed": [],
      "modified": ["tertiary"]
    },
    "typography": { "added": [], "removed": [], "modified": [] }
  },
  "regression": false
}

Anwendungsfall

Ein Agent, der das Heritage-Beispiel liest, erzeugt eine Benutzeroberfläche mit tiefdunklen Überschriften in Public Sans, einem warmen Kalksteinhintergrund (#F7F5F2) und Boston Clay (#B8422E)-Call-to-Action-Buttons – alles aus einer einzigen Datei.