> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Deine App designen
> Gestalte Look and Feel deiner App in Base44 mit Tools für Styling, Farben, Schriftarten, visuelle Assets und erweiterte Anpassungsoptionen.
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 jeden Ansatz mit Prompts und Beispielen, die du direkt verwenden kannst.
***
## Mit KI am Design arbeiten
KI steht im Zentrum dessen, wie du in Base44 designst. Du kannst einfach in natürlicher Sprache beschreiben, was du möchtest, und die KI aktualisiert Code, Stile und Komponenten für dich. Der **Edit**-Modus lässt dich anpassen, was du auf dem Bildschirm siehst, und KI-Steuerungen helfen dir, Grenzen zu setzen.
Der KI-Chat ist ideal für globale Änderungen und Design-Entscheidungen, die viele Teile deiner App betreffen. Du kannst einmal eine Persona und ein Briefing definieren und darauf aufbauen:
```text theme={null}
Du bist mein Produktdesigner für diese App.
Design-Briefing:
- Zweck: Content-Teams helfen, Artikel schneller zu planen, zu schreiben und zu veröffentlichen.
- Personen: Beschäftigte Content-Leads und -Autoren an Laptops während des Arbeitstages.
- Gefühl: Ruhig, fokussiert, modern, vertrauenswürdig.
Verwende dieses Briefing als Basis für alle Design-Vorschläge und Entscheidungen.
```
Hilfreiche Muster:
* Bitte um eine Kritik, bevor du um Änderungen bittest.
* Bitte um einen Plan im Discuss-Modus, genehmige ihn und bitte dann die KI, ihn umzusetzen.
* Stelle den Umfang des Designs immer klar: die gesamte App, eine Seite oder ein Element.
Beispiel:
```text theme={null}
Kritisiere das Design nur dieses Dashboards.
Konzentriere dich auf Layout, Hierarchie, Farbe, Typografie und Abstand.
Schlage dann einen kurzen Plan kleiner Änderungen vor.
Warte auf meine Genehmigung, bevor du etwas anwendest.
```
Nach deiner Überprüfung:
```text theme={null}
Wende den Plan an, den du für dieses Dashboard vorgeschlagen hast.
Mache Änderungen in kleinen Gruppen und beschreibe jede Gruppe kurz, während du fortfährst.
```
Der **Edit**-Modus ist ideal, wenn du das anpassen möchtest, was du siehst, ohne alles neu zu schreiben.
Klicke im Chat auf **Edit** und wähle dann das Element aus, das du ändern möchtest. Du kannst:
* Einen Bereich auswählen und Farben, Abstände und Layout visuell anpassen.
* Die KI bitten, nur eine Komponenten-Instanz neu zu stylen.
* Elemente, die du nicht mehr brauchst, mit dem **Delete**-Symbol löschen.
* Es als sicheren Sandbox verwenden, bevor du ein Muster auf den Rest deiner App ausrollst.
Klicke in der Edit-Toolbar auf **Edit Element**, um die KI um Änderungen zu bitten. Zum Beispiel:
```text theme={null}
In diesem ausgewählten Bereich:
- Helle den Hintergrund leicht auf
- Erhöhe den vertikalen Abstand zwischen der Überschrift und dem Inhalt
- Verwende den Primary-Button-Stil für die Hauptaktion und den Secondary-Stil für die anderen
```
```text theme={null}
Nur für diese Karte:
- Erhöhe das Padding
- Verschiebe das Icon links neben den Titel
- Verwende einen weicheren Schatten, der zu den anderen Karten in der App passt
```
Verwende die [KI-Steuerungen](/Building-your-app/AI-chat-modes#setting-ai-controls) im Chat, um dein Design zu leiten und zu schützen.
Du kannst:
* Design-Richtlinien festlegen, die für jeden Prompt gelten.
* Bestimmte Dateien oder Seiten einfrieren, damit die KI sie nicht ändert.
* Einen Ton festlegen, wie minimal, kräftig oder verspielt.
Beispiel-Richtlinien:
```text theme={null}
Globale Design-Richtlinien:
- Bevorzuge ruhige, minimale Visuals mit viel Weißraum
- Verwende abgerundete Ecken mit Radius 12 auf Karten und Buttons
- Vermeide schwere Gradienten und Glaseffekte
- Halte Animationen subtil und respektiere reduzierte Bewegungs-Präferenzen
```
Sei in deinen Prompts immer explizit über den Umfang. Die gleiche Änderung kann auf die gesamte App, eine Seite oder ein einzelnes Element angewendet werden, und die KI folgt deiner Anweisung:
```text theme={null}
Aktualisiere den Primary-Button-Stil und verbreite ihn an alle Stellen, wo die Primary-Button-Komponente verwendet wird.
Ändere die Secondary-Buttons nicht.
```
```text theme={null}
Aktualisiere nur den Hero-Bereich auf der Startseite:
- Ändere den Hintergrund in einen weichen Gradient
- Vergrößere die Überschrift
- Verwende den Primary-Button-Stil für die Hauptaufforderung zum Handeln
Ändere keine anderen Bereiche oder Seiten.
```
Um Bereiche zu schützen, mit denen du zufrieden bist, während du anderswo experimentierst:
* Verwende KI-Steuerungen, um bestimmte Dateien oder Seiten einzufrieren, damit die KI sie nicht ändert.
* Verwende die **Revert**-Option bei einzelnen Prompts, um eine einzelne Änderung rückgängig zu machen.
* Verwende die Versionshistorie, um zu einem früheren Zustand zurückzukehren.
Du kannst den KI-Chat nutzen, um verschiedene Richtungen zu erkunden, bevor du dich festlegst.
Kritik-Schleife:
```text theme={null}
Handle als Senior Product Designer.
Überprüfe diese Seite und beschreibe drei spezifische visuelle Probleme.
Schreibe für jedes Problem einen Base44-Prompt, der es beheben würde.
Mache noch keine Änderungen.
```
Alternative Richtungen:
```text theme={null}
Erstelle zwei visuelle Optionen für dieses Dashboard:
- Option A: sehr minimal, hauptsächlich neutral mit einer einzigen Akzentfarbe
- Option B: ausdrucksstärker, mit reicherer Farbe und etwas größerer Typografie
Halte Inhalt und Layout gleich.
Beschreibe jede Option in einer kurzen Zusammenfassung und warte, bis ich wähle.
```
Sobald du eine Option ausgewählt hast, kannst du die KI bitten, diese Richtung auf ähnliche Seiten anzuwenden.
Wenn du die KI bittest, das Design oder Layout eines Bereichs oder Elements zu ändern, kann sie visuelle Optionen präsentieren, aus denen du wählen kannst, statt sofort eine Änderung anzuwenden. Jede Option zeigt eine Vorschau, sodass du sehen kannst, wie sie aussehen wird, bevor du dich festlegst.
Wähle die gewünschte Option und klicke auf **Submit**, oder klicke auf **Skip**, um die KI entscheiden zu lassen.
***
## Globale Änderungen
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.
### Theme-Farben
Klicke auf eine beliebige Farbrolle, um sie in deiner gesamten App zu aktualisieren.
**So änderst du eine Farbe in deinem Theme:**
1. Klicke oben in deinem App-Editor auf das **Theme**-Symbol .
2. 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.
3. 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.
4. Klicke auf **Apply**, um die Änderung in deiner App in der Vorschau anzuzeigen.
5. 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`.
### Schriftarten
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:**
1. Klicke oben in deinem App-Editor auf das **Theme**-Symbol .
2. Klicke auf den Tab **Fonts**.
3. Klicke auf ein Dropdown und wähle eine Schriftart. Du kannst nach Namen suchen oder unter **Brand Fonts** und **All Fonts** browsen.
4. Klicke auf **Save & Apply**, um die Änderungen in deiner App anzuwenden.
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`.
***
## Element-Änderungen
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.
### Farben
Du kannst die Hintergrund- und Textfarbe jedes Elements mit den in deinem Theme definierten Farben oder einer benutzerdefinierten Farbe festlegen.
**So änderst du die Farbe eines Elements:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Element aus, das du ändern möchtest.
3. Klicke in der Edit-Toolbar auf das **Colors**-Symbol .
4. Wähle den Teil aus, den du ändern möchtest, wie Hintergrund oder Text.
5. 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.
6. 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.
### Typografie
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 Gewicht, Ausrichtung, Dekoration und Transform.
**So bearbeitest du Textinhalt:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Textelement aus.
3. Klicke in der Edit-Toolbar auf das **T**-Symbol.
4. Tippe deine Änderungen in das Feld **Text Content**.
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:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Textelement aus.
3. Klicke in der Edit-Toolbar auf das Dropdown für die Schriftart-Familie.
4. Suche oder browse unter **Brand Fonts** oder **All Fonts** und klicke auf eine Schriftart, um sie anzuwenden.
Das Dropdown für die Schriftart-Familie ist noch nicht für alle Nutzer verfügbar.
**So änderst du die Schriftgröße:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Textelement aus.
3. Klicke in der Edit-Toolbar auf das Größen-Dropdown.
4. Wähle eine Größe. Verfügbare Größen reichen von 12 bis 128.
Das Schriftgrößen-Dropdown ist noch nicht für alle Nutzer verfügbar.
**So änderst du den Textstil:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Textelement aus.
3. Klicke in der Edit-Toolbar auf das **Text Style**-Symbol.
4. Passe die Einstellungen an, die du ändern möchtest:
* **Size:** Wähle eine Größe aus XS, S, Base, L, XL, 2XL, 3XL oder 4XL.
* **Weight:** Lege das Gewicht von Thin bis Bold fest.
* **Decoration:** Unterstreichen oder Durchstreichen.
* **Alignment:** Links, zentriert, rechts oder Blocksatz.
* **Transform:** Keine, Großbuchstaben, Kleinbuchstaben oder Großschreibung.
### Abstand
Du kannst Margin und Padding für jedes Element in px festlegen und jede Seite unabhängig steuern.
**So änderst du den Abstand eines Elements:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Element aus, das du ändern möchtest.
3. Klicke in der Edit-Toolbar auf das **Spacing**-Symbol .
4. Gib Werte in px für Margin und Padding ein. Verwende die horizontalen und vertikalen Kurzsteuerungen, um beide Seiten gleichzeitig festzulegen.
### Eckenradius
Du kannst die Ecken eines beliebigen Elements abrunden, indem du einen Wert in px eingibst.
**So änderst du den Eckenradius eines Elements:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Element aus, das du ändern möchtest.
3. Klicke in der Edit-Toolbar auf das **Corners**-Symbol.
4. Gib einen Wert in px ein oder verwende die Pfeile, um ihn anzupassen.
### Deckkraft
Du kannst jedes Element vollständig deckend, halbtransparent oder irgendwo dazwischen machen.
**So änderst du die Deckkraft eines Elements:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Element aus, das du ändern möchtest.
3. Klicke in der Edit-Toolbar auf das **Opacity**-Symbol.
4. Ziehe den Schieberegler oder gib einen Wert von 0 (vollständig transparent) bis 100 (vollständig deckend) ein.
### Tailwind-Klassen
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:**
1. Klicke oben im Editor auf **Edit**.
2. Wähle das Element aus, das du ändern möchtest.
3. Klicke in der Edit-Toolbar auf das **Tailwind Classes**-Symbol.
4. 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.
***
## Designsystem
Diese Abschnitte behandeln, wie du mit dem KI-Chat konsistente, app-weite Designmuster etablierst. Stell dir diese als die Regelschicht vor, die deine globalen Themes und einzelnen Element-Änderungen kohärent wirken lässt.
### Farbsystem
Farbe ist eines deiner stärksten Tools, um Stimmung zu setzen und Aufmerksamkeit zu lenken. Beginne damit, Rollen zu definieren statt zufälliger Hex-Codes. Ziele auf:
* 1 Primärmarkenfarbe
* 1 Sekundärfarbe
* 1 Akzentfarbe für Highlights
* 3 bis 5 neutrale Grautöne für Hintergründe, Oberflächen und Rahmen
* Klare Farben für Erfolgs-, Warn- und Fehlerzustände
Du kannst die KI bitten, ein komplettes System von Grund auf vorzuschlagen und anzuwenden:
```text theme={null}
Erstelle ein Farbsystem für diese App:
- 1 Primärmarkenfarbe
- 1 Sekundärfarbe
- 1 Akzentfarbe für Highlights
- 4 neutrale Grautöne für Hintergründe, Oberflächen und Rahmen
Ordne Farben Rollen zu wie Primary, Surface, Border, Success, Warning, Error.
Stelle sicher, dass Text auf Hintergründen die Barrierefreiheits-Kontraststufen erfüllt.
Wende dieses System in der gesamten App an und ersetze einzelne Farben.
```
Halte die Bedeutung der Farben konsistent. Verwende deine Erfolgsfarbe zum Beispiel nur für positive Zustände und deine Fehlerfarbe für Probleme, nicht zur Dekoration.
Wenn du bereits Hex-Codes aus einem Brand-Guide oder einem externen Tool hast, füge sie ein und lass die KI sie Rollen zuordnen:
```text theme={null}
Verwende diese Palette und ordne jedem Hex eine Rolle zu:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Definiere, welche Primary, Secondary, Accent und neutrale Rollen sind.
Ersetze hartkodierte Farben durch Tokens oder Tailwind-Klassen, die diesen Rollen folgen.
```
Du kannst einen Screenshot oder ein Bild deiner Farbpalette direkt in den KI-Chat hochladen und die KI bitten, die Farben auf deine App anzuwenden:
```text theme={null}
Wende die Farben aus diesem Bild auf meine App an.
Ordne jede Farbe einer Rolle zu wie Primary, Background, Foreground und Accent.
Ersetze bestehende Farben in der gesamten App, damit sie passen.
```
***
### Typografiesystem
Typografie kontrolliert, wie lesbar und scanbar sich deine App anfühlt. Es ist besser, ein paar klare Textstile zu haben als viele ähnliche.
Definiere Rollen wie:
* Seitentitel
* Bereichsüberschrift
* Fließtext
* Kleine Metadaten wie Labels und Zeitstempel
Du kannst die KI bitten, dies einzurichten und überall anzuwenden:
```text theme={null}
Richte ein Typografiesystem ein:
- Seitentitel: größte Größe, fett, moderne Sans Serif
- Bereichsüberschriften: mittlere Größe, halbfett
- Fließtext: Standardgröße, normales Gewicht
- Metadaten: kleine Großbuchstaben mit zusätzlichem Buchstabenabstand
Wende diese Rollen konsistent auf allen Seiten an und entferne Ad-hoc-Schriftgrößen.
```
Du kannst auch Größen direkter ansprechen:
```text theme={null}
Mache die Typografie lesbarer:
- Erhöhe die Basis-Schriftgröße des Fließtexts leicht
- Erhöhe die Zeilenhöhe für Absätze
- Stelle sicher, dass Überschriften mindestens 1,4-mal so groß sind wie der Fließtext
Halte die Schriftarten gleich.
```
Du kannst benutzerdefinierte Schriftarten verwenden und sie über dein Layout anwenden.
1. Hole dir das Embed-Snippet (zum Beispiel von Google Fonts unter [https://fonts.google.com](https://fonts.google.com)).
2. Bitte die KI, es zu `Layout.js` hinzuzufügen und in dein Typografiesystem einzubinden.
Beispiel-Prompt:
```text theme={null}
Importiere die "Raleway"-Schriftart von Google Fonts.
Verwende sie für Seitentitel und Bereichsüberschriften.
Behalte die aktuelle Body-Schriftart für Absätze.
Aktualisiere Stile in der gesamten App nach dieser Regel.
```
Versuche, dich auf ein oder zwei Schriftfamilien zu beschränken. Zu viele Schriftarten lassen die Oberfläche unstrukturiert wirken und sind schwerer zu warten.
***
### Abstand und Dichte
Abstand und Dichte steuern, wie komfortabel sich deine App in der Nutzung anfühlt. Eine einfache Abstandsskala verhindert zufällige Lücken und gedrängte Bereiche.
Du kannst eine Skala wie 4, 8, 12, 16, 24 definieren und die KI bitten, sie anzuwenden:
```text theme={null}
Normalisiere Abstände mit dieser Skala: 4, 8, 12, 16, 24.
- Verwende größere Werte zwischen Hauptbereichen
- Verwende mittlere Werte innerhalb von Karten und Panels
- Verwende kleine Werte zwischen Labels und Eingaben
Reduziere Bereiche, die gedrängt wirken, und vermeide zufällige Abstandswerte.
```
Wenn eine Seite überfüllt oder zu leer wirkt, kannst du den KI-Chat diagnostizieren und beheben lassen:
```text theme={null}
Sieh dir diese Seite an und passe Abstände an:
- Füge oben und unten mehr Padding um jeden Bereich hinzu
- Erhöhe die Lücke zwischen Kartenreihen
- Stelle sicher, dass lange Absätze eine komfortable Zeilenlänge haben
Halte die bestehenden Farben und Inhalte bei.
```
***
### Kernelemente und Zustände
Sobald Farbe, Typografie und Abstand vorhanden sind, standardisiere die Bausteine, die du überall verwendest.
Konzentriere dich auf:
* Buttons (Primary, Secondary und Text-only)
* Karten und Panels
* Navigationsleisten und Sidebars
* Formularfelder (Standard, Focus, Error, Disabled)
* Chips, Tags und Badges, wenn du sie verwendest
Du kannst die KI bitten, Muster zu erkennen und zu vereinheitlichen:
```text theme={null}
Standardisiere Kernelemente:
- Buttons: Definiere Primary-, Secondary- und Text-only-Stile
- Karten: Definiere Eckenradius, Padding, Schatten und Header/Body-Layout
- Navigation: Definiere Active-, Hover- und Disabled-Zustände
- Formularfelder: Definiere Standard-, Focus-, Error- und Disabled-Zustände
Wende diese Muster in der gesamten App an und ersetze unpassende Stile.
```
Dies gibt dir eine wiederverwendbare Sprache, sodass neue Seiten so aussehen, als gehörten sie zum selben Produkt.
***
## Bilder und visuelle Assets
Visuelle Assets wie Bilder, Icons und Videos prägen, wie sich deine App anfühlt. Die KI kann dir helfen, sie zu erstellen, zu platzieren, zu stylen und mit deinen Daten und deinem Code zu verbinden.
Lade Bilder oder Videos zum KI-Chat hoch, um ihm visuellen Kontext für den Stil, das Layout oder den Inhalt deiner App zu geben.
Du kannst den KI-Chat bitten, Hero-Bilder direkt zu deinen Seiten hinzuzufügen:
```text theme={null}
Füge der Startseite ein bildschirmbreites Hero-Bild hinzu, das zur aktuellen Farbpalette passt.
Verwende ein Platzhalterbild, das ein modernes Analytics-Dashboard andeutet.
```
So ersetzt du ein Platzhalterbild:
1. Öffne die entsprechende Seitendatei wie `Store.js` in der Code-Ansicht.
2. Finde das `![]()
`-Tag.
3. Aktualisiere das `src`-Attribut mit deiner eigenen Bild-URL.
Du kannst auch Bilder für Entitäten im Bereich **Data** hochladen und sie an Komponenten binden, sodass Karten und Listen automatisch die richtigen Bilder anzeigen.
Bitte den KI-Chat, kurze Videos für visuelle Bereiche wie Heroes, Produktvorschauen, Tutorials oder Onboarding-Bildschirme zu generieren.
Beispiel-Prompt:
```text theme={null}
Erstelle ein kurzes Onboarding-Video für meine Fitness-App, das eine einfache Morgen-Trainingsroutine zeigt. Füge es über dem Get-Started-Button auf dem Begrüßungsbildschirm hinzu.
```
Das Generieren von Videos über den KI-Chat erfordert einen [Starter-Plan](/Account-and-billing/Billing-and-plans) oder höher. Jedes generierte Video verbraucht die Message-Credits des Prompts plus 1 zusätzlichen Message-Credit.
Du kannst Personen auch in deiner Live-App Videos generieren lassen. Erfahre mehr über das [Generieren von Videos](/Integrations/built-in-integrations#generating-videos).
Referenzbilder helfen dir, das Design visuell zu lenken, indem du dem KI-Chat einen Stil, Layout, eine Farbpalette oder visuelle Richtung zeigst, die du verwenden möchtest.
1. Klicke im KI-Chat auf das **Upload-Symbol (+)**.
2. Lade ein Inspirationsbild oder einen Screenshot hoch.
3. Sage der KI genau, was du übernehmen und was du ignorieren möchtest.
Prompt-Ideen:
```text theme={null}
Verwende dies als Inspiration.
Behalte mein Layout und meinen Inhalt, aber:
- Passe die Button-Formen und Schatten an
- Passe den Karten-Eckenradius und Rahmenstil an
- Wende einen ähnlichen weichen Gradient nur auf den oberen Header an
Kopiere nicht die exakten Farben, nur die Struktur und das Gefühl.
```
```text theme={null}
Extrahiere aus diesem Screenshot Design-Regeln für:
- Farbrollen
- Schriftgrößen und -gewichte
- Eckenradius und Schatten
- Abstände zwischen Bereichen und Karten
Erkläre die Regeln und wende dann einen ähnlichen Stil mit meinen aktuellen Markenfarben an.
```
Du kannst visuelle Stile direkt aus einem Design-Tool wie Figma kopieren und Base44 bitten, sie anzuwenden, statt zu versuchen, jedes Detail in Worten zu beschreiben.
**So kopierst du aus Figma:**
1. Wähle in Figma das Element aus, dessen Stil du kopieren möchtest.
2. Wechsle in den **Dev mode** und sieh dir das **Code**-Panel an.
3. Kopiere die entsprechende CSS-Zeile, zum Beispiel einen Gradient-Hintergrund: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. Öffne in Base44 **Visual Edit** und wähle das passende Element aus.
5. Füge den Stil in einen KI-Prompt ein und sage Base44 genau, was geändert werden soll, zum Beispiel:
```text theme={null}
Ändere den Hintergrundstil dieses Elements zu:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Halte alle anderen Stile gleich.
```
So kannst du Gradienten, Schatten, Rahmen und andere Stile aus deiner Designdatei sehr präzise abgleichen.
Icons sollten Bedeutung unterstützen, nicht nur Dekoration sein. Konsistenz ist der Schlüssel.
Gängige Aufgaben:
* Ersetze generische Icons durch aussagekräftigere.
* Richte Icon-Größen und Strichbreiten aus.
* Kombiniere Icons mit Text-Labels, wo Klarheit wichtig ist.
Du kannst Icon-Bibliotheken wie Lucide verwenden und den KI-Chat bitten, sie einzubinden:
```text theme={null}
Ersetze generische Icons durch aussagekräftigere:
- Verwende Icons, die zu jedem Navigationspunkt und jeder Hauptaktion klar passen
- Halte Icon-Größe und Strichbreite konsistent
- Richte Icons sauber mit Labels in Navigation, Listen und Buttons aus
```
```text theme={null}
Aktualisiere alle Primary-Call-to-Action-Buttons:
- Verwende das "sparkles"-Icon links neben dem Label
- Halte die Icon-Größe klein und das Padding gleichmäßig
- Füge keine Icons zu Secondary- oder Destructive-Buttons hinzu
```
***
## Layout und Responsivität
Layout steuert, wie Informationen gruppiert und gescannt werden. Responsivität stellt sicher, dass das Layout auf jedem Gerät funktioniert.
Denke in Seitentypen statt einmaligen Bildschirmen:
* Landing- und Marketing-Seiten
* Dashboards
* Listen und Tabellen
* Detailseiten
* Formulare und Wizards
* Einstellungs- und Profilseiten
Du kannst den KI-Chat bitten, Muster zu erkennen und zu standardisieren:
```text theme={null}
Identifiziere die wichtigsten Seitentypen in dieser App (Landing, Dashboard, Liste, Detail, Formular, Einstellungen).
Für jeden Typ:
- Schlage eine konsistente Layoutstruktur vor
- Schlage vor, welche bestehenden Komponenten wiederverwendet werden sollen
Wende diese Layouts auf alle Seiten desselben Typs an, ohne den Inhalt zu ändern.
```
Hierarchie und Weißraum helfen Personen, auf einen Blick zu sehen, was wichtig ist.
Ideen, die du der KI zur Anwendung geben kannst:
```text theme={null}
Verbessere visuelle Hierarchie und Weißraum auf dieser Seite:
- Lass den Seitentitel klar über anderem Text hervorstechen
- Verwende konsistente Bereichsüberschriften, um Inhalte zu gruppieren
- Füge oben und unten mehr Padding um jeden Bereich hinzu
- Erhöhe die Lücke zwischen Kartenreihen
Vermeide das Hinzufügen neuer Farben oder Schriftarten.
```
Weißraum ist besonders wichtig für dichte Inhalte wie Dashboards und Tabellen, gib also Schlüsselelementen Raum zum Atmen.
Deine App muss sich auf Telefonen, Tablets und Desktops natürlich anfühlen.
Du kannst responsive Regeln in einem einzigen Prompt codieren:
```text theme={null}
Mache dieses Layout responsiv:
- Verwende auf Telefonen eine einzige vertikale Spalte und stacke Bereiche
- Verwende auf Tablets zwei Spalten für Karten, wo Platz es zulässt
- Verwende auf Desktops drei oder vier Spalten für Karten
Halte Bilder im Seitenverhältnis 4:3.
Klappe die Sidebar auf kleineren Bildschirmen in ein oberes Menü ein.
Vermeide horizontales Scrollen bei allen Breakpoints.
```
Verwende die Geräte-Vorschau im Base44-Editor, um zu prüfen, wie diese Regeln auf verschiedenen Bildschirmgrößen funktionieren, und verfeinere sie dann mit Follow-up-Prompts.
### Deine App für mobile Geräte anpassen
Deine Base44-App passt ihr Layout automatisch für jedes Gerät an, aber du kannst die mobile Vorschau und Anpassungstools des Editors verwenden, um fein abzustimmen, wie deine App auf mobilen Geräten aussieht und funktioniert. So schaffst du eine komfortable, nahtlose Erfahrung für mobile Nutzer.
**So passt du deine App für mobile Geräte an:**
1. Gehe zu deinem App-Editor.
2. Klicke oben auf das **Screen**-Symbol und wähle **Mobile**.
3. Überprüfe dein Layout, deine Navigation und deinen Inhalt.
4. Nimm bei Bedarf Änderungen vor, entweder durch:
* Den KI-Chat bitten, Änderungen für Mobile vorzunehmen.
* Den **Edit**-Modus im KI-Chat verwenden, um Design oder Layout bestimmter Elemente zu ändern.
**Tipps, damit deine App auf Mobile gut aussieht:**
* Stelle sicher, dass der Text lesbar ist
* Passe die Größe von Elementen an den mobilen Bildschirm an
* Blende Elemente nach Bedarf ein oder aus
* Stelle sicher, dass Buttons und Icon-Buttons leicht antippbar sind
* Prüfe, dass Bilder gut aussehen
***
## Seitentypen
Verschiedene Seitentypen erfordern unterschiedliche Design-Entscheidungen. Du kannst diese Muster als Startpunkte verwenden und sie mit KI anpassen.
Konzentriere dich auf ein klares Versprechen, eine Hauptaufforderung zum Handeln und eine starke visuelle Hierarchie.
Design-Tipps:
* Verwende einen einfachen Header mit minimaler Navigation.
* Mache den Hero-Bereich klar und fokussiert, mit einer kurzen Überschrift und einem Primary-Button.
* Verwende unterstützende Bereiche für Vorteile, Funktionen und Social Proof.
* Halte Formulare kurz und wenn möglich „above the fold".
Prompt-Beispiel:
```text theme={null}
Designe die Startseite als fokussierte Landing-Page:
- Sauberer Hero-Bereich mit kurzer Überschrift, einem unterstützenden Satz und einem Primary-Call-to-Action
- Folge mit drei wichtigen Vorteilen in Karten
- Füge einen einfachen Social-Proof-Bereich mit Logos hinzu
- Halte die Navigation minimal
Verwende mein bestehendes Farb- und Typografiesystem.
```
Dashboards sollten auf einen Blick die Frage „Wie geht's mir?" beantworten.
Design-Tipps:
* Platziere die wichtigste Metrik oder den Status oben links.
* Gruppiere verwandte Metriken in Karten mit klaren Titeln und kurzen Beschreibungen.
* Vermeide zu viele Chart-Typen auf einem Bildschirm, wiederverwende ein paar Standard-Typen.
* Halte Filter und Zeiträume klar sichtbar und konsistent.
Prompt-Beispiel:
```text theme={null}
Strukturiere dieses Dashboard um:
- Platziere die Hauptkennzahl oben links in einer prominenten Karte
- Gruppiere verwandte Metriken in einem 2x2-Raster von Karten
- Verschiebe Filter und Datumssteuerungen in eine saubere obere Leiste
- Reduziere visuelles Rauschen in Charts durch konsistente Farben und Stile
```
Listen und Tabellen lassen Personen viele Elemente scannen und darauf agieren.
Design-Tipps:
* Verwende klare Spaltenüberschriften mit genügend Abstand.
* Halte die Zeilenhöhe komfortabel, nicht zu eng.
* Verwende Zebrastreifen oder subtile Zeilenseparatoren für große Tabellen.
* Halte Aktionen entweder am Ende der Zeile oder in einem konsistenten Menü.
* Füge Empty-, Loading- und Error-Zustände hinzu.
Prompt-Beispiel:
```text theme={null}
Bereinige diese Tabellenansicht:
- Erhöhe die Zeilenhöhe leicht
- Verwende subtile Zeilenseparatoren oder Zebrastreifen
- Richte Aktionen in einer konsistenten Spalte am Ende aus
- Füge einen klaren Empty-Zustand mit einer kurzen Nachricht und Primary-Aktion hinzu
```
Detailseiten sollten das Hauptobjekt und seine Schlüsselaktionen offensichtlich machen.
Design-Tipps:
* Platziere den Objekttitel und Primary-Aktionen oben.
* Verwende ein klares Layout mit einer Hauptinhaltsspalte und optionalem Seitenpanel.
* Gruppiere verwandte Informationen mit Überschriften oder Tabs.
* Halte destruktive Aktionen visuell unterschiedlich und sorgfältig platziert.
Prompt-Beispiel:
```text theme={null}
Verbessere diese Detailseite:
- Verschiebe den Haupttitel und Primary-Aktionen nach oben
- Verwende ein Zwei-Spalten-Layout mit Hauptinhalt links und sekundären Infos rechts
- Gruppiere verwandte Felder unter kleinen Überschriften
- Mache destruktive Aktionen klar beschriftet und visuell unterscheidbar
```
Formulare sind dort, wo viele Schlüsselabläufe stattfinden. Sie sollten sich einfach und nachsichtig anfühlen.
Design-Tipps:
* Gruppiere verwandte Felder unter Überschriften.
* Verwende ein einspaltiges Layout für die meisten Formulare.
* Zeige Fortschritt für lange, mehrstufige Abläufe.
* Platziere Fehlermeldungen nahe den Feldern und mache sie klar.
* Verwende klare Labels und Hilfstexte.
Prompt-Beispiel:
```text theme={null}
Designe dieses Formular für Klarheit neu:
- Verwende ein einspaltiges Layout
- Gruppiere verwandte Felder unter kurzen Überschriften
- Füge klare Labels und Hilfstexte hinzu, wo nötig
- Zeige Inline-Fehlermeldungen unter jedem Feld, wenn die Validierung fehlschlägt
Verwende mein bestehendes Typografie- und Abstandssystem.
```
***
## Themes und Modi
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.
### Design-Themes
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:
```text theme={null}
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
```
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:
```text theme={null}
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 bei
Wende Glaseffekte nicht auf alle Karten oder Hauptinhalte an.
```
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:
```text theme={null}
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
```
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:
```text theme={null}
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 bleibt
Wende diesen Stil nur auf interaktive Elemente an, nicht auf lange Textbereiche.
```
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:
```text theme={null}
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 lesbar
Wende diesen Stil nicht auf Datentabellen oder dichte Formulare an.
```
### Helle und dunkle Themes
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.
Prompt:
```text theme={null}
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 bleiben
Fü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
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.
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:
```text theme={null}
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 hinzu
Respektiere reduzierte Bewegungs-Präferenzen und vermeide schnelles Blinken.
```
Für Marketing- oder Promo-Seiten kannst du einen stärkeren Ton verwenden:
```text theme={null}
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 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:
```text theme={null}
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 relevant
Verwende 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.
***
## Erweiterte Anpassung
Wenn du über das hinausgehen möchtest, was KI und der **Edit**-Modus dir out of the box bieten, kannst du deinen eigenen Code und npm-Pakete einbringen. Die KI kann dir trotzdem helfen, alles zu verkabeln und auszurichten.
Du kannst [npm-Pakete](/Building-your-app/NPM-packages) verwenden, um reichere Bewegung, visuelle Effekte und interaktive Komponenten in deine Base44-App zu bringen, ohne alles von Grund auf zu bauen. Pakete kommen aus dem öffentlichen npm-Registry und werden über den KI-Chat in deinem App-Editor installiert, sodass du im selben Workflow bleibst.
**Design-orientierte Beispiele umfassen:**
* Animations-Bibliotheken (zum Beispiel anime.js), um Übergänge, Hover-Effekte und Mikro-Interaktionen hinzuzufügen.
* UI-Komponenten- oder Bewegungs-Bibliotheken, um Modals, Tooltips, Carousels oder Step-Flows mit eingebauten Interaktionsmustern zu handhaben.
* Chart- und Graph-Utilities, um Daten mit benutzerdefinierten Farben, Typografie und Abständen passend zu deiner App zu visualisieren.
* Drag-and-Drop- oder Gesten-Bibliotheken, um Layouts taktiler und interaktiver wirken zu lassen.
* Datum- und Zeit-Helfer, um Zeitstempel und Zeitpläne so zu formatieren, dass sie zu deiner UI passen.
**Nachdem ein Paket installiert ist, kannst du den KI-Chat verwenden, um:**
* Die richtigen Funktionen oder Komponenten aus dem Paket zu importieren.
* Sie in dein bestehendes Layout und deine Design-Tokens (Farben, Typografie, Abstand, Radius) einzubinden.
* Props, Varianten und Bewegung anzupassen, damit sie sich konsistent mit dem Rest der App anfühlen.
* Barrierefreiheits-Details wie Focus-Zustände, Tastaturnavigation und reduzierte Bewegungs-Präferenzen zu prüfen.
**Prompt-Beispiel**
```text theme={null}
Ich habe das npm-Paket framer-motion hinzugefügt. Refaktoriere das bestehende Karten-Grid, damit jede Karte beim Hover mit framer-motion animiert:
- Behalte das aktuelle Layout und den Text
- Verwende die bestehenden Farb-Tokens, Eckenradius und Typografie
- Respektiere prefers-reduced-motion und halte Tastatur-Focus-Umrisse klar
```
Alle npm-Pakete sind Code von Drittanbietern. Base44 kann ihre Qualität oder Sicherheit nicht garantieren, also stelle sicher, dass du das README des Pakets überprüfst, es in deiner App testest und bestätigst, dass es die Design- und Performance-Anforderungen deines Projekts erfüllt.
Base44-Apps verwenden oft Tailwind-CSS-Utilities. Die KI kann dir helfen, unordentliche Stile in etwas Systematischeres zu refaktorisieren.
Aufgaben, um die du die KI bitten kannst:
* Ersetze Inline-Stile durch Tailwind-Utilities.
* Extrahiere wiederholte Muster in wiederverwendbare Komponenten.
* Ordne Farbwerte Design-Tokens und Tailwind-Konfig zu.
Beispiel:
```text theme={null}
Refaktoriere diese Komponenten, damit sie konsistente Tailwind-Klassen verwenden:
- Ersetze Inline-Style-Attribute durch Tailwind-Utilities
- Verwende die Design-Tokens für Farben, Abstand und Typografie
- Dokumentiere die wichtigsten Klassen-Kombinationen für Navigation, Karten und Buttons
```
Manchmal möchtest du präzise Kontrolle über Layout, Animation oder Komponentenstruktur. Du kannst [Code-Dateien](/documentation/building-your-app/editing-code) direkt öffnen und sie entweder selbst bearbeiten oder die KI darum bitten.
Gängige design-bezogene Edits:
* Aktualisieren von `Layout.js`, um globale Wrapper, Header oder Footer zu ändern.
* Anpassen von Theme-Providern oder Context.
* Ändern, wie Komponenten zusammengesetzt sind und welche Props sie akzeptieren.
So bearbeitest du den Code:
1. Öffne die entsprechende Datei.
2. Füge ein Code-Snippet in den KI-Chat ein.
3. Bitte um eine Änderung, dann überprüfe das Diff oder die Vorschau.
Beispiel:
```text theme={null}
Hier ist meine Layout.js-Komponente.
Passe sie an, sodass:
- Der Header beim Scrollen sticky ist
- Der Hauptinhalt eine maximale Breite hat und auf großen Bildschirmen zentriert ist
- Die Hintergrundfarbe das Surface-Token aus meinem Designsystem verwendet
Erkläre in Kommentaren, was du geändert hast.
```
Design-Entscheidungen beeinflussen [Performance](/Performance-and-SEO/App-performance), besonders wenn du Pakete und schwere Visuals einführst.
Berücksichtige:
* Verwende optimierte Bildgrößen statt riesiger Hintergrund-Assets.
* Vermeide das Laden vieler schwerer Animationen oder großer Bibliotheken beim ersten Laden.
* Lazy-load selten genutzte Bereiche wie tiefe Berichte oder erweiterte Filter.
* Wiederverwende geteilte Komponenten statt viele Beinahe-Kopien.
Du kannst die KI um eine performance-orientierte Überprüfung bitten:
```text theme={null}
Überprüfe das Design dieser App aus Performance-Sicht:
- Identifiziere schwere visuelle oder code-bezogene Elemente, die das Laden verlangsamen könnten
- Schlage leichtere Alternativen vor, die das Gesamtbild beibehalten
- Schlage spezifische Stellen vor, an denen Lazy Loading oder Code-Splitting helfen würde
```
***
## Barrierefreiheit
Barrierefreiheit ist Teil von gutem Design. Sie hilft mehr Personen, deine App komfortabel zu nutzen, und kann die Klarheit für alle verbessern.
Farbentscheidungen haben einen direkten Einfluss auf Lesbarkeit.
Gute Praktiken:
* Verwende starken Kontrast zwischen Text und Hintergrund.
* Vermeide es, Farbe allein zur Vermittlung von Bedeutung zu nutzen.
* Halte interaktive Elemente wie Buttons und Links in allen Zuständen klar sichtbar.
* Prüfe sowohl hellen als auch dunklen Modus, wenn du Themes unterstützt.
Prompt-Beispiel:
```text theme={null}
Auditiere diese App auf Farbkontrast:
- Identifiziere Text oder Icons mit niedrigem Kontrast zum Hintergrund
- Stärke den Kontrast, während du die allgemeine Palette beibehältst
- Stelle sicher, dass Primary-Buttons und Links klar unterscheidbar sind
Beschreibe die wichtigsten angewendeten Fixes.
```
Lesbarer Text geht um mehr als die Schriftwahl.
Gute Praktiken:
* Verwende komfortable Schriftgrößen auf allen Geräten.
* Verwende ausreichende Zeilenhöhe für Absätze.
* Vermeide sehr leichte Schriftgewichte auf hellen Hintergründen.
* Halte die Zeilenlänge angemessen, besonders auf breiten Bildschirmen.
Prompt-Beispiel:
```text theme={null}
Verbessere die Textlesbarkeit:
- Erhöhe die Basis-Schriftgröße des Fließtexts leicht
- Erhöhe die Zeilenhöhe für Absätze
- Stelle sicher, dass Überschriften klar größer sind als der Fließtext
- Reduziere sehr lange Zeilenlängen auf breiten Bildschirmen
```
Personen sollten in der Lage sein, deine App mit einer Tastatur zu nutzen und zu sehen, wo sie sind.
Gute Praktiken:
* Stelle sicher, dass Tab in einer logischen Reihenfolge durch interaktive Elemente bewegt.
* Stelle sicher, dass Focus-Stile sichtbar und unterscheidbar sind.
* Vermeide Tastatur-Fallen, wo sich der Focus nicht wegbewegen kann.
Prompt-Beispiel:
```text theme={null}
Verbessere Tastatur- und Focus-Barrierefreiheit:
- Stelle sicher, dass alle interaktiven Elemente mit Tab erreichbar sind
- Füge sichtbare Focus-Stile zu Buttons, Links und Formularfeldern hinzu
- Behebe Focus-Reihenfolge-Probleme auf dieser Seite
Beschreibe alle wesentlichen Änderungen, die du vorgenommen hast.
```
Bewegung kann helfen oder schaden. Manche Personen bevorzugen weniger davon.
Gute Praktiken:
* Respektiere reduzierte Bewegungs-Präferenzen.
* Vermeide schnelles Blinken oder starkes Flackern.
* Verwende subtile, zweckmäßige Animationen statt ständiger Bewegung.
Prompt-Beispiel:
```text theme={null}
Passe Animationen für Barrierefreiheit an:
- Respektiere die Reduced-Motion-Präferenz des Nutzers
- Entferne oder vereinfache große kontinuierliche Animationen
- Behalte nur kurze, subtile Bewegung, die das Verständnis unterstützt
```
Klare Sprache und Beschreibungen helfen allen, einschließlich Personen, die Hilfstechnologien verwenden.
Gute Praktiken:
* Verwende klare, beschreibende Labels für Buttons und Links.
* Stelle aussagekräftigen Alt-Text für wichtige Bilder bereit.
* Verwende Überschriften, um Inhalte zu strukturieren.
* Vermeide vage Link-Texte wie „hier klicken".
Prompt-Beispiel:
```text theme={null}
Verbessere die Barrierefreiheit von Labels und Alt-Text:
- Mache Button- und Link-Labels beschreibender, wo nötig
- Füge Alt-Text für wichtige Bilder hinzu oder verbessere ihn
- Stelle sicher, dass Überschriften einer klaren Struktur folgen
Halte den Ton und die Markenstimme gleich.
```
***
## Quick-Tricks
Wenn du schnelle Verbesserungen möchtest, können diese kurzen Rezepte dir helfen, mit wenigen Prompts viel Wert zu erzielen.
* 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:
```text theme={null}
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 konsistent
Halte Inhalt und Logik gleich.
```
* 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:
```text theme={null}
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
```
* Passe Abstand und Hierarchie an.
* Aktualisiere Karten- und Button-Formen.
* Führe subtile Mikro-Interaktionen ein.
Prompt:
```text theme={null}
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
```
***
## FAQs
Klicke unten auf eine Frage, um mehr über das Designen deiner App zu erfahren.
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.
Designe für Mobile, Tablet und Desktop separat und prüfe dann, wie sich deine Layouts anpassen.
Verwende diese Richtlinien beim Designen in Base44:
* Mobile: Verwende eine einzige vertikale Spalte, halte eine klare Primary-Aktion pro Bildschirm und mache Tap-Ziele groß mit genügend Abstand. Halte Text kurz, damit Personen nicht zoomen müssen.
* Tablet: Behandle Tablet als Hybrid. Du kannst Seitenmenüs oder Split-Layouts verwenden, aber halte Buttons touch-freundlich und vermeide sehr kleine Tabellen oder dichte Steuerungen.
* Desktop: Nutze die zusätzliche Breite für Mehrspalten-Layouts und Sidebars. Du kannst Hover-Effekte hinzufügen, aber jede wichtige Aktion muss auch mit einem Klick oder Tap funktionieren.
* Alle Geräte: Verwende lesbare Schriftgrößen, vermeide horizontales Scrollen und lass Elemente stacken statt überlappen, wenn der Platz knapp ist. Vermeide feste Höhen, die Inhalte abschneiden.
Du kannst die KI auch bitten, responsive Regeln anzuwenden, zum Beispiel:
```text theme={null}
Mache dieses Layout responsiv für Mobile, Tablet und Desktop.
Vermeide horizontales Scrollen und halte Primary-Aktionen ohne übermäßiges Scrollen sichtbar.
```
Design-Entscheidungen haben einen direkten Einfluss darauf, wie schnell deine App lädt und sich anfühlt. Beim Designen in Base44 behalte diese Richtlinien im Kopf:
* Verwende optimierte Bildgrößen, damit große Assets das anfängliche Laden nicht verlangsamen. Bevorzuge komprimierte Formate und vermeide das Hochladen von Bildern, die viel größer sind als sie auf dem Bildschirm erscheinen.
* Begrenze schwere Animationen und komplexe Effekte, besonders in mobilen Apps. Kurze, einfache Übergänge sind in Ordnung, aber vermeide ständige Bewegung oder große animierte Hintergründe.
* Halte Layouts sauber und fokussiert. Weniger Ebenen, Overlays und verschachtelte Komponenten bedeuten normalerweise schnelleres Rendering, besonders auf schwächeren Geräten.
* Wiederverwende Komponenten statt viele leicht unterschiedliche Versionen zu erstellen. Geteilte Komponenten sind einfacher zu cachen und zu warten.
* Vermeide es, alles auf einmal zu laden. Wo möglich, lade nicht-kritische Inhalte später, zum Beispiel sekundäre Bereiche, lange Listen oder selten genutzte Panels.
* Sei vorsichtig mit Drittanbieter-Embeds wie Karten, Videoplayern und Widgets. Füge sie nur ein, wo sie echten Mehrwert bieten, und vermeide es, viele Embeds auf einem einzigen Bildschirm zu stapeln.
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.
Erfahre mehr über [KI-Chat-Modi und Versionshistorie](/Building-your-app/AI-chat-modes).
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.
Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die [englische Version](/).