Skip to main content
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. Der Edit-Modus lässt dich anpassen, was du auf dem Bildschirm siehst, und KI-Steuerungen helfen dir, Grenzen zu setzen. Diese Seite behandelt jeden Workflow mit Prompts und Beispielen, die du direkt verwenden kannst.
The app editor chat making a design change to an app

Deine App mit KI designen

Für das Theme-Panel, Schriftarten und globales Styling innerhalb einer App siehe Das Design deiner App anpassen.

So funktioniert Design

Du brauchst kein Design-Tool und keine Design-Erfahrung. Das Design deiner App ist Teil ihres Codes, und die KI ändert diesen Code für dich: Jede Designänderung ist eine Anfrage in einfacher Sprache, von „mache die Buttons runder“ bis „gestalte diese ganze Seite neu“. Es gibt drei Wege, eine Designänderung vorzunehmen, und die richtige Wahl spart dir Zeit: Eine gute Reihenfolge für ein komplettes Redesign:
  1. Lege zuerst den Gesamtlook fest: Farben und Schriftarten im Theme-Panel.
  2. Bitte die KI um Änderungen auf Seitenebene, eine Seite nach der anderen.
  3. Verfeinere einzelne Elemente im Edit-Modus.
Nichts ist dauerhaft. Du kannst bei jedem Prompt auf Revert klicken, um diese Änderung rückgängig zu machen, oder eine frühere Version deiner App aus dem Versionsverlauf wiederherstellen. Experimentieren ist also immer sicher.

Im Chat designen

Der KI-Chat ist ideal für globale Änderungen und Designentscheidungen, die viele Teile deiner App betreffen. Du kannst einmal eine Persona und ein Briefing definieren und darauf aufbauen:
Du brauchst auch kein Design-Vokabular. Beschreibe das gewünschte Gefühl, nenne ein Produkt, dessen Stil dir gefällt, oder lade einen Screenshot eines Designs hoch, das du bewunderst, und bitte die KI, dessen Stil zu übernehmen:
Hilfreiche Muster:
  • Bitte um eine Kritik, bevor du um Änderungen bittest.
  • Bitte im Discuss-Modus um einen Plan, genehmige ihn und bitte die KI dann, ihn umzusetzen.
  • Kläre immer den Umfang des Designs: die ganze App, eine Seite oder ein Element.
Beispiel:
Nach deiner Prüfung:

Eine Designoption wählen

Wenn du die KI bittest, das Design oder Layout eines Abschnitts oder Elements zu ändern, kann sie dir visuelle Optionen zur Auswahl anbieten, statt sofort eine Änderung anzuwenden. Jede Option zeigt eine Vorschau, damit du vor der Entscheidung siehst, wie sie aussehen wird. Du kannst auch auf das Expand-Symbol einer Option klicken, um sie im Vollmodus anzusehen und vor der Auswahl zu verfeinern.
Design options in the chat, with the Expand icon shown on a mockup

Aus KI-Designoptionen wählen

Beschreibe eine gezielte Änderung, etwa einen helleren Hintergrund, um nur diese Details anzupassen, oder bitte um eine völlig andere Richtung, um die Option zu ersetzen. Wenn es passt, klicke auf Apply.
Expanded design option showing a mockup preview with a change request typed below it

Eine Designoption in der erweiterten Ansicht verfeinern


Designrichtungen erkunden

Du kannst den KI-Chat nutzen, um verschiedene Richtungen zu erkunden, bevor du dich festlegst. Du musst dein aktuelles Design nicht beschreiben: Die KI macht einen Screenshot deiner Seite und prüft, was tatsächlich da ist. Kritikschleife:
Alternative Richtungen:
Sobald du eine Option gewählt hast, kannst du die KI bitten, diese Richtung auf ähnliche Seiten anzuwenden.

Den Edit-Modus verwenden

Der Edit-Modus ist ideal, wenn du das anpassen möchtest, was du siehst, ohne alles neu zu schreiben.
Visualedittoolbar

Die Edit-Modus-Toolbar

Klicke im Chat auf Edit und wähle dann das Element aus, das du ändern möchtest. Du kannst:
  • Einen Abschnitt auswählen und Farben, Abstände und Layout visuell anpassen.
  • Die KI bitten, nur eine Komponenteninstanz neu zu stylen.
  • Elemente löschen, die du nicht mehr brauchst, mit dem Delete-Symbol .
  • Ihn als sicheren Sandkasten nutzen, 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:

KI-Steuerungen verwenden

Verwende die KI-Steuerungen im Chat, um dein Design zu lenken und zu schützen. Du kannst:
  • Designrichtlinien festlegen, die für jeden Prompt gelten.
  • Bestimmte Dateien oder Seiten einfrieren, damit die KI sie nicht ändert.
  • Einen Ton festlegen, etwa minimalistisch, kräftig oder verspielt.
Beispielrichtlinien:
Sei in deinen Prompts immer explizit beim Umfang. Dieselbe Änderung kann für die ganze App, eine Seite oder ein einzelnes Element gelten, und die KI folgt deiner Vorgabe:
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 Option Revert bei einzelnen Prompts, um eine einzelne Änderung rückgängig zu machen.
  • Verwende den Versionsverlauf, um zu einem früheren Zustand zurückzukehren.

FAQs

Klicke unten auf eine Frage, um mehr über das Designen mit KI zu erfahren.
Ja. Design-Prompts sind KI-Chat-Nachrichten und verbrauchen deine Nachrichten-Credits genauso wie jede andere Anfrage im Chat.
Der Edit-Modus stylt ein Element oder einen Abschnitt nach dem anderen. Das Theme-Panel ändert Farben und Schriftarten in deiner gesamten App auf einmal. Mehr zum Theme-Panel erfährst du unter Das Design deiner App anpassen.
Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der englischen Version.