Passe an, wie deine App aussieht, und sieh dir dann das Ergebnis in der Vorschau an, bevor du veröffentlichst.

Design wird neben deiner Live-Vorschau geöffnet und ermöglicht dir, das Aussehen deines Projekts zu ändern ohne Code zu schreiben.

Dieser Leitfaden behandelt das Festlegen globaler Stile mit Theme, das Bearbeiten einzelner Elemente mit dem Visueller Editor, das Ersetzen von Bildern aus der Library, das Beschreiben von Änderungen in natürlicher Sprache und das Prüfen deiner Arbeit auf verschiedenen Geräten, bevor sie live geht.

So funktioniert Design

Wenn KI-Agenten eine Aufgabe abschließen, erscheint der App-Viewer oben auf der Seite. Wähle Design, um das Design-Panel auf der linken Seite des Bildschirms zu öffnen, mit deiner Live-Vorschau daneben. Es hat drei Tabs:

• Theme legt globale Regeln für die gesamte App fest — Farben, Schriftarten und Effekte. Am besten vor dem Erstellen verwenden.
• Visueller Editor passt die Elemente an, die du ausgewählt hast. Funktioniert in jedem Projekt, jederzeit.
• Library ersetzt Bilder oder generiert neue.

Theme legt die Regeln fest, und der Visueller Editor perfektioniert die Details. Wähle Exit, um das Panel zu schließen.

Das Design-Panel wird links geöffnet. Bis du etwas auswählst, fordert dich der Visueller Editor auf, ein Element auszuwählen.

Bevor du beginnst

Bevor du Design öffnest, stelle sicher, dass:

• Dein Projekt einen abgeschlossenen Build hat. Design wird aus dem App-Viewer geöffnet, der erst erscheint, nachdem die Agenten eine Aufgabe abgeschlossen haben.
• Du weißt, dass Änderungen erst live sind, wenn du veröffentlichst. Deine öffentliche URL bleibt unverändert, bis du die aktualisierte Version veröffentlichst.
• Du weißt, dass ein Theme nur gemeinsame Stile erreicht. Elemente, die mit festen Werten erstellt wurden, behalten nach einer Theme-Änderung ihr altes Aussehen. Siehe unten Wenn ein Theme nicht richtig aussieht.

Globale Stile mit Theme festlegen

Ein Theme ist das Designsystem deines Projekts. Es definiert globale Variablen — Paletten, Typografie und Abstände — die in deiner gesamten App gelten, statt Einstellungen für nur ein einzelnes Element.

Theme wird am besten in der Vorbereitungsphase verwendet, bevor du mit dem Erstellen beginnst. Wenn du früh eines anwendest, folgt alles, was die Agenten generieren, ihm von Anfang an.

Ein Theme auswählen

Der Tab Theme wird mit einem Feld Search Themes geöffnet und gruppiert Themes in Abschnitte:

• Current Theme — was dein Projekt derzeit verwendet. Bevor du etwas anwendest, steht dort No theme applied yet, und die Schaltfläche + daneben erstellt ein neues Theme.
• Default Theme — 14 von Designern kuratierte Voreinstellungen. Jedes wird als Vorschau einer damit erstellten Seite angezeigt, mit seinem Namen und einer Reihe von Farbfeldern, die seine Palette zeigen. Diese können nicht gelöscht werden.
• My Theme — Themes, die du erstellt oder angepasst hast. Diese können umbenannt und gelöscht werden.

Jedes Theme erscheint als Vorschau einer damit erstellten Seite, mit seinem Namen und einer Reihe von Farbfeldern, die seine Palette zeigen, damit du die Richtung beurteilen kannst, bevor du es anwendest.

Der Theme-Tab, mit einem angewendeten Theme oben und deinen gespeicherten Themes darunter.

So wendest du eines an:

1. Wähle das gewünschte Theme aus.
2. Atoms fragt "Do you want to apply theme name?"
3. Wähle zur Bestätigung Apply oder Cancel, um zurückzugehen.
4. Prüfe die Vorschau.

Erwartetes Ergebnis: Die Vorschau wird auf das von dir gewählte Theme aktualisiert, und es erscheint jetzt unter Current Theme.

Hinweis: Wenn du im Visueller Editor ungespeicherte Änderungen hast, zeigt Atoms Unsaved Changes an und fordert dich auf, sie zu speichern oder zu verwerfen, bevor ein neues Theme angewendet wird.

Ein angewendetes Theme aktualisieren

Ein Punkt auf dem Tab Theme bedeutet, dass eine neuere Version deines angewendeten Themes verfügbar ist.

Um sie zu übernehmen, wähle bei deinem aktuellen Theme Update und bestätige Do you want to re-apply theme name? Dein Projekt verwendet dann die neuere Version.

Du musst nicht aktualisieren. Wenn du es so lässt, verwendet dein Projekt weiterhin die Version, die du angewendet hast.

Hinweis: Wenn deine App nicht wie das ausgewählte Theme aussieht, wurden einzelne Elemente möglicherweise im Visueller Editor überschrieben. Diese Überschreibungen zielen auf bestimmte Inhalte und bleiben auch nach einer Theme-Änderung bestehen.

Ein Theme im Theme Manager erstellen oder bearbeiten

Wähle + neben Current Theme, um eines von Grund auf zu erstellen, oder öffne ein vorhandenes Theme, um es zu ändern. Beides öffnet den Theme Manager, in dem du ein Theme anhand einer Live-Vorschau fein abstimmen kannst.

Seine Einstellungen befinden sich auf drei Tabs:

• Color — die Farbrollen, die deine App verwendet, nach Zweck gruppiert: Base Colors, Card, Popover, Primary, Secondary und mehr. Jede Rolle hat ihren eigenen Wert, sodass eine Änderung von Primary jedes Element erreicht, das sie verwendet.
• Fonts — deine Schriftarten Serif, Sans-serif und Mono.
• Effects — Ecken-Radius und ein Shadow, den du über Farbe, Deckkraft, Unschärfe, Ausbreitung und Versatz steuerst.

Die Vorschau daneben wird aus echten Komponenten erstellt — Anmeldeformulare, Schaltflächen, Eingabefelder, Fließtext und Monospace-Text — sodass du eine Änderung sofort beurteilen kannst, statt zu raten. Verwende den Hell-/Dunkel-Umschalter darunter, um beides zu prüfen, denn eine Palette, die auf hellen Flächen funktioniert, kann auf dunklen an Kontrast verlieren.

Unter der Vorschau findest du außerdem Undo und Redo, um deine Änderungen schrittweise durchzugehen, sowie Reset, um das Theme auf seinen Ausgangszustand zurückzusetzen.

Theme Manager. Die Vorschau wird aktualisiert, wenn du einen Wert änderst, und die Steuerelemente darunter umfassen Rückgängig, Wiederholen, Exportieren, Importieren und Zurücksetzen.

Ein Theme speichern

1. Wähle Save.
2. Gib ihm einen Theme Name oder behalte den vorgeschlagenen bei.
3. Wähle zur Bestätigung Save.

Erwartetes Ergebnis: Dein Theme erscheint unter My Theme auf dem Theme-Tab, wobei seine Palette als Farbfelder angezeigt wird. Wende es auf die gleiche Weise an wie jedes andere Theme.

Hinweis: Bearbeitungen werden erst gespeichert, wenn du sie speicherst. Atoms hält dich an und bietet an, zu speichern oder zu verwerfen, wenn du versuchst, ein anderes Theme anzuwenden, während noch ungespeicherte Änderungen vorliegen.

Ein Theme projektübergreifend wiederverwenden

Der Theme Manager hat unter der Vorschau Export und Import. Exportiere ein Theme in eine Datei und importiere es dann in ein anderes Projekt, um dieselbe Designrichtung wiederzuverwenden, oder gib es an ein Teammitglied weiter, damit dessen Projekt zu deinem passt.

Wenn ein Theme nicht richtig aussieht

Das Anwenden eines Themes ist keine Kompatibilitätsprüfung, daher schlägt es normalerweise nicht fehl. Ein Theme ersetzt die gemeinsamen Stilwerte, auf denen deine App basiert, was bedeutet, dass normalerweise jedes Theme im Auswahlfeld auf jedes Projekt angewendet werden kann.

Stattdessen kannst du sehen, dass ein Theme erfolgreich angewendet wird, aber nicht alles erreicht. Dafür gibt es keine Fehlermeldung — es sieht einfach falsch aus.

Ein Teil deiner App behält sein altes Erscheinungsbild. Das ist das häufigste Problem. Ein Element, dem ein fester Wert gegeben wurde, also eine bestimmte Farbe oder Schriftart, die direkt darauf gesetzt wurde statt einer der gemeinsamen Stile deiner App, kann durch eine Theme-Änderung nicht erreicht werden. Es behält daher sein bisheriges Aussehen und kann mit allem um es herum kollidieren. Behebe es im Visueller Editor oder bitte die Agenten im Chat, den festen Wert durch die Stile deines Themes zu ersetzen.

Text wird schwer lesbar. Ein dunkles Theme, das auf ein für helle Flächen entworfenes Layout angewendet wird, kann dazu führen, dass Text zu wenig Kontrast hat. Passe die betroffenen Elemente im Visueller Editor an oder wähle ein Theme, das deinem bestehenden Design näher kommt.

Atoms teilt dir mit, dass das Theme nicht angewendet werden kann. Das ist ungewöhnlich und bedeutet, dass die Oberfläche deines Projekts nicht auf dem Atoms-Theming-System aufgebaut wurde. Verwende stattdessen den Visueller Editor — alles ist weiterhin Element für Element möglich.

Wichtig: Wähle möglichst früh ein Theme. Wenn die Agenten mit einem bereits angewendeten Theme erstellen, verwenden sie dessen gemeinsame Stile von Anfang an, sodass weniger Elemente mit festen Werten enden, die eine spätere Theme-Änderung nicht erreichen kann.

Einzelne Elemente mit dem Visueller Editor bearbeiten

Wähle ein Element in der Vorschau aus, um es zu bearbeiten. Um an mehreren gleichzeitig zu arbeiten, halte unter Windows Ctrl gedrückt und klicke oder auf dem Mac Cmd und klicke.

Wichtig: Die unten beschriebenen Eigenschaftssteuerelemente wirken auf jeweils nur ein Element. Wenn du mehrere Elemente ausgewählt hast, ändere sie stattdessen, indem du im Chat beschreibst, was du möchtest — siehe Änderungen beschreiben statt zu klicken.

Ein Badge über deiner Auswahl benennt das Element und seine Größe — die Schriftgröße bei Text oder die Abmessungen bei einem Container — damit du bestätigen kannst, dass du das beabsichtigte Element und nicht seinen Container ausgewählt hast.

Der Tab Visueller Editor zeigt dann die für dieses Element verfügbaren Eigenschaften an, gruppiert in Abschnitte:

• Layout — Außenabstand und Innenabstand.
• Appearance — Hintergrundfarbe, Deckkraft und Eckenradius. Radius reicht von None über Small, Medium, Large, XL, 2XL, 3XL bis Full.
• Content — der Text des Elements.
• Style — Schriftfamilie, Stärke, Größe, Textausrichtung und Dekoration.
• Class — die auf das Element angewendeten Styling-Klassen, standardmäßig eingeklappt.

Welche Abschnitte erscheinen, hängt davon ab, was du ausgewählt hast: Ein Textelement bietet Content und Style, während ein Container möglicherweise nur Layout, Appearance und Class anzeigt.

Über deiner Auswahl erscheint außerdem eine schwebende Symbolleiste mit den gebräuchlichsten Steuerelementen direkt zur Hand — Schriftart, Stärke, Ausrichtung und Farbe für Text — zusammen mit dem Lösch-Steuerelement und dem unten beschriebenen Prompt-Feld.

Änderungen erscheinen in der Vorschau, während du sie vornimmst. Um sie zu verwerfen, verwende unten in der Vorschau Discard.

Deine Änderungen speichern

Bearbeitungen werden erst gespeichert, wenn du sie speicherst. Sobald du eine Änderung vorgenommen hast, erscheinen unten in der Vorschau Discard und Save.

• Save behält deine Änderungen bei.
• Discard verwirft sie und setzt das Element auf seinen vorherigen Zustand zurück.

Erwartetes Ergebnis: Die Schaltflächen verschwinden, sobald du speicherst, und deine Änderung ist jetzt Teil des Projekts.

Hinweis: Wenn du versuchst, Design zu verlassen, ein anderes Theme anzuwenden oder Zum Chatten auswählen zu verwenden, während noch ungespeicherte Arbeit vorliegt, zeigt Atoms Unsaved Changes an und fordert dich auf, vor dem Fortfahren zu speichern oder zu verwerfen.

Durch das Speichern bleibt die Änderung in deinem Projekt erhalten. Sie wird dadurch nicht auf deiner Live-Website veröffentlicht — siehe Deine Änderungen veröffentlichen.

Wenn ein Element ausgewählt ist, zeigt der Visueller Editor seine Eigenschaften an. Die schwebende Symbolleiste über der Auswahl wechselt zwischen dem Beschreiben einer Änderung und dem direkten Bearbeiten.

Tipps:

1. Verwende den Visueller Editor für kosmetische Änderungen und den Chat für strukturelle Änderungen wie neue Seiten, neue Funktionen oder Backend-Logik.
2. Um dieselbe Änderung über eine Reihe von Karten oder Schaltflächen hinweg vorzunehmen, wähle sie alle mit Ctrl-click oder Cmd-click aus und beschreibe die Änderung einmal im Chat. Wenn du jede einzeln über die Eigenschaftssteuerelemente bearbeitest, musst du dich wiederholen.

Bilder mit Library ersetzen

Library wendet ein Bild auf das von dir ausgewählte Element an, also beginne damit, auszuwählen, wohin das Bild gehen soll.

1. Wähle das Element aus, das du in der Vorschau ändern möchtest. Bis du das tust, zeigt Library Select an element to start visual editing an.
2. Öffne den Tab Library und wähle eine Quelle — Image, Generate oder Upload.
3. Wende dein Bild an. Wie du das machst, hängt davon ab, woher es stammt. Bei einem integrierten Bild fahre mit der Maus darüber und wähle Use asset. Bei einem Bild, das du generiert oder hochgeladen hast, wähle dessen fertige Miniaturansicht aus.
4. Prüfe die Vorschau. Das Bild wird sofort auf dein ausgewähltes Element angewendet.
5. Wähle unten in der Vorschau Save oder Discard, um es rückgängig zu machen.

Erwartetes Ergebnis: Dein ausgewähltes Element trägt das neue Bild, und die Schaltflächen Save und Discard verschwinden, sobald du speicherst.

Der Library-Tab mit Bildkategorien und Popular Images.

Woher die Bilder kommen

Image ist die integrierte Sammlung. Verwende Search assets für etwas Bestimmtes oder durchsuche eine Kategorie — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings und People, mit More tags für den Rest. Wenn du eine Kategorie auswählst, wird sie geöffnet; verwende den Zurück-Pfeil, um zurückzukehren. Popular Images darunter zeigt eine allgemeine Auswahl. Fahre mit der Maus über ein beliebiges Bild und wähle Use asset, um es anzuwenden.

Generate erstellt ein neues Bild aus einer Beschreibung und benötigt einen Pro- oder Max-Plan. Gib unter Describe the image you want to generate ein, was du möchtest, und wähle Generate. Die Ergebnisse erscheinen unter dem Feld. Wähle eine fertige Miniaturansicht aus, um sie auf dein Element anzuwenden.

Upload fügt deine eigene Datei per Drag-and-drop, Einfügen oder Klick hinzu. Bilder können in den Formaten JPEG, PNG, GIF, BMP, TIFF oder WEBP vorliegen, bis zu 4 MB groß. Hochgeladene Bilder erscheinen unter dem Ablagebereich — wähle eines aus, um es anzuwenden.

Hinweis: Use asset erscheint nur bei den integrierten Bildern. Bilder, die du generierst oder hochlädst, werden stattdessen durch Auswahl ihrer Miniaturansicht angewendet.

Änderungen beschreiben statt zu klicken

Wenn sich eine Änderung leichter beschreiben als durchklicken lässt, kannst du stattdessen die Agenten fragen. Dafür gibt es zwei Stellen, und beide wirken auf das, was du aktuell ausgewählt hast.

• Die schwebende Symbolleiste über deiner Auswahl. Über dem von dir gewählten Element erscheint eine kleine Symbolleiste. Ihre zwei Symbole wechseln zwischen dem Beschreiben einer Änderung und dem direkten Bearbeiten von Eigenschaften. Gib in Ask the Atoms to change… etwas ein und sende es ab.
• Die Chat-Eingabe unter dem Design-Panel. Wenn ein Element ausgewählt ist, zeigt die Eingabe ein Label Design und den Prompt Ask the Atoms team to modify the selected element…, sodass die Agenten deine Anweisung auf dieses Element statt auf das gesamte Projekt anwenden.

Die schwebende Symbolleiste befindet sich über deiner Auswahl. Das Chip links zeigt, auf welches Element die Anweisung angewendet wird.

Beschreibe das Ergebnis, nicht den Mechanismus:

- "Mach das ruhiger — mehr Weißraum, kleinere Überschrift."

- "Passe das Styling dieser Schaltfläche an die Preisseite an."

Vage Anweisungen wie "make it look better" führen zu unvorhersehbaren Ergebnissen.

Hinweis: Wenn du im Visueller Editor auf eine Eigenschaft klickst, wird sie sofort geändert. Wenn du einen Prompt sendest, bittest du die Agenten, die Arbeit zu erledigen, was länger dauert. Bei einer einfachen Farb- oder Abstandsänderung bearbeite die Eigenschaft direkt.

Deine Änderungen in der Vorschau ansehen

Verwende die Symbolleiste über der Vorschau:

• Device view — wechsle zwischen Bildschirmgrößen, um die Responsivität zu testen. Theme- und Typografie-Änderungen, die auf dem Desktop richtig aussehen, brechen auf Mobilgeräten oft auseinander, also prüfe vor dem Veröffentlichen immer mobil.
• Page selector — wechsle zwischen den Seiten deiner App.
• Refresh — lade die Vorschau neu, wenn sie veraltet aussieht.
• Open in a new tab — zeige die App in voller Breite in einem separaten Browser-Tab an.
• Console — öffne das Protokoll-Panel, wenn etwas falsch aussieht.

Erwartetes Ergebnis: Deine Änderungen sind auf jeder Seite und bei jeder Gerätebreite sichtbar, die du unterstützen möchtest.

Ein Problem mit der Vorschau beheben

Wenn die Vorschau veraltet aussieht, ständig lädt oder rote Fehler anzeigt, liegt das Problem an der Vorschau und nicht an Design. Siehe Build and preview troubleshooting für die Schritte zur Fehlerbehebung — Refresh, das Panel Console, Resolve und wie du einen Fehler meldest, der bestehen bleibt.

Eine Sache, die speziell für Design gilt: Wenn deine Bearbeitungen verschwunden zu sein scheinen, prüfe, ob du sie gespeichert hast. Ungespeicherte Änderungen werden verworfen, wenn du Design verlässt — siehe Deine Änderungen speichern.

Deine Änderungen veröffentlichen

Design-Änderungen bleiben in deinem Arbeitsprojekt, bis du veröffentlichst. Wähle oben rechts Publish oder Update, wenn das Projekt bereits live ist.

Hinweis: Wenn dein Projekt Specify Version statt Always Latest verwendet, bleibt die Live-Website auf die von dir gewählte Version festgelegt, und deine Design-Änderungen erscheinen erst öffentlich, wenn du eine neue Version veröffentlichst.

Zu den Fehlern, die die Agenten während eines Builds melden, siehe Fehlerbericht.