Anleitung

Zwei Referenz-Websites zu einem Design für einen Prototyp kombinieren

„Es soll sich anfühlen wie Notion trifft Stripe.“ So briefen Kunden ständig Prototypen. Mit einer DESIGN.md pro Website machst du aus diesem Satz eine konkrete Spezifikation: Tokens nebeneinander vergleichen, entscheiden, welche Datei führt, und zusammenführen.

Design Extractor liefert dir die beiden Dateien. Das Zusammenführen übernimmst du, von Hand oder mit deinem Coding-Agenten, und diese Anleitung zeigt beides.

Geschrieben für Designer und Agenturen, die Prototypen bauen. Aktualisiert am .

Das bekommst du

  • Zwei DESIGN.md-Dateien, Token für Token verglichen, damit die Unterschiede konkret werden.
  • Ein Plan für die Zusammenführung: eine Datei als Basis, benannte Token-Gruppen aus der anderen.
  • Die zusammengeführte DESIGN.md, von Hand erstellt oder von deinem Agenten mit dem Prompt unten.
  • Eine Kontrastprüfung, damit die Mischung weiterhin gut lesbar ist.

So funktioniert das Kombinieren

Eine Mischung ist kein Durchschnitt. Wenn du die halbe Palette der einen mit der halben Palette der anderen mischst, bekommst du eine Website, die nach keiner von beiden aussieht. Was funktioniert, ist eine Basisdatei plus ein paar benannte Teile aus der anderen:

  • Die Basis gibt die Struktur vor: Typo-Skala, Abstände, Radien und Komponenten-Rezepte.
  • Der Akzent steuert ganze Gruppen bei, etwa seine Primärfarbfamilie oder seine Display-Schrift, nie einzelne verstreute Werte.

Beide Dateien folgen der DESIGN.md-Spezifikation von Google, deshalb passen die Gruppen zusammen: colors, typography, rounded, spacing und components. Die vollständige Struktur findest du unter Was eine DESIGN.md enthält.

Schritte

  1. Hol dir beide Dateien

    Kopiere sie aus der Galerie, wenn sie dort sind, oder füge jede URL auf der Startseite von Design Extractor ein und starte für jede eine Pro-Extraktion.

  2. Leg sie nebeneinander

    Vergleiche Primärfarben, Hintergründe, Schriften, Schriftgrößen und Radien wie in der Tabelle unten.

  3. Wähl die Basis

    Nimm die Website, deren Layout und Dichte zum Prototyp passen.

  4. Benenne, was der Akzent beisteuert

    Schreib es als Token-Gruppen auf, etwa „seine Primärfarbfamilie“.

  5. Führe sie von Hand oder mit deinem Agenten zusammen

    Beide Wege findest du unten. Speichere das Ergebnis als DESIGN.md im Prototyp-Repo.

  6. Prüfe Kontrast und Struktur

    Füge die zusammengeführte Datei in den kostenlosen DESIGN.md-Validator ein.

Praxisbeispiel: Notion trifft Stripe

Zwei echte Dateien aus der Galerie: die DESIGN.md von Notion und die DESIGN.md von Stripe. Beide wurden aus den öffentlichen Websites der Marken extrahiert und sind keine offiziellen Markenrichtlinien.

NotionStripe
Primärfarbe#0075DE#533AFD
Hintergrund#FFFFFF#FFFFFF
Text#000000#061B31
SchriftenNotion Inter, Lyon TextSohne
Größte Schrifthero-display, 96px, Stärke 600hero-display, 56px, Stärke 500
Fließtextbody, 16px, Stärke 400body-lg, 18px, Stärke 300
Button-Radius8px4px
Farb-Tokens2021
Komponenten-Rezepte1471

Eine Möglichkeit, sie zu kombinieren

Nimm Notion als Basis für Schrift, Abstände, Radien und Komponenten, und übernimm von Stripe die Primärfarbfamilie (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). Das ist das klassische Briefing „unser Layout, ihre Energie“.

Prüfe die Zahlen, bevor du dich festlegst. Die Primärfarbe von Stripe auf dem Hintergrund von Notion hat einen Kontrast von 6.1:1. Der on-primary-Text von Notion auf der neuen Primärfarbe erreicht 6.1:1. Fließtext braucht nach WCAG AA mindestens 4,5:1; großer Text und Icons brauchen 3:1.

Eine Falle: Die eigene Primärfarbe von Notion, #0075DE, kommt 65 Mal in der Datei vor, meist in Komponenten-Rezepten. Den Token oben zu ersetzen reicht nicht; jede Kopie muss geändert werden.

Illustration der oben beschriebenen Zusammenführung von Hand, von dieser Seite aus den beiden Galerie-Dateien zusammengestellt: die Tokens von Notion mit der Primärfarbfamilie von Stripe, gekürzt. Sie ist keine Funktion von Design Extractor und keine Ausgabe eines Agenten.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Von Hand zusammenführen

  1. Kopiere die Basisdatei nach DESIGN.md und ändere ihren name.
  2. Ersetze in colors die Primärfarbfamilie der Basis durch die Werte des Akzents.
  3. Durchsuche die ganze Datei nach jedem alten Hex-Wert und ersetze ihn. Komponenten-Rezepte wiederholen die Farben in ihrem CSS, die Token-Liste allein reicht also nicht.
  4. Schreib die Texte in Overview und Colors neu, sodass sie die Mischung beschreiben und keine der beiden Marken.
  5. Prüfe die Datei im Validator und behebe alle Kontrastwarnungen.

Mit deinem Agenten zusammenführen

Speichere beide Dateien im Prototyp-Repo, zum Beispiel unter design/, und gib deinem Agenten einen Prompt, der die Basis, die zu übernehmenden Gruppen und die auszuführenden Prüfungen nennt. Dieser hier wurde für diese Anleitung mit den echten Datei- und Token-Namen geschrieben.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Prüfe, was zurückkommt, wie jede andere Änderung: Lies den Diff und füge die Datei dann in den Validator ein. Der Agent übernimmt das Tippen; die Entscheidungen im Prompt triffst weiterhin du.

FAQ

Zwei Website-Designs zu einem kombinieren: Fragen

Kurze Antworten auf das, was Leute fragen, bevor sie es ausprobieren.

Nein, es gibt keine Funktion zum Zusammenführen. Jede Extraktion liefert die DESIGN.md einer einzigen Website. Zwei Dateien führst du von Hand zusammen, oder du bittest deinen Coding-Agenten darum, mit einem Prompt wie dem in dieser Anleitung, und prüfst dann das Ergebnis.

Zwei, manchmal drei. Eine Datei ist die Basis und gibt die Struktur vor: Typo-Skala, Abstände, Radien und Komponenten. Die anderen steuern einen benannten Teil bei, etwa eine Farbfamilie oder eine Display-Schrift. Werte aus mehr Dateien zu mischen lässt das Ergebnis zusammengestückelt wirken.

Die, deren Layout und Dichte zum Prototyp passen. Wenn der Kunde ein ruhiges, dokumentartiges Produkt mit den Farben einer anderen Website will, ist die ruhige Website die Basis und die andere steuert ihre Farben bei, nicht umgekehrt.

Füge die zusammengeführte Datei in den kostenlosen DESIGN.md-Validator ein. Er prüft die Struktur und markiert Textfarben mit zu wenig Kontrast. Bau dann einen echten Screen damit, bevor du ihn dem Kunden zeigst.

Hol dir die beiden Dateien für dein Briefing

Füge die URL jeder Referenz-Website ein und hol dir ihre DESIGN.md, bereit zum Vergleichen und Zusammenführen.

DESIGN.md aus jeder Website erstellen

Verwandte Anleitungen

Alle DESIGN.md-Anleitungen ansehen