Anleitung

Website-Relaunch geplant? Extrahiere zuerst ihr Designsystem

Bei einem Relaunch, einem Rebranding oder einem Wechsel auf ein neues Framework geht ein Designsystem still und leise verloren. Die Farben stecken in altem CSS, die Typo-Skala im Kopf einer einzelnen Person, die Button-Zustände in einer Komponente, die niemand öffnen will.

Extrahiere deine aktuelle Website als DESIGN.md, bevor du irgendetwas änderst. So bekommst du eine schriftliche Ausgangsbasis für den Neubau, die dein Team und dein Coding-Agent gleichermaßen lesen können.

Geschrieben für Teams, die einen Relaunch, ein Rebranding oder eine Migration planen. Aktualisiert am .

Das bekommst du

  • Eine DESIGN.md deiner aktuellen Website, committet vor der ersten Zeile des Neubaus.
  • Ein klarer Überblick, was die Datei erfasst hat und was nicht.
  • Eine Checkliste, was du von Hand prüfst: Assets, Zustände, Animationen, Breakpoints und Seiten hinter einem Login.
  • Ein Weg, die neue Website am Ende mit der alten zu vergleichen.

Wann du das tun solltest

  • Ein Framework-Wechsel. Gleicher Look, neuer Stack. Mit der DESIGN.md baut dein Coding-Agent Komponenten mit den exakten Werten nach, statt alte Stylesheets zu lesen.
  • Ein Rebranding. Halte zuerst das alte System fest, damit du genau weißt, welche Farben, Schriften und Radien sich ändern und welche bleiben.
  • Eine Übergabe. Eine neue Agentur oder ein neues Team bekommt eine Datei, die beschreibt, wie die Website heute aussieht, statt einer Führung durch die Codebasis.

Schritte

  1. Extrahiere die Live-Website, bevor du etwas änderst

    Füge deine Produktions-URL auf der Startseite von Design Extractor ein und starte eine Pro-Extraktion. Es muss eine öffentliche Seite sein: Die Extraktion lädt sie wie ein Besucher, deshalb funktionieren localhost und Seiten hinter einem Login nicht.

  2. Committe sie als Ausgangsbasis

    Speichere sie als DESIGN.md im neuen Repository und committe sie, bevor der Neubau beginnt. Sie hält jetzt fest, wie die Website an diesem Tag aussah.

  3. Lies den Abschnitt Known Gaps

    Am Ende der Datei steht, was die Extraktion nicht erfassen konnte. Jeder Punkt dort ist etwas, das du von Hand prüfst.

  4. Prüfe, was eine DESIGN.md nicht enthalten kann

    Assets, Screens hinter dem Login, Animationen und die anderen Punkte unten. Ergänze unterwegs Notizen in der Datei.

  5. Bau auf ihrer Grundlage

    Verweise deinen Coding-Agenten auf die Datei, wie es die Anleitung für Claude Code und Cursor zeigt, und prüfe jeden neuen Screen dagegen.

Was die Datei bei Stripe erfasst hat

Um zu sehen, was du bekommst, schau dir die DESIGN.md von Stripe in der Galerie an. Ihre Pro-Extraktion hat 5 Seiten von stripe.com erfasst: /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Eine Extraktion deiner eigenen Website liefert dieselbe Struktur.

Farben21 Tokens, jeweils mit seiner Rolle
Typografie17 Stile in Sohne
Radien10 Tokens
Abstände62 Tokens
Komponenten71 Rezepte in HTML und CSS: 44 haben die Prüfung gegen die Live-Seite bestanden, 27 sind markiert oder nicht prüfbar, jeweils mit Begründung
AbschnitteOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

Was ihr nach eigener Aussage fehlt

Die Datei ist ehrlich, was ihre Grenzen angeht. Die ersten 5 von 11 Punkten in ihrem Abschnitt Known Gaps:

Vom Ende der DESIGN.md von Stripe, im Wortlaut.
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Extrahiert aus der öffentlichen Website von Stripe, keine offiziellen Markenrichtlinien. Die vollständige DESIGN.md von Stripe lesen

Deine eigene Datei hat ihre eigene Liste. Nutze sie als To-do-Liste für die Prüfungen unten.

Was du von Hand prüfst

PunktWarum die Datei es übersehen kannWas zu tun ist
Logo, Icons, BilderEine DESIGN.md beschreibt Stile, keine Dateien.Exportiere sie aus der aktuellen Codebasis und übernimm sie in die neue.
Screens nach dem LoginDie Extraktion sieht nur öffentliche Seiten.Notiere, wie sich die App von der Marketing-Website unterscheidet, etwa durch dichtere Tabellen oder eine Seitenleiste.
ZuständeHover und Fokus sind dort erfasst, wo die Extraktion sie gesehen hat; gedrückte, deaktivierte und Fehlerzustände oft nicht.Klick dich durch Formulare und Buttons und notiere die fehlenden Zustände.
AnimationenÜbergänge und Animationen werden höchstens in Worten beschrieben.Notiere Dauer und Easing aus dem aktuellen CSS.
BreakpointsDie Extraktion erfasst eine Desktop- und eine Mobilbreite.Prüfe das Tablet-Layout und notiere, wo sich die Spalten ändern.
Vorlagen außerhalb der StichprobePro wertet etwa fünf wichtige Seiten aus.Extrahiere jede Seite, die anders aussieht, etwa Doku oder Checkout, separat.

Nach dem Relaunch

Wenn die neue Website live ist, extrahiere sie erneut und vergleiche die beiden Dateien. Unveränderte Tokens bedeuten, dass der Look überlebt hat; geänderte sind entweder das geplante Rebranding oder eine Abweichung, die du beheben solltest.

Jeder Text-Diff zeigt die geänderten Hex-Werte und Größen. Das Paket @google/design.md von Google bringt einen diff-Befehl mit, der zwei Versionen Token für Token vergleicht; die DESIGN.md-Erklärung behandelt das Format und seine Tools. Wenn du die Datei unterwegs von Hand bearbeitest, prüfe sie mit dem DESIGN.md-Validator.

FAQ

Designsystem vor dem Relaunch extrahieren: Fragen

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

Nein. Eine DESIGN.md ist eine Textdatei, die Stile beschreibt: Farben, Typografie, Abstände, Radien und Komponenten-Rezepte in HTML und CSS. Exportiere Logo, Icons, Illustrationen und Fotos aus deiner aktuellen Codebasis oder deinen Designdateien und bewahre sie daneben auf.

Nein. Die Extraktion lädt die Seite über ihre URL wie ein Besucher. Seiten hinter einem Login, auf localhost oder in einem privaten Netzwerk werden deshalb nicht unterstützt. Extrahiere die öffentliche Website und notiere, wie sich die Screens nach dem Login unterscheiden.

Pro wertet die wichtigsten Seiten der Website aus, etwa fünf, und führt die Ergebnisse in einer DESIGN.md zusammen. Wenn eine wichtige Seitenvorlage nicht dabei ist, etwa eine Doku-Seite oder ein Checkout, extrahiere auch die URL dieser Seite und vergleiche die beiden Dateien.

Extrahiere die neue Website, sobald sie live ist, und vergleiche die beiden Dateien. Das Paket @google/design.md von Google hat einen diff-Befehl, der zwei Versionen einer DESIGN.md Token für Token vergleicht, und jeder Text-Diff zeigt geänderte Hex-Werte und Größen.

Halte deine Website fest, bevor du sie änderst

Füge deine Produktions-URL ein. Eine Pro-Extraktion wertet ihre wichtigsten Seiten aus und liefert eine DESIGN.md.

DESIGN.md deiner aktuellen Website erstellen

Verwandte Anleitungen

Alle DESIGN.md-Anleitungen ansehen