> ## 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. # Mit KI designen > 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. 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 Für das Theme-Panel, Schriftarten und globales Styling innerhalb einer App siehe [Das Design deiner App anpassen](/Building-your-app/Design). *** ## 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: | Gewünschte Änderung | Verwende | | ------------------------------------------------------------------- | ------------------- | | Farben oder Schriftarten in der gesamten App | Das **Theme**-Panel | | Ein Element oder einen Abschnitt, auf den du zeigen kannst | Den **Edit**-Modus | | Alles Größere, etwa neue Layouts, Redesigns oder ein anderes Gefühl | Den KI-Chat | **Eine gute Reihenfolge für ein komplettes Redesign:** 1. Lege zuerst den Gesamtlook fest: Farben und Schriftarten im [Theme-Panel](/Building-your-app/Design#global-changes). 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: ```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. - Zielgruppe: Vielbeschäftigte Content-Leads und Autoren am Laptop während des Arbeitstags. - Gefühl: Ruhig, fokussiert, modern, vertrauenswürdig. Verwende dieses Briefing als Grundlage für alle Designvorschläge und -entscheidungen. ``` 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: ```text theme={null} Lass diese Seite ruhiger und hochwertiger wirken. Verwende den angehängten Screenshot als Referenz für den Gesamtstil. ``` 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: ```text theme={null} Kritisiere nur das Design dieses Dashboards. Konzentriere dich auf Layout, Hierarchie, Farbe, Typografie und Abstände. Schlage dann einen kurzen Plan mit kleinen Änderungen vor. Warte auf meine Freigabe, bevor du etwas anwendest. ``` Nach deiner Prüfung: ```text theme={null} Wende den Plan an, den du für dieses Dashboard vorgeschlagen hast. Nimm Änderungen in kleinen Gruppen vor und beschreibe jede Gruppe kurz. ``` *** ## 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 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 *** ## 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: ```text theme={null} Agiere als Senior Product Designer. Prüfe diese Seite und beschreibe drei konkrete visuelle Probleme. Schreibe für jedes Problem einen Base44-Prompt, der es beheben würde. Nimm noch keine Änderungen vor. ``` Alternative Richtungen: ```text theme={null} Erstelle zwei visuelle Optionen für dieses Dashboard: - Option A: sehr minimalistisch, überwiegend neutral mit einer einzigen Akzentfarbe - Option B: ausdrucksstärker, mit kräftigeren Farben und etwas größerer Typografie Behalte Inhalt und Layout bei. Beschreibe jede Option in einer kurzen Zusammenfassung und warte, bis ich wähle. ``` 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 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: ```text theme={null} In diesem ausgewählten Abschnitt: - Helle den Hintergrund leicht auf - Vergrößere den vertikalen Abstand zwischen Überschrift und Inhalt - Verwende den primären Button-Stil für die Hauptaktion und den sekundären Stil für die anderen ``` ```text theme={null} Nur für diese Karte: - Vergrößere das Padding - Verschiebe das Symbol links neben den Titel - Verwende einen weicheren Schatten, der zu den anderen Karten in der App passt ``` *** ## KI-Steuerungen verwenden Verwende die [KI-Steuerungen](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) 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: ```text theme={null} Globale Designrichtlinien: - Bevorzuge ruhige, minimalistische Visuals mit viel Weißraum - Verwende abgerundete Ecken mit Radius 12 bei Karten und Buttons - Vermeide starke Verläufe und Glaseffekte - Halte Animationen dezent und respektiere Einstellungen für reduzierte Bewegung ``` 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: ```text theme={null} Aktualisiere den primären Button-Stil und übertrage ihn auf alle Stellen, an denen die primäre Button-Komponente verwendet wird. Ändere keine sekundären Buttons. ``` ```text theme={null} Aktualisiere nur den Hero-Bereich auf der Startseite: - Ändere den Hintergrund zu einem weichen Verlauf - Vergrößere die Überschrift - Verwende den primären Button-Stil für den Haupt-Call-to-Action Ändere keine anderen Abschnitte 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 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](/Building-your-app/Design). Diese Seite wurde mit KI übersetzt. Die genauesten und aktuellsten Informationen findest du in der [englischen Version](/).