App-Viewer

Was ist der App-Viewer?

Wenn KI-Agenten eine Aufgabe abschließen, erscheint der App-Viewer oben auf der Seite. Damit kannst du eine Vorschau deiner Live-App anzeigen und visuelle Bearbeitungen direkt vornehmen — ganz ohne Programmierung.

Bevor du beginnst

• Die Verarbeitung durch den Agent kann einen Moment dauern — bitte warte geduldig.
• Prüfe das Terminal-Bedienfeld auf der rechten Seite auf detaillierte Fortschritte. Das Terminal-Bedienfeld zeigt Echtzeitprotokolle darüber an, was der KI-Agent gerade tut, einschließlich Dateierstellung, Codegenerierung und aller Fehler, die während des Build-Prozesses aufgetreten sind.
• Klicke jederzeit auf das Symbol „Aktualisieren“, um die Vorschau neu zu laden.

So verwendest du den App-Viewer

Schritt 1: Warte, bis die Vorschau geladen ist

Nachdem die Agenten fertig sind, lädt der App-Viewer deine Vorschau im Hauptvorschaufenster.

⏱️ Dauert normalerweise ein paar Sekunden bis zu einer Minute.

Wenn es länger als 2 Minuten dauert: Klicke in der Symbolleiste des App-Viewers auf das Symbol „Aktualisieren“. Wenn es weiterhin hängt, prüfe das Terminal-Bedienfeld auf Fehler (siehe Schritt 3 unten).

Schritt 2: Sieh dir deine App in der Vorschau an

Sobald sie geladen ist, kannst du deine Live-App im Vorschaufenster sehen.

• Desktop / Tablet / Mobile — Verwende die Gerätesymbolleiste oben im Vorschaufenster, um zwischen den Ansichten zu wechseln und die Reaktionsfähigkeit zu testen. Die Symbolleiste zeigt drei Symbole für Desktop-, Tablet- und Mobilgeräte an. Klicke auf jedes Symbol, um zu sehen, wie deine App auf verschiedenen Bildschirmgrößen aussieht, ohne die Seite zu verlassen.
• In neuem Tab öffnen— Klicke auf das Pfeilsymbol in der oberen rechten Ecke des Vorschaufensters, um die Vorschau in einem separaten Browser-Tab zu öffnen. Das ist besonders nützlich, wenn die eingebettete Vorschau hängt oder nicht reagiert.

Schritt 3: Auf Fehler prüfen (falls etwas nicht richtig aussieht)

Wenn deine App nicht lädt oder fehlerhaft aussieht, prüfe das Console-Bedienfeld auf Fehlermeldungen.

Das Console-Bedienfeld befindet sich auf der rechten Seite des Bildschirms unter dem Tab „Terminal“. Es zeigt Systemprotokolle und Fehlermeldungen an, die während des Build-Prozesses erzeugt wurden.

Wenn du rote Fehlermeldungen siehst, enthalten diese typischerweise:

• Eine Beschreibung dessen, was schiefgelaufen ist
• Die Datei und Zeilennummer, an der der Fehler aufgetreten ist
• Einen Stack Trace, der hilft, die Grundursache zu identifizieren

So behebst du die Fehler: (Weitere Details findest du unter: Fehlerbericht)

• Klicke auf „Resolve“ — die KI analysiert und behebt automatisch alle identifizierten Fehler.
• Die Vorschau wird neu geladen, sobald die Korrekturen angewendet wurden. Du kannst den Fortschritt in Echtzeit über das Terminal-Bedienfeld verfolgen.

Kein „Resolve“-Button?

Klicke auf „...“ (weitere Optionen) neben der neuesten Nachricht des Agent, und wähle dann „Feedback“ aus, um das Problem unserem Support-Team zu melden. Bitte füge deinen Chat-Link und einen Screenshot des Fehlers bei.

Schritt 4: Ändere deine App

Methode 1: Klicken zum Bearbeiten (empfohlen für visuelle Änderungen)

Klicke direkt auf ein beliebiges Element im Vorschaufenster. Ein visueller Editor erscheint auf der linken Seite des Bildschirms, mit dem du Folgendes anpassen kannst:

• Farben — Ändere Textfarbe, Hintergrundfarbe oder Rahmenfarbe mit einem Farbwähler
• Abstände — Passe Innenabstand, Außenabstand und den Abstand zwischen Elementen an
• Typografie — Ändere Schriftgröße, Schriftschnitt und Schriftfamilie
• Layout — Ändere Ausrichtung, Flexbox-Einstellungen oder Grid-Eigenschaften
• Textinhalt — Bearbeite Text direkt im Editor

Sobald du eine Änderung vornimmst, wird die Vorschau sofort aktualisiert, sodass du das Ergebnis in Echtzeit sehen kannst.

Der visuelle Editor enthält außerdem einen Tab Library , in dem du vorgefertigte Assets wie Symbole, Bilder und UI-Komponenten durchsuchen und zu deinem Projekt hinzufügen kannst.

Methode 2: Im Chat beschreiben

Teile dem KI-Agenten in natürlicher Sprache mit, was du ändern möchtest. Zum Beispiel:

• „Mach die Hintergrundfarbe dunkler“
• „Verringere den Abstand um den Header“
• „Ändere die Button-Farbe zu Blau“

Die KI versteht deine Anfrage und wendet die Änderungen auf deine App an.

Kurzübersicht

• Vorschau aktualisieren – Klicke in der Symbolleiste des App-Viewers auf das Symbol „Aktualisieren“, um das Vorschaufenster neu zu laden.
• Geräteansicht wechseln – Verwende die Symbole Desktop, Tablet oder Mobile in der Vorschau-Symbolleiste, um zu testen, wie deine App auf verschiedenen Bildschirmgrößen aussieht.
• In neuem Tab öffnen – Klicke auf das Pfeilsymbol in der oberen rechten Ecke des Vorschaufensters, um die Vorschau in einem separaten Browser-Tab zu öffnen.
• Fehlerprotokolle anzeigen – Prüfe das Console-Bedienfeld auf der rechten Seite des Bildschirms auf Fehlermeldungen und Systemprotokolle.
• Fehler automatisch beheben – Klicke in der Benachrichtigung Fehlerbericht auf den Button „Resolve“, damit die KI alle identifizierten Fehler behebt.
• Visuelle Elemente bearbeiten – Klicke auf ein beliebiges Element im Vorschaufenster, um den visuellen Editor auf der linken Seite zu öffnen.
• Ein Problem melden – Klicke bei einer beliebigen Agent-Nachricht auf „...“ → „Feedback“, um Probleme dem Support-Team zu melden.

FAQ

Warum zeigt mein App-Viewer einen Ladebildschirm an?

Die Ladeanzeige bedeutet, dass die Website geladen wird. Der App-Viewer funktioniert normal. Warte einen Moment, bis die Vorschau korrekt geladen ist. Wenn es länger als 2 Minuten dauert, versuche, auf das Symbol „Aktualisieren“ zu klicken oder das Console-Bedienfeld auf Fehler zu prüfen.

Warum zeigt mein App-Viewer rote Fehlermeldungen an?

Bei Agenten können während des Build-Prozesses Probleme auftreten, was gelegentlich zu Fehlern auf der Webseite führen kann. Klicke auf „Resolve“, und die Agenten beheben den Fehler für dich. Sobald der Fehler behoben ist, zeigt der App-Viewer wieder normal eine Vorschau an, daher musst du dir keine Sorgen machen, wenn rote Fehlermeldungen erscheinen.

Warum kann ich das Atoms-Badge nicht von meiner veröffentlichten Seite entfernen?

Das Entfernen des Badges erfordert Pro oder höher. Du kannst jederzeit unter Einstellungen → Pläne & Abrechnung ein Upgrade durchführen. Nach dem Upgrade wird das Badge automatisch von deinen veröffentlichten Seiten entfernt.

Um ein Upgrade durchzuführen, klicke oben rechts auf deinen Avatar, wähle Einstellungen aus und navigiere dann zu Pläne & Abrechnung. Wähle den Pro- oder Max-Plan und schließe den Upgrade-Prozess ab. Nach dem Upgrade wird das Atoms-Badge nicht mehr auf deinen veröffentlichten Seiten angezeigt.