Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.
Seite vorlesenetwa 18 Min.
Base44 bietet dir mehrere Wege, deine App zu designen: das Theme-Panel für globale Farben und Schriftarten, den Edit-Modus für elementspezifisches Styling und den KI-Chat für umfassendere Änderungen. Diese Seite behandelt das Theme-Panel und globales Styling; KI-gestützte Design-Workflows mit direkt nutzbaren Prompts findest du unter Mit KI designen.
Deine App in Base44 designen
Wie du ein konsistentes Designsystem aufbaust, mit Bildern arbeitest und Layout sowie Barrierefreiheit gestaltest, erfährst du unter Design-Grundlagen und Layout.Um eine wiederverwendbare Marke auf Workspace-Ebene festzulegen, etwa Farben, Schriftarten, Logo und Komponenten für alle deine Apps, siehe Design-System. Diese Seite behandelt Design-Änderungen innerhalb einer einzelnen App.
KI steht im Zentrum dessen, wie du in Base44 designst. Beschreibe in natürlicher Sprache, was du möchtest, und die KI aktualisiert Code, Stile und Komponenten für dich.Wie du die KI wie einen Designer briefst, Elemente im Edit-Modus anpasst, mit KI-Steuerungen Grenzen setzt und zwischen den angebotenen Design-Optionen wählst, erfährst du unter Mit KI designen.
Mit dem Theme-Panel kannst du Farben und Schriftarten für deine gesamte App von einem Ort aus festlegen. Jede Änderung, die du machst, wird sofort überall angewendet, sodass du Elemente nicht einzeln aktualisieren musst.Das Panel zeigt oben eine Vorschau deiner aktuellen Palette, gefolgt von einer Liste von Farbrollen, die du anpassen kannst, wie Hintergrund, Vordergrund, Primary, Secondary, Card und Popover. Klicke oben im Panel auf Fonts, um stattdessen die Schriftart deiner App festzulegen.
Auf das Theme deiner App zugreifen und es anpassen
Klicke auf eine beliebige Farbrolle, um sie in deiner gesamten App zu aktualisieren.So änderst du eine Farbe in deinem Theme:
Klicke oben in deinem App-Editor auf das Theme-Symbol .
Klicke auf eine beliebige Farbrolle in der Liste, um den Color-Picker zu öffnen. Die Leiste oben im Panel ist eine Vorschau deiner aktuellen Palette und ist nicht anklickbar.
Wähle deine Farbe, indem du den Picker ziehst, einen Hex-Wert eingibst, die Pipette verwendest, um eine beliebige Farbe auf dem Bildschirm zu sampeln, oder aus einer Palette über das Dropdown unten im Picker wählst.
Klicke auf Apply, um die Änderung in deiner App in der Vorschau anzuzeigen.
Klicke im Theme-Panel auf Save & Apply, um sie überall anzuwenden.
Beginne mit deiner Primärfarbe und dem Hintergrund und lass dich dann von ihnen bei deinen anderen Entscheidungen leiten. Wenn du Vorder- und Hintergrundfarben mit hohem Kontrast hältst, ist Text in allen Komponenten lesbar.
Wenn deine Theme-Farben nicht zu den aktuellen Farben deiner App passen, kannst du den KI-Chat bitten, sie zu synchronisieren. Zum Beispiel: Aktualisiere mein Theme, damit es zu den in meiner App verwendeten Farben passt.
Lege die Schriftarten deiner App im Fonts-Tab im Theme-Panel fest. Für jede Schriftart, die deine App verwendet, erscheint ein Dropdown.So änderst du deine App-Schriftarten:
Klicke oben in deinem App-Editor auf das Theme-Symbol .
Klicke auf den Tab Fonts.
Klicke auf ein Dropdown und wähle eine Schriftart. Du kannst nach Namen suchen, unter Brand Fonts und All fonts browsen oder auf Upload Fonts klicken, um eigene hinzuzufügen.
Klicke auf Save & Apply, um die Änderungen in deiner App anzuwenden.
Deine Theme-Schriftarten in deiner App ändern
Wenn du keinen Fonts-Tab siehst, sind in deiner App möglicherweise noch keine Theme-Font-Variablen eingerichtet. Bitte den KI-Chat, sie hinzuzufügen: Füge Theme-Font-Variablen zu meiner App hinzu, damit ich Schriftarten über das Theme-Panel ändern kann.
Wenn du im Edit-Modus bist, kannst du jedes einzelne Element direkt stylen. Wähle ein Element aus und verwende die Symbole in der Edit-Toolbar, um seine Farben, Typografie, Abstände, Eckenradius, Deckkraft zu ändern oder eigene Tailwind-Klassen hinzuzufügen. Die in der Toolbar verfügbaren Optionen ändern sich je nach Typ des ausgewählten Elements.Der Edit-Modus funktioniert bei den meisten Elementen mit Text, einschließlich Listeneinträgen, Tabellenzellen, Buttons und Blockzitaten. Deine Änderungen werden gespeichert und aktualisieren die Live-Vorschau sofort. Kann eine Änderung nicht auf ein Element angewendet werden, erklärt dir eine Meldung, warum.
Du kannst die Hintergrund- und Textfarbe jedes Elements mit den in deinem Theme definierten Farben oder einer benutzerdefinierten Farbe festlegen.
Die Farbe eines Elements mit den Theme-Farben bearbeiten
So änderst du die Farbe eines Elements:
Klicke oben im Editor auf Edit.
Wähle das Element aus, das du ändern möchtest.
Klicke in der Edit-Toolbar auf das Colors-Symbol .
Wähle den Teil aus, den du ändern möchtest, wie Hintergrund oder Text.
Wähle deine Farbe:
Theme: Wähle aus den in deinem Theme definierten Farbrollen, wie Hintergrund, Vordergrund, Card und Primary.
Custom: Ziehe den Picker, gib einen Hex-Wert ein, verwende die Pipette, um eine beliebige Farbe auf dem Bildschirm zu sampeln, oder wähle aus einer Palette über das Dropdown unten im Picker.
Klicke auf Apply, um die Änderung zu bestätigen.
Bei Bildelementen zeigt die Toolbar einen Replace-Button anstelle der Colors-Option. Klicke auf Replace, um das Bild auszutauschen.
Wenn du ein Textelement auswählst, zeigt die Edit-Toolbar Steuerungen für Schriftart und -größe. Ein separates Text style-Panel gibt Zugriff auf Ausrichtung, Groß-/Kleinschreibung und Dekoration.So bearbeitest du Textinhalt:
Klicke oben im Editor auf Edit.
Wähle das Textelement aus.
Klicke in der Edit-Toolbar auf das T-Symbol.
Tippe deine Änderungen in das Feld Text content.
Textinhalt im Visual Edit bearbeiten
Wenn der Textinhalt dynamisch generiert wird, zeigt das Text Content-Panel eine Nachricht, dass es nicht direkt bearbeitet werden kann. Verwende den KI-Chat, um dynamischen Text zu ändern.
So änderst du die Schriftart:
Klicke oben im Editor auf Edit.
Wähle das Textelement aus.
Klicke in der Edit-Toolbar auf das Dropdown für die Schriftart-Familie.
Suche oder browse Schriftarten und klicke auf eine, um sie anzuwenden. Fahre mit der Maus über eine Schriftart mit einem >-Pfeil, um die verfügbaren Gewichte zu sehen. Klicke dann auf ein Gewicht, um es anzuwenden.
Um eine eigene Schriftart zu verwenden, klicke unten im Dropdown auf Upload Fonts. Du kannst TTF-, OTF-, WOFF- oder WOFF2-Dateien bis 5 MB hochladen. Hochgeladene Schriftarten erscheinen im Filter unter Custom Fonts.
Auswahl der Schriftart-Familie im Visual Edit
So änderst du die Schriftgröße:
Klicke oben im Editor auf Edit.
Wähle das Textelement aus.
Klicke in der Edit-Toolbar auf das Größen-Dropdown.
Wähle eine Größe. Verfügbare Größen reichen von 12 bis 128.
Auswahl der Schriftgröße im Visual Edit
So änderst du den Textstil:
Klicke oben im Editor auf Edit.
Wähle das Textelement aus.
Klicke in der Edit-Toolbar auf das Text style-Symbol.
Passe die Einstellungen an, die du ändern möchtest:
Alignment: Links, zentriert, rechts oder Blocksatz.
Case: Keine, Großbuchstaben, Kleinbuchstaben oder Großschreibung am Wortanfang.
Decoration: Keine, unterstrichen, durchgestrichen oder kursiv.
Für Styling, das nicht von den anderen Optionen abgedeckt wird, kannst du jede beliebige Tailwind-CSS-Klasse direkt eingeben.So fügst du einem Element Tailwind-Klassen hinzu:
Klicke oben im Editor auf Edit.
Wähle das Element aus, das du ändern möchtest.
Klicke in der Edit-Toolbar auf das Tailwind classes-Symbol.
Tippe eine beliebige Tailwind-CSS-Klasse ein. shadow-lg fügt zum Beispiel einen großen Schatten hinzu und border border-gray-200 fügt einen subtilen Rahmen hinzu.
Visuelle Richtung ist der Gesamtton deiner App. Themes sind Wege, diesen Ton mit Tiefe, Farbe und Effekten auszudrücken. In Base44 kannst du dich in ein Theme hineinlehnen und deine Marke trotzdem intakt halten.
Weiche, extrudierte Elemente, die so aussehen, als wären sie in den Hintergrund gedrückt oder von ihm erhoben.Am besten für ruhige Tools mit einfachem Inhalt.Schlüsselmerkmale:
Subtile Innen- und Außenschatten
Weiche, monochromatische Paletten
Minimale Tiefe und saubere Formen
Prompt-Idee:
Gib dieser App einen weichen neumorphen Touch:- Halte die aktuelle Farbpalette- Füge subtile Schatten zu Karten und Primary-Buttons hinzu- Vermeide kontrastreiche Hintergründe- Halte den Textkontrast für Lesbarkeit hoch
Glassmorphismus
Milchige, durchscheinende Ebenen
Milchglasoberflächen mit Transparenz- und Unschärfeeffekten.Am besten für Overlays, Seitenpanels und ausgewählte Karten.Schlüsselmerkmale:
Backdrop-Unschärfe
Transparente Panels mit subtilen Rahmen
Leichte Glow- und Reflexionseffekte
Prompt-Idee:
Wende einen subtilen Glaseffekt nur auf Overlays und Seitenpanels an:- Verwende durchscheinende Oberflächen mit Unschärfe und einem dünnen Rahmen- Halte Hintergründe einfach, damit Text lesbar bleibt- Behalte starken Textkontrast auf Glasoberflächen beiWende Glaseffekte nicht auf alle Karten oder Hauptinhalte an.
Material-Stil
Erhöhte Karten und kräftige Farbe
Strukturiertes, rasterbasiertes Layout mit klarer Erhebung und kräftiger Farbe.Am besten für Dashboards, Admin-Tools und datenintensive Apps.Schlüsselmerkmale:
Klare Erhebungsebenen
Saubere Raster und Ausrichtung
Zweckmäßige Bewegung
Prompt-Idee:
Bewege diese App in Richtung eines weichen Material-Stils:- Verwende klare Kartenerhebung für Schlüsselbereiche- Bereinige Ausrichtung und Raster, damit Inhalt fluchtet- Verwende kräftige, flache Farben statt starker Gradienten- Halte Übergänge subtil und zweckmäßig
Claymorphismus
Aufgeplusterte, abgerundete Formen
Weiche, aufgequollene Elemente mit abgerundeten Formen und sanften Schatten.Am besten für verspielte Apps, Onboarding oder leichtere Erfahrungen.Schlüsselmerkmale:
Abgerundete Ecken
Pastell- oder weiche Farbpaletten
Weiche, gleichmäßige Schatten
Prompt-Idee:
Füge wichtigen Komponenten ein leichtes Clay-Gefühl hinzu:- Runde die Ecken von Karten und Primary-Buttons stärker ab- Verwende weichere Schatten unter diesen Komponenten- Halte Hintergründe neutral, damit die App lesbar bleibtWende diesen Stil nur auf interaktive Elemente an, nicht auf lange Textbereiche.
Neo-Brutalismus
Dicke Rahmen und harte Schatten
Bewusst kräftig, mit starken Farbblöcken und dicken Rahmen.Am besten für Landing-Pages und interne Tools, wo Persönlichkeit wichtiger ist als Subtilität.Schlüsselmerkmale:
Kontrastreiche Farbkombinationen
Dicke Rahmen und kräftige Formen
Rohe Typografie und einfache Raster
Prompt-Idee:
Wende ein kontrolliertes Neo-Brutalist-Gefühl auf die Marketing-Seiten an:- Verwende eine kräftige Akzentfarbe, eine dunkle und eine helle neutrale- Füge dicke Rahmen und klare Bereiche hinzu- Mache Überschriften groß und selbstbewusst- Halte Fließtext hoch lesbarWende diesen Stil nicht auf Datentabellen oder dichte Formulare an.
Helle und dunkle Themes lassen Personen wählen, was sich am besten anfühlt, und können in verschiedenen Umgebungen helfen.Du kannst den KI-Chat bitten, Theme-Unterstützung und einen Toggle hinzuzufügen.
Hellen und dunklen Modus hinzufügen
Ein Moduswechsel gestaltet die gesamte App neu, nicht nur den Hintergrund.
Dieselbe App im dunklen Modus
Prompt:
Füge Unterstützung für hellen und dunklen Modus hinzu:- Heller Modus: weiche graue Hintergründe und dunkler Text- Dunkler Modus: nahezu schwarze Hintergründe, heller Text und subtile Rahmen- Primary- und Akzentfarben sollten in beiden Modi lesbar und konsistent bleibenFüge einen Theme-Toggle im Header hinzu und merke dir die Wahl pro Besucher.
Theme-Unterstützung berührt viele Komponenten, daher kann es einige Zeit dauern, bis die KI alles verkabelt. Du kannst auch Änderungen angeben, die nur im hellen oder nur im dunklen Modus gelten sollen.
Bewegung und Feedback helfen Personen zu verstehen, was auf dem Bildschirm passiert. Du kannst sie nutzen, um Klicks reaktionsschnell wirken zu lassen, zu zeigen, dass etwas lädt, und zu erklären, was als Nächstes zu tun ist. In Base44 kann die KI diese Muster für dich hinzufügen, sodass du nicht jede Animation von Hand codieren musst.Verwende diesen Abschnitt, wenn deine App bereits funktioniert, sich aber etwas flach oder statisch anfühlt, und du sie lebendiger und beruhigender machen möchtest.
Subtile Interaktionen und Animationen hinzufügen
Mikro-Interaktionen sind kleine visuelle Reaktionen auf das, was jemand tut, zum Beispiel:
Ein Button, der beim Hover leicht wächst und heller wird.
Eine Karte, die sich anhebt, wenn du mit der Maus darüber fährst.
Ein Icon, das eine kleine Häkchen-Animation gibt, wenn etwas gespeichert wird.
Diese Effekte lassen die App reaktionsfähig wirken, ohne sie in einen Cartoon zu verwandeln.Du kannst die KI bitten, einen konsistenten Satz von Interaktionen einzuführen:
Füge subtile Interaktionen hinzu:- Lass jede Seite beim Laden mit kurzer Dauer einblenden- Lass Primary-Buttons beim Hover und Focus sanft wachsen und heller werden- Füge Karten beim Hover einen kleinen Lift-Effekt hinzuRespektiere reduzierte Bewegungs-Präferenzen und vermeide schnelles Blinken.
Für Marketing- oder Promo-Seiten kannst du einen stärkeren Ton verwenden:
Nur auf Marketing-Seiten:- Lass Hero-Bereiche beim ersten Laden von der Seite hereinrutschen- Animiere Icons, wenn eine Funktionskarte fokussiert oder gehovert wird- Halte Animationen kurz, damit sich die Seite noch schnell anfühlt
Füge Bewegung hinzu, nachdem du mit Farben, Layout und Typografie zufrieden bist. Bewegung sollte Klarheit unterstützen, nicht schwache Struktur verbergen.
Lade-, Empty- und Fehlerzustände designen
Lade-, Empty- und Fehlerzustände sind die Stellen, an denen Personen oft das Gefühl haben, festzustecken. Gutes Feedback hier kann deine App viel polierter und nachsichtiger wirken lassen.Beispiele:
Laden: Skeleton-Formen, die zum endgültigen Layout passen, statt eines generischen Spinners.
Empty: Eine freundliche Nachricht, die erklärt, was hier erscheinen wird, und ein Button zum Erstellen oder Verbinden von etwas.
Fehler: Eine kurze, menschliche Erklärung und ein klarer Weg, es erneut zu versuchen oder Hilfe zu bekommen.
Du kannst die KI bitten, diese Muster in der gesamten App zu erstellen:
Verbessere Feedback-Zustände:- Füge für jede Hauptliste und jedes Dashboard einen Skeleton-Loader hinzu, der zum Layout passt- Designe einen Empty-Zustand mit Icon, einzeiliger Erklärung und Primary-Aktion- Füge einen klaren Fehlerzustand mit kurzer Nachricht und Retry-Button hinzu, wo relevantVerwende das bestehende Farb- und Typografiesystem.
Diese Änderungen wirken sich nicht auf deine Daten oder Logik aus, sie ändern nur, wie deine App kommuniziert, wenn etwas lädt, fehlt oder schiefgegangen ist.
Wenn du schnelle Verbesserungen möchtest, können diese kurzen Rezepte dir helfen, mit wenigen Prompts viel Wert zu erzielen.
Einen flachen Prototyp poliert wirken lassen
Führe ein einfaches Farbsystem ein und wende es global an.
Definiere klare Textrollen und erhöhe die Zeilenhöhe.
Füge grundlegende Karten- und Button-Komponenten hinzu und verwende sie wieder.
Prompt:
Poliere diesen Prototyp:- Erstelle ein einfaches Farbsystem und wende es in der gesamten App an- Definiere Typografie-Rollen für Titel, Überschriften und Fließtext- Standardisiere Buttons und Karten und verwende sie konsistentHalte Inhalt und Logik gleich.
Eine überladene Tabellenseite retten
Erhöhe die Zeilenhöhe leicht und füge subtile Separatoren hinzu.
Verschiebe Aktionen in eine konsistente Spalte oder ein Menü.
Füge Filter in einer klaren oberen Leiste hinzu.
Füge Lade-, Empty- und Fehlerzustände hinzu.
Prompt:
Bereinige diese Tabellenseite:- Erhöhe die Zeilenhöhe und füge subtile Zeilenseparatoren hinzu- Verschiebe Zeilenaktionen in eine konsistente Spalte am Ende- Füge eine einfache Filterleiste über der Tabelle hinzu- Füge klare Lade-, Empty- und Fehlerzustände hinzu
Sanfter visueller Refresh ohne Änderung der Markenfarben
Passe Abstand und Hierarchie an.
Aktualisiere Karten- und Button-Formen.
Führe subtile Mikro-Interaktionen ein.
Prompt:
Gib dieser App einen sanften visuellen Refresh:- Halte Markenfarben gleich- Verbessere Abstand und Hierarchie auf jeder Seite- Runde Karten- und Button-Ecken leicht ab und mache Schatten weicher- Füge subtile Hover- und Focus-Zustände zu Primary-Aktionen hinzu
Klicke unten auf eine Frage, um mehr über das Designen deiner App zu erfahren.
Was ist Tailwind CSS und wie lese ich seine Klassennamen?
Tailwind CSS ist ein Utility-first-CSS-Framework. Statt benutzerdefinierte CSS-Regeln zu schreiben, fügst du kleine Klassennamen direkt zu deinen Elementen hinzu, um Farbe, Abstand, Typografie und Layout zu steuern. Jeder Klassenname entspricht normalerweise einer einzigen visuellen Regel, sodass du das Design aus den Klassen selbst „lesen” kannst.Gängige Beispiele, die du sehen könntest:
Farben: bg-blue-500 setzt einen blauen Hintergrund, text-white setzt weißen Text.
Abstand: p-4 fügt Padding auf allen Seiten hinzu, m-2 fügt Margin auf allen Seiten hinzu.
Typografie: font-bold macht Text fett, text-lg setzt eine größere Textgröße.
Layout: flex erstellt einen Flex-Container, grid erstellt einen Grid-Container, items-center zentriert Elemente vertikal in einer Flex- oder Grid-Reihe.
Wenn du Tailwind-Klassen in Base44 siehst, kannst du sie kombinieren, um den vollständigen Stil eines Elements zu beschreiben. bg-blue-500 text-white p-4 flex items-center gibt dir zum Beispiel eine blaue Leiste mit weißem Text, Padding und zentriertem Inhalt.Für tiefere Referenz und die vollständige Liste der Utilities siehe die offizielle Tailwind-CSS-Dokumentation.
Wie mache ich KI-Änderungen rückgängig oder stelle eine vorherige Version meines Designs wieder her?
Du kannst die Design-Versionskontrolle im KI-Chat verwenden, um Änderungen zurückzurollen.
Jeder KI-Prompt hat eine Revert-Option, die sofort alles rückgängig macht, was dieser spezifische Prompt in deiner App geändert hat.
Das Uhr-Symbol im KI-Chat öffnet die Versionshistorie. Du kannst eine frühere gespeicherte Version deiner App wählen und in einem Schritt darauf zurückrollen.
Du kannst den KI-Chat bitten, das spezifische Element zu entfernen, oder im KI-Chat auf Edit klicken und das Element auswählen, dann auf das Delete-Symbol klicken.
Ein Element im Edit-Modus löschen
Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der englischen Version.
War diese Seite hilfreich?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Base44 Support Documentation","colors":{"primary":"#FF6A00","light":"#FF8E5D","dark":"#FF6A00"},"logo":{"light":"https://mintcdn.com/base44/jhCpOaGylNweq32m/logo/new-brand-light.svg?fit=max\u0026auto=format\u0026n=jhCpOaGylNweq32m\u0026q=85\u0026s=7724705143e6cfece3b0a237be2a6890","dark":"https://mintcdn.com/base44/jhCpOaGylNweq32m/logo/new-brand-dark.svg?fit=max\u0026auto=format\u0026n=jhCpOaGylNweq32m\u0026q=85\u0026s=6c3ad8a8d1ae8299c119d554dc371843","href":"/"},"favicon":"https://mintcdn.com/base44/XkAHbvyG1CwOBCSP/images/base44-favicon.svg?fit=max\u0026auto=format\u0026n=XkAHbvyG1CwOBCSP\u0026q=85\u0026s=2a7fda75e5497e8b44f47f01bb3aa807","api":{"playground":{}},"background":{"color":{"light":"#FAF9F7","dark":"#1E1E24"}},"navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/changelog/product","label":"Changelog"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"footer":{"socials":{"twitter":"https://x.com/base44","discord":"https://discord.com/invite/ThpYPZpVts","linkedin":"https://www.linkedin.com/company/base44"}},"seo":{"metatags":{"canonical":"https://docs.base44.com","og:image":"https://docs.base44.com/images/base44-docs-og.png","og:image:width":"2400","og:image:height":"1260","twitter:image":"https://docs.base44.com/images/base44-docs-og.png","twitter:card":"summary_large_image"},"indexing":"all"},"integrations":{"mixpanel":{"projectToken":"cc6e9e106e4b833fc3a3819c11b74138"}},"contextual":{"options":["copy","view","mcp","cursor","vscode"],"display":"header"},"metadata":{"timestamp":false},"styling":{"latex":true},"navigation":{"languages":[{"language":"en","default":true,"href":""},{"language":"pt-BR","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/pt-BR/changelog/product","label":"Registro de alterações"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"pt-BR"},{"language":"es","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/es/changelog/product","label":"Registro de cambios"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"es"},{"language":"he","hidden":true,"navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/he/changelog/product","label":"יומן שינויים"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"he"},{"language":"ja","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/ja/changelog/product","label":"変更履歴"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"ja"},{"language":"de","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/de/changelog/product","label":"Änderungsprotokoll"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"de"},{"language":"fr","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/fr/changelog/product","label":"Notes de version"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"fr"},{"language":"it","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/it/changelog/product","label":"Registro modifiche"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"href":"it"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"base44","hasAudioNarration":true,"actualSubdomain":"base44","customDomains":["docs.base44.com"],"gitSource":{"type":"github","owner":"base44-dev","repo":"mintlify-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae48b0421d44d6b52dcc0a7","collectionId":"2442fe2f-3c67-45b1-9e78-e7cdd18dcb87","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae48b0421d44d6b52dcc0a7"},"feedback":{"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae48b0421d44d6b52dcc0a7","clientVersion":"0.0.4043","searchFilterCounts":[{"language":"en","tag":"Developers","count":789},{"language":"en","tag":"APIs","count":569},{"language":"en","tag":"Apps API (Beta)","count":441},{"language":"de","tag":"Entwickler","count":138},{"language":"es","tag":"Desarrolladores","count":138},{"language":"fr","tag":"Développeurs","count":138},{"language":"he","tag":"מפתחים","count":138},{"language":"it","tag":"Sviluppatori","count":138},{"language":"ja","tag":"開発者","count":138},{"language":"pt-BR","tag":"Desenvolvedores","count":138},{"language":"en","tag":"API Reference","count":115},{"language":"en","tag":"Apps","count":106},{"language":"en","tag":"Google Ads","count":90},{"language":"en","tag":"Skills","count":76},{"language":"en","tag":"Workspace API (Beta)","count":75},{"language":"de","tag":"Apps","count":74},{"language":"es","tag":"Aplicaciones","count":74},{"language":"fr","tag":"Applications","count":74},{"language":"it","tag":"App","count":74},{"language":"ja","tag":"アプリ","count":74},{"language":"pt-BR","tag":"Apps","count":74},{"language":"he","tag":"אפליקציות","count":73},{"language":"en","tag":"CLI","count":59},{"language":"de","tag":"CLI","count":59},{"language":"es","tag":"CLI","count":59},{"language":"fr","tag":"CLI","count":59},{"language":"he","tag":"CLI","count":59},{"language":"it","tag":"CLI","count":59},{"language":"ja","tag":"CLI","count":59},{"language":"pt-BR","tag":"CLI","count":59},{"language":"en","tag":"Commands","count":57},{"language":"de","tag":"Commands","count":57},{"language":"es","tag":"Commands","count":57},{"language":"fr","tag":"Commands","count":57},{"language":"he","tag":"Commands","count":57},{"language":"it","tag":"Commands","count":57},{"language":"ja","tag":"Commands","count":57},{"language":"pt-BR","tag":"Commands","count":57},{"language":"de","tag":"App erstellen","count":45},{"language":"es","tag":"Creando tu app","count":45},{"language":"fr","tag":"Créer votre app","count":45},{"language":"he","tag":"בניית האפליקציה","count":45},{"language":"it","tag":"Creare la tua app","count":45},{"language":"ja","tag":"アプリの構築","count":45},{"language":"pt-BR","tag":"Criando seu app","count":45},{"language":"de","tag":"Backend (Beta)","count":42},{"language":"es","tag":"Backend (Beta)","count":42},{"language":"fr","tag":"Backend (Beta)","count":42},{"language":"he","tag":"Backend (בטא)","count":42},{"language":"it","tag":"Backend (Beta)","count":42},{"language":"ja","tag":"バックエンド (Beta)","count":42},{"language":"pt-BR","tag":"Backend (Beta)","count":42},{"language":"de","tag":"Konto \u0026 Abrechnung","count":31},{"language":"es","tag":"Cuenta y facturación","count":31},{"language":"fr","tag":"Compte et facturation","count":31},{"language":"he","tag":"חשבון וחיוב","count":31},{"language":"it","tag":"Account e fatturazione","count":31},{"language":"ja","tag":"アカウントと請求","count":31},{"language":"pt-BR","tag":"Conta e faturamento","count":31},{"language":"de","tag":"SDKs","count":29},{"language":"es","tag":"SDKs","count":29},{"language":"fr","tag":"SDKs","count":29},{"language":"he","tag":"SDKs","count":29},{"language":"it","tag":"SDKs","count":29},{"language":"ja","tag":"SDKs","count":29},{"language":"pt-BR","tag":"SDKs","count":29},{"language":"de","tag":"App SDK","count":22},{"language":"es","tag":"App SDK","count":22},{"language":"fr","tag":"App SDK","count":22},{"language":"he","tag":"App SDK","count":22},{"language":"it","tag":"App SDK","count":22},{"language":"ja","tag":"App SDK","count":22},{"language":"pt-BR","tag":"App SDK","count":22},{"language":"de","tag":"Unternehmen","count":21},{"language":"es","tag":"Empresas","count":21},{"language":"fr","tag":"Entreprise","count":21},{"language":"he","tag":"ארגונים","count":21},{"language":"it","tag":"Aziende","count":21},{"language":"ja","tag":"エンタープライズ","count":21},{"language":"pt-BR","tag":"Empresas","count":21},{"language":"default","tag":"Developers","count":2},{"language":"default","tag":"APIs","count":2},{"language":"default","tag":"Audit Logs API","count":2},{"language":"default","tag":"API Reference","count":2},{"language":"default","tag":"audit-logs","count":2}],"searchSettings":{"showContentSnippets":true,"maxResults":10}},"assistantConfig":{"enableStarterQuestions":true},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"starterQuestions":[{"_id":"68f8934ac32e3459832881b0","deploymentId":"6792c6d6e85c02040dc386df","questionText":"Which plans come with a free domain?","status":"active","generatedBy":"manual","createdAt":"2025-10-22T08:18:18.293Z","updatedAt":"2025-10-22T08:18:18.293Z","__v":0},{"_id":"68f892c4c32e345983287064","deploymentId":"6792c6d6e85c02040dc386df","questionText":"How are credits used?","status":"active","generatedBy":"manual","createdAt":"2025-10-22T08:16:04.700Z","updatedAt":"2025-10-22T08:16:24.261Z","__v":0},{"_id":"68f892aec32e345983286ddf","deploymentId":"6792c6d6e85c02040dc386df","questionText":"How do I use Discuss mode?","status":"active","generatedBy":"manual","createdAt":"2025-10-22T08:15:42.469Z","updatedAt":"2025-10-22T08:15:42.469Z","__v":0}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","href":"/_mintlify/custom/base44/07406dc4820eb06f/custom.css"}],"page":{"pagePath":"de/Building-your-app/Design","slug":"/de/Building-your-app/Design","pageMetadata":{"title":"Deine App designen","description":"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.","sidebarTitle":"Deine App designen","href":"/de/Building-your-app/Design"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,hr:`hr`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Accordion,AccordionGroup,CodeBlock,Frame,Heading,Icon,Note,OptimizedImage,Tip}=_components;if(!Accordion)_missingMdxReference(`Accordion`,true);if(!AccordionGroup)_missingMdxReference(`AccordionGroup`,true);if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Icon)_missingMdxReference(`Icon`,true);if(!Note)_missingMdxReference(`Note`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`Base44 bietet dir mehrere Wege, deine App zu designen: das `,_jsx(_components.strong,{children:`Theme`}),`-Panel für globale Farben und Schriftarten, den `,_jsx(_components.strong,{children:`Edit`}),`-Modus für elementspezifisches Styling und den KI-Chat für umfassendere Änderungen. Diese Seite behandelt das Theme-Panel und globales Styling; KI-gestützte Design-Workflows mit direkt nutzbaren Prompts findest du unter `,_jsx(_components.a,{href:`/de/Building-your-app/Designing-with-AI`,children:`Mit KI designen`}),`.`]}),`\n`,_jsx(Frame,{caption:`Deine App in Base44 designen`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=347894cb385342baf9362d8239e9064d`,alt:`Ein Laptop auf einem Schreibtisch mit einer Reiseplaner-App im Base44-Editor, geöffneter Toolbar Edit Element und einem Theme-Panel mit den Farben Background, Foreground, Card und Popover`,className:`mint-mx-auto`,\"data-og-width\":`2144`,width:`2144`,\"data-og-height\":`1556`,height:`1556`,\"data-path\":`images/design-header.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=280\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=03f4c6f7455c8d6bd8b0899d41030892 280w, https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=560\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=f5d260007be81cc4e73f2f3f6381954a 560w, https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=840\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=f269dc3915335b69db1f680641bcfdc4 840w, https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=1100\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=9dc13ad6d062426015a3d02ddd961a4e 1100w, https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=1650\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=3d3756ff8721e75aa29df54608946a29 1650w, https://mintcdn.com/base44/hMpHBLjDNnlOV5Jh/images/design-header.png?w=2500\u0026fit=max\u0026auto=format\u0026n=hMpHBLjDNnlOV5Jh\u0026q=85\u0026s=665681eee1341c21acd4ca40eeef5814 2500w`})}),`\n`,_jsxs(_components.p,{children:[`Wie du ein konsistentes Designsystem aufbaust, mit Bildern arbeitest und Layout sowie Barrierefreiheit gestaltest, erfährst du unter `,_jsx(_components.a,{href:`/de/Building-your-app/Design-foundations-and-layout`,children:`Design-Grundlagen und Layout`}),`.`]}),`\n`,_jsxs(_components.p,{children:[`Um eine wiederverwendbare Marke auf Workspace-Ebene festzulegen, etwa Farben, Schriftarten, Logo und Komponenten für alle deine Apps, siehe `,_jsx(_components.a,{href:`/de/Building-your-app/Design-system`,children:`Design-System`}),`. Diese Seite behandelt Design-Änderungen innerhalb einer einzelnen App.`]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`mit-ki-am-design-arbeiten`,children:`Mit KI am Design arbeiten`}),`\n`,_jsx(_components.p,{children:`KI steht im Zentrum dessen, wie du in Base44 designst. Beschreibe in natürlicher Sprache, was du möchtest, und die KI aktualisiert Code, Stile und Komponenten für dich.`}),`\n`,_jsxs(_components.p,{children:[`Wie du die KI wie einen Designer briefst, Elemente im `,_jsx(_components.strong,{children:`Edit`}),`-Modus anpasst, mit KI-Steuerungen Grenzen setzt und zwischen den angebotenen Design-Optionen wählst, erfährst du unter `,_jsx(_components.a,{href:`/de/Building-your-app/Designing-with-AI`,children:`Mit KI designen`}),`.`]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`globale-änderungen`,children:`Globale Änderungen`}),`\n`,_jsxs(_components.p,{children:[`Mit dem `,_jsx(_components.strong,{children:`Theme`}),`-Panel kannst du Farben und Schriftarten für deine gesamte App von einem Ort aus festlegen. Jede Änderung, die du machst, wird sofort überall angewendet, sodass du Elemente nicht einzeln aktualisieren musst.`]}),`\n`,_jsxs(_components.p,{children:[`Das Panel zeigt oben eine Vorschau deiner aktuellen Palette, gefolgt von einer Liste von Farbrollen, die du anpassen kannst, wie Hintergrund, Vordergrund, Primary, Secondary, Card und Popover. Klicke oben im Panel auf `,_jsx(_components.strong,{children:`Fonts`}),`, um stattdessen die Schriftart deiner App festzulegen.`]}),`\n`,_jsx(Frame,{caption:`Auf das Theme deiner App zugreifen und es anpassen`,children:_jsx(OptimizedImage,{alt:`Das über das Paletten-Symbol in der oberen Editor-Leiste geöffnete Theme-Panel mit den Tabs Colors und Fonts, einer Liste von Theme-Farben und einem geöffneten Farbwähler für die Vordergrundfarbe`,className:`mint-mx-auto`,style:{width:`55%`},src:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=b2fd2fec927d9a16526ab2d20d61c109`,\"data-og-width\":`582`,width:`582`,\"data-og-height\":`762`,height:`762`,\"data-path\":`images/colors-1.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=280\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=7f07399461a0563d8e9bdf2738cfefed 280w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=560\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=608cf552f0f4ed15279403455d534eaf 560w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=840\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=ea9087fffacffe5742725a6c1fd5aabb 840w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=1100\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=99d48d34779435fe3c74ee1d99226fbf 1100w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=1650\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=cc1912cbef7a5676871cab2465eecc09 1650w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/colors-1.png?w=2500\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=7ae51f5832d5dc6867309e1945f31d2a 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`theme-farben`,children:`Theme-Farben`}),`\n`,_jsx(_components.p,{children:`Klicke auf eine beliebige Farbrolle, um sie in deiner gesamten App zu aktualisieren.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du eine Farbe in deinem Theme:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben in deinem App-Editor auf das `,_jsx(_components.strong,{children:`Theme`}),`-Symbol `,_jsx(Icon,{icon:`palette`}),`.`]}),`\n`,_jsx(_components.li,{children:`Klicke auf eine beliebige Farbrolle in der Liste, um den Color-Picker zu öffnen. Die Leiste oben im Panel ist eine Vorschau deiner aktuellen Palette und ist nicht anklickbar.`}),`\n`,_jsx(_components.li,{children:`Wähle deine Farbe, indem du den Picker ziehst, einen Hex-Wert eingibst, die Pipette verwendest, um eine beliebige Farbe auf dem Bildschirm zu sampeln, oder aus einer Palette über das Dropdown unten im Picker wählst.`}),`\n`,_jsxs(_components.li,{children:[`Klicke auf `,_jsx(_components.strong,{children:`Apply`}),`, um die Änderung in deiner App in der Vorschau anzuzeigen.`]}),`\n`,_jsxs(_components.li,{children:[`Klicke im `,_jsx(_components.strong,{children:`Theme`}),`-Panel auf `,_jsx(_components.strong,{children:`Save \u0026 Apply`}),`, um sie überall anzuwenden.`]}),`\n`]}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`Beginne mit deiner Primärfarbe und dem Hintergrund und lass dich dann von ihnen bei deinen anderen Entscheidungen leiten. Wenn du Vorder- und Hintergrundfarben mit hohem Kontrast hältst, ist Text in allen Komponenten lesbar.`})}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`Wenn deine Theme-Farben nicht zu den aktuellen Farben deiner App passen, kannst du den KI-Chat bitten, sie zu synchronisieren. Zum Beispiel: `,_jsx(_components.code,{children:`Aktualisiere mein Theme, damit es zu den in meiner App verwendeten Farben passt`}),`.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`schriftarten`,children:`Schriftarten`}),`\n`,_jsxs(_components.p,{children:[`Lege die Schriftarten deiner App im `,_jsx(_components.strong,{children:`Fonts`}),`-Tab im `,_jsx(_components.strong,{children:`Theme`}),`-Panel fest. Für jede Schriftart, die deine App verwendet, erscheint ein Dropdown.`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du deine App-Schriftarten:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben in deinem App-Editor auf das `,_jsx(_components.strong,{children:`Theme`}),`-Symbol `,_jsx(Icon,{icon:`palette`}),`.`]}),`\n`,_jsxs(_components.li,{children:[`Klicke auf den Tab `,_jsx(_components.strong,{children:`Fonts`}),`.`]}),`\n`,_jsxs(_components.li,{children:[`Klicke auf ein Dropdown und wähle eine Schriftart. Du kannst nach Namen suchen, unter `,_jsx(_components.strong,{children:`Brand Fonts`}),` und `,_jsx(_components.strong,{children:`All fonts`}),` browsen oder auf `,_jsx(_components.strong,{children:`Upload Fonts`}),` klicken, um eigene hinzuzufügen.`]}),`\n`,_jsxs(_components.li,{children:[`Klicke auf `,_jsx(_components.strong,{children:`Save \u0026 Apply`}),`, um die Änderungen in deiner App anzuwenden.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`Deine Theme-Schriftarten in deiner App ändern`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=1448a2f737bfe34ce7d555b0ed8f93d6`,alt:`Der Fonts-Tab im Theme-Panel mit geöffnetem Schriftart-Dropdown, das Brand Fonts über All fonts auflistet`,className:`mint-mx-auto`,style:{width:`73%`},\"data-og-width\":`609`,width:`609`,\"data-og-height\":`759`,height:`759`,\"data-path\":`images/fonts.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=280\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=90462720579c04c14c98c1912eb424fd 280w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=560\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=467401ab05fbf042aea5b35293e29658 560w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=840\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=6817cb39b6f413f5ca8da37d41dfa609 840w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=1100\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=37df4560cb1b654f0be920329e2206f1 1100w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=1650\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=d340f810b57ae849942f062cb3657f24 1650w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/fonts.png?w=2500\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=c9b5fa388056f63592625c27f636f224 2500w`})}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Wenn du keinen `,_jsx(_components.strong,{children:`Fonts`}),`-Tab siehst, sind in deiner App möglicherweise noch keine Theme-Font-Variablen eingerichtet. Bitte den KI-Chat, sie hinzuzufügen: `,_jsx(_components.code,{children:`Füge Theme-Font-Variablen zu meiner App hinzu, damit ich Schriftarten über das Theme-Panel ändern kann`}),`.`]})}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`element-änderungen`,children:`Element-Änderungen`}),`\n`,_jsxs(_components.p,{children:[`Wenn du im `,_jsx(_components.strong,{children:`Edit`}),`-Modus bist, kannst du jedes einzelne Element direkt stylen. Wähle ein Element aus und verwende die Symbole in der Edit-Toolbar, um seine Farben, Typografie, Abstände, Eckenradius, Deckkraft zu ändern oder eigene Tailwind-Klassen hinzuzufügen. Die in der Toolbar verfügbaren Optionen ändern sich je nach Typ des ausgewählten Elements.`]}),`\n`,_jsx(_components.p,{children:`Der Edit-Modus funktioniert bei den meisten Elementen mit Text, einschließlich Listeneinträgen, Tabellenzellen, Buttons und Blockzitaten. Deine Änderungen werden gespeichert und aktualisieren die Live-Vorschau sofort. Kann eine Änderung nicht auf ein Element angewendet werden, erklärt dir eine Meldung, warum.`}),`\n`,_jsx(Frame,{caption:`Die Toolbar Edit Element`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=9077deeb358626cfa8adfed6bec2ffda`,alt:`Ein ausgewählter, in der Vorschau hervorgehobener Absatz mit der Toolbar Edit Element darunter`,className:`mint-mx-auto`,style:{width:`79%`},\"data-og-width\":`1444`,width:`1444`,\"data-og-height\":`412`,height:`412`,\"data-path\":`images/visualedittoolbar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=280\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=39fa96afb4875d30a86ba3604a361c1a 280w, https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=560\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=6a94099385a508020849e07343d6e431 560w, https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=840\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=9afbbbba1e8eda1195fb3c101cb60fcf 840w, https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=1849e95cdcc04892229723c01aaac9c6 1100w, https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=c9a612ea21283d00fedce15b33c0dec8 1650w, https://mintcdn.com/base44/vTdb6SJP8P5_Enbe/images/visualedittoolbar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=vTdb6SJP8P5_Enbe\u0026q=85\u0026s=be394db59335fbac8f7d7cffe9b070ea 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`farben`,children:`Farben`}),`\n`,_jsx(_components.p,{children:`Du kannst die Hintergrund- und Textfarbe jedes Elements mit den in deinem Theme definierten Farben oder einer benutzerdefinierten Farbe festlegen.`}),`\n`,_jsx(Frame,{caption:`Die Farbe eines Elements mit den Theme-Farben bearbeiten`,children:_jsx(OptimizedImage,{alt:`Toolbar Edit Element mit hervorgehobener Farbsteuerung und geöffnetem Theme-Tab`,className:`mint-mx-auto`,style:{width:`79%`},src:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=e6a36e1e1798ec11f4e50df0fbc8ad1b`,\"data-og-width\":`526`,width:`526`,\"data-og-height\":`518`,height:`518`,\"data-path\":`images/edit-colors.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=280\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=331c025d40fef2b10afdcdf4c2f8c930 280w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=560\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=23d690caba15f8603f43fe0166f54159 560w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=840\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=966b4e4a874d4d6aaed378d0a5692e39 840w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=1100\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=1b67b45e105f9faad42ae6c5be8339e5 1100w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=1650\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=46dd1334cc4ca0a16cba63236cca0457 1650w, https://mintcdn.com/base44/pAFWBQCWAPokLVbp/images/edit-colors.png?w=2500\u0026fit=max\u0026auto=format\u0026n=pAFWBQCWAPokLVbp\u0026q=85\u0026s=14a524d1dab1ffdb19fff35270574bf3 2500w`})}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du die Farbe eines Elements:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Element aus, das du ändern möchtest.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Colors`}),`-Symbol `,_jsx(Icon,{icon:`fill-drip`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle den Teil aus, den du ändern möchtest, wie Hintergrund oder Text.`}),`\n`,_jsxs(_components.li,{children:[`Wähle deine Farbe:`,`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Theme:`}),` Wähle aus den in deinem Theme definierten Farbrollen, wie Hintergrund, Vordergrund, Card und Primary.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Custom:`}),` Ziehe den Picker, gib einen Hex-Wert ein, verwende die Pipette, um eine beliebige Farbe auf dem Bildschirm zu sampeln, oder wähle aus einer Palette über das Dropdown unten im Picker.`]}),`\n`]}),`\n`]}),`\n`,_jsxs(_components.li,{children:[`Klicke auf `,_jsx(_components.strong,{children:`Apply`}),`, um die Änderung zu bestätigen.`]}),`\n`]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`Bei Bildelementen zeigt die Toolbar einen `,_jsx(_components.strong,{children:`Replace`}),`-Button anstelle der Colors-Option. Klicke auf `,_jsx(_components.strong,{children:`Replace`}),`, um das Bild auszutauschen.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`typografie`,children:`Typografie`}),`\n`,_jsxs(_components.p,{children:[`Wenn du ein Textelement auswählst, zeigt die Edit-Toolbar Steuerungen für Schriftart und -größe. Ein separates `,_jsx(_components.strong,{children:`Text style`}),`-Panel gibt Zugriff auf Ausrichtung, Groß-/Kleinschreibung und Dekoration.`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So bearbeitest du Textinhalt:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Textelement aus.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`T`}),`-Symbol.`]}),`\n`,_jsxs(_components.li,{children:[`Tippe deine Änderungen in das Feld `,_jsx(_components.strong,{children:`Text content`}),`.`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`Textinhalt im Visual Edit bearbeiten`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=362bb98d06bb0d057f811cc7ba4aab92`,alt:`Eine ausgewählte Überschrift im Visual Edit mit geöffnetem Textinhalt-Dropdown, das My Travel Map in einem bearbeitbaren Feld zeigt`,className:`mint-mx-auto`,style:{width:`60%`},\"data-og-width\":`736`,width:`736`,\"data-og-height\":`268`,height:`268`,\"data-path\":`images/textcontent.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=280\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=62b0e6b567787cd60d413c774cf3adc3 280w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=560\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=0b5b5f4b956e9bf7f0a43baa095f9a41 560w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=840\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=ae1a1495a82ac9b23648c7ef22d3fe65 840w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=01b4a3e4bd9ca6cd4e90064bfb3846fe 1100w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=67476057a458db7c84f3f682f393fac9 1650w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textcontent.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=11a23bc0f28bf8215579436bf7d529dd 2500w`})}),`\n`,_jsx(Note,{children:_jsx(_components.p,{children:`Wenn der Textinhalt dynamisch generiert wird, zeigt das Text Content-Panel eine Nachricht, dass es nicht direkt bearbeitet werden kann. Verwende den KI-Chat, um dynamischen Text zu ändern.`})}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du die Schriftart:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Textelement aus.`}),`\n`,_jsx(_components.li,{children:`Klicke in der Edit-Toolbar auf das Dropdown für die Schriftart-Familie.`}),`\n`,_jsxs(_components.li,{children:[`Suche oder browse Schriftarten und klicke auf eine, um sie anzuwenden. Fahre mit der Maus über eine Schriftart mit einem `,_jsx(_components.strong,{children:`>`}),`-Pfeil, um die verfügbaren Gewichte zu sehen. Klicke dann auf ein Gewicht, um es anzuwenden.`]}),`\n`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Um eine eigene Schriftart zu verwenden, klicke unten im Dropdown auf `,_jsx(_components.strong,{children:`Upload Fonts`}),`. Du kannst TTF-, OTF-, WOFF- oder WOFF2-Dateien bis 5 MB hochladen. Hochgeladene Schriftarten erscheinen im Filter unter `,_jsx(_components.strong,{children:`Custom Fonts`}),`.`]})}),`\n`,_jsx(Frame,{caption:`Auswahl der Schriftart-Familie im Visual Edit`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=93011ad74aa525bd68ac434515839711`,alt:`Die geöffnete Auswahl der Schriftart-Familie im Visual Edit mit Suchfeld, einem Filter All fonts, einer Liste von Schriftnamen und einem Gewichts-Untermenü für Archivo von Light bis Bold`,className:`mint-mx-auto`,style:{width:`60%`},\"data-og-width\":`734`,width:`734`,\"data-og-height\":`478`,height:`478`,\"data-path\":`images/fontdropdown.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=280\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=b8a7bf0917893e3ce244396717ed6289 280w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=560\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=94d37047f8180e97c9fde5945a950612 560w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=840\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=3faf0bcb01b41d76e57959ac427c5e83 840w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=e0a116a0ca012fb7da29be6f49d18f52 1100w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=1f8d96888e057c99ccc3c2728757633e 1650w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontdropdown.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=151f90dc9cd078a2d3f085aadc6399d1 2500w`})}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du die Schriftgröße:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Textelement aus.`}),`\n`,_jsx(_components.li,{children:`Klicke in der Edit-Toolbar auf das Größen-Dropdown.`}),`\n`,_jsx(_components.li,{children:`Wähle eine Größe. Verfügbare Größen reichen von 12 bis 128.`}),`\n`]}),`\n`,_jsx(Frame,{caption:`Auswahl der Schriftgröße im Visual Edit`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=3b8b737c35b713aa0bee0a0014de2695`,alt:`Die geöffnete Auswahl der Schriftgröße im Visual Edit mit Größen von 12 bis 128, 30 ausgewählt`,className:`mint-mx-auto`,style:{width:`60%`},\"data-og-width\":`740`,width:`740`,\"data-og-height\":`555`,height:`555`,\"data-path\":`images/fontsize.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=280\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=e1d93be7338d33092ae746ebade91fde 280w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=560\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=7f4f6351ffcb764187235a901a44dca3 560w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=840\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=d6916420c4dbaa1db32ffbe39bf8f22d 840w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=ec3b6976b84f7a931c633c0f60454d45 1100w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=6a30ea5dc2e8a9e2f5a7789dfcac2869 1650w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/fontsize.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=168468c610644d05d28d330a78ee7109 2500w`})}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du den Textstil:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Textelement aus.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Text style`}),`-Symbol.`]}),`\n`,_jsxs(_components.li,{children:[`Passe die Einstellungen an, die du ändern möchtest:`,`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Alignment:`}),` Links, zentriert, rechts oder Blocksatz.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Case:`}),` Keine, Großbuchstaben, Kleinbuchstaben oder Großschreibung am Wortanfang.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Decoration:`}),` Keine, unterstrichen, durchgestrichen oder kursiv.`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,_jsx(Frame,{caption:`Panel Text style im Visual Edit`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=b55902986f48ac263de8760ce30feab0`,alt:`Das Panel Text style im Visual Edit mit Zeilen von Umschalt-Buttons für Alignment, Case und Decoration`,className:`mint-mx-auto`,style:{width:`60%`},\"data-og-width\":`766`,width:`766`,\"data-og-height\":`453`,height:`453`,\"data-path\":`images/textstyle.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=280\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=b7188e26d74b4a003372fc479aac5786 280w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=560\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=db70099a3e023d918ae18fba0ed3638e 560w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=840\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=d55ad0d8f4cc1f2a29b1a143a3e4e0c4 840w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=0752535bb35c3329f5d9df7072f42c63 1100w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=ea5863b813145270d79db12cebc2ddc4 1650w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textstyle.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=57014288e87f9a6ba5948b51044c0e2f 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`abstand`,children:`Abstand`}),`\n`,_jsx(_components.p,{children:`Du kannst Margin und Padding für jedes Element in px festlegen und jede Seite unabhängig steuern.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du den Abstand eines Elements:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Element aus, das du ändern möchtest.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Spacing`}),`-Symbol `,_jsx(Icon,{icon:`distribute-spacing-horizontal`}),`.`]}),`\n`,_jsx(_components.li,{children:`Gib Werte in px für Margin und Padding ein. Verwende die horizontalen und vertikalen Kurzsteuerungen, um beide Seiten gleichzeitig festzulegen.`}),`\n`]}),`\n`,_jsx(Frame,{caption:`Abstandssteuerung im Visual Edit`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=1d62adc3b5c213f077bb525c025cefc1`,alt:`Das Abstands-Dropdown im Visual Edit mit den Feldern Margin und Padding auf 0 und Steuerungen für einzelne Seiten`,className:`mint-mx-auto`,style:{width:`60%`},\"data-og-width\":`837`,width:`837`,\"data-og-height\":`329`,height:`329`,\"data-path\":`images/textspacing.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=280\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=7240f9f76d846e9e34b0d97e92e46d14 280w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=560\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=b8c62f7f4f9983c8f6ec358b3fd331dd 560w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=840\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=bee5afd8d6ee3226b35de843a291d1c7 840w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=2fce7ccb4fb219bc95ea4025824c6128 1100w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=1600b87519a8b73c5d5c3afab70dc94c 1650w, https://mintcdn.com/base44/ExIwT--EHzjWVTel/images/textspacing.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ExIwT--EHzjWVTel\u0026q=85\u0026s=1cd9c73e2770b335cedd08e01a038435 2500w`})}),`\n`,_jsx(Heading,{level:`3`,id:`eckenradius`,children:`Eckenradius`}),`\n`,_jsx(_components.p,{children:`Du kannst die Ecken eines beliebigen Elements abrunden, indem du einen Wert in px eingibst.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du den Eckenradius eines Elements:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Element aus, das du ändern möchtest.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Corners`}),`-Symbol.`]}),`\n`,_jsx(_components.li,{children:`Gib einen Wert in px ein oder verwende die Pfeile, um ihn anzupassen.`}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`deckkraft`,children:`Deckkraft`}),`\n`,_jsx(_components.p,{children:`Du kannst jedes Element vollständig deckend, halbtransparent oder irgendwo dazwischen machen.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So änderst du die Deckkraft eines Elements:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Element aus, das du ändern möchtest.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Opacity`}),`-Symbol.`]}),`\n`,_jsx(_components.li,{children:`Ziehe den Schieberegler oder gib einen Wert von 0 (vollständig transparent) bis 100 (vollständig deckend) ein.`}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`tailwind-klassen`,children:`Tailwind-Klassen`}),`\n`,_jsx(_components.p,{children:`Für Styling, das nicht von den anderen Optionen abgedeckt wird, kannst du jede beliebige Tailwind-CSS-Klasse direkt eingeben.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`So fügst du einem Element Tailwind-Klassen hinzu:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Klicke oben im Editor auf `,_jsx(_components.strong,{children:`Edit`}),`.`]}),`\n`,_jsx(_components.li,{children:`Wähle das Element aus, das du ändern möchtest.`}),`\n`,_jsxs(_components.li,{children:[`Klicke in der Edit-Toolbar auf das `,_jsx(_components.strong,{children:`Tailwind classes`}),`-Symbol.`]}),`\n`,_jsxs(_components.li,{children:[`Tippe eine beliebige Tailwind-CSS-Klasse ein. `,_jsx(_components.code,{children:`shadow-lg`}),` fügt zum Beispiel einen großen Schatten hinzu und `,_jsx(_components.code,{children:`border border-gray-200`}),` fügt einen subtilen Rahmen hinzu.`]}),`\n`]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`themes-und-modi`,children:`Themes und Modi`}),`\n`,_jsx(_components.p,{children:`Visuelle Richtung ist der Gesamtton deiner App. Themes sind Wege, diesen Ton mit Tiefe, Farbe und Effekten auszudrücken. In Base44 kannst du dich in ein Theme hineinlehnen und deine Marke trotzdem intakt halten.`}),`\n`,_jsx(Heading,{level:`3`,id:`design-themes`,children:`Design-Themes`}),`\n`,_jsxs(AccordionGroup,{children:[_jsxs(Accordion,{title:`Neumorphismus`,id:`neumorphismus`,children:[_jsx(Frame,{caption:`Weiche Schatten, vom Hintergrund erhoben`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=12465340464f5d3523751bfb52df493c`,alt:`Ein Neumorphismus-Beispiel: eine Karte in sanftem Grau mit Überschrift, Fließtext, einem Button und einem Lautstärkeregler, alle durch weiche Schatten vom Hintergrund erhoben`,className:`mint-mx-auto`,style:{width:`84%`},\"data-og-width\":`722`,width:`722`,\"data-og-height\":`533`,height:`533`,\"data-path\":`images/neumorphism.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=280\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=de44f5b47e3dfb3556cb3c41c131c6bf 280w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=560\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=07441d43ed6db70685019e3e78ac843d 560w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=840\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=2006a6067a897565c204c5a12be8f940 840w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=da3df9e1511de459af5e03fb56c9119e 1100w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=6987883f40108519ad2844ef2fedab80 1650w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neumorphism.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=a9974ad417480ce88644611a2317f38a 2500w`})}),_jsx(_components.p,{children:`Weiche, extrudierte Elemente, die so aussehen, als wären sie in den Hintergrund gedrückt oder von ihm erhoben.`}),_jsx(_components.p,{children:`Am besten für ruhige Tools mit einfachem Inhalt.`}),_jsx(_components.p,{children:`Schlüsselmerkmale:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Subtile Innen- und Außenschatten`}),`\n`,_jsx(_components.li,{children:`Weiche, monochromatische Paletten`}),`\n`,_jsx(_components.li,{children:`Minimale Tiefe und saubere Formen`}),`\n`]}),_jsx(_components.p,{children:`Prompt-Idee:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Gib dieser App einen weichen neumorphen Touch:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte die aktuelle Farbpalette`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge subtile Schatten zu Karten und Primary-Buttons hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Vermeide kontrastreiche Hintergründe`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte den Textkontrast für Lesbarkeit hoch`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Glassmorphismus`,id:`glassmorphismus`,children:[_jsx(Frame,{caption:`Milchige, durchscheinende Ebenen`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=88bf09c2cfdbcb8b7fe8365eb9343c34`,alt:`Ein Glassmorphismus-Beispiel: eine milchige, durchscheinende Karte über einem Lila-Rot-Verlauf mit einem Button See Through und 3 geschichteten Chips`,className:`mint-mx-auto`,style:{width:`80%`},\"data-og-width\":`724`,width:`724`,\"data-og-height\":`535`,height:`535`,\"data-path\":`images/Glassmorphism.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=280\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=d4a991d3a4e8d8fa3245ae449efd1179 280w, https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=560\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=0d69d31f8a7deda02d0edb9ad183d1f0 560w, https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=840\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=3bdd5f6b4d12db290beeede529bead89 840w, https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=1100\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=151faefe3451d715a55efd376d004707 1100w, https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=1650\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=36ee1a76179c4c836d6c26a4267a691f 1650w, https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/Glassmorphism.png?w=2500\u0026fit=max\u0026auto=format\u0026n=UsrMcs9B3MEl2R91\u0026q=85\u0026s=2d8da09e04a1e7ed998820c0a6e2c6c1 2500w`})}),_jsx(_components.p,{children:`Milchglasoberflächen mit Transparenz- und Unschärfeeffekten.`}),_jsx(_components.p,{children:`Am besten für Overlays, Seitenpanels und ausgewählte Karten.`}),_jsx(_components.p,{children:`Schlüsselmerkmale:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Backdrop-Unschärfe`}),`\n`,_jsx(_components.li,{children:`Transparente Panels mit subtilen Rahmen`}),`\n`,_jsx(_components.li,{children:`Leichte Glow- und Reflexionseffekte`}),`\n`]}),_jsx(_components.p,{children:`Prompt-Idee:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Wende einen subtilen Glaseffekt nur auf Overlays und Seitenpanels an:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verwende durchscheinende Oberflächen mit Unschärfe und einem dünnen Rahmen`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Hintergründe einfach, damit Text lesbar bleibt`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Behalte starken Textkontrast auf Glasoberflächen bei`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Wende Glaseffekte nicht auf alle Karten oder Hauptinhalte an.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Material-Stil`,id:`material-stil`,children:[_jsx(Frame,{caption:`Erhöhte Karten und kräftige Farbe`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=cb6a97125b9adcc85b6b9cfcdb5da55f`,alt:`Ein Material-Design-Beispiel: eine weiße, erhöhte Karte mit einem blauen Button ELEVATE, einem roten Kartenblock und einem Schalter`,className:`mint-mx-auto`,style:{width:`82%`},\"data-og-width\":`732`,width:`732`,\"data-og-height\":`500`,height:`500`,\"data-path\":`images/materialdesign.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=280\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=3a70f5f7b2bb8ffc44fb420c4a670d67 280w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=560\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=7c274c1e5c03888618f91c7849ec296c 560w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=840\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=2f4d4d46b900a79f09abee1c2a02127b 840w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=829cfb9bc1e75b616c372f3245276213 1100w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=df202787d19fc8793aaee05a3f9e19dc 1650w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/materialdesign.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=72c76f209efa4284a7f9aa5aab8366d7 2500w`})}),_jsx(_components.p,{children:`Strukturiertes, rasterbasiertes Layout mit klarer Erhebung und kräftiger Farbe.`}),_jsx(_components.p,{children:`Am besten für Dashboards, Admin-Tools und datenintensive Apps.`}),_jsx(_components.p,{children:`Schlüsselmerkmale:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Klare Erhebungsebenen`}),`\n`,_jsx(_components.li,{children:`Saubere Raster und Ausrichtung`}),`\n`,_jsx(_components.li,{children:`Zweckmäßige Bewegung`}),`\n`]}),_jsx(_components.p,{children:`Prompt-Idee:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Bewege diese App in Richtung eines weichen Material-Stils:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verwende klare Kartenerhebung für Schlüsselbereiche`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Bereinige Ausrichtung und Raster, damit Inhalt fluchtet`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verwende kräftige, flache Farben statt starker Gradienten`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Übergänge subtil und zweckmäßig`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Claymorphismus`,id:`claymorphismus`,children:[_jsx(Frame,{caption:`Aufgeplusterte, abgerundete Formen`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=b477fd268298ef9b13af3464bda5861f`,alt:`Ein Claymorphismus-Beispiel: eine hellblaue, aufgeplusterte Karte auf fliederfarbenem Hintergrund mit einem Button Squish Me und 3 Pastell-Pillen mit Soft, Puffy und Playful`,className:`mint-mx-auto`,style:{width:`79%`},\"data-og-width\":`726`,width:`726`,\"data-og-height\":`502`,height:`502`,\"data-path\":`images/claymorphism.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=280\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=817e913db386883ede2bf749fc9f1273 280w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=560\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=0be41b964f485d9d7ada3eebff8d3419 560w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=840\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=c4c3734348d68211f4eb5390d0da61bc 840w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=1100\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=3620c390d5ab622525ed93576baf86d7 1100w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=1650\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=a59fe328e2109bf49c5745a5478ae23d 1650w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/claymorphism.png?w=2500\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=04df749b869ab9f99fda8b3044a15db7 2500w`})}),_jsx(_components.p,{children:`Weiche, aufgequollene Elemente mit abgerundeten Formen und sanften Schatten.`}),_jsx(_components.p,{children:`Am besten für verspielte Apps, Onboarding oder leichtere Erfahrungen.`}),_jsx(_components.p,{children:`Schlüsselmerkmale:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Abgerundete Ecken`}),`\n`,_jsx(_components.li,{children:`Pastell- oder weiche Farbpaletten`}),`\n`,_jsx(_components.li,{children:`Weiche, gleichmäßige Schatten`}),`\n`]}),_jsx(_components.p,{children:`Prompt-Idee:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Füge wichtigen Komponenten ein leichtes Clay-Gefühl hinzu:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Runde die Ecken von Karten und Primary-Buttons stärker ab`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verwende weichere Schatten unter diesen Komponenten`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Hintergründe neutral, damit die App lesbar bleibt`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Wende diesen Stil nur auf interaktive Elemente an, nicht auf lange Textbereiche.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Neo-Brutalismus`,id:`neo-brutalismus`,children:[_jsx(Frame,{caption:`Dicke Rahmen und harte Schatten`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=08596e7bfd3b0af3720255dfdbb4f26f`,alt:`Ein Neo-Brutalismus-Beispiel: eine gekippte gelbe Karte mit dicken schwarzen Rahmen, einem roten Button CLICK ME und 3 farbigen Tags`,className:`mint-mx-auto`,style:{width:`84%`},\"data-og-width\":`727`,width:`727`,\"data-og-height\":`497`,height:`497`,\"data-path\":`images/neobrutalism.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=280\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=a01f66fac26d2410d1f6f07695cdf26c 280w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=560\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=4b5567cbead2a10125a3390d6f3cba61 560w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=840\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=55a9ab69f329a3a622945f5b2bad0980 840w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=adce873025950a6d55000421849fc412 1100w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=7ae205954ee86bbd38d994b62055b199 1650w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/neobrutalism.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=e12851ccc4fc0f21f362cababd557222 2500w`})}),_jsx(_components.p,{children:`Bewusst kräftig, mit starken Farbblöcken und dicken Rahmen.`}),_jsx(_components.p,{children:`Am besten für Landing-Pages und interne Tools, wo Persönlichkeit wichtiger ist als Subtilität.`}),_jsx(_components.p,{children:`Schlüsselmerkmale:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Kontrastreiche Farbkombinationen`}),`\n`,_jsx(_components.li,{children:`Dicke Rahmen und kräftige Formen`}),`\n`,_jsx(_components.li,{children:`Rohe Typografie und einfache Raster`}),`\n`]}),_jsx(_components.p,{children:`Prompt-Idee:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`7`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`7`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Wende ein kontrolliertes Neo-Brutalist-Gefühl auf die Marketing-Seiten an:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verwende eine kräftige Akzentfarbe, eine dunkle und eine helle neutrale`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge dicke Rahmen und klare Bereiche hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Mache Überschriften groß und selbstbewusst`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Fließtext hoch lesbar`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Wende diesen Stil nicht auf Datentabellen oder dichte Formulare an.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`helle-und-dunkle-themes`,children:`Helle und dunkle Themes`}),`\n`,_jsx(_components.p,{children:`Helle und dunkle Themes lassen Personen wählen, was sich am besten anfühlt, und können in verschiedenen Umgebungen helfen.`}),`\n`,_jsx(_components.p,{children:`Du kannst den KI-Chat bitten, Theme-Unterstützung und einen Toggle hinzuzufügen.`}),`\n`,_jsx(Frame,{caption:`Hellen und dunklen Modus hinzufügen`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=4bbd2b6a6d92e4550526ff4668ae290c`,alt:`Der KI-Chat bestätigt die Unterstützung für hellen und dunklen Modus, mit hervorgehobenem Dark-Mode-Schalter in der Seitenleiste und Mond-Symbol im Header`,className:`mint-mx-auto`,\"data-og-width\":`1845`,width:`1845`,\"data-og-height\":`939`,height:`939`,\"data-path\":`images/lightmodedarkmode.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=280\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=7a761793a14eaed4d8264139e29eab62 280w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=560\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=d43d0ae96bbbf0443dea06f7495c5be2 560w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=840\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=08f078e5cb10d128d94d3042dcaf571d 840w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=1100\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=8b708fd7398e5473d4d7f4808ae4942d 1100w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=1650\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=4d00eb4186d1543bee986dec6bb2cb26 1650w, https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/lightmodedarkmode.png?w=2500\u0026fit=max\u0026auto=format\u0026n=-Vklow6W-uVvNnvR\u0026q=85\u0026s=86cdc73623f432e214cccfc86921c882 2500w`})}),`\n`,_jsx(_components.p,{children:`Ein Moduswechsel gestaltet die gesamte App neu, nicht nur den Hintergrund.`}),`\n`,_jsx(Frame,{caption:`Dieselbe App im dunklen Modus`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=c35623a1ad9dd854798a83884577ad5b`,alt:`Dasselbe Dashboard im dunklen Modus, der Schalter in der Seitenleiste zeigt jetzt Light Mode`,className:`mint-mx-auto`,\"data-og-width\":`1859`,width:`1859`,\"data-og-height\":`933`,height:`933`,\"data-path\":`images/Screenshot2025-08-15at4.04.38PM.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=280\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=fd214a303b9bc8207a11c145b0adfcd9 280w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=560\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=9c5b5b707cc21d8362788595698150fc 560w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=840\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=b8ccea0aef2d30d9d2628ed59bfca499 840w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=1100\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=b7cea224e735ccccc340fae02164359f 1100w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=1650\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=cc42b0804996cadf44675443c41e50d5 1650w, https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/Screenshot2025-08-15at4.04.38PM.png?w=2500\u0026fit=max\u0026auto=format\u0026n=x7uieDiv9xNLARBF\u0026q=85\u0026s=f79195088408e3da2575e48d3873ee9c 2500w`})}),`\n`,_jsx(_components.p,{children:`Prompt:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Füge Unterstützung für hellen und dunklen Modus hinzu:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Heller Modus: weiche graue Hintergründe und dunkler Text`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Dunkler Modus: nahezu schwarze Hintergründe, heller Text und subtile Rahmen`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Primary- und Akzentfarben sollten in beiden Modi lesbar und konsistent bleiben`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Füge einen Theme-Toggle im Header hinzu und merke dir die Wahl pro Besucher.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),`\n`,_jsx(Note,{children:_jsx(_components.p,{children:`Theme-Unterstützung berührt viele Komponenten, daher kann es einige Zeit dauern, bis die KI alles verkabelt. Du kannst auch Änderungen angeben, die nur im hellen oder nur im dunklen Modus gelten sollen.`})}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`bewegung-und-feedback`,children:`Bewegung und Feedback`}),`\n`,_jsx(_components.p,{children:`Bewegung und Feedback helfen Personen zu verstehen, was auf dem Bildschirm passiert. Du kannst sie nutzen, um Klicks reaktionsschnell wirken zu lassen, zu zeigen, dass etwas lädt, und zu erklären, was als Nächstes zu tun ist. In Base44 kann die KI diese Muster für dich hinzufügen, sodass du nicht jede Animation von Hand codieren musst.`}),`\n`,_jsx(_components.p,{children:`Verwende diesen Abschnitt, wenn deine App bereits funktioniert, sich aber etwas flach oder statisch anfühlt, und du sie lebendiger und beruhigender machen möchtest.`}),`\n`,_jsxs(AccordionGroup,{children:[_jsxs(Accordion,{title:`Subtile Interaktionen und Animationen hinzufügen`,id:`subtile-interaktionen-und-animationen-hinzufuegen`,children:[_jsx(_components.p,{children:`Mikro-Interaktionen sind kleine visuelle Reaktionen auf das, was jemand tut, zum Beispiel:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Ein Button, der beim Hover leicht wächst und heller wird.`}),`\n`,_jsx(_components.li,{children:`Eine Karte, die sich anhebt, wenn du mit der Maus darüber fährst.`}),`\n`,_jsx(_components.li,{children:`Ein Icon, das eine kleine Häkchen-Animation gibt, wenn etwas gespeichert wird.`}),`\n`]}),_jsx(_components.p,{children:`Diese Effekte lassen die App reaktionsfähig wirken, ohne sie in einen Cartoon zu verwandeln.`}),_jsx(_components.p,{children:`Du kannst die KI bitten, einen konsistenten Satz von Interaktionen einzuführen:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Füge subtile Interaktionen hinzu:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Lass jede Seite beim Laden mit kurzer Dauer einblenden`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Lass Primary-Buttons beim Hover und Focus sanft wachsen und heller werden`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge Karten beim Hover einen kleinen Lift-Effekt hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Respektiere reduzierte Bewegungs-Präferenzen und vermeide schnelles Blinken.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),_jsx(_components.p,{children:`Für Marketing- oder Promo-Seiten kannst du einen stärkeren Ton verwenden:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`5`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`5`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Nur auf Marketing-Seiten:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Lass Hero-Bereiche beim ersten Laden von der Seite hereinrutschen`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Animiere Icons, wenn eine Funktionskarte fokussiert oder gehovert wird`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Animationen kurz, damit sich die Seite noch schnell anfühlt`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),_jsx(Tip,{children:_jsx(_components.p,{children:`Füge Bewegung hinzu, nachdem du mit Farben, Layout und Typografie zufrieden bist. Bewegung sollte Klarheit unterstützen, nicht schwache Struktur verbergen.`})})]}),_jsxs(Accordion,{title:`Lade-, Empty- und Fehlerzustände designen`,id:`lade-empty-und-fehlerzustaende-designen`,children:[_jsx(_components.p,{children:`Lade-, Empty- und Fehlerzustände sind die Stellen, an denen Personen oft das Gefühl haben, festzustecken. Gutes Feedback hier kann deine App viel polierter und nachsichtiger wirken lassen.`}),_jsx(_components.p,{children:`Beispiele:`}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Laden: Skeleton-Formen, die zum endgültigen Layout passen, statt eines generischen Spinners.`}),`\n`,_jsx(_components.li,{children:`Empty: Eine freundliche Nachricht, die erklärt, was hier erscheinen wird, und ein Button zum Erstellen oder Verbinden von etwas.`}),`\n`,_jsx(_components.li,{children:`Fehler: Eine kurze, menschliche Erklärung und ein klarer Weg, es erneut zu versuchen oder Hilfe zu bekommen.`}),`\n`]}),_jsx(_components.p,{children:`Du kannst die KI bitten, diese Muster in der gesamten App zu erstellen:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Verbessere Feedback-Zustände:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge für jede Hauptliste und jedes Dashboard einen Skeleton-Loader hinzu, der zum Layout passt`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Designe einen Empty-Zustand mit Icon, einzeiliger Erklärung und Primary-Aktion`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge einen klaren Fehlerzustand mit kurzer Nachricht und Retry-Button hinzu, wo relevant`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Verwende das bestehende Farb- und Typografiesystem.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),_jsx(_components.p,{children:`Diese Änderungen wirken sich nicht auf deine Daten oder Logik aus, sie ändern nur, wie deine App kommuniziert, wenn etwas lädt, fehlt oder schiefgegangen ist.`})]})]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`quick-tricks`,children:`Quick-Tricks`}),`\n`,_jsx(_components.p,{children:`Wenn du schnelle Verbesserungen möchtest, können diese kurzen Rezepte dir helfen, mit wenigen Prompts viel Wert zu erzielen.`}),`\n`,_jsxs(AccordionGroup,{children:[_jsxs(Accordion,{title:`Einen flachen Prototyp poliert wirken lassen`,id:`einen-flachen-prototyp-poliert-wirken-lassen`,children:[_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Führe ein einfaches Farbsystem ein und wende es global an.`}),`\n`,_jsx(_components.li,{children:`Definiere klare Textrollen und erhöhe die Zeilenhöhe.`}),`\n`,_jsx(_components.li,{children:`Füge grundlegende Karten- und Button-Komponenten hinzu und verwende sie wieder.`}),`\n`]}),_jsx(_components.p,{children:`Prompt:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Poliere diesen Prototyp:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Erstelle ein einfaches Farbsystem und wende es in der gesamten App an`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Definiere Typografie-Rollen für Titel, Überschriften und Fließtext`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Standardisiere Buttons und Karten und verwende sie konsistent`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Halte Inhalt und Logik gleich.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Eine überladene Tabellenseite retten`,id:`eine-ueberladene-tabellenseite-retten`,children:[_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Erhöhe die Zeilenhöhe leicht und füge subtile Separatoren hinzu.`}),`\n`,_jsx(_components.li,{children:`Verschiebe Aktionen in eine konsistente Spalte oder ein Menü.`}),`\n`,_jsx(_components.li,{children:`Füge Filter in einer klaren oberen Leiste hinzu.`}),`\n`,_jsx(_components.li,{children:`Füge Lade-, Empty- und Fehlerzustände hinzu.`}),`\n`]}),_jsx(_components.p,{children:`Prompt:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Bereinige diese Tabellenseite:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Erhöhe die Zeilenhöhe und füge subtile Zeilenseparatoren hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verschiebe Zeilenaktionen in eine konsistente Spalte am Ende`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge eine einfache Filterleiste über der Tabelle hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge klare Lade-, Empty- und Fehlerzustände hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]}),_jsxs(Accordion,{title:`Sanfter visueller Refresh ohne Änderung der Markenfarben`,id:`sanfter-visueller-refresh-ohne-aenderung-der-markenfarben`,children:[_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Passe Abstand und Hierarchie an.`}),`\n`,_jsx(_components.li,{children:`Aktualisiere Karten- und Button-Formen.`}),`\n`,_jsx(_components.li,{children:`Führe subtile Mikro-Interaktionen ein.`}),`\n`]}),_jsx(_components.p,{children:`Prompt:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`6`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Gib dieser App einen sanften visuellen Refresh:`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Halte Markenfarben gleich`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Verbessere Abstand und Hierarchie auf jeder Seite`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Runde Karten- und Button-Ecken leicht ab und mache Schatten weicher`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`- Füge subtile Hover- und Focus-Zustände zu Primary-Aktionen hinzu`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})})]})]}),`\n`,_jsx(_components.hr,{}),`\n`,_jsx(Heading,{level:`2`,id:`faqs`,children:`FAQs`}),`\n`,_jsx(_components.p,{children:`Klicke unten auf eine Frage, um mehr über das Designen deiner App zu erfahren.`}),`\n`,_jsxs(AccordionGroup,{children:[_jsxs(Accordion,{title:`Was ist Tailwind CSS und wie lese ich seine Klassennamen?`,id:`was-ist-tailwind-css-und-wie-lese-ich-seine-klassennamen`,children:[_jsx(_components.p,{children:`Tailwind CSS ist ein Utility-first-CSS-Framework. Statt benutzerdefinierte CSS-Regeln zu schreiben, fügst du kleine Klassennamen direkt zu deinen Elementen hinzu, um Farbe, Abstand, Typografie und Layout zu steuern. Jeder Klassenname entspricht normalerweise einer einzigen visuellen Regel, sodass du das Design aus den Klassen selbst „lesen” kannst.`}),_jsx(_components.p,{children:`Gängige Beispiele, die du sehen könntest:`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Farben: `,_jsx(_components.code,{children:`bg-blue-500`}),` setzt einen blauen Hintergrund, `,_jsx(_components.code,{children:`text-white`}),` setzt weißen Text.`]}),`\n`,_jsxs(_components.li,{children:[`Abstand: `,_jsx(_components.code,{children:`p-4`}),` fügt Padding auf allen Seiten hinzu, `,_jsx(_components.code,{children:`m-2`}),` fügt Margin auf allen Seiten hinzu.`]}),`\n`,_jsxs(_components.li,{children:[`Typografie: `,_jsx(_components.code,{children:`font-bold`}),` macht Text fett, `,_jsx(_components.code,{children:`text-lg`}),` setzt eine größere Textgröße.`]}),`\n`,_jsxs(_components.li,{children:[`Layout: `,_jsx(_components.code,{children:`flex`}),` erstellt einen Flex-Container, `,_jsx(_components.code,{children:`grid`}),` erstellt einen Grid-Container, `,_jsx(_components.code,{children:`items-center`}),` zentriert Elemente vertikal in einer Flex- oder Grid-Reihe.`]}),`\n`]}),_jsxs(_components.p,{children:[`Wenn du Tailwind-Klassen in Base44 siehst, kannst du sie kombinieren, um den vollständigen Stil eines Elements zu beschreiben. `,_jsx(_components.code,{children:`bg-blue-500 text-white p-4 flex items-center`}),` gibt dir zum Beispiel eine blaue Leiste mit weißem Text, Padding und zentriertem Inhalt.`]}),_jsx(_components.p,{children:`Für tiefere Referenz und die vollständige Liste der Utilities siehe die offizielle Tailwind-CSS-Dokumentation.`})]}),_jsxs(Accordion,{title:`Wie mache ich KI-Änderungen rückgängig oder stelle eine vorherige Version meines Designs wieder her?`,id:`wie-mache-ich-ki-aenderungen-rueckgaengig-oder-stelle-eine-vorherige-version-meines-designs-wieder-her`,children:[_jsx(_components.p,{children:`Du kannst die Design-Versionskontrolle im KI-Chat verwenden, um Änderungen zurückzurollen.`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Jeder KI-Prompt hat eine `,_jsx(_components.strong,{children:`Revert`}),`-Option, die sofort alles rückgängig macht, was dieser spezifische Prompt in deiner App geändert hat.`]}),`\n`,_jsx(_components.li,{children:`Das Uhr-Symbol im KI-Chat öffnet die Versionshistorie. Du kannst eine frühere gespeicherte Version deiner App wählen und in einem Schritt darauf zurückrollen.`}),`\n`]}),_jsxs(_components.p,{children:[`Erfahre mehr über `,_jsx(_components.a,{href:`/de/Building-your-app/AI-chat-modes`,children:`KI-Chat-Modi und Versionshistorie`}),`.`]})]}),_jsxs(Accordion,{title:`Wie lösche ich ein Element aus meiner App?`,id:`wie-loesche-ich-ein-element-aus-meiner-app`,children:[_jsxs(_components.p,{children:[`Du kannst den KI-Chat bitten, das spezifische Element zu entfernen, oder im KI-Chat auf `,_jsx(_components.strong,{children:`Edit`}),` klicken und das Element auswählen, dann auf das `,_jsx(_components.strong,{children:`Delete`}),`-Symbol `,_jsx(Icon,{icon:`trash-can`}),` klicken.`]}),_jsx(Frame,{caption:`Ein Element im Edit-Modus löschen`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=91e746eab5b32ef5a968d1aa78def8b6`,alt:`Ein im Edit-Modus ausgewähltes Suchfeld, darunter die Element-Toolbar mit hervorgehobenem Papierkorb-Symbol unter einem Tooltip Delete`,className:`mint-mx-auto`,style:{width:`64%`},\"data-og-width\":`1000`,width:`1000`,\"data-og-height\":`462`,height:`462`,\"data-path\":`images/deleteelement.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=280\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=e9b6542f9de1a6140cf324ca1b82ba0e 280w, https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=560\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=c7d4c3e87045a7a22d7503b2654c63b0 560w, https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=840\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=1d2d9ee967792b44e0ded305e7caef90 840w, https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=1100\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=b0ef3e3b5577c5f5a99ee01fa0c1fba0 1100w, https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=1650\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=1fe57bea7417f5c560efd7abbaf6a260 1650w, https://mintcdn.com/base44/9WKr9hzDDpvmZeHj/images/deleteelement.png?w=2500\u0026fit=max\u0026auto=format\u0026n=9WKr9hzDDpvmZeHj\u0026q=85\u0026s=c52fb4c32985ba6fdefae65de29cb984 2500w`})})]})]}),`\n`,_jsxs(Note,{children:[`Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der `,_jsx(_components.a,{href:`/`,children:`englischen Version`}),`. `]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Deine App designen","description":"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.","sidebarTitle":"Deine App designen","href":"/de/Building-your-app/Design"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Mit KI am Design arbeiten","slug":"mit-ki-am-design-arbeiten","depth":2,"children":[]},{"title":"Globale Änderungen","slug":"globale-änderungen","depth":2,"children":[{"title":"Theme-Farben","slug":"theme-farben","depth":3,"children":[]},{"title":"Schriftarten","slug":"schriftarten","depth":3,"children":[]}]},{"title":"Element-Änderungen","slug":"element-änderungen","depth":2,"children":[{"title":"Farben","slug":"farben","depth":3,"children":[]},{"title":"Typografie","slug":"typografie","depth":3,"children":[]},{"title":"Abstand","slug":"abstand","depth":3,"children":[]},{"title":"Eckenradius","slug":"eckenradius","depth":3,"children":[]},{"title":"Deckkraft","slug":"deckkraft","depth":3,"children":[]},{"title":"Tailwind-Klassen","slug":"tailwind-klassen","depth":3,"children":[]}]},{"title":"Themes und Modi","slug":"themes-und-modi","depth":2,"children":[{"title":"Design-Themes","slug":"design-themes","depth":3,"children":[]},{"title":"Helle und dunkle Themes","slug":"helle-und-dunkle-themes","depth":3,"children":[]}]},{"title":"Bewegung und Feedback","slug":"bewegung-und-feedback","depth":2,"children":[]},{"title":"Quick-Tricks","slug":"quick-tricks","depth":2,"children":[]},{"title":"FAQs","slug":"faqs","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/base44/ca59cb34fe66af72/custom-analytics.js","/_mintlify/custom/base44/878f3d61142901ae/changelog-display.js","/_mintlify/custom/base44/655d636252386031/cta-cards.js"],"dynamicCss":".mint-mx-auto {\n margin-left: auto;\n margin-right: auto\n}","narration":{"path":"de/Building-your-app/Design","locale":"de","estimatedDurationSec":1097},"subdomain":"base44","siteName":"Base44 Support Documentation","title":"Deine App designen - Base44 Support Documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/Building-your-app/Design","matchLevel":1},"pt-BR":{"href":"/pt-BR/Building-your-app/Design","matchLevel":1},"es":{"href":"/es/Building-your-app/Design","matchLevel":1},"he":{"href":"/he/Building-your-app/Design","matchLevel":1,"hidden":true},"ja":{"href":"/ja/Building-your-app/Design","matchLevel":1},"de":{"href":"/de/Building-your-app/Design","matchLevel":0},"fr":{"href":"/fr/Building-your-app/Design","matchLevel":1},"it":{"href":"/it/Building-your-app/Design","matchLevel":1}}},"lastModified":"2026-10-12T06:39:40.008Z","originalFileLocation":"de/Building-your-app/Design.mdx","locale":"de"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Base44 Support Documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Deine App designen - Base44 Support Documentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Base44 Support Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.base44.com/de/Building-your-app/Design\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://docs.base44.com/images/base44-docs-og.png\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Deine App designen - Base44 Support Documentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://docs.base44.com/images/base44-docs-og.png\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/base44/nuCdY9ZGKAmI8mvz/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Base44 Support Documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#FF6A00\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.base44.com/de/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/de/Building-your-app/Design.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"de\" href=\"https://docs.base44.com/de/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://docs.base44.com/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"pt-BR\" href=\"https://docs.base44.com/pt-BR/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"es\" href=\"https://docs.base44.com/es/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://docs.base44.com/ja/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"fr\" href=\"https://docs.base44.com/fr/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"it\" href=\"https://docs.base44.com/it/Building-your-app/Design\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://docs.base44.com/Building-your-app/Design\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.base44.com/#organization\",\"name\":\"Base44 Support Documentation\",\"url\":\"https://docs.base44.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/base44/jhCpOaGylNweq32m/logo/new-brand-light.svg?fit=max\u0026auto=format\u0026n=jhCpOaGylNweq32m\u0026q=85\u0026s=7724705143e6cfece3b0a237be2a6890\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.base44.com#website\",\"name\":\"Base44 Support Documentation\",\"url\":\"https://docs.base44.com\",\"publisher\":{\"@id\":\"https://docs.base44.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.base44.com/de/Building-your-app/Design#webpage\",\"url\":\"https://docs.base44.com/de/Building-your-app/Design\",\"name\":\"Deine App designen\",\"description\":\"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\",\"dateModified\":\"2026-10-12T06:39:40.008Z\",\"isPartOf\":{\"@id\":\"https://docs.base44.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.base44.com/de/Building-your-app/Design#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.base44.com/de/Building-your-app/Design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"App erstellen\",\"item\":\"https://docs.base44.com/de/Getting-Started/App-templates\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"App gestalten\",\"item\":\"https://docs.base44.com/de/Building-your-app/Designing-with-AI\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Deine App designen\",\"item\":\"https://docs.base44.com/de/Building-your-app/Design\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.base44.com/de/Building-your-app/Design#article\",\"headline\":\"Deine App designen\",\"name\":\"Deine App designen\",\"description\":\"Passe das Aussehen deiner App an: mit dem Theme-Panel für globale Farben und Schriften, dem Edit-Modus für einzelne Elemente und dem KI-Chat für Themes, Dark Mode und Animationen.\",\"url\":\"https://docs.base44.com/de/Building-your-app/Design\",\"mainEntityOfPage\":{\"@id\":\"https://docs.base44.com/de/Building-your-app/Design#webpage\"},\"image\":\"https://docs.base44.com/images/base44-docs-og.png\",\"dateModified\":\"2026-10-12T06:39:40.008Z\",\"publisher\":{\"@id\":\"https://docs.base44.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.base44.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Base44 Support Documentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Base44 Support Documentation","nav":{"global":null,"languages":[{"language":"en","default":true,"pages":[{"title":"en","href":"/Building-your-app/Design"}]},{"language":"pt-BR","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/pt-BR/changelog/product","label":"Registro de alterações"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"pages":[{"title":"pt-BR","href":"/pt-BR/Building-your-app/Design"}]},{"language":"es","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/es/changelog/product","label":"Registro de cambios"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"pages":[{"title":"es","href":"/es/Building-your-app/Design"}]},{"language":"he","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/he/changelog/product","label":"יומן שינויים"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"hidden":true,"pages":[{"title":"he","href":"/he/Building-your-app/Design","hidden":true}]},{"language":"ja","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/ja/changelog/product","label":"変更履歴"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"pages":[{"title":"ja","href":"/ja/Building-your-app/Design"}]},{"language":"de","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/de/changelog/product","label":"Änderungsprotokoll"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"tabs":[{"tab":"Apps","pages":[{"group":"Erste Schritte","icon":"rocket","pages":[{"title":"Apps, Websites und KI-Agenten bauen","sidebarTitle":"Willkommen bei Base44","mode":"wide","href":"/de"},{"title":"Eine App bauen","sidebarTitle":"Eine App bauen","href":"/de/Getting-Started/Quick-start-guide"},{"title":"Eine Website erstellen","sidebarTitle":"Eine Website erstellen","href":"/de/Getting-Started/building-a-website"},{"title":"Mit deinem ersten Prompt starten","sidebarTitle":"Mit deinem ersten Prompt starten","href":"/de/Getting-Started/starting-from-your-first-prompt"},{"title":"Ein Projekt zu Base44 migrieren","sidebarTitle":"Ein Projekt zu Base44 migrieren","href":"/de/Getting-Started/migrating-an-existing-app"},{"title":"Base Code verwenden","sidebarTitle":"Base Code verwenden","href":"/de/Getting-Started/base-code"},{"title":"Aus Figma importieren","sidebarTitle":"Aus Figma importieren","href":"/de/Getting-Started/import-from-figma"},{"title":"Einen Superagent bauen","sidebarTitle":"Superagents im Überblick","href":"/de/Getting-Started/superagent"},{"title":"Einen Base44 Partner engagieren oder werden","sidebarTitle":"Einen Partner engagieren","href":"/de/Getting-Started/Hiring-a-partner"}]},{"title":"Import aus Figma in Base44","sidebarTitle":"Figma-Import-Richtlinien","hidden":true,"href":"/de/Getting-Started/import-from-figma-guidelines"},{"group":"App erstellen","icon":"screwdriver-wrench","pages":[{"title":"App-Vorlagen verwenden","sidebarTitle":"App-Vorlagen","href":"/de/Getting-Started/App-templates"},{"title":"Den App-Editor kennenlernen","sidebarTitle":"Den App-Editor erkunden","href":"/de/Getting-Started/app-editor-overview"},{"title":"Den KI-Chat in Base44 verwenden","sidebarTitle":"Den KI-Chat verwenden","href":"/de/Building-your-app/AI-chat-modes"},{"title":"Mit Branches arbeiten","sidebarTitle":"Mit Branches arbeiten","href":"/de/Building-your-app/working-with-branches"},{"title":"Kommentare in deiner App","sidebarTitle":"Kommentare hinzufügen","href":"/de/Building-your-app/Commenting-on-your-app"},{"title":"Eine Präsentation erstellen","sidebarTitle":"Eine Präsentation erstellen","href":"/de/Building-your-app/building-a-presentation"},{"group":"Prompts schreiben","pages":[{"title":"Prompt-Bibliothek","sidebarTitle":"Prompt-Bibliothek","href":"/de/Getting-Started/Prompt-library"},{"title":"Effektive Prompts in Base44 schreiben","sidebarTitle":"Bessere Prompts schreiben","href":"/de/Getting-Started/Prompt-guide"}]},{"group":"App gestalten","pages":[{"title":"Mit KI designen","description":"Lerne, deine App mit KI zu designen: Briefe sie wie einen Designer, passe Elemente im Edit-Modus an, setze Grenzen mit KI-Steuerungen und verfeinere die angebotenen Optionen.","sidebarTitle":"Mit KI designen","href":"/de/Building-your-app/Designing-with-AI"},{"title":"Deine App designen","sidebarTitle":"Deine App designen","href":"/de/Building-your-app/Design"},{"title":"Design-Grundlagen und Layout","description":"Halte das Design deiner App mit Farb-, Schrift- und Abstandssystemen konsistent. Arbeite dann mit Bildern, responsivem Layout, Seitentypen, eigenen Styles und Barrierefreiheit.","sidebarTitle":"Grundlagen \u0026 Layout festlegen","href":"/de/Building-your-app/Design-foundations-and-layout"},{"title":"Design-System","sidebarTitle":"Design-Systeme erstellen","href":"/de/Building-your-app/Design-system"},{"title":"Komponenten zu deiner App hinzufügen","sidebarTitle":"Komponenten hinzufügen","href":"/de/Building-your-app/Components-library"},{"title":"Medien hochladen und verwalten","sidebarTitle":"Deine Medien verwalten","href":"/de/Building-your-app/Using-media"},{"title":"Deine App-Seiten verwalten","sidebarTitle":"Deine Seiten verwalten","href":"/de/Building-your-app/managing-your-pages"},{"title":"Den Canvas verwenden","sidebarTitle":"Den Canvas verwenden","href":"/de/Building-your-app/Canvas"},{"title":"npm-Pakete hinzufügen und verwenden","sidebarTitle":"npm-Pakete hinzufügen","href":"/de/Building-your-app/NPM-packages"}]},{"group":"App-Verhalten steuern","pages":[{"title":"E-Mails aus deiner App senden","sidebarTitle":"E-Mails senden","href":"/de/documentation/building-your-app/sending-emails"},{"title":"Die E-Mails deiner App gestalten","sidebarTitle":"E-Mails gestalten","href":"/de/Building-your-app/Designing-emails"},{"title":"Einen KI-Agenten für deine App einrichten","sidebarTitle":"KI-Agenten für deine App","href":"/de/Building-your-app/AI-agents-for-apps"},{"title":"Workflows für deine App erstellen","sidebarTitle":"Workflows erstellen","href":"/de/Building-your-app/Creating-workflows"},{"title":"Base44 Entwicklerwerkzeuge","sidebarTitle":"Entwicklerwerkzeuge nutzen","href":"/de/documentation/building-your-app/developer-tools"},{"title":"Die API-Seite deiner App verwenden","sidebarTitle":"Die API deiner App verwenden","href":"/de/Building-your-app/your-apps-api-page"}]},{"group":"App-Einstellungen verwalten","pages":[{"title":"Login und Registrierung verwalten","sidebarTitle":"App-Login und Registrierung","href":"/de/Setting-up-your-app/Managing-login-and-registration"},{"title":"Eine Domain mit deiner App verbinden","sidebarTitle":"Domains im Überblick","href":"/de/Setting-up-your-app/Setting-up-your-custom-domain"},{"title":"Eine Domain bei Wix kaufen","sidebarTitle":"Domain bei Wix kaufen","href":"/de/Setting-up-your-app/Buying-a-domain-with-Wix"},{"title":"Eine GoDaddy- oder IONOS-Domain verwalten","sidebarTitle":"GoDaddy-Domain verwalten","href":"/de/Setting-up-your-app/Buying-a-domain-from-Base44"},{"title":"Eine externe Domain verbinden","sidebarTitle":"Externe Domain verbinden","href":"/de/Setting-up-your-app/Connecting-an-external-domain"},{"title":"E-Mails von einer eigenen Domain versenden","sidebarTitle":"E-Mails von einer Domain senden","href":"/de/Setting-up-your-app/Sending-emails-from-a-custom-domain"},{"title":"Eine Business-E-Mail kaufen","sidebarTitle":"Business-E-Mail kaufen","href":"/de/Setting-up-your-app/Buying-a-business-email"}]},{"group":"In Ihrer App verkaufen","pages":[{"title":"Base44 Payments powered by Wix einrichten","sidebarTitle":"Base44 Payments einrichten","href":"/de/Setting-up-your-app/setting-up-wix-payments"},{"title":"Stripe einrichten","sidebarTitle":"Stripe einrichten","href":"/de/documentation/setting-up-your-app/setting-up-payments"},{"title":"Zahlungen in deiner App verfolgen","sidebarTitle":"Zahlungen verfolgen","href":"/de/Setting-up-your-app/tracking-payments"},{"title":"Zahlungen in Israel akzeptieren","sidebarTitle":"Zahlungen in Israel","href":"/de/Setting-up-your-app/accepting-payments-israel"}]},{"group":"App-Daten verwalten","pages":[{"title":"Deine App-Daten verwalten","sidebarTitle":"Mit deinen Daten arbeiten","href":"/de/Building-your-app/Managing-your-app-data"},{"title":"Deine App mit Testdaten testen","sidebarTitle":"Deine App mit Testdaten testen","href":"/de/documentation/managing-app-data/testing-your-data"},{"title":"Die Flows deiner App testen","sidebarTitle":"Den Testing Agent verwenden","href":"/de/documentation/managing-app-data/testing-agent"}]},{"group":"Mobile Erfahrung","pages":[{"title":"Deine App auf dem Handy erstellen und nutzen","sidebarTitle":"Apps auf dem Handy nutzen","href":"/de/Building-your-app/Mobile-experience"},{"title":"Deine App in App Stores einreichen","sidebarTitle":"In App Stores einreichen","href":"/de/documentation/building-your-app/uploading-to-app-stores"}]},{"group":"Reichweite Ihrer App erweitern","pages":[{"title":"Den Marketing Agent für deine App nutzen","sidebarTitle":"Einen Marketingplan erstellen","href":"/de/promoting-your-app/creating-a-marketing-plan"},{"title":"Deine App in der Suche auffindbar machen","sidebarTitle":"SEO Best Practices","href":"/de/Performance-and-SEO/SEO-and-search-visibility"},{"title":"SEO und GEO deiner App optimieren","sidebarTitle":"SEO und GEO optimieren","href":"/de/Performance-and-SEO/checking-your-seo-and-geo"},{"title":"Google Search Console verbinden","sidebarTitle":"Google Search Console verbinden","href":"/de/Performance-and-SEO/connecting-google-search-console"}]},{"group":"Analysen \u0026 Leistung","pages":[{"title":"Deine App-Analytics anzeigen und anpassen","sidebarTitle":"App-Analytics","href":"/de/documentation/performance-and-seo/app-analytics"},{"title":"Nutzersitzungen aufzeichnen und wiedergeben","sidebarTitle":"Session-Recordings","href":"/de/documentation/performance-and-seo/session-recordings"},{"title":"App-Leistung optimieren","sidebarTitle":"App-Leistung","href":"/de/Performance-and-SEO/App-performance"}]}]},{"group":"App absichern","icon":"shield","pages":[{"title":"Base44 Sicherheit: Ein Überblick","sidebarTitle":"Sicherheit im Überblick","href":"/de/Setting-up-your-app/security-overview"},{"title":"Auswählen, wer auf deine App zugreifen kann","sidebarTitle":"Zugriff und Rollen verwalten","href":"/de/Setting-up-your-app/Managing-access"},{"title":"Datenberechtigungen verwalten","href":"/de/Setting-up-your-app/Managing-security-settings"},{"title":"Einen Sicherheitsscan ausführen","sidebarTitle":"Einen Sicherheitsscan ausführen","href":"/de/Setting-up-your-app/running-a-security-scan"},{"title":"Deine App mit Wiz auf Schwachstellen scannen","sidebarTitle":"Scannen mit Wiz","hidden":true,"href":"/de/Setting-up-your-app/scanning-with-wiz"},{"title":"Die Sicherheit deiner App mit Tenzai testen","sidebarTitle":"Mit Tenzai testen","href":"/de/Setting-up-your-app/security-testing-with-tenzai"},{"title":"Single Sign-On (SSO) für deine App einrichten","sidebarTitle":"SSO einrichten","href":"/de/Setting-up-your-app/Setting-up-SSO"}]},{"group":"App bewerben","icon":"megaphone","pages":[{"title":"Deine App in sozialen Medien bewerben","sidebarTitle":"Social Content erstellen","href":"/de/promoting-your-app/social-content"},{"title":"Google-Ads-Kampagnen erstellen","sidebarTitle":"Google-Ads-Kampagnen erstellen","href":"/de/promoting-your-app/google-ads-campaigns"},{"title":"Deine App bei Launchpad einreichen","sidebarTitle":"Bei Launchpad einreichen","href":"/de/promoting-your-app/submitting-to-launchpad"}]},{"group":"Konnektoren","icon":"chart-network","pages":[{"title":"Connectors im Überblick","sidebarTitle":"Überblick","href":"/de/Integrations/Connectors"},{"title":"Connectors-Katalog","sidebarTitle":"Katalog","href":"/de/Integrations/connectors-catalog"},{"group":"Geteilte Konnektoren","pages":[{"title":"Slack mit deiner App verbinden","sidebarTitle":"Slack","href":"/de/Integrations/slack-connectors"},{"title":"Google-Workspace-Connectors","sidebarTitle":"Google Workspace","href":"/de/Integrations/google-workspace-connectors"},{"title":"LinkedIn mit deiner App verbinden","sidebarTitle":"LinkedIn","href":"/de/Integrations/linkedin-connector"},{"title":"GitHub mit deiner App verbinden","sidebarTitle":"GitHub","href":"/de/Integrations/github-connector"},{"title":"Google Search Console mit deiner App verbinden","sidebarTitle":"Google Search Console","href":"/de/Integrations/google-search-console-connector"}]},{"group":"Datenkonnektoren","pages":[{"title":"Snowflake mit deiner App verbinden","sidebarTitle":"Snowflake","href":"/de/Integrations/snowflake-connector"},{"title":"Databricks mit deiner App verbinden","sidebarTitle":"Databricks","href":"/de/Integrations/databricks-connector"}]}]},{"group":"Änderungsprotokoll","icon":"clock-rotate-left","pages":[{"title":"Base44-Changelog","sidebarTitle":"Produkt","href":"/de/changelog/product"},{"title":"Changelog","sidebarTitle":"Entwickler","href":"/de/changelog/developers"}]}]},{"tab":"Superagenten","pages":[{"title":"Superagenten","href":"/de/superagents/creating-a-superagent"}]},{"tab":"Integrationen","pages":[{"title":"Integrationen","href":"/de/Integrations/Using-integrations"}]},{"tab":"Entwickler","dropdowns":[{"dropdown":"Startseite","icon":"house","pages":[{"title":"Base44 Developer Platform","mode":"wide","href":"/de/developers/home"}],"global":{"anchors":[{"anchor":"Backend","icon":"server","href":"/de/developers/backend/overview/introduction"},{"anchor":"App-Code","icon":"code","href":"/de/developers/app-code/overview/introduction"},{"anchor":"SDKs","icon":"brackets-curly","href":"/de/developers/references/sdks/overview"},{"anchor":"CLI","icon":"terminal","href":"/de/developers/references/cli/get-started/overview"}]}},{"dropdown":"Backend (Beta)","icon":"server","groups":[{"group":"Übersicht","icon":"compass","pages":[{"title":"Einführung","href":"/de/developers/backend/overview/introduction"},{"title":"Grundlagen des Backend-Service","sidebarTitle":"Grundlagen des Backend-Service","href":"/de/developers/backend/overview/backend-service-basics"},{"title":"Features","href":"/de/developers/backend/overview/features"},{"title":"Preise","href":"/de/developers/backend/overview/pricing"},{"title":"Probleme im Projekt beheben","sidebarTitle":"Fehlerbehebung","href":"/de/developers/backend/overview/troubleshooting"}]},{"group":"Schnellstarts","icon":"rocket","pages":[{"title":"Mit KI entwickeln","sidebarTitle":"Mit KI entwickeln","href":"/de/developers/backend/quickstart/quickstart-with-ai"},{"group":"Vorlagen","pages":[{"title":"Backend only","href":"/de/developers/backend/quickstart/templates/quickstart-backend-only"},{"title":"React Quickstart","sidebarTitle":"React","href":"/de/developers/backend/quickstart/templates/quickstart-react-template"}]},{"group":"Frameworks","pages":[{"title":"React Quickstart","sidebarTitle":"React","href":"/de/developers/backend/quickstart/frameworks/quickstart-with-react"},{"title":"Vue Quickstart","sidebarTitle":"Vue","href":"/de/developers/backend/quickstart/frameworks/quickstart-vue"},{"title":"Solid JS Quickstart","sidebarTitle":"Solid JS","href":"/de/developers/backend/quickstart/frameworks/quickstart-solid-js"},{"title":"Refine Quickstart","sidebarTitle":"Refine","href":"/de/developers/backend/quickstart/frameworks/quickstart-refine"},{"title":"Hono Quickstart","sidebarTitle":"Hono","href":"/de/developers/backend/quickstart/frameworks/quickstart-hono"},{"title":"React Native (Expo) Quickstart","sidebarTitle":"React Native (Expo)","href":"/de/developers/backend/quickstart/frameworks/quickstart-with-react-native"}]}]},{"group":"Projekt","icon":"folder-open","pages":[{"title":"Projektstruktur","href":"/de/developers/backend/overview/project-structure"},{"title":"Mit einer bestehenden Base44-App starten","sidebarTitle":"Mit einer bestehenden Base44-App starten","href":"/de/developers/backend/overview/start-from-existing-app"},{"title":"Lokale Entwicklung für eine bestehende App einrichten","sidebarTitle":"Lokale Entwicklung für eine bestehende App einrichten","href":"/de/developers/backend/overview/set-up-local-dev-existing-app"},{"title":"Bestehendes Backend-Projekt verknüpfen","sidebarTitle":"Bestehendes Backend-Projekt verknüpfen","href":"/de/developers/backend/overview/link-existing-project"},{"group":"Lokale Entwicklung","expanded":false,"pages":[{"title":"Lokale Entwicklung","sidebarTitle":"Übersicht","href":"/de/developers/backend/overview/local-dev/local-development-overview"},{"title":"Einrichtung der lokalen Entwicklung","sidebarTitle":"Einrichtung","href":"/de/developers/backend/overview/local-dev/get-started"}]},{"title":"Eigenständige Skripte","sidebarTitle":"Eigenständige Skripte","href":"/de/developers/backend/overview/run-scripts"}]},{"group":"KI-Entwicklungstools","icon":"wand-magic-sparkles","pages":[{"title":"Übersicht über KI-Entwicklungstools","sidebarTitle":"Übersicht","href":"/de/developers/backend/overview/agent-extensions"},{"title":"Skills","sidebarTitle":"Skills","href":"/de/developers/backend/overview/skills"},{"title":"Base44 MCP-Server","sidebarTitle":"Base44 MCP-Server","href":"/de/developers/backend/overview/mcp-server"},{"title":"Base44 Docs MCP","sidebarTitle":"Docs MCP-Server","href":"/de/developers/backend/overview/base44-docs-mcp"}]},{"group":"Ressourcen","icon":"cubes","pages":[{"group":"Agenten","expanded":false,"pages":[{"title":"Über Agenten","sidebarTitle":"Agenten","href":"/de/developers/backend/resources/agents/overview"},{"title":"Agent-Skills","sidebarTitle":"Agent-Skills","href":"/de/developers/backend/resources/agents/agent-skills"}]},{"group":"Actors","expanded":false,"pages":[{"title":"Actors – Übersicht","sidebarTitle":"Übersicht","href":"/de/developers/backend/resources/actors/overview"},{"title":"Einen Actor erstellen","sidebarTitle":"Einen Actor erstellen","href":"/de/developers/backend/resources/actors/create-actor"},{"title":"Actors: Beispielabläufe","sidebarTitle":"Beispielabläufe","href":"/de/developers/backend/resources/actors/sample-flows"},{"title":"Actors – Dateien und Code","sidebarTitle":"Actors – Dateien und Code","href":"/de/developers/backend/resources/actors/reference"}]},{"title":"Unterstützte Modelle","sidebarTitle":"Modelle","href":"/de/developers/backend/resources/models"},{"title":"Auth","sidebarTitle":"Auth","href":"/de/developers/backend/resources/auth"},{"group":"Backend-Funktionen","expanded":false,"pages":[{"title":"Übersicht Backend-Funktionen","sidebarTitle":"Übersicht","href":"/de/developers/backend/resources/backend-functions/overview"},{"title":"Automationen","href":"/de/developers/backend/resources/backend-functions/automations"}]},{"group":"Konnektoren","expanded":false,"pages":[{"title":"Connectors-Übersicht","sidebarTitle":"Übersicht","href":"/de/developers/backend/resources/connectors"},{"title":"Shared Connectors","sidebarTitle":"Shared Connectors","href":"/de/developers/backend/resources/connectors/shared-connectors"},{"title":"App-User-Connectors","sidebarTitle":"App-User-Connectors","href":"/de/developers/backend/resources/connectors/app-user-connectors"}]},{"group":"Entitäten","expanded":false,"pages":[{"title":"Entitäten – Übersicht","sidebarTitle":"Übersicht","href":"/de/developers/backend/resources/entities/overview"},{"title":"Entity-Schemas","href":"/de/developers/backend/resources/entities/entity-schemas"},{"title":"User-Schema","href":"/de/developers/backend/resources/entities/user-schema"},{"title":"Sicherheit","href":"/de/developers/backend/resources/entities/security"}]}]}],"global":{"anchors":[{"anchor":"Developer Platform","icon":"arrow-left","href":"/de/developers/home"}]}},{"dropdown":"App-Code","icon":"grid-2","groups":[{"group":"Übersicht","icon":"compass","pages":[{"title":"Einführung","sidebarTitle":"Base44 für Entwickler","href":"/de/developers/app-code/overview/introduction"},{"title":"Projektstruktur","href":"/de/developers/app-code/overview/project-structure"}]},{"group":"Base44-Editor","icon":"code","pages":[{"title":"Code-Tab","href":"/de/developers/app-code/editor/code-tab"},{"title":"Activity Monitor","sidebarTitle":"Activity Monitor","href":"/de/developers/app-code/editor/activity-monitor"}]},{"group":"Lokale Entwicklung","icon":"laptop","pages":[{"title":"GitHub-Integration","sidebarTitle":"GitHub-Integration","href":"/de/developers/app-code/local-development/github"}]},{"group":"Cloud-Sandbox","icon":"cloud","pages":[{"title":"Cloud-Sandbox","sidebarTitle":"Übersicht","href":"/de/developers/app-code/sandbox/overview"},{"title":"Bring deinen eigenen Agenten mit","sidebarTitle":"Eigenen Agenten mitbringen","href":"/de/developers/app-code/sandbox/bring-your-own-agent"}]}],"global":{"anchors":[{"anchor":"Developer Platform","icon":"arrow-left","href":"/de/developers/home"}]}},{"dropdown":"SDKs","icon":"brackets-curly","groups":[{"group":"Base44 SDKs","icon":"book-open","expanded":false,"pages":[{"title":"Base44 SDKs","sidebarTitle":"Overview","href":"/de/developers/references/sdks/overview"}]},{"group":"App SDK","icon":"brackets-curly","expanded":false,"pages":[{"group":"Get Started","icon":"book-open","expanded":false,"pages":[{"title":"SDK overview","href":"/de/developers/references/sdk/getting-started/overview"},{"title":"Base44 client","href":"/de/developers/references/sdk/getting-started/client"},{"title":"Work with data","href":"/de/developers/references/sdk/getting-started/work-with-data"},{"title":"Dynamic Types","href":"/de/developers/references/sdk/getting-started/dynamic-types"},{"title":"Common SDK uses","href":"/de/developers/references/sdk/getting-started/work-with-sdk"},{"title":"Connect to third-party APIs","href":"/de/developers/references/sdk/getting-started/third-party-apis"},{"title":"Generate images with the AI Gateway","sidebarTitle":"Generate images","href":"/de/developers/references/sdk/getting-started/ai-gateway-images"},{"title":"Generate video with the AI Gateway","sidebarTitle":"Generate video","href":"/de/developers/references/sdk/getting-started/ai-gateway-video"}]},{"group":"SDK Reference","boost":0.5,"icon":"brackets-curly","expanded":false,"pages":[{"group":"Client","expanded":false,"pages":[{"title":"createClient","href":"/de/developers/references/sdk/docs/functions/createClient"},{"title":"createClientFromRequest","href":"/de/developers/references/sdk/docs/functions/createClientFromRequest"}]},{"group":"Modules","expanded":false,"pages":[{"title":"actors","href":"/de/developers/references/sdk/docs/type-aliases/actors"},{"title":"agents","href":"/de/developers/references/sdk/docs/interfaces/agents"},{"title":"ai-gateway","href":"/de/developers/references/sdk/docs/interfaces/ai-gateway"},{"title":"analytics","href":"/de/developers/references/sdk/docs/interfaces/analytics"},{"title":"app","href":"/de/developers/references/sdk/docs/interfaces/app"},{"title":"app-logs","href":"/de/developers/references/sdk/docs/interfaces/app-logs"},{"title":"auth","href":"/de/developers/references/sdk/docs/interfaces/auth"},{"title":"connectors","href":"/de/developers/references/sdk/docs/interfaces/connectors"},{"title":"entities","href":"/de/developers/references/sdk/docs/type-aliases/entities"},{"title":"functions","href":"/de/developers/references/sdk/docs/interfaces/functions"},{"title":"integrations","href":"/de/developers/references/sdk/docs/type-aliases/integrations"},{"title":"sso","href":"/de/developers/references/sdk/docs/interfaces/sso"}]}]}]},{"group":"Platform SDK (Beta)","boost":0.75,"icon":"layer-group","expanded":false,"pages":[{"group":"Get Started","icon":"book-open","expanded":false,"pages":[{"title":"Platform SDK overview","sidebarTitle":"Overview","href":"/de/developers/references/platform-sdk/overview"}]},{"group":"Platform SDK Reference","icon":"brackets-curly","expanded":false,"pages":[{"group":"Client","expanded":false,"pages":[{"title":"createPlatformClient","href":"/de/developers/references/platform-sdk/docs/functions/createPlatformClient"},{"title":"createPlatformServer","href":"/de/developers/references/platform-sdk/docs/functions/createPlatformServer"}]},{"group":"Modules","expanded":false,"pages":[{"title":"chat","href":"/de/developers/references/platform-sdk/docs/interfaces/chat"},{"title":"webhooks","href":"/de/developers/references/platform-sdk/docs/interfaces/webhooks"}]},{"group":"React","expanded":false,"pages":[{"title":"useChat","href":"/de/developers/references/platform-sdk/docs/functions/useChat"}]}]}]}],"global":{"anchors":[{"anchor":"Developer Platform","icon":"arrow-left","href":"/de/developers/home"}]}},{"dropdown":"CLI","icon":"terminal","groups":[{"group":"Get Started","icon":"book-open","expanded":true,"pages":[{"title":"CLI Overview","href":"/de/developers/references/cli/get-started/overview"},{"title":"CLI Commands Overview","href":"/de/developers/references/cli/commands/introduction"}]},{"group":"Commands","boost":0.75,"icon":"terminal","pages":[{"group":"Account","pages":[{"title":"login","href":"/de/developers/references/cli/commands/login"},{"title":"logout","href":"/de/developers/references/cli/commands/logout"},{"title":"whoami","href":"/de/developers/references/cli/commands/whoami"}]},{"group":"Projects","pages":[{"title":"create","href":"/de/developers/references/cli/commands/create"},{"title":"link","href":"/de/developers/references/cli/commands/link"},{"title":"eject","href":"/de/developers/references/cli/commands/eject"},{"title":"scaffold","href":"/de/developers/references/cli/commands/scaffold"},{"title":"dashboard open","href":"/de/developers/references/cli/commands/dashboard-open"}]},{"group":"Workspaces","pages":[{"title":"workspace get","href":"/de/developers/references/cli/commands/workspace-get"},{"title":"workspace list","href":"/de/developers/references/cli/commands/workspace-list"},{"title":"workspace move","href":"/de/developers/references/cli/commands/workspace-move"}]},{"group":"Functions","pages":[{"title":"functions pull","href":"/de/developers/references/cli/commands/functions-pull"},{"title":"functions deploy","href":"/de/developers/references/cli/commands/functions-deploy"},{"title":"functions delete","href":"/de/developers/references/cli/commands/functions-delete"},{"title":"functions list","href":"/de/developers/references/cli/commands/functions-list"}]},{"group":"Entities","pages":[{"title":"entities push","href":"/de/developers/references/cli/commands/entities-push"}]},{"group":"Agents","pages":[{"title":"agents pull","href":"/de/developers/references/cli/commands/agents-pull"},{"title":"agents push","href":"/de/developers/references/cli/commands/agents-push"},{"title":"agent-skills pull","href":"/de/developers/references/cli/commands/agent-skills-pull"},{"title":"agent-skills push","href":"/de/developers/references/cli/commands/agent-skills-push"}]},{"group":"Actors","pages":[{"title":"actors delete","href":"/de/developers/references/cli/commands/actors-delete"},{"title":"actors deploy","href":"/de/developers/references/cli/commands/actors-deploy"}]},{"group":"Workflows","pages":[{"title":"workflows list","href":"/de/developers/references/cli/commands/workflows-list"},{"title":"workflows runs","href":"/de/developers/references/cli/commands/workflows-runs"}]},{"group":"Connectors","pages":[{"title":"connectors initiate","href":"/de/developers/references/cli/commands/connectors-initiate"},{"title":"connectors list-available","href":"/de/developers/references/cli/commands/connectors-list-available"},{"title":"connectors pull","href":"/de/developers/references/cli/commands/connectors-pull"},{"title":"connectors push","href":"/de/developers/references/cli/commands/connectors-push"}]},{"group":"Auth","pages":[{"title":"auth password-login","href":"/de/developers/references/cli/commands/auth-password-login"},{"title":"auth pull","href":"/de/developers/references/cli/commands/auth-pull"},{"title":"auth push","href":"/de/developers/references/cli/commands/auth-push"},{"title":"auth social-login","href":"/de/developers/references/cli/commands/auth-social-login"},{"title":"auth sso","href":"/de/developers/references/cli/commands/auth-sso"}]},{"group":"Secrets","pages":[{"title":"secrets set","href":"/de/developers/references/cli/commands/secrets-set"},{"title":"secrets list","href":"/de/developers/references/cli/commands/secrets-list"},{"title":"secrets delete","href":"/de/developers/references/cli/commands/secrets-delete"}]},{"group":"Development","pages":[{"title":"dev","href":"/de/developers/references/cli/commands/dev"},{"title":"exec","href":"/de/developers/references/cli/commands/exec"},{"title":"types generate","href":"/de/developers/references/cli/commands/types-generate"},{"title":"site open","href":"/de/developers/references/cli/commands/site-open"},{"title":"logs","href":"/de/developers/references/cli/commands/logs"}]},{"group":"API","pages":[{"title":"api catalog","href":"/de/developers/references/cli/commands/api-catalog"},{"title":"api fetch","href":"/de/developers/references/cli/commands/api-fetch"},{"title":"api grep","href":"/de/developers/references/cli/commands/api-grep"},{"title":"api search","href":"/de/developers/references/cli/commands/api-search"}]},{"group":"Sandbox","pages":[{"title":"sandbox ls","href":"/de/developers/references/cli/commands/sandbox-ls"},{"title":"sandbox read","href":"/de/developers/references/cli/commands/sandbox-read"},{"title":"sandbox grep","href":"/de/developers/references/cli/commands/sandbox-grep"},{"title":"sandbox write","href":"/de/developers/references/cli/commands/sandbox-write"},{"title":"sandbox edit","href":"/de/developers/references/cli/commands/sandbox-edit"},{"title":"sandbox run","href":"/de/developers/references/cli/commands/sandbox-run"},{"title":"sandbox checkpoint","href":"/de/developers/references/cli/commands/sandbox-checkpoint"},{"title":"branches list","href":"/de/developers/references/cli/commands/branches-list"}]},{"group":"Deployment","pages":[{"title":"build","sidebarTitle":"build","href":"/de/developers/references/cli/commands/build"},{"title":"deploy","href":"/de/developers/references/cli/commands/deploy"},{"title":"site deploy","href":"/de/developers/references/cli/commands/site-deploy"},{"title":"visibility","href":"/de/developers/references/cli/commands/visibility"}]}]}],"global":{"anchors":[{"anchor":"Developer Platform","icon":"arrow-left","href":"/de/developers/home"}]}},{"dropdown":"APIs","icon":"plug","groups":[{"group":"Monitoring API","icon":"chart-line","expanded":false,"pages":[{"group":"Loslegen","icon":"book-open","pages":[{"title":"Übersicht über die Enterprise Monitoring API","href":"/de/developers/references/monitoring-api/get-started/overview"},{"title":"Authentifizierung","href":"/de/developers/references/monitoring-api/get-started/authentication"},{"title":"Rate Limits","href":"/de/developers/references/monitoring-api/get-started/rate-limits"}]}]},{"group":"Audit Logs API","icon":"clipboard-list","expanded":false,"pages":[{"group":"Loslegen","icon":"book-open","pages":[{"title":"Übersicht über die Audit Logs API","href":"/de/developers/references/audit-logs-api/get-started/overview"},{"title":"Authentifizierung","sidebarTitle":"Authentifizierung","href":"/de/developers/references/audit-logs-api/get-started/authentication"},{"title":"Rate Limits","href":"/de/developers/references/audit-logs-api/get-started/rate-limits"},{"title":"Ereignistypen","sidebarTitle":"Ereignistypen","href":"/de/developers/references/audit-logs-api/get-started/event-types"}]},{"group":"API-Referenz","icon":"brackets-curly","pages":[{"group":"audit-logs","pages":[{"title":"Get security scan findings","deprecated":null,"version":null,"openapi":"/developers/references/audit-logs-api/audit-logs-openapi.json get /{workspace_id}/security-scan-runs/{run_id}","href":"/api-reference/audit-logs/get-security-scan-findings"},{"title":"List audit logs","deprecated":null,"version":null,"openapi":"/developers/references/audit-logs-api/audit-logs-openapi.json post /{workspace_id}/list","href":"/api-reference/audit-logs/list-audit-logs"}]}]}]}],"global":{"anchors":[{"anchor":"Developer Platform","icon":"arrow-left","href":"/de/developers/home"}]}}]},{"tab":"Konto \u0026 Abrechnung","pages":[{"title":"Konto \u0026 Abrechnung","href":"/de/Account-and-billing/Billing-and-plans"}]},{"tab":"Unternehmen","pages":[{"title":"Unternehmen","href":"/de/Enterprise/Base44-for-enterprises"}]}]},{"language":"fr","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/fr/changelog/product","label":"Notes de version"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"pages":[{"title":"fr","href":"/fr/Building-your-app/Design"}]},{"language":"it","navbar":{"links":[{"href":"https://app.base44.com/support/conversations","label":"Support"},{"href":"/it/changelog/product","label":"Registro modifiche"}],"primary":{"type":"button","label":"Base44","href":"https://base44.com/?utm_source=Mintlify\u0026utm_medium=Main\u0026utm_content=menu"}},"pages":[{"title":"it","href":"/it/Building-your-app/Design"}]}]},"basePath":"","title":"Deine App designen - Base44 Support Documentation","buildId":"dpl_G9nrg4qeJSZtah1Ziwbc2n6WkLch","deploymentId":"dpl_G9nrg4qeJSZtah1Ziwbc2n6WkLch","dynamics":["2bfc744e19","07c022d89b","a74be98ba7"],"chunks":["NarrationPlayer-BavXtvT-.js","types-CiTgMxws.js","shallow-DdluZBHX.js","Frame-Bpq2Z6jK.js","DynamicMarkdown-D5M2At0B.js","zoom-image-lightbox-DL4wrF0w.js","lightbox-handle-r17bVUz3.js"]}
