Beim Vibe Coding entstehen neue Seiten oft in Sekundenschnelle. Um dabei den exakten Look der Hauptseite für neue Unterseiten beizubehalten, kannst du das visuelle System deiner Page in einer design.md sichern.
Mit diesem Workflow extrahierst du den Stil einer bestehenden Seite, um neue Unterseiten oder Folgeprojekte im exakt gleichen Look zu generieren.
Das Konzept: Was ist eine design.md?
Eine design.md ist kein Code und kein konkretes Layout. Sie ist eine abstrakte Design-Spezifikation.
Statt der KI zu sagen: "Kopiere das Layout der Startseite", gibst du ihr mit der design.md die fundamentalen Design-Token an die Hand.
Sie beschreibt:
Die übergeordnete Design-Philosophie
Exakte Farbpaletten, Kontraste und Licht/Dunkel-Modi
Typografie-Skalen, Abstände und Grid-Regeln
Formen, Eckenradien, Schatten und Animationen
Dadurch weiß die KI bei der Erstellung einer Unterseite genau, wie Buttons, Karten oder Abstände auszusehen haben, selbst wenn der Inhalt ein völlig anderer ist.
Warum solltest du diesen Workflow nutzen?
Garantierte Design-Konsistenz: Schriften, Buttons, Abstände und Farben bleiben auf allen Unterseiten zu 100 % identisch mit der Hauptseite.
Flexibilität für neue Inhalte: Die KI kann das Layout frei an neue Inhalte (z. B. eine Pricing-Tabelle oder ein Kontaktformular) anpassen, nutzt dabei aber strikt die bestehenden Design-Token.
Zeitersparnis: Du musst der KI bei neuen Seiten nicht jedes Mal mühsam erklären, wie deine Brand aussieht, ein Verweis auf die
design.mdreicht.
Der Workflow: In 3 Schritten zur konsistenten Unterseite
Hier erfährst du genau, wie du das Design deiner bestehenden Seite "kopierst" und auf einer neuen Unterseite "einfügst".
Schritt 1: Design aus der Hauptseite extrahieren (Kopieren)
Öffne zuerst den Chat deiner bereits bestehenden Hauptseite. Kopiere den folgenden Prompt, füge ihn dort ein und lass die KI deine design.md erstellen.
Kopiere diesen Prompt:
Analysiere diese Seite und erstelle eine design.md, die ihr visuelles System erfasst – nicht ihren Inhalt.
Das Ziel ist eine wiederverwendbare Spezifikation, die ich an eine andere Seite oder ein anderes Projekt übergeben kann, um *exakt diesen Stil* auf andere Inhalte zu übertragen.
Regeln:
- Sektionsunabhängig: Extrahiere Token, Regeln und Prinzipien; kopiere niemals Überschriften oder sektionsspezifische Layouts.
- Sei konkret: Gib exakte Werte an (Hex-Codes, rem/px, Schriftnamen, Schriftgewichte, Millisekunden-Dauer, Easing-Kurven), wo immer sie existieren, keine Adjektive.
- Erfasse das „Warum“: Notiere die zugrundeliegenden Regeln (z. B. Abstands-Skala, Typografie-Verhältnis, wann Schatten/Rahmen verwendet werden), damit der Stil generalisiert werden kann.
Decke Folgendes ab, genau in dieser Reihenfolge:
1. Design-Philosophie — 2-3 Sätze zum Gesamtgefühl und den Prinzipien, die es antreiben.
2. Farbe — Palette mit Rollen (Hintergrund, Oberfläche, Text, Akzent, Zustände), exakte Werte, Handhabung von Light/Dark-Mode.
3. Typografie — Schriftfamilien, Schriftgewichte, die Typografie-Skala, Zeilenhöhe, Zeichenabstand, Hierarchie-Regeln.
4. Abstände & Layout — Basiseinheit, Abstands-Skala, maximale Breite/Grid, Breakpoints, Dichte, ein paar Hinweise zu Layout-Optionen.
5. Form & Tiefe — Radien, Rahmen, Schatten/Ebenen-Regeln.
6. Bewegung — Übergänge, Dauer, Easing, Hover-/Scroll-Verhalten.
7. Komponenten — Wiederkehrende Muster (Buttons, Karten, Eingabefelder) als wiederverwendbare Regeln, nicht als konkrete Instanzen.
8. Bildsprache/Ikonografie — Stil, Handhabung, Dimensionierung.
Gib ein einzelnes, in sich geschlossenes Markdown-Snippet aus. Wenn ein Wert eher abgeleitet als explizit angegeben ist, markiere ihn mit (inferred).
Schritt 2: Design-Code sichern
Die KI gibt dir nun ein Markdown-Textfeld (Code-Snippet) aus. Kopiere diesen gesamten Text heraus und lege ihn dir kurz in der Zwischenablage ab (oder speichere ihn kurz in einem leeren Textdokument), damit du ihn gleich griffbereit hast.
Schritt 3: Neue Unterseite mit dem Design füttern (Einfügen)
Erstelle jetzt deine neue Unterseite (z. B. eine Pricing-, Feature- oder Angebotsseite). Bevor die KI loslegt, gibst du ihr im Chat deinen inhaltlichen Prompt zusammen mit dem kopierten Text aus deiner design.md.
Praxisbeispiel 1: Neue Angebotsseite im Stil der Hauptseite:
Im Video siehst du:
Links: Die Homepage (Originalseite): https://nordic-escape.onepage.me/
Rechts: Die neue Unterseite, erstellt mit der
design.mdder Homepage: https://nordic-escape.onepage.me/unterseite1
Praxisbeispiel 2: Neue Inhalte, identische Markenwelt
Im folgenden Video siehst du einen weiteren Anwendungsfall des Workflows:
Im Video siehst du:
Linke Seite: Die neue Unterseite, die rein auf Basis der extrahierten
design.mdgeneriert wurde.Rechte Seite: Die Originalseite.
Obwohl die Inhalte komplett unterschiedlich sind, bleiben Farben, Typografie, Abstände, Buttons und das gesamte Look & Feel konsistent. Die KI kann das Layout flexibel an die neuen Inhalte anpassen, ohne die visuelle Identität der Marke zu verlieren.
Dies ist ein hocheffizienter, schneller Weg, um deinen aktuellen Stil plattformübergreifend wiederzuverwenden oder konsistente Brand-Welten zu bauen.
Häufig gestellte Fragen (FAQ)
Kann ich die design.md manuell anpassen?
Kann ich die design.md manuell anpassen?
Ja, absolut! Die Datei ist einfaches Markdown. Wenn die KI dein Design extrahiert hat und du nachträglich merkst, dass du beispielsweise den Eckenradius von 12px lieber standardmäßig auf 8px ändern möchtest, kannst du den Wert im Text der design.md einfach manuell überschreiben, bevor du ihn für die nächste Unterseite verwendest.
Funktioniert die design.md auch für komplett andere Webseiten?
Funktioniert die design.md auch für komplett andere Webseiten?
Ja. Das ist der große Vorteil an der „sektionsunabhängigen“ Extraktion. Da keine konkreten Inhalte, sondern nur rein visuelle Regeln (Farben, Abstände, Schriften) gespeichert sind, kannst du diese Datei als Design-Fundament für jedes beliebige neue Projekt nutzen, um einen identischen Marken-Look zu garantieren.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂