Anleitung

Kein Designer? Übernimm ein bewährtes Designsystem für deine App

Du erkennst gutes Design, wenn du es siehst, kannst es aber nicht aus dem Nichts erschaffen. Musst du auch nicht. Wähl ein Produkt, das du bewunderst, nimm sein Designsystem als DESIGN.md, ändere die Teile, die es zu ihrem machen, und dein Coding-Agent hat ein bewährtes System, mit dem er deine App baut.

Bewährt heißt: an echten Nutzern getestet. Schrift, die sich gut liest, Abstände, die atmen, Buttons, die wie Buttons aussehen. Das behältst du und setzt deine eigene Identität ein.

Geschrieben für Solo-Gründer und kleine Teams. Aktualisiert am .

Das bekommst du

  • Eine kurze Liste, was eine gute Referenz-Website ausmacht, damit du eine wählst, die zu deinem Produkt passt.
  • Eine DESIGN.md, die du als Ausgangs-Designsystem in dein Repo legen kannst.
  • Eine klare Trennung zwischen dem, was du behältst (Typo-Skala, Abstände, Radien, Komponentenformen), und dem, was du änderst (Markenfarbe, Logo, Fonts, Tonalität).
  • Ein Prompt, der den Austausch für dich erledigt, und eine Prüfung, ob sich das Ergebnis weiterhin gut liest.

So wählst du eine Referenz-Website

Die Website, von der du übernimmst, bestimmt größtenteils, wie sich deine App anfühlt. Nimm dir hier also zehn Minuten. Eine gute Referenz hat diese Eigenschaften:

  • Dieselbe Art von Produkt. Ein Dashboard übernimmt gut von einem anderen Dashboard, nicht von einem Modeshop.
  • Eine ähnliche Dichte. Wenn deine App aus Formularen und Tabellen besteht, wähl eine Website mit Formularen und Tabellen, nicht eine mit einem einzigen großen Hero.
  • Eine klare Aktionsfarbe. Wenn eine einzige Farbe markiert, was klickbar ist, bedeutet ein Rebranding, diese eine Farbfamilie auszutauschen.
  • Schrift, die du lesen kannst. Öffne die Website auf deinem Smartphone und lies einen Absatz. Wenn das angenehm ist, lohnt es sich, die Typo-Skala zu übernehmen.
  • Hell oder dunkel, so wie du es willst. Ein Dark-first-System in ein helles umzubauen ist ein Redesign, keine kleine Anpassung.
  • Ein Look, der nicht die Marke selbst ist. Wenn du die Website allein an ihrer Farbe erkennen würdest, müsstest du zu viel davon ändern.

Die DESIGN.md-Galerie lässt sich nach Kategorie filtern. So vergleichst du schnell ein paar Kandidaten.

Schritte

  1. Nimm zwei oder drei Websites in die engere Wahl

    Nutze die Eigenschaften oben. Screenshots der Screens, die dir gefallen, helfen dir später bei der Entscheidung.

  2. Hol dir die DESIGN.md deines Favoriten

    Kopiere sie von ihrer Galerieseite oder füge die URL auf der Startseite von Design Extractor ein und starte eine Pro-Extraktion. Pro wertet die wichtigsten Seiten der Website aus und liefert eine Datei mit Farben, Typografie, Abständen, Radien und Komponenten-Rezepten. Neu im Format? Lies, was eine DESIGN.md ist.

  3. Mach sie zu deiner

    Ändere die Markenfarbfamilie, die Fonts, falls sie kommerziell sind, den Namen und die Tonalität. Der Prompt unten erledigt das in einem Rutsch.

  4. Leg sie in dein Repo und verweise deinen Agenten darauf

    Speichere sie als DESIGN.md im Stammverzeichnis des Repositorys. Die Anleitung für Claude Code und Cursor zeigt den Verweis, den du hinzufügst.

  5. Prüfe sie

    Füge die bearbeitete Datei in den kostenlosen DESIGN.md-Validator ein. Er prüft die Struktur und markiert Textfarben mit zu wenig Kontrast.

Praxisbeispiel: Notion

Angenommen, dir gefällt, wie sich Notion anfühlt. Hier ist das Designsystem, wie die DESIGN.md in der Galerie es festhält, und was du behalten und ändern würdest.

Farben

Typografie

hero-displayDesign is intelligence made visibleNotion Inter96px / 600 / 1.05
display-lgDesign is intelligence made visibleNotion Inter72px / 500 / 1.2
display-mdDesign is intelligence made visibleNotion Inter54px / 700 / 1.05
display-smDesign is intelligence made visibleNotion Inter40px / 400 / 1.5
title-lgDesign is intelligence made visibleNotion Inter24px / 500 / 0.85
title-mdDesign is intelligence made visibleNotion Inter22px / 700 / 1.25

Formen

xs · 4px
sm · 8px
md · 12px
full · 9999px

Die ersten 12 Farben, 6 Schriftstile und 4 Radien von Notion, gerendert aus der DESIGN.md. Klick auf ein Farbfeld, um den Hex-Wert zu kopieren.

Was du behältst und was du änderst

Teil der DateiIn der DESIGN.md von NotionWas zu tun ist
Typo-Skalahero-display, 96px, Stärke 600 bis hinunter zu body, 16px, Stärke 400Behalten
Radienxs 4px, sm 8px, md 12px, full 9999pxBehalten
Neutraltönesurface #FFFFFF, ink #000000Behalten
Komponentenformen14 Komponenten-Rezepte mit Größen, Innenabständen, Rahmen und ZuständenBehalten
Markenfarbeprimary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FEDurch deine Farbe und ihre Abstufungen ersetzen
FontsNotion Inter, Lyon TextNur behalten, wenn frei nutzbar, sonst einen Ersatz verwenden
Namename: NotionDurch den Namen deines Produkts ersetzen
TonalitätDer Abschnitt Overview beschreibt die Persönlichkeit der MarkeIn ein, zwei Sätzen über deine eigene neu schreiben
Logo und BildspracheNicht in der DateiEigenes Logo, eigene Icons und Illustrationen mitbringen
Unsicher bei den Fonts? Die DESIGN.md von Notion beantwortet das in ihrem Abschnitt Typography, hier wörtlich:
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

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

Mach sie mit einem Prompt zu deiner

Die Bearbeitung kann dein Coding-Agent übernehmen. Öffne das Repo mit der DESIGN.md und füge einen Prompt wie diesen ein, mit deinem eigenen Namen, deiner Farbe und deinem Satz anstelle derer von Acme. Er wurde für diese Anleitung mit den echten Token-Namen von Notion geschrieben.

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Lies danach den Diff. Hex-Werte ändern sich an zwei Stellen: in den colors-Tokens oben und im CSS jedes Komponenten-Rezepts weiter unten. Beide müssen sich gemeinsam ändern, sonst behalten Buttons die alte Farbe.

Warum du eine Marke nicht komplett kopieren solltest

Ein übernommenes System ist ein Ausgangspunkt, keine Verkleidung. Einen fremden Look unverändert zu veröffentlichen schadet dir mehr, als es nützt:

  • Das fällt auf. Eine App, die wie ein bekanntes Produkt mit anderem Namen aussieht, wirkt wie eine Kopie, und das kostet Vertrauen.
  • Die Identität steht dir nicht zu. Logos, Produktnamen, charakteristische Farben, Illustrationen und Texte gehören der Marke. Abstände, Schriftgrößen und Radien sind das gemeinsame Handwerk, von dem du lernen kannst.
  • Fonts haben Lizenzen. Ein kommerzieller Font auf ihrer Website bringt keine Lizenz für deine mit.
  • Du wirst es weiterentwickeln wollen. Sobald Farben und Tonalität deine eigenen sind, fühlt sich jeder neue Screen an, als würdest du dein Produkt bauen und nicht das eines anderen.

Die Faustregel: Struktur behalten, Identität ändern. Tausch mindestens die Markenfarbe, das Logo, jeden kommerziellen Font und die Tonalität aus. Die Dateien in der Galerie sind aus der öffentlichen Website der jeweiligen Marke extrahiert, keine offiziellen Markenrichtlinien, und das gilt auch für alles, was du selbst extrahierst.

FAQ

Designsystem ohne Designer übernehmen: Fragen

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

Abstände, Schriftgrößen und Eckenradien einer Website als Ausgangspunkt zu nehmen ist die Art, wie die meisten Oberflächen entstehen. Ihre Identität zu kopieren ist nicht in Ordnung: ihr Logo, ihren Namen, ihre charakteristische Markenfarbe, ihre Illustrationen oder ihre Texte. Ändere diese, und nutze einen kommerziellen Font nur, wenn du ihn lizenzierst. Die Dateien in der Galerie sind aus öffentlichen Websites extrahiert, keine offiziellen Markenrichtlinien.

Viele Marken nutzen kommerzielle oder eigens entwickelte Fonts. Die DESIGN.md nennt jede Schriftfamilie in ihren Typografie-Tokens, und ihr Abschnitt Typography schlägt meist einen Open-Source-Ersatz vor, mit Hinweisen zu Laufweite und Schriftstärken. Nutze den Ersatz oder wähl eine kostenlose Schrift mit ähnlichen Proportionen.

Eine Datei aus der Galerie zu lesen und zu kopieren kostet nichts. Eine Website deiner Wahl zu extrahieren verbraucht vorausbezahlte Credits: Eine Pro-Extraktion kostet 10 Credits, und Credit-Pakete gibt es ab $5 for 50 credits. Credits verfallen nie, und es gibt kein Abo.

Nein. Es ist eine Textdatei: Farben sind Hex-Werte, Schriften sind Namen, Größen sind Pixel. Ändere die Werte oder bitte deinen Coding-Agenten, das für dich zu erledigen, und prüfe das Ergebnis dann mit dem kostenlosen DESIGN.md-Validator, der auch Textfarben mit zu wenig Kontrast markiert.

Eine Website gefunden, die du bewunderst?

Füge ihre URL ein und hol dir ihr Designsystem als DESIGN.md, bereit, es zu deinem eigenen zu machen.

DESIGN.md aus jeder Website erstellen

Verwandte Anleitungen

Alle DESIGN.md-Anleitungen ansehen