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 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.
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.
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:
Klicke unten links auf deinen Workspace-Namen und dann auf Settings.
Klicke auf Design system.
Klicke auf Create. Wenn dein Workspace bereits ein Design-System hat, klicke stattdessen auf Create new design system.
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.
Klicke auf Create. Das Generieren deines Design-Systems kann einige Minuten dauern, und du kannst währenddessen gehen und zurückkommen.
Prüfe das generierte Design-System in der Vorschau und passe dann alles an, was du möchtest.
Ein Design-System aus den Materialien deiner Marke erstellen
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:
Overview
Eine kurze Beschreibung deiner Marke. Base44 nutzt sie, um alles, was es generiert, markenkonform zu halten.
Logos
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
Typography
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
Color palette
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
Tone of voice
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
Core values
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
Corner radius
Lege fest, wie abgerundet deine Komponenten aussehen.
Deine Eckenradius-Werte festlegen
Spacing scale
Justiere fein, wie viel Abstand zwischen Elementen liegt.
Deine Abstandsskala feinjustieren
Shadow
Lege fest, wie erhaben deine Komponenten aussehen. Klicke auf einen Schatten, um Position, Unschärfe, Ausbreitung und Farbe anzupassen.
Deine Schattenwerte festlegen
Design guidelines
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.
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.
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.
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.
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.
Klicke auf eine Frage unten, um mehr über Design-Systeme zu erfahren.
Brauche ich Design-Kenntnisse, um ein Design-System zu erstellen?
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.
Kann jeder Kunde oder jedes Projekt ein eigenes Design-System haben?
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.
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.
