Visuelle Bearbeitung und Vorschau

Die visuelle Bearbeitung funktioniert direkt im App-Viewer. Verwenden Sie die Symbolleiste unter der Vorschau, um Elemente auszuwählen, Text zu bearbeiten, Bilder zu ersetzen, ein Design anzuwenden und Ihre Änderungen vor der Veröffentlichung in der Vorschau anzuzeigen.

Verwenden Sie Element auswählen für KI-gestützte Änderungen, Text bearbeiten für direkte Textänderungen und Design für globale Stile wie Farben, Schriftarten und Effekte.

So funktioniert die visuelle Bearbeitung

Wenn die KI-Agenten eine Aufgabe abgeschlossen haben, erscheint der App-Viewer oben im Projekt. Die Symbolleiste für die visuelle Bearbeitung befindet sich unter der Vorschau.

• Element auswählen ermöglicht es Ihnen, ein oder mehrere Elemente auszuwählen und die Agenten zu bitten, sie zu ändern.
• Text bearbeiten ermöglicht es Ihnen, Text direkt in der Vorschau zu bearbeiten.
• Design öffnet die Design-Steuerelemente für globale Stile.

Die Symbolleiste kann eingeklappt werden, wenn Sie sie nicht benötigen.

Bevor Sie beginnen

Bevor Sie mit der Bearbeitung beginnen, stellen Sie sicher, dass:

• Ihr Projekt einen abgeschlossenen Build hat. Die Werkzeuge für die visuelle Bearbeitung sind im App-Viewer verfügbar, nachdem die Agenten eine Aufgabe abgeschlossen haben.
• Sie wissen, dass Änderungen erst live sind, wenn Sie veröffentlichen. Ihre öffentliche URL bleibt unverändert, bis Sie die aktualisierte Version veröffentlichen.
• Sie wissen, dass ein Design nur gemeinsame Stile erreicht. Elemente, die mit festen Werten erstellt wurden, behalten nach einer Designänderung ihr altes Aussehen. Siehe Wenn ein Design nicht richtig aussieht weiter unten.

Globale Stile mit Design festlegen

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

Design wird am besten in der Vorbereitungsphase verwendet, bevor Sie mit dem Erstellen beginnen. Wenn Sie früh eines anwenden, folgt alles, was die Agenten erzeugen, ihm von Anfang an.

Ein Design auswählen

Wählen Sie Design in der Symbolleiste unter dem App-Viewer aus. Das Design-Panel enthält ein Feld Designs suchen und gruppiert Designs in Abschnitte:

• Aktuelles Design — was Ihr Projekt derzeit verwendet. Bevor Sie etwas anwenden, steht dort Noch kein Design angewendet, und die Schaltfläche + daneben erstellt ein neues Design.
• Empfohlenes Design — 15 von Designern kuratierte Voreinstellungen. Jedes wird als Vorschau einer damit erstellten Seite angezeigt, zusammen mit seinem Namen und einer Reihe von Farbfeldern, die seine Palette zeigen. Diese können nicht gelöscht werden.
• Ihr Design — Designs, die Sie erstellt oder angepasst haben. Diese können umbenannt und gelöscht werden.

Jedes Design erscheint als Vorschau einer damit erstellten Seite, zusammen mit seinem Namen und einer Reihe von Farbfeldern, die seine Palette zeigen, damit Sie die Richtung beurteilen können, bevor Sie es anwenden.

Der Tab „Design“ mit einem angewendeten Design oben und Ihren gespeicherten Designs darunter.

So wenden Sie eines an:

1. Wählen Sie das gewünschte Design aus.
2. Atoms fragt "Möchten Sie das Design Name anwenden?"
3. Wählen Sie Anwenden, um zu bestätigen, oder Abbrechen, um zurückzugehen.
4. Prüfen Sie die Vorschau.

Erwartetes Ergebnis: Die Vorschau wird auf das von Ihnen gewählte Design aktualisiert, und es erscheint nun unter Aktuelles Design.

Hinweis: Wenn Sie ungespeicherte Text- oder Bildänderungen haben, fordert Atoms Sie auf, diese zu speichern oder zu verwerfen, bevor ein neues Design angewendet wird.

Ein angewendetes Design aktualisieren

Ein Punkt auf dem Tab Design bedeutet, dass eine neuere Version Ihres angewendeten Designs verfügbar ist.

Um sie zu übernehmen, wählen Sie Aktualisieren bei Ihrem aktuellen Design und bestätigen Sie Möchten Sie das Design Name erneut anwenden? Ihr Projekt verwendet dann die neuere Version.

Sie müssen nicht aktualisieren. Wenn Sie es so lassen, verwendet Ihr Projekt weiterhin die Version, die Sie angewendet haben.

Hinweis: Hinweis: Wenn Ihre App nicht wie das von Ihnen ausgewählte Design aussieht, haben einzelne Elemente möglicherweise Stile, die das Design überschreiben. Diese Überschreibungen zielen auf bestimmte Inhalte ab und bleiben auch nach einer Designänderung bestehen.

Ein Design im Design-Manager erstellen oder bearbeiten

Wählen Sie + neben Aktuelles Design, um eines von Grund auf zu erstellen, oder öffnen Sie ein vorhandenes Design, um es zu ändern. Beides öffnet den Design-Manager, in dem Sie ein Design anhand einer Live-Vorschau feinabstimmen.

Seine Einstellungen befinden sich auf drei Tabs:

• Farbe — die Farbrollen, die Ihre App verwendet, nach Zweck gruppiert: Basisfarben, Karte, Popover, Primär, Sekundär und mehr. Jede Rolle hat ihren eigenen Wert, sodass eine Änderung von Primär jedes Element erreicht, das sie verwendet.
• Schriftarten — Ihre Schriftarten Serif, Sans-serif und Mono.
• Effekte — Radius für Ecken und ein Schatten, den Sie über Farbe, Deckkraft, Unschärfe, Ausbreitung und Versatz steuern.

Die Vorschau daneben wird aus echten Komponenten erstellt — Anmeldeformulare, Schaltflächen, Eingabefelder, Fließtext und Monospace-Text — sodass Sie eine Änderung sofort beurteilen können, statt zu raten. Verwenden Sie 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 erhalten Sie außerdem Rückgängig und Wiederholen, um Ihre Änderungen schrittweise durchzugehen, sowie Zurücksetzen, um das Design auf seinen Ausgangszustand zurückzusetzen.

Design-Manager. Die Vorschau wird aktualisiert, wenn Sie einen Wert ändern, und die Steuerelemente darunter decken Rückgängig, Wiederholen, Exportieren, Importieren und Zurücksetzen ab.

Ein Design speichern

1. Wählen Sie Speichern.
2. Geben Sie ihm einen Designnamen, oder behalten Sie den vorgeschlagenen bei.
3. Wählen Sie Speichern, um zu bestätigen.

Erwartetes Ergebnis: Ihr Design erscheint unter Mein Design auf dem Tab „Design“, wobei seine Palette als Farbfelder angezeigt wird. Wenden Sie es auf dieselbe Weise an wie jedes andere Design.

Hinweis: Bearbeitungen werden erst gespeichert, wenn Sie sie sichern. Atoms hält Sie an und bietet an, zu speichern oder zu verwerfen, wenn Sie versuchen, ein anderes Design anzuwenden, während noch ungespeicherte Änderungen ausstehen.

Ein Design projektübergreifend wiederverwenden

Der Design-Manager hat unter der Vorschau Exportieren und Importieren. Exportieren Sie ein Design in eine Datei und importieren Sie es dann in ein anderes Projekt, um dieselbe Designrichtung wiederzuverwenden, oder geben Sie es an ein Teammitglied weiter, damit dessen Projekt zu Ihrem passt.

Wenn ein Design nicht richtig aussieht

Das Anwenden eines Designs ist keine Kompatibilitätsprüfung, daher schlägt es normalerweise nicht fehl. Ein Design ersetzt die gemeinsamen Stilwerte, auf denen Ihre App basiert, was bedeutet, dass normalerweise jedes Design in der Auswahl auf jedes Projekt angewendet werden kann.

Stattdessen kann es vorkommen, dass ein Design erfolgreich angewendet wird, aber nicht alles erreicht. Dafür gibt es keine Fehlermeldung — es sieht einfach falsch aus.

Ein Teil Ihrer App behält sein altes Erscheinungsbild. Das ist das häufigste Problem. Ein Element, dem ein fester Wert gegeben wurde, eine bestimmte Farbe oder Schriftart, die direkt darauf gesetzt wurde, statt einer der gemeinsamen Stile Ihrer App — kann durch eine Designänderung nicht erreicht werden, behält also sein vorheriges Aussehen und kann mit allem darum herum kollidieren. Wählen Sie das betroffene Element aus und beschreiben Sie die Änderung im Projekt-Chat.

Text wird schwer lesbar. Ein dunkles Design, das auf ein Layout angewendet wird, das für helle Flächen entworfen wurde, kann dazu führen, dass Text zu wenig Kontrast hat. Passen Sie die betroffenen Elemente im Visuellen Editor an oder wählen Sie ein Design, das Ihrem bestehenden Design näher kommt.

Atoms teilt Ihnen mit, dass das Design nicht angewendet werden kann. Das ist ungewöhnlich und bedeutet, dass die Benutzeroberfläche Ihres Projekts nicht auf dem Atoms-Designsystem basiert. Verwenden Sie stattdessen den Visuellen Editor — alles ist weiterhin Element für Element möglich.

Wichtig: Wählen Sie möglichst früh ein Design. Wenn die Agenten mit einem bereits angewendeten Design erstellen, verwenden sie dessen gemeinsame Stile von Anfang an, sodass weniger Elemente mit festen Werten enden, die durch eine spätere Designänderung nicht erreicht werden können.

Elemente mit dem Visuellen Editor bearbeiten

1. Bewegen Sie den Mauszeiger über die Symbolleiste für die visuelle Bearbeitung und wählen Sie Element auswählen.
2. Die Symbolleiste zeigt Klicken zum Auswählen, Strg/Cmd + Klick für mehrere an.
3. Wählen Sie ein Element in der Vorschau aus. Um mehrere Elemente auszuwählen, halten Sie Strg unter Windows oder Cmd auf dem Mac gedrückt, während Sie auswählen.
4. Ihre Auswahlen werden an den Projekt-Chat angehängt. Die Symbolleiste zeigt die Anzahl der ausgewählten Elemente an, z. B. 1 Auswahl im Chatfenster bearbeiten.
5. Beschreiben Sie die gewünschte Änderung im Projekt-Chat und senden Sie Ihre Nachricht.
6. Wählen Sie Element auswählen erneut, um den Auswahlmodus zu verlassen.

Verwenden Sie den Projekt-Chat für Änderungen wie Layout, Farben, Abstände, Styling oder Änderungen, die mehrere ausgewählte Elemente betreffen.

Text direkt bearbeiten

1. Wählen Sie Text bearbeiten in der Symbolleiste unter dem App-Viewer.
2. Wenn Zum Bearbeiten auf Textinhalt klicken erscheint, wählen Sie den Text aus, den Sie ändern möchten.
3. Bearbeiten Sie den Text direkt in der Vorschau.
4. Sie können mehrere Textelemente bearbeiten, bevor Sie speichern. Die Symbolleiste zeigt die Anzahl der ausstehenden Bearbeitungen an, z. B. 1 Textänderung oder 2 Textänderungen.
5. Wählen Sie Speichern, um alle ausstehenden Textänderungen zu behalten, oder Verwerfen, um sie zu entfernen.

Sie können Text auch doppelklicken, während Sie Element auswählen verwenden, um direkt mit der Bearbeitung zu beginnen.

Änderungen speichern oder verwerfen

Direkte Text- und Bildänderungen werden erst angewendet, wenn Sie sie speichern. Wenn Änderungen ausstehen, zeigt die Symbolleiste die Anzahl der Änderungen zusammen mit Verwerfen und Speichern an.

• Speichern wendet alle ausstehenden direkten Bearbeitungen an.
• Verwerfen entfernt die ausstehenden Bearbeitungen und setzt die betroffenen Elemente in ihren vorherigen Zustand zurück.

Wenn Sie versuchen, den Bearbeitungsmodus mit ausstehenden Änderungen zu verlassen, zeigt Atoms Folgendes an:

Ungespeicherte Änderungen

Sie haben ungespeicherte Änderungen. Bitte speichern oder verwerfen Sie Änderungen, bevor Sie den Bearbeitungsmodus verlassen.

Wählen Sie Abbrechen, um mit der Bearbeitung fortzufahren, oder Verwerfen, um den Modus zu verlassen, ohne die Änderungen zu behalten.

Durch das Speichern wird das Arbeitsprojekt aktualisiert. Die Live-Website wird erst aktualisiert, wenn Sie veröffentlichen.

Ein Bild ersetzen

1. Wechseln Sie in den Modus Element auswählen.
2. Wählen Sie das Bild aus, das Sie ersetzen möchten.
3. Wählen Sie ein Bild aus der Bildbibliothek oder verwenden Sie das Upload-Steuerelement auf dem ausgewählten Bild.
4. Prüfen Sie den Ersatz in der Vorschau.
5. Wählen Sie Speichern, um die Bildänderung anzuwenden, oder Verwerfen, um sie zu entfernen.

Wenn Sie zusätzlich eine Anweisung im Projekt-Chat eingeben, können der Bildersatz und die Chat-Anweisung zusammen übermittelt werden.

Der Tab „Bibliothek“ mit Bildkategorien und beliebten Bildern.

Woher die Bilder kommen

Bild ist die integrierte Sammlung. Verwenden Sie Assets suchen für etwas Bestimmtes oder durchsuchen Sie eine Kategorie — Hintergründe, Natur, Bildung, Gesundheit, Mode, Wissenschaft, Gefühle und Menschen, mit Weitere Tags für den Rest. Wenn Sie eine Kategorie auswählen, wird sie geöffnet; verwenden Sie den Zurück-Pfeil, um zurückzukehren. Beliebte Bilder darunter zeigt eine allgemeine Auswahl. Bewegen Sie den Mauszeiger über ein beliebiges Bild und wählen Sie Asset verwenden, um es anzuwenden.

Generieren erstellt ein neues Bild aus einer Beschreibung und erfordert einen Pro- oder Max-Plan. Geben Sie unter Beschreiben Sie das Bild, das Sie generieren möchten ein, was Sie möchten, und wählen Sie Generieren. Ergebnisse erscheinen unter dem Feld. Wählen Sie ein fertiges Vorschaubild aus, um es auf Ihr Element anzuwenden.

Hochladen fügt Ihre 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ählen Sie eines aus, um es anzuwenden.

Hinweis: Asset verwenden erscheint nur bei den integrierten Bildern. Bilder, die Sie generieren oder hochladen, werden stattdessen durch Auswahl ihres Vorschaubilds angewendet.

Änderungen im Chat beschreiben

Nachdem Sie mit Element auswählen ein oder mehrere Elemente ausgewählt haben, beschreiben Sie das gewünschte Ergebnis im Projekt-Chat.

Zum Beispiel:

• "Machen Sie diesen Abschnitt ruhiger, mit mehr Weißraum und einer kleineren Überschrift."
• "Passen Sie diese Schaltflächen an das Styling auf der Preisseite an."

Seien Sie beim beabsichtigten Ergebnis konkret. Anweisungen wie „lass es besser aussehen“ können unvorhersehbare Ergebnisse erzeugen

Ihre Änderungen in der Vorschau anzeigen

Verwenden Sie die Symbolleiste über der Vorschau:

• Geräteansicht — wechseln Sie zwischen Bildschirmgrößen, um die Reaktionsfähigkeit zu testen. Design- und Typografieänderungen, die auf dem Desktop richtig aussehen, funktionieren auf Mobilgeräten oft nicht, also prüfen Sie Mobilgeräte immer vor der Veröffentlichung.
• Seitenauswahl — wechseln Sie zwischen den Seiten Ihrer App.
• Aktualisieren — laden Sie die Vorschau neu, wenn sie veraltet aussieht.
• In einem neuen Tab öffnen — zeigen Sie die App in voller Breite in einem separaten Browser-Tab an.
• Konsole — öffnen Sie das Protokoll-Panel, wenn etwas falsch aussieht.

Erwartetes Ergebnis: Ihre Änderungen sind auf jeder Seite und bei jeder Gerätebreite sichtbar, die Sie unterstützen möchten.

Ein Problem mit der Vorschau beheben

Wenn die Vorschau veraltet aussieht, weiter lädt oder rote Fehler anzeigt, liegt das Problem möglicherweise am App-Viewer und nicht an Ihren visuellen Bearbeitungen. Siehe Fehlerbehebung bei Build und Vorschau für die Schritte zur Fehlerbehebung — Aktualisieren, das Panel Konsole, Resolve und wie Sie einen Fehler melden, der weiterhin besteht.

Wenn Ihre direkten Text- oder Bildbearbeitungen verschwunden zu sein scheinen, prüfen Sie, ob Sie sie gespeichert haben. Ungespeicherte Änderungen können verworfen werden, wenn Sie den Bearbeitungsmodus verlassen — siehe Änderungen speichern oder verwerfen.

Ihre Änderungen veröffentlichen

Visuelle Bearbeitungen bleiben in Ihrem Arbeitsprojekt, bis Sie veröffentlichen. Wählen Sie oben rechts Veröffentlichen oder Aktualisieren, wenn das Projekt bereits live ist.

Hinweis: Wenn Ihr Projekt Version angeben statt Immer aktuell verwendet, bleibt die Live-Website auf die von Ihnen gewählte Version festgelegt, und Ihre Designänderungen erscheinen erst öffentlich, wenn Sie eine neue Version veröffentlichen.

Für die Fehler, die die Agenten während eines Builds melden, siehe Fehlerbericht.