DESIGN.md-Generator.

Gib deine Farben, Schriften, Eckenradien und Abstände ein und erhalte eine DESIGN.md-Datei, die Codex und anderen Coding-Agenten sagt, wie dein Produkt aussehen soll. Der Generator läuft in deinem Browser; nichts, was du eingibst, wird hochgeladen oder gespeichert.

DESIGN.md

---
version: alpha
name: "Pagely"
colors:
  primary: "#1F3D2B"
  on-primary: "#FAF6EE"
  secondary: "#E8735A"
  tertiary: "#F2C14E"
  neutral: "#FAF6EE"
  surface: "#FFFFFF"
  on-surface: "#1F2A22"
typography:
  headline-lg:
    fontFamily: "Georgia"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
  body-md:
    fontFamily: "system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 16px
  lg: 22px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---

## Overview

Die visuelle Identität von Pagely. Jeder Screen verwendet ausschließlich die Tokens aus dieser Datei.

## Colors

- **primary (#1F3D2B):** Hauptaktionen und die wichtigsten Elemente.
- **on-primary (#FAF6EE):** Text und Icons auf der Primärfarbe.
- **secondary (#E8735A):** Unterstützende Akzente, sparsam eingesetzt.
- **tertiary (#F2C14E):** Hervorhebungen wie Badges und Fortschrittsanzeigen.
- **neutral (#FAF6EE):** Der Seitenhintergrund.
- **surface (#FFFFFF):** Karten, Sheets und Eingabefelder.
- **on-surface (#1F2A22):** Fließtext und Icons auf Flächen.

## Typography

Georgia für Überschriften, system-ui für alles andere. Verwende nur die oben definierten Größen.

## Layout

Abstände folgen der Skala: 8px zwischen zusammengehörigen Elementen, 16px innerhalb von Komponenten, 24px zwischen Abschnitten.

## Shapes

Ecken haben 8px bei kleinen Elementen, 16px bei Buttons und Eingabefeldern, 22px bei Karten.

## Components

Primäre Buttons verwenden die Primärfarbe mit Text in on-primary. Pro Screen gibt es nur einen primären Button.

## Do's and Don'ts

- Halte den Textkontrast bei WCAG AA (4,5:1) oder besser.
- Verwende diese Tokens wieder, statt neue Werte zu erfinden.
- Führe keine Farben ein, die hier nicht definiert sind.
- Mische in einer Karte nicht mehr als zwei Schriftgrößen.

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So erstellst du eine DESIGN.md

Gib deinem Produkt einen Namen und beschreib, wenn du magst, in ein, zwei Sätzen, wie es wirken soll. Diese Beschreibung wird zur description der Datei und zu ihrem Overview.
Leg die sieben Farben fest: primary, on-primary, secondary, tertiary, neutral, surface und on-surface. Wähle sie über die Farbfelder aus oder füge HEX-Codes ein. Wäre Text auf einer der Kombinationen schwer lesbar (unter 4,5:1), nennt das Formular die betroffene Kombination.
Leg die Typografie fest: eine Schrift für Überschriften und eine für Fließtext, jeweils mit einer Größe.
Leg Eckenradius und Abstände fest, jeweils als kleine, mittlere und große Stufe (sm, md und lg).
Kopier die Datei oder lade sie herunter. Sie aktualisiert sich beim Tippen und startet als vollständiges Beispiel: Pagely, die Lese-App aus unserer Anleitung zu DESIGN.md.

Die Datei folgt dem DESIGN.md-Format von Google Labs:

Tokens im YAML-Frontmatter: deine sieben Farben, ein Schriftstil headline-lg und ein Schriftstil body-md, die Skalen für Eckenradius und Abstände und eine Komponente button-primary, die darauf verweist.
Textabschnitte in der Reihenfolge, die das Format vorgibt: Overview, Colors, Typography, Layout, Shapes, Components und Do’s and Don’ts, mit einer Notiz, wofür jede Farbe da ist, und vier Regeln, an die sich der Agent halten soll.

Mit Codex verwenden

Speichere die Datei als DESIGN.md im Stammverzeichnis deines Projekts, neben der AGENTS.md. Codex liest AGENTS.md automatisch, sucht aber nicht von selbst nach einer DESIGN.md. Verweise deshalb in der AGENTS.md darauf:

## Design

- Before any UI work, read DESIGN.md and use only its tokens.
- If a screen needs a value that DESIGN.md doesn't define, ask before inventing one.

Danach fragst du wie gewohnt nach Screens:

Mit DESIGN.md gestalten

Gestalte den Screen [Start] nach der DESIGN.md als eine eigenständige HTML-Datei. Verwende nur die Farben, Schriftgrößen, Eckenradien und Abstände, die sie definiert, und liste alles auf, was du gebraucht hast, aber dort nicht steht.

Wächst dein Produkt, wächst die Datei mit. Ergänze weitere Schriftstile, Komponenten wie Karten und Eingabefelder oder einen Abschnitt Elevation & Depth, von Hand oder mit Codex, und prüf das Ergebnis mit npx @google/design.md lint DESIGN.md. Die Anleitung zu DESIGN.md erklärt das vollständige Format und wie Codex die Datei aus deinem bestehenden Code schreibt.

Häufige Fragen

Was ist DESIGN.md?

Eine reine Textdatei, die KI-Coding-Agenten dein Designsystem beschreibt: exakte Farben, Typografie, Abstände und Komponenten als YAML-Tokens, dazu Text, der erklärt, wie sie eingesetzt werden. Es ist ein offenes Format von Google Labs, das in Google Stitch entstanden ist; die Spezifikation ist noch als Alpha gekennzeichnet.

Liest Codex die DESIGN.md automatisch?

Nein. Codex liest AGENTS.md automatisch, nicht die DESIGN.md. Eine Zeile in der AGENTS.md, die Codex anweist, vor jeder UI-Arbeit die DESIGN.md zu lesen, reicht aus, wie oben gezeigt.

Kann ich mehr ergänzen, als der Generator abfragt?

Ja. Der Generator deckt die Tokens ab, die die meisten Screens brauchen. Das Format erlaubt auch weitere Schriftstile, weitere Komponenten und einen Abschnitt Elevation & Depth. Ergänze sie selbst in der Datei oder bitte Codex darum.

Ist der Generator kostenlos, und wird hochgeladen, was ich eingebe?

Er ist kostenlos und braucht keine Anmeldung. Die Datei entsteht in deinem Browser, und nichts, was du eingibst, wird hochgeladen oder gespeichert.