Skip to main content
Ein Design-System speichert den Look and Feel deiner Marke auf Workspace-Ebene: ihre Farben, Schriftarten, ihr Logo und ein Set passender Komponenten. Erstelle es einmal, lege es als Standard fest, und jede neue App, die du baust, startet markenkonform. So musst du deinen Stil nicht jedes Mal neu definieren. Du musst kein Designer sein. Mit nur wenigen Details, etwa deinem Logo, einer kurzen Beschreibung deiner Marke, dem gewünschten Gefühl und deinen Design-Dateien, erstellt Base44 ein komplettes Design-System für dich. So sehen alle deine Apps professionell und markenkonform aus.
Die Seite Design system in den Workspace-Einstellungen mit einer Base44-Design-System-Karte, die Logo, Button, Farbfelder und die Schrift Inter zeigt, daneben eine gestrichelte Kachel Create new design system

Deine Design-Systeme in den Workspace-Einstellungen

Verfügbarkeit:
  • Design-Systeme sind ab dem Builder Plan verfügbar. Jeder Workspace kann 1 Design-System haben, im Enterprise Plan so viele, wie du brauchst.
  • Design-Systeme gelten für Web-Apps, nicht für mobile Apps. Eine App, die aus Figma importiert, von einer URL gestartet oder von einer anderen Plattform migriert wurde, kann ein Design-System übernehmen, sobald sie fertig gebaut ist.
  • Das Erstellen und Nutzen eines Design-Systems kostet keine Credits.

​
Was enthalten ist

Wenn du ein Design-System erstellst, füllt Base44 alles aus, was deine Apps einheitlich und markenkonform hält, und zeigt es in einer Live-Vorschau. Ändere eine Farbe oder eine Schriftart, und jedes Beispiel aktualisiert sich sofort, sodass du immer siehst, wie es aussieht.
Ein Design-System mit deinen Markeneinstellungen links und einer Live-Vorschau rechts

Ein Design-System und seine Live-Vorschau

Ein Design-System deckt 3 Dinge ab:
  • Deine Markengrundlagen: Dein Logo, Markenname, Slogan und eine kurze Beschreibung, plus die Kernwerte deiner Marke, ihr Tonfall und Design-Richtlinien dafür, wie sie aussehen soll.
  • Dein Look and Feel: Deine Farben, deine Schriftarten, wie abgerundet deine Ecken sind, wie viel Schatten unter den Elementen liegt und wie viel Abstand zwischen ihnen ist.
  • Fertige Bausteine: Ein komplettes Set an Komponenten, die bereits zu deiner Marke passen und in jede App eingesetzt werden können, einschließlich Buttons, Symbolen, Karten, Navigation, Formularen und Seitenabschnitten, jeweils gestylt für ihre interaktiven Zustände.

​
Ein Design-System erstellen

Workspace-Besitzer und Admins erstellen Design-Systeme in den Workspace-Einstellungen. In einem Formular kannst du eine kurze Beschreibung, dein Logo, einen Import aus Figma, einer Website oder einem npm-Paket und deine eigenen Design-Dateien kombinieren. Base44 generiert aus dem, was du bereitstellst, ein komplettes Design-System. So erstellst du ein Design-System:
  1. Klicke unten links auf deinen Workspace-Namen und dann auf Settings.
  2. Klicke auf Design system.
  3. Klicke auf Create. Wenn dein Workspace bereits ein Design-System hat, klicke stattdessen auf Create new design system.
  4. Füge in Create your design system Folgendes hinzu:
    • Describe your brand: Schreibe eine kurze Beschreibung deiner Marke und füge dein Logo im Quadrat daneben hinzu.
    • Import an existing source: Du kannst eine Quelle pro Design-System verwenden. Wechsle zwischen den Tabs:
      • Figma file: Ziehe eine .fig-Datei hinein oder wähle sie aus, bis zu 1,9 GB, und hänge alle ihre Seiten und Frames an oder wähle bestimmte aus. Base44 verkleinert überdimensionierte Bilder, bereitet große Dateien im Hintergrund vor und speichert die Originaldatei nicht.
      • Website URL: Füge eine Website-Adresse ein. Verwende nur URLs, an deren Inhalten du die Rechte hast.
      • NPM package: Gib ein veröffentlichtes Paket per Name, name@version oder npmjs.com-Link an. Es wird standardmäßig aus der öffentlichen npm-Registry aufgelöst, oder klicke auf Private registry, um eine Registry-URL, ein Zugriffstoken und alle Scopes hinzuzufügen, die dort aufgelöst werden sollen. Dein Zugriffstoken wird einmal zum Abrufen des Pakets verwendet und nicht gespeichert.
    • Upload your design resources: Füge Bilder, Schriftarten, eine design.md-Datei oder andere Design-Dateien hinzu, bis zu 10 Dateien.
  5. Klicke auf Create. Das Generieren deines Design-Systems kann einige Minuten dauern, und du kannst währenddessen gehen und zurückkommen.
  6. Prüfe das generierte Design-System in der Vorschau und passe dann alles an, was du möchtest.
Der Dialog Create a design system mit einem Logo, einer Markenbeschreibung, einer importierten Quelle und hochgeladenen Design-Ressourcen

Ein Design-System aus den Materialien deiner Marke erstellen

​
Dein Design-System bearbeiten

Wenn du ein Design-System öffnest, bearbeitest du es in einem Editor mit zwei Panels. Links sind alle deine Marken- und Design-Einstellungen. Rechts zeigt eine Live-Preview diese Stile angewendet auf echte Buttons, Symbole und Karten, so wie sie in deiner App oder Website aussehen. Wenn du links eine Einstellung änderst, aktualisiert sich die Vorschau sofort. Name und Slogan deines Design-Systems stehen oben auf der Seite. Klicke auf einen davon, um ihn direkt zu bearbeiten. Links kannst du jeden Teil deines Design-Systems bearbeiten:
Eine kurze Beschreibung deiner Marke. Base44 nutzt sie, um alles, was es generiert, markenkonform zu halten.
Füge deine Markenlogos hinzu oder generiere eines mit KI. Klicke auf Add logo, um ein Logo hochzuladen, oder auf Generate logo, um eines zu beschreiben und von Base44 erstellen zu lassen. Ein Logo ist als Primary markiert, und du kannst über sein More actions-Menü ein anderes als primär festlegen.
Die Karte Logos mit den Buttons Generate logo und Add logo und einem als Primary markierten Logo

Deine Markenlogos bearbeiten

Wähle deine Überschriften- und Fließtext-Schriftarten oder lade eigene hoch. Du kannst auch das Gewicht jedes Schriftstils feinjustieren. Workspace-Besitzer und Admins können eine Schriftart hochladen.
Die Karte Typography mit Heading und Body jeweils auf Inter, darüber die Schriftgewichte Regular 400, Medium 500, Semibold 600 und Bold 700

Deine Überschriften- und Fließtext-Schriftarten wählen

Klicke auf eine Farbe, um sie zu bearbeiten, oder klicke auf Generate palette und beschreibe die gewünschten Farben.
Die Karte Color palette mit einem geöffneten Farbwähler über dem ersten Farbfeld, mit Verlaufsfeld, Farbton-Regler und R-, G- und B-Werten von 26, neben den Farbfeldern Secondary, Accent, Text, Muted und Destructive

Eine Farbe in der Palette bearbeiten

Definiert, wie deine Marke kommuniziert. Klicke auf Add tone, um eine Eigenschaft hinzuzufügen, oder klicke auf das Generieren-Symbol, damit Base44 ein neues Set vorschlägt.
Die Karte Tone of voice mit confident, clear, friendly, direct und optimistic als entfernbare Chips, darüber ein Button Add tone

Tonfall-Eigenschaften hinzufügen

Die Prinzipien, für die deine Marke steht. Klicke auf Add value, um einen Wert hinzuzufügen, oder klicke auf das Generieren-Symbol, damit Base44 ein neues Set vorschlägt.
Die Karte Core values mit Effortless, Complete, Trustworthy, Modern und Empowering als entfernbare Chips, darüber ein Button Add value

Deine Kernwerte hinzufügen

Lege fest, wie abgerundet deine Komponenten aussehen.
Die Karte Corner radius mit Vorschaukacheln und Pixelfeldern für none 0, sm 6, md 12, lg 20 und full 9999

Deine Eckenradius-Werte festlegen

Justiere fein, wie viel Abstand zwischen Elementen liegt.
Die Karte Spacing scale mit Balken von sp-1 mit 4 Pixeln bis sp-7 mit 48 Pixeln, jeweils mit einem bearbeitbaren Pixelfeld

Deine Abstandsskala feinjustieren

Lege fest, wie erhaben deine Komponenten aussehen. Klicke auf einen Schatten, um Position, Unschärfe, Ausbreitung und Farbe anzupassen.
Die Karte Shadow mit 5 Vorschaukacheln mit zunehmender Schattentiefe, beschriftet mit none, sm, md, lg und xl

Deine Schattenwerte festlegen

Regeln, die die visuelle Sprache deiner App einheitlich halten. Klicke auf Add guideline, um eine hinzuzufügen, oder öffne das More actions-Menü einer Richtlinie, um sie zu bearbeiten oder zu löschen.
Die Karte Design guidelines, beschrieben als Regeln, denen der Agent für diese Marke folgt, mit 7 Richtlinien mit jeweils einem More-actions-Menü, darüber ein Button Add guideline

Deine Design-Richtlinien bearbeiten

Deine Bearbeitungen werden erst angewendet, wenn du sie speicherst. Klicke auf Save changes, um sie zu behalten, oder auf Reset changes, um noch nicht gespeicherte Bearbeitungen rückgängig zu machen. Ein Design-System braucht einen Namen und ein Overview, bevor du es speichern kannst.

​
Deine Design-Systeme verwalten

Verwalte ein Design-System über seine Karte im Bereich Design system. Öffne das More actions-Symbol eines Design-Systems, um es zu bearbeiten, als Standard festzulegen oder zu löschen.
Wer Design-Systeme verwalten kann:
  • Workspace-Besitzer und Admins: Können jedes Design-System erstellen, bearbeiten, als Standard festlegen und löschen.
  • Andere Workspace-Mitglieder: Können Design-Systeme ansehen und eines im KI-Chat anhängen, aber keine erstellen, bearbeiten oder löschen.
Die Einstellungsseite Design system mit geöffnetem Kartenmenü und hervorgehobenem Edit, über Set as default und Delete

Ein Design-System zum Bearbeiten öffnen

​
Ein Standard-Design-System festlegen

Lege ein Design-System als Workspace-Standard fest, damit neue Apps automatisch damit starten. So legst du dein Standard-Design-System fest:
  1. Klicke unten links auf deinen Workspace-Namen und dann auf Settings.
  2. Klicke auf Design system.
  3. Klicke beim gewünschten Design-System auf das More actions-Symbol und dann auf Set as default.
Die Seite Design system mit geöffnetem Kartenmenü und hervorgehobenem Set as default zwischen Edit und Delete

Einen Workspace-Standard festlegen

Um ein Design-System nicht mehr als Standard zu verwenden, öffne dasselbe Menü und klicke auf Remove default.

​
Ein Design-System löschen

Lösche ein Design-System, das du nicht mehr brauchst.
Das Löschen eines Design-Systems über seine Karte wird sofort wirksam und kann nicht rückgängig gemacht werden.
So löschst du ein Design-System:
  1. Klicke unten links auf deinen Workspace-Namen und dann auf Settings.
  2. Klicke auf Design system.
  3. Klicke beim gewünschten Design-System auf das More actions-Symbol und dann auf Delete.
Die Einstellungsseite Design system mit geöffnetem Kartenmenü und hervorgehobenem Delete unter Edit und Set as default

Ein Design-System löschen

​
Dein Design-System beim Bauen nutzen

Wenn du eine neue App startest, ist dein Standard-Design-System vorausgewählt, sodass die App ab dem ersten Prompt passend zu deiner Marke gebaut wird. Um ein anderes Design-System zu wählen, klicke im KI-Chat auf das Add-Symbol , wähle Use a design system und dann das gewünschte aus.
Das Prompt-Feld der Startseite mit geöffnetem Add-Menü, hervorgehobenem Use a design system und der Design-System-Liste daneben

Ein Design-System beim Start einer neuen App wählen

Du kannst ein Design-System auch auf eine App anwenden, an der du bereits arbeitest, über dasselbe Add-Symbol im KI-Chat. Wenn dein Workspace ein Design-System hat, zeigt die Option seinen Namen, und ein Klick darauf hängt das Design-System an deinen nächsten Prompt an.
Das geöffnete Add-Menü im KI-Chat mit hervorgehobenem Use a design system

Dein Design-System aus dem KI-Chat anwenden

Das Anwenden eines Design-Systems wird bei einem Build-Durchlauf im KI-Chat wirksam. Wenn dein Chat auf einen Nicht-Build-Modus wie Discuss eingestellt ist, wechsle zuerst zu Build.
Das Anwenden eines Design-Systems auf eine bereits gebaute App baut die App passend neu, statt sie an Ort und Stelle umzustylen. Wende es früh an oder rechne damit, dass die App neu generiert wird.

​
FAQs

Klicke auf eine Frage unten, um mehr über Design-Systeme zu erfahren.
Nein. Beschreibe deine Marke in wenigen Worten oder importiere von einer Website, einer Figma-Datei, einem npm-Paket oder deinem Logo, und Base44 generiert ein komplettes Design-System für dich. Du kannst dann jeden Teil davon anpassen.
Ab dem Builder Plan hast du 1 Design-System pro Workspace. Nutze also einen eigenen Workspace für jeden Kunden oder jedes Projekt mit eigener Marke. Im Enterprise Plan gibt es kein Limit.
Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der englischen Version.