> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Design-System > Erstelle ein Workspace-Design-System in Base44, um die Farben, Schriftarten, das Logo und die Komponenten deiner Marke einmal zu definieren und dann einen einheitlichen Look auf alle deine Apps anzuwenden. 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. Deine Design-Systeme in den Workspace-Einstellungen **Verfügbarkeit:** * Design-Systeme sind ab dem [**Builder Plan**](https://base44.com/pricing) verfügbar. * Workspaces ab dem Builder Plan enthalten 1 Design-System. Enterprise-Workspaces haben kein Limit. * 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 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 Du erstellst ein Design-System aus deinen 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 *** ## 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. Deine Markenlogos bearbeiten Wähle deine Überschriften- und Fließtext-Schriftarten oder lade eigene hoch. Du kannst auch das Gewicht jedes Schriftstils feinjustieren. Jeder in deinem Workspace mit Bearbeitungsrechten, also Besitzer, Admins und Editoren, kann eine Schriftart hochladen. Viewer und Gäste nicht. 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. 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. 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. Deine Kernwerte hinzufügen Lege fest, wie abgerundet deine Komponenten aussehen. Deine Eckenradius-Werte festlegen Justiere fein, wie viel Abstand zwischen Elementen liegt. Deine Abstandsskala feinjustieren Lege fest, wie erhaben deine Komponenten aussehen. Klicke auf einen Schatten, um Position, Unschärfe, Ausbreitung und Farbe anzupassen. 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. 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:** * **Besitzer und Admins:** Können jedes Design-System erstellen, bearbeiten, als Standard festlegen und löschen. * **Editoren:** Können Design-Systeme erstellen und bearbeiten. Nur Besitzer und Admins können den Standard festlegen oder ein Design-System löschen. 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**. Ein Design-System als 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**. 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 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 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. Enterprise-Workspaces haben kein Limit. Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der [englischen Version](/).