App-Viewer
Sieh dir deine Live-App in der Vorschau an, teste ihre Interaktionen und führe Prüfungen vor der Veröffentlichung durch — mit einer vollständigen Tour durch die Toolbar und allen Möglichkeiten, visuelle Bearbeitungen vorzunehmen.
Was ist der App-Viewer?
Wenn deine KI-Agenten eine Aufgabe abschließen, öffnet sich der App-Viewer oben auf der Seite. Statt nur zu sehen, wie deine Erstellung aussieht, kannst du mit ihr wie mit einer vollständig funktionierenden App interagieren — durch Seiten klicken, Funktionen testen und visuelle Änderungen vornehmen, ohne Code zu schreiben. Er dient außerdem als letzte Kontrollstation vor der Veröffentlichung: Wenn etwas falsch aussieht oder sich unerwartet verhält, kannst du es erkennen und beheben, bevor Nutzer es sehen.
Bevor du beginnst: Die Verarbeitung durch den Agent kann einen Moment dauern. Während die Aufgabe läuft, zeigt das Terminal-Panel auf der rechten Seite Aktivitäten in Echtzeit an, einschließlich Dateierstellung, Codegenerierung und aller Fehler, die unterwegs auftreten. Du kannst außerdem jederzeit das Aktualisieren-Symbol verwenden, um die neueste Version der Vorschau neu zu laden.
Die App-Viewer-Toolbar
Über dem Vorschaufenster befindet sich eine schmale Toolbar. Von links nach rechts findest du hier, was jedes Steuerelement macht:
- Design: schaltet den visuellen Bearbeitungsmodus um. Wenn er aktiv ist, wird durch Klicken auf etwas in der Vorschau dieses Element zur Bearbeitung ausgewählt — siehe „Deine App ändern“ unten.
- Geräteumschalter: Das Anzeige-Symbol wechselt die Vorschau in eine mobile Ansicht und wieder zurück, damit du die Responsivität prüfen kannst, ohne die Seite zu verlassen.
- Aktualisieren: lädt das Vorschaufenster neu. Dein erster Schritt, wenn die Vorschau veraltet aussieht oder hängen bleibt.
- Startseite: springt die Vorschau von überall, wohin du navigiert hast, zurück zur Startseite deiner App.
- Seitenauswahl: Das Dropdown in der Mitte listet die Seiten deiner App auf; wähle eine aus, um sie direkt in der Vorschau zu sehen, statt dich dorthin durchzuklicken.
- In neuem Tab öffnen: Das Pfeil-Symbol öffnet die Vorschau in einem separaten Browser-Tab. Besonders nützlich, wenn die eingebettete Vorschau hängt oder nicht reagiert.
- Konsole: öffnet am rechten Rand das Panel mit Systemprotokollen und Fehlermeldungen, deine erste Anlaufstelle, wenn etwas kaputt aussieht.
Die Toolbar über der Vorschau: links Design, dann der Geräteumschalter („Mobile Vorschau anzeigen“), Aktualisieren, Startseite, die Seitenauswahl, In neuem Tab öffnen und rechts Konsole.
Das Pfeil-Symbol öffnet die laufende App in einem eigenen Browser-Tab — ein zuverlässiger Ausweg, wenn sich die eingebettete Vorschau falsch verhält.
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 Hauptfenster. Das dauert normalerweise ein paar Sekunden bis zu einer Minute.
Länger als 2 Minuten? Klicke in der Toolbar auf Aktualisieren. Wenn sie immer noch hängt, prüfe die Konsole auf Fehler (siehe Schritt 3).
Schritt 2: Vorschau ansehen und Interaktionen testen
Sobald sie geladen ist, siehst du deine echte App:
- Responsivität prüfen: Verwende den Geräteumschalter, um zwischen Desktop- und mobiler Ansicht zu wechseln, und bestätige, dass das Layout auch auf kleineren Bildschirmen stabil bleibt.
- Durch die Interaktionen klicken: Öffne jeden Navigationslink, drücke die Buttons, sende die Formulare ab und löse Hover-Zustände aus. Eine Seite, die gerendert wird, ist nicht dasselbe wie eine Seite, die funktioniert.
- Den wichtigsten Ablauf durchgehen: Folge dem Pfad, der am wichtigsten ist — von der Landingpage über das Erkunden bis zum Abschluss der wichtigsten Handlungsaufforderung, von Anfang bis Ende.
- In einem echten Tab testen: Öffne die Vorschau in einem neuen Browser-Tab für einen letzten Durchgang in der Umgebung, die deine Nutzer tatsächlich haben.
Schritt 3: Auf Fehler prüfen (wenn etwas falsch aussieht)
Wenn die App nicht lädt oder kaputt aussieht, wähle in der App-Viewer-Toolbar Konsole aus. Das Konsolen-Panel öffnet sich unter der Vorschau, während das Terminal ein separater Bereich für Aufgabenaktivitäten ist. Es sammelt die Systemprotokolle und Fehlermeldungen, die während des Builds erzeugt werden. Rote Fehlermeldungen können eine Beschreibung dessen enthalten, was schiefgelaufen ist, sowie zusätzliche Diagnosedetails.
So behebst du Fehler:
- Klicke auf Beheben in der Benachrichtigung zum Fehlerbericht, die KI analysiert und behebt automatisch alle identifizierten Fehler, und die Vorschau wird neu geladen, sobald die Korrekturen übernommen wurden. Du kannst den Fortschritt live im Terminal-Panel verfolgen.
- Kein Beheben-Button? Klicke auf „…“ (weitere Optionen) neben der neuesten Nachricht des Agenten und wähle Feedback, um das Support-Team zu erreichen — füge deinen Chat-Link und einen Screenshot des Fehlers bei.
Den vollständigen Ablauf zur Fehlerbehandlung findest du unter Fehlerbericht.
Schritt 4: Deine App ändern
Methode 1 — Klicken zum Bearbeiten (am besten für visuelle Änderungen)
Wähle zuerst Design in der App-Viewer-Toolbar aus, um den visuellen Bearbeitungsmodus zu aktivieren. Design ist nur in geeigneten Desktop-Projektzuständen für Nutzer mit Editorzugriff verfügbar; wenn du es nicht siehst, verwende Methode 2 im Chat. Klicke dann direkt in der Vorschau auf ein beliebiges Element. Das Element wird mit einer Umrandung und einem Badge ausgewählt, das angibt, was du ausgewählt hast und welche Größe es hat, etwa ein h1, ein Button oder eine Karte. Direkt am Element erscheint eine Inline-Leiste „Ask the Atoms to change…“, sodass du eine Änderung beschreiben kannst, die genau auf diese Stelle begrenzt ist, und links öffnet sich ein visueller Editor für praktische Anpassungen:
- Farben: Text-, Hintergrund- und Rahmenfarben über einen Farbwähler.
- Abstände: Innenabstand, Außenabstand und der Abstand zwischen Elementen.
- Typografie: Schriftgröße, Schriftstärke und Schriftfamilie.
- Layout: Ausrichtung sowie Flexbox- und Grid-Eigenschaften.
- Textinhalt: Bearbeite die Wörter direkt an Ort und Stelle.
Jede Änderung aktualisiert die Vorschau sofort, sodass du das Ergebnis in Echtzeit siehst. Der visuelle Editor enthält außerdem einen Library-Tab zum Durchsuchen und Hinzufügen vorgefertigter Assets: Symbole, Bilder und UI-Komponenten direkt in dein Projekt.
Bearbeiten per Klick in Aktion: Die Überschrift ist ausgewählt (mit angezeigtem Tag und Größe), und über die Inline-Leiste kannst du eine Änderung genau für dieses Element anfordern.
Methode 2 — Beschreibe es im Chat
Sag den Agenten in einfacher Sprache, was sie ändern sollen, und sie wenden es auf die App an:
Mach die Hintergrundfarbe dunkler.
Verringere den Innenabstand um den Header.
Ändere die Button-Farbe zu Blau.
Prüfungen vor der Veröffentlichung
Der App-Viewer ist die letzte Station vor dem Veröffentlichen. Diese Checkliste hilft dabei, häufige Probleme zu erkennen, bevor Nutzer sie sehen:
- Die Vorschau lädt sauber, und die Konsole zeigt keine roten Fehlermeldungen.
- Das Layout bleibt in der mobilen Ansicht stabil, nicht nur auf dem Desktop.
- Jede Interaktion funktioniert: Navigation, Buttons, Formulare und die primäre Handlungsaufforderung.
- Platzhalterinhalte sind ersetzt, in Klammern gesetzte Platzhalter wie [Company name] übersieht man leicht und sie sind nach dem Livegang sehr sichtbar.
- Jede Seite in der Seitenauswahl wird zumindest kurz angesehen, nicht nur die Startseite.
Alles klar? Klicke oben rechts auf Veröffentlichen und teile den Link.
Schnellreferenz
- Die Vorschau aktualisieren — Aktualisieren-Symbol in der App-Viewer-Toolbar.
- Geräteansicht wechseln — Geräteumschalter in der Toolbar, um verschiedene Bildschirmgrößen zu testen.
- Zwischen Seiten springen — Dropdown der Seitenauswahl in der Toolbar.
- In einem neuen Tab öffnen — Pfeil-Symbol in der Toolbar.
- Fehlerprotokolle anzeigen — Wähle Konsole in der App-Viewer-Toolbar; das Protokoll-Panel öffnet sich unter der Vorschau.
- Fehler automatisch beheben — Beheben-Button in der Benachrichtigung zum Fehlerbericht.
- Visuelle Elemente bearbeiten — Klicke in der Vorschau auf ein beliebiges Element, um es auszuwählen und den visuellen Editor zu öffnen.
- Ein Problem melden — „…“ → Feedback bei einer beliebigen Agent-Nachricht.
FAQ
Warum zeigt mein App-Viewer einen Ladebildschirm an?
Die Website lädt, und der App-Viewer funktioniert normal, gib ihm einen Moment. Wenn es länger als 2 Minuten dauert, klicke auf das Aktualisieren-Symbol oder prüfe das Konsolen-Panel auf Fehler.
Warum zeigt mein App-Viewer rote Fehlermeldungen an?
Während des Builds können bei Agenten Probleme auftreten, was gelegentlich zu Webseitenfehlern führt. Klicke auf Beheben, und die Agenten reparieren es für dich; sobald es behoben ist, kehrt die Vorschau zum Normalzustand zurück. Rote Meldungen sind ein Signal, keine Krise.
Warum kann ich das Atoms-Badge nicht von meiner veröffentlichten Seite entfernen?
Das Entfernen des Badges erfordert Pro oder höher. Klicke oben rechts auf deinen Avatar, wähle Einstellungen und gehe dann zu Plans & Billing, um den Pro- oder Max-Plan auszuwählen. Nach dem Upgrade wird das Atoms-Badge automatisch von deinen veröffentlichten Seiten entfernt.
Wie behebe ich Probleme mit Seitenlayout oder Styling mit dem Design Mode?
- Öffne Design Mode und wähle genau das Element aus, das falsch ausgerichtet ist oder falsch gestylt wurde.
- Nenne die Seite und den Breakpoint, das aktuelle Problem, das gewünschte Ergebnis und was sich nicht ändern darf.
- Verwende messbare Anweisungen wie Innenabstand, Ausrichtung, Breite, Farbe oder Umbruchverhalten. Füge ein Referenzbild an, wenn visuelle Übereinstimmung wichtig ist.
- Wende eine Änderung an und prüfe dann Desktop- und mobile Layouts sowie wichtige Zustände wie Laden, leer, Hover und Fehler.
- Wenn das Ergebnis einen anderen Bereich kaputt macht, kehre zur letzten funktionierenden Version zurück und versuche es erneut mit einem engeren Ziel.
Warum zeigt der App-Viewer einen leeren weißen Bildschirm an?
- Bestätige, ob das Problem nur den App-Viewer, die Preview-URL oder auch die veröffentlichte Website betrifft.
- Aktualisiere einmal, öffne die Vorschau in einem neuen Tab und teste ein Inkognito-Fenster.
- Prüfe, ob die aktuelle Aufgabe oder der aktuelle Build noch läuft. Warte, bis er abgeschlossen ist, bevor du es erneut versuchst.
- Wenn eine explizite Meldung besagt, dass das Cloud & AI-Guthaben nicht ausreicht oder die App ausgesetzt ist, öffne Einstellungen → Cloud & AI und prüfe dieses Guthaben. Lade nicht allein aufgrund eines leeren Bildschirms Guthaben auf.
- Erfasse jeden Konsolen- oder Netzwerkfehler, ohne Cookies, Tokens oder geheime Werte weiterzugeben.
Wenn der Bildschirm leer bleibt, kontaktiere den Support mit dem Chat-Link, der vollständigen Viewer-URL, Uhrzeit und Zeitzone, betroffenen Umgebungen, einem Screenshot und bereinigten Fehlerdetails.
Warum zeigt meine Vorschau oder mein App-Viewer einen leeren Bildschirm an oder lädt endlos?
- Prüfe, ob nur der App-Viewer, die Preview-URL oder die veröffentlichte Website betroffen ist.
- Aktualisiere einmal, öffne die Vorschau in einem neuen Tab und teste ein Inkognito-Fenster.
- Prüfe, ob die aktuelle Aufgabe oder der aktuelle Build noch läuft, und warte, bis er abgeschlossen ist.
- Teste die zuletzt bekannte funktionierende Version. Wenn diese funktioniert, vergleiche die letzte Änderung, die den leeren Bildschirm verursacht hat.
- Öffne Einstellungen → Cloud & AI nur dann, wenn das Produkt ausdrücklich ein unzureichendes Guthaben oder eine ausgesetzte App meldet.
Wenn das Problem weiterhin besteht, kontaktiere den Support mit dem Chat-Link, der vollständigen Viewer-URL, Version, Uhrzeit und Zeitzone, betroffenen Umgebungen, einem Screenshot und bereinigten Konsolen- oder Netzwerkfehlern.
Warum sehen meine Änderungen im Design Mode in der Vorschau korrekt aus, aber nicht auf der veröffentlichten Website?
Vorschau und veröffentlichte Website sind unabhängige Kanäle. Speichern oder Vorschau anzeigen überträgt Änderungen nicht in die Produktion.
- Klicke im Publish-Panel auf Update — Öffne das Publish-Panel und klicke auf Update. Warte, bis der Status Up to date anzeigt.
- Führe ein Hard Refresh der Live-Website durch — Drücke Cmd+Shift+R (Mac) oder Ctrl+F5 (Windows), oder öffne die URL in einem Inkognito-Fenster, um Browser-Cache auszuschließen.
- Prüfe die Versionsnummer der veröffentlichten Version — Bestätige im Publish-Panel, dass die Version mit dem übereinstimmt, was du in der Vorschau siehst. Wenn sie sich unterscheiden, veröffentliche erneut.
- Teste die Prod-Subdomain der Plattform — Wenn du eine benutzerdefinierte Domain verwendest, öffne die standardmäßige Prod-URL separat. Wenn die Prod-Subdomain aktualisiert ist, die benutzerdefinierte Domain aber nicht, liegt das Problem an DNS- oder CDN-Caching.
Wenn das Problem weiterhin besteht, stelle die Preview-URL, die Prod-URL, Vergleichs-Screenshots nebeneinander und den Zeitpunkt bereit, zu dem du auf Publish oder Update geklickt hast.
Warum sieht meine Seite auf Mobilgeräten kaputt aus, nachdem der Agent Änderungen vorgenommen hat?
Wenn der Agent Layout oder Styling ändert, kann er unbeabsichtigt das responsive Verhalten auf kleineren Bildschirmen beeinträchtigen.
- Zuerst in mobiler Breite prüfen — Verwende den Geräteumschalter in der App-Viewer-Toolbar, um zur mobilen Ansicht zu wechseln und das Ergebnis vor der Veröffentlichung zu prüfen.
- Design Mode in der mobilen Ansicht verwenden — Wechsle in den Design Mode, während der Geräteumschalter auf mobil eingestellt ist. Klicke auf das fehlerhafte Element, damit der Agent nur diese Komponente für diese Bildschirmgröße anvisiert.
- Explizite responsive Einschränkungen angeben — Sage dem Agenten genau, wie das mobile Layout aussehen soll. Beispiel: "Auf Bildschirmen schmaler als 768px die Karten in einer einzelnen Spalte stapeln und den Innenabstand auf 16px setzen."
- Den Agenten bitten, bestehende Media Queries beizubehalten — Wenn du Änderungen für den Desktop anforderst, füge hinzu: "Ändere keine bestehenden responsiven oder mobilen Styles."
Wenn das Problem weiterhin besteht, stelle den Chat-Link, einen Screenshot des fehlerhaften mobilen Layouts und ein Referenzbild des erwarteten Layouts bereit.
Warum fehlen Bilder oder werden in der Vorschau oder auf der veröffentlichten Website nicht geladen?
Wenn Bilder defekt erscheinen, Platzhalter-Symbole anzeigen oder nicht geladen werden:
- Bilddateipfade prüfen — Öffne den Bereich Files und verifiziere, dass die Bilddateien an den in deinem Code referenzierten Pfaden vorhanden sind. Der Agent hat Dateien möglicherweise während der Bearbeitung verschoben oder umbenannt.
- Dateigröße und Format verifizieren — Sehr große Bilder oder nicht unterstützte Formate werden möglicherweise nicht geladen. Komprimiere Bilder oder konvertiere sie in PNG, JPG oder WebP.
- Cloud-Speicher prüfen — Gehe zu Settings > Cloud & AI, um zu bestätigen, dass dir verfügbarer Speicherplatz zur Verfügung steht.
- Hard Refresh — Drücke Cmd+Shift+R (Mac) oder Ctrl+F5 (Windows), um zwischengespeicherte Bildreferenzen zu löschen.
Wenn das Problem weiterhin besteht, stelle den Chat-Link, die URL des fehlenden Bildes und einen Screenshot des fehlerhaften Zustands bereit.
Der Agent hat das falsche Element geändert oder andere Teile der Seite kaputt gemacht. Was soll ich tun?
Wenn der Agent nicht zusammenhängende Elemente ändert oder Regressionen in anderen Teilen der Seite einführt:
- Zurücksetzen — Gehe zu History und führe ein Remixen von der letzten stabilen Version aus. Dadurch wird der Chat-Kontext zurückgesetzt, während dein Code erhalten bleibt.
- Design Mode zur Isolierung verwenden — Wechsle in den Design Mode und klicke direkt auf das spezifische Element. Dadurch wird der Bearbeitungsbereich des Agenten auf diese Komponente verankert.
- Explizite Einschränkungen hinzufügen — Sage klar, was sich NICHT ändern darf. Beispiel: "Ändere nur die Hintergrundfarbe des Headers zu #1A365D. Ändere nicht die Navigationsleiste, den Footer oder irgendeine andere Komponente."
- Eine Änderung pro Prompt — Nimm eine Änderung vor, prüfe das Ergebnis und fahre dann mit der nächsten fort.
Wenn der Agent wiederholt Regressionen bei anderen Elementen verursacht, führe ein Remixen von einer stabilen Version aus und versuche es erneut mit einer eng abgegrenzten Anweisung.
Warum zeigt die Vorschau einen Build-Fehler oder eine fehlende Abhängigkeit an?
Wenn das Vorschau-Panel einen Build-Fehler, ein rotes Fehlerbanner oder eine Meldung über fehlende Pakete anzeigt:
- Den Beheben-Button verwenden — Wenn im App-Viewer eine Benachrichtigung zum Fehlerbericht erscheint, klicke auf Beheben, und die KI analysiert und behebt automatisch alle identifizierten Fehler. Wenn kein Beheben-Button erscheint, kopiere die genaue Fehlermeldung aus dem Konsolen-Panel und füge sie mit folgendem Text beim Agenten ein: "Fix this build error: [error message]."
- Letzte Änderungen prüfen — Wenn der Fehler nach einer bestimmten Bearbeitung aufgetreten ist, gehe zu History und vergleiche mit der letzten funktionierenden Version, um festzustellen, welche Änderung den Fehler verursacht hat.
- Von der letzten funktionierenden Version remixen — Wenn der Fehler schwer zu beheben ist, führe ein Remixen von deinem letzten erfolgreichen Kontrollpunkt aus und wende Änderungen schrittweise erneut an.
- Paketkompatibilität prüfen — Wenn der Fehler auf ein bestimmtes Paket verweist, frage den Agenten: "Check whether [package name] is compatible with the current project setup and fix any version conflicts."
Hinweis: Wenn die Fehlermeldung auf Plattformkomponenten (App-Viewer, Startskript, Publish, Deploy-Datensatz) oder interne Dateien von Drittanbieter-Paketen (z. B. @vue/compiler-core, vite) verweist, kann es sich eher um ein Plattformproblem als um ein Agentenproblem handeln. Kontaktiere den Support mit der vollständigen Fehlermeldung.
Wenn das Problem weiterhin besteht, stelle die vollständige Fehlermeldung, den Chat-Link und einen Screenshot des Fehlers bereit.
Warum werden meine Änderungen an Schriftart, Farbe oder Abständen nicht übernommen?
Wenn der Agent bestätigt, dass die Änderung vorgenommen wurde, sich das visuelle Ergebnis aber nicht geändert hat:
- Hard Refresh — Drücke Cmd+Shift+R (Mac) oder Ctrl+F5 (Windows). CSS-Änderungen werden häufig vom Browser zwischengespeichert.
- Auf Konflikte bei der CSS-Spezifität prüfen — Der Agent hat möglicherweise Styles hinzugefügt, die von bestehenden Regeln überschrieben werden. Frage den Agenten: "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
- Mit dem Design Mode prüfen — Wechsle in den Design Mode und klicke auf das Element. Der visuelle Editor links zeigt aktuell angewendete Farben, Abstände, Typografie- und Layout-Eigenschaften an, sodass du sehen kannst, ob deine gewünschte Änderung angewendet wurde.
- Die richtige Datei verifizieren — Bei Projekten mit globalen Stylesheets und Styles auf Komponentenebene hat der Agent möglicherweise die falsche Datei bearbeitet. Frage: "Where did you apply the change? Show me the file path and line."
Wenn das Problem weiterhin besteht, stelle den Chat-Link, einen Screenshot des unveränderten Elements und die genauen Stilwerte bereit, die du angefordert hast.
Warum wählt der Design Mode beim Klicken die falsche Komponente aus?
Der Design Mode verwendet das visuelle Layout, um zu bestimmen, auf welche Komponente du zielst. Verschachtelte oder überlappende Elemente können zu einer falschen Auswahl führen.
- Hineinzoomen — Zoome vor dem Klicken in den Bereich hinein. Das hilft, eng verschachtelte Komponenten besser zu unterscheiden.
- Textbeschreibung als Backup verwenden — Wenn wiederholtes Klicken das falsche Element auswählt, beschreibe es stattdessen im Chat. Beispiel: "Select the second button inside the pricing card in the right column."
- Über den Dateipfad referenzieren — Wenn du weißt, welche Datei die Komponente enthält, sage es dem Agenten direkt: "Edit the element in src/components/PricingCard.tsx, line 42."
Wenn die Auswahlprobleme weiterhin bestehen, stelle einen Screenshot bereit, der das gewünschte Element hervorhebt, sowie den Chat-Link.