DESIGNSYSTEME

Designsysteme für KI-Agenten.

Wähle ein komplettes Designsystem für deine Website oder App (Farben, Schriften, Schriftgrößen-Skala, Eckenradius und Abstände, in Hell und Dunkel) und gib es Codex oder Claude Code in einem Schritt: als DESIGN.md-Datei, als shadcn-Theme oder als einzelnen Prompt.

PlattformAlleWebApp

StilHellDunkelMinimalistischKräftigVerspieltWeichWarmSerifenLuxusEditorial

EinsatzSaaSFinanzenEntwickler-ToolsGesundheitBildungE-CommerceEssenFitnessReisenMusikSocialProduktivitätPortfolioBlogs und InhalteStart-upsSmart Home

24 Designsysteme

• PaperWebRuhig, redaktionell und gut lesbar, wie eine gut gesetzte Buchseite.Überschriften in Source Serif 4
• SwissWebSchwarz, Weiß und ein Signalrot auf einem strengen Raster.Überschriften in Archivo
• LedgerWebEine dichte, dunkle Oberfläche für Zahlen, mit einem Terminal-Bernstein als Akzent.Überschriften in IBM Plex Sans
• MonoWebSchlichte weiße Seiten, Geist-Schrift und ein Kobaltblau, gebaut für Doku und Dev-Tools.Überschriften in Geist
• AtelierWebElfenbein, Tinte und eine edle Serifenschrift, wie das Lookbook eines Modehauses.Überschriften in Cormorant Garamond
• NoirWebSchwarz, Knochenweiß und eine riesige Serifenschrift. Das Werk ist die einzige Farbe.Überschriften in Instrument Serif
• HarborWebMarineblau, Weißraum und verlässliche Struktur für seriöse B2B-Produkte.Überschriften in Plus Jakarta Sans
• NordicWebGedämpfte Blautöne, sanfte Grautöne und stille Zuversicht für Produktivitäts-Tools.Überschriften in Manrope
• ClinicWebRuhiges Petrol, klare Schrift und einfache Sprache für Gesundheits-Websites.Überschriften in Source Sans 3
• TerraWebMoos, Leinen und Ton für Marken, die nah am Land arbeiten.Überschriften in DM Serif Display
• ChalkWebHell, rund und ermutigend, wie ein gutes Klassenzimmer.Überschriften in Nunito
• PopWebDicke schwarze Konturen, harte Schatten und Zitronengelb. Absichtlich laut.Überschriften in Unbounded
• StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
• PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque
• CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader
• WalletAppKlare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst.Überschriften in Manrope
• FocusAppEine weiße Seite, ein Blau und nichts sonst zwischen dir und der Aufgabe.Überschriften in Instrument Sans
• ChatterAppRunde Sprechblasen, ein freundliches Türkis und Unterhaltungen im Mittelpunkt.Überschriften in Plus Jakarta Sans
• VoyageAppRandlose Fotos, Ozeanblau und eine Serife, die sich wie eine Postkarte anfühlt.Überschriften in DM Serif Display
• BoutiqueAppRandlose Fotos, eine Bodoni-Serife und Schwarz auf Weiß, wie ein Schaufenster.Überschriften in Bodoni Moda
• QuestAppSerien, XP und dicke Buttons, die Üben wie ein Spiel anfühlen lassen.Überschriften in Nunito
• CareAppEine klare Aufgabe pro Screen, für Patienten, die es einfach erledigen wollen.Überschriften in Source Sans 3
• VinylAppCover-Art zuerst, ein pinker Play-Button und ein dunkler Raum zum Zuhören.Überschriften in Syne
• HearthAppWarmes Bernsteinlicht auf einem dunklen, ruhigen Startscreen.Überschriften in Outfit

Was in jedem Designsystem steckt

• Farben für Hell- und Dunkelmodus, benannt nach ihrer Rolle, so wie shadcn und Tailwind sie benennen: background, primary, muted, border, ring und fünf Diagrammfarben. Jede Textfarbe erfüllt auf ihrem Hintergrund den WCAG-Kontrast.
• Schriften und eine Schriftgrößen-Skala aus Google Fonts, mit Größen, Zeilenhöhen und Laufweiten von der Display-Größe bis zum Kleingedruckten.
• Eckenradius, Abstände und Schatten, dazu ein Raster für Websites oder Touch-Ziele, Tab-Leiste und Bildschirmränder für Mobile Apps.
• Regeln für die Anwendung: wofür es gedacht ist, welche Komponenten du bauen solltest und was du vermeiden sollst, damit der Agent Entscheidungen trifft, wie das System sie treffen würde.

Drei Wege, eines zu nutzen

1. Kopiere den Prompt in Codex oder Claude Code. Er verweist den Agenten auf die DESIGN.md des Systems als reinen Text, die er in deinem Projekt speichert und für jeden Screen befolgt.
2. Lade die DESIGN.md herunter und lege sie selbst ins Stammverzeichnis deines Projekts. Siehe was DESIGN.md ist und wie du sie nutzt.
3. Installiere das shadcn-Theme mit einem Befehl oder füge die globals.css in ein Tailwind-v4-Projekt ein.

Alle 24 Systeme gibt es auch auf GitHub, mit ihren DESIGN.md-Dateien und shadcn-Themes: ummydev/design-md.

Web- und App-Systeme

Web-Systeme sind für Landingpages, Marketing-Websites, Dokumentationen und Dashboards gebaut. App-Systeme sind für Smartphone-Screens gebaut: größere Touch-Ziele, eine Tab-Leiste unten und Schriftgrößen, die auf iOS und Android gut lesbar sind. Jedes System hat seinen eigenen Look, gewählt, um die Muster zu vermeiden, die KI-Oberflächen gleich aussehen lassen, etwa lila Verläufe und Glassmorphism.

Häufige Fragen

Sind diese Designsysteme kostenlos?

Ja. Du kannst jedes Designsystem kostenlos kopieren, herunterladen und in deinen eigenen Projekten verwenden.

Funktionieren sie mit anderen KI-Tools als Codex und Claude Code?

Ja. DESIGN.md ist reines Markdown, jeder Agent, der Dateien in deinem Projekt liest, kann ihr also folgen, und das shadcn-Theme funktioniert in jedem shadcn- oder Tailwind-Projekt.

Kann ich ein Designsystem ändern?

Ja. Bearbeite die DESIGN.md oder die CSS-Variablen oder bitte deinen Agenten, sie anzupassen, zum Beispiel um die Hauptfarbe gegen deine Markenfarbe zu tauschen.

• DESIGN.md-GeneratorErstelle eine DESIGN.md aus deinen eigenen Farben, Schriften, Ecken und Abständen.
• Der KI-Look im UI-Design – und wie du ihn vermeidestZwölf Anzeichen, dass eine UI von einer KI stammt, und Prompts, die jedes davon beheben.