Die Website wird geladen, 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.

Während des Builds können bei Agenten Probleme auftreten, was gelegentlich zu Webseitenfehlern führt. Klicke auf Resolve, 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.

Das Entfernen des Badges erfordert Pro oder höher. Klicke oben rechts auf deinen Avatar, wähle Einstellungen und gehe dann zu Pläne & Abrechnung, um den Pro- oder Max-Plan auszuwählen. Nach dem Upgrade wird das Atoms-Badge automatisch von deinen veröffentlichten Seiten entfernt.

1. Öffne Design Mode und wähle genau das Element aus, das falsch ausgerichtet ist oder falsch gestaltet aussieht.
2. Nenne die Seite und den Breakpoint, das aktuelle Problem, das gewünschte Ergebnis und was sich nicht ändern darf.
3. Verwende messbare Anweisungen wie Innenabstand, Ausrichtung, Breite, Farbe oder Umbruchverhalten. Füge ein Referenzbild an, wenn visuelle Übereinstimmung wichtig ist.
4. Wende eine Änderung an und prüfe dann Desktop- und mobile Layouts sowie wichtige Zustände wie Laden, leer, Hover und Fehler.
5. Wenn das Ergebnis einen anderen Bereich beschädigt, kehre zur letzten funktionierenden Version zurück und versuche es erneut mit einem engeren Ziel.

1. Bestätige, ob das Problem nur den App-Viewer, die Vorschau-URL oder auch die veröffentlichte Website betrifft.
2. Einmal aktualisieren, die Vorschau in einem neuen Tab öffnen und ein Inkognito-Fenster testen.
3. Prüfe, ob die aktuelle Aufgabe oder der aktuelle Build noch läuft. Warte, bis er abgeschlossen ist, bevor du es erneut versuchst.
4. Wenn eine ausdrückliche 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.
5. Erfasse jeden Konsolen- oder Netzwerkfehler, ohne Cookies, Token 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.

1. Prüfe, ob nur der App-Viewer, die Vorschau-URL oder die veröffentlichte Website betroffen ist.
2. Einmal aktualisieren, die Vorschau in einem neuen Tab öffnen und ein Inkognito-Fenster testen.
3. Prüfe, ob die aktuelle Aufgabe oder der aktuelle Build noch läuft, und warte, bis er abgeschlossen ist.
4. Teste die letzte bekannte funktionierende Version. Wenn diese funktioniert, vergleiche die letzte Änderung, die den leeren Bildschirm verursacht hat.
5. Ö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, der Version, Uhrzeit und Zeitzone, betroffenen Umgebungen, einem Screenshot und bereinigten Konsolen- oder Netzwerkfehlern.

Vorschau und veröffentlichte Website sind unabhängige Kanäle. Speichern oder Vorschau anzeigen überträgt Änderungen nicht in die Produktion.

1. Klicke im Veröffentlichen-Panel auf Update — Öffne das Veröffentlichen-Panel und klicke auf Update. Warte, bis der Status Aktuell anzeigt.
2. Führe eine harte Aktualisierung 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.
3. Prüfe die Nummer der veröffentlichten Version — Bestätige im Veröffentlichen-Panel, dass die Version mit dem übereinstimmt, was du in der Vorschau siehst. Wenn sie unterschiedlich sind, veröffentliche erneut.
4. Teste die Prod-Subdomain der Plattform — Wenn du eine benutzerdefinierte Domain verwendest, öffne die Standard-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 Vorschau-URL, die Prod-URL, Vergleichs-Screenshots nebeneinander und den Zeitpunkt bereit, zu dem du auf Veröffentlichen oder Update geklickt hast.

Wenn der Agent Layout oder Styling ändert, kann er unbeabsichtigt das responsive Verhalten auf kleineren Bildschirmen beeinträchtigen.

1. Zuerst in mobiler Breite prüfen — Verwende den Geräteumschalter in der Symbolleiste des App-Viewers, um zur mobilen Ansicht zu wechseln und das Ergebnis vor der Veröffentlichung zu prüfen.
2. 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 bei dieser Bildschirmgröße anspricht.
3. Explizite responsive Vorgaben machen — 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."
4. Den Agenten bitten, bestehende Media Queries beizubehalten — Wenn du Änderungen für den Desktop anforderst, füge hinzu: "Ändere keine bestehenden responsiven oder mobilen Stile."

Wenn das Problem weiterhin besteht, stelle den Chat-Link, einen Screenshot des fehlerhaften mobilen Layouts und ein Referenzbild des erwarteten Layouts bereit.

Wenn Bilder fehlerhaft erscheinen, Platzhaltersymbole anzeigen oder nicht geladen werden:

1. Bilddateipfade prüfen — Öffne den Bereich Dateien und verifiziere, dass die Bilddateien an den in deinem Code referenzierten Pfaden vorhanden sind. Der Agent könnte Dateien während der Bearbeitung verschoben oder umbenannt haben.
2. 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.
3. Cloud-Speicher prüfen — Gehe zu Einstellungen > Cloud & AI, um zu bestätigen, dass dir verfügbarer Speicherplatz zur Verfügung steht.
4. Harte Aktualisierung — 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.

Wenn der Agent nicht zusammenhängende Elemente ändert oder Regressionen in anderen Teilen der Seite einführt:

1. Zurücksetzen — Gehe zu Verlauf und Remixen von der letzten stabilen Version aus. Dadurch wird der Chat-Kontext zurückgesetzt, während dein Code erhalten bleibt.
2. 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.
3. Explizite Einschränkungen hinzufügen — Gib klar an, was sich NICHT ändern darf. Beispiel: "Ändere nur die Hintergrundfarbe der Kopfzeile zu #1A365D. Ändere nicht die Navigationsleiste, die Fußzeile oder irgendeine andere Komponente."
4. 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, Remixen von einer stabilen Version aus und nähere dich dem Problem erneut mit einer eng gefassten Anweisung.

Wenn das Vorschau-Panel einen Build-Fehler, ein rotes Fehlerbanner oder eine Meldung über fehlende Pakete anzeigt:

1. Verwende den Resolve-Button — Wenn im App-Viewer eine Benachrichtigung zum Fehlerbericht erscheint, klicke auf Resolve, und die KI analysiert und behebt automatisch alle identifizierten Fehler. Wenn kein Resolve-Button erscheint, kopiere die genaue Fehlermeldung aus dem Konsolen-Panel und füge sie mit folgendem Text beim Agenten ein: "Behebe diesen Build-Fehler: [Fehlermeldung]."
2. Letzte Änderungen prüfen — Wenn der Fehler nach einer bestimmten Bearbeitung aufgetreten ist, gehe zu Verlauf und vergleiche mit der letzten funktionierenden Version, um festzustellen, welche Änderung den Fehler verursacht hat.
3. Von der letzten funktionierenden Version aus Remixen — Wenn der Fehler schwer zu beheben ist, Remixen von deinem letzten erfolgreichen Kontrollpunkt aus und wende Änderungen schrittweise erneut an.
4. Paketkompatibilität prüfen — Wenn sich der Fehler auf ein bestimmtes Paket bezieht, frage den Agenten: "Prüfe, ob [Paketname] mit dem aktuellen Projekt-Setup kompatibel ist, und behebe eventuelle Versionskonflikte."

Hinweis: Wenn sich die Fehlermeldung auf Plattformkomponenten (App-Viewer, Startskript, Veröffentlichen, Bereitstellungsdatensatz) oder interne Dateien von Drittanbieter-Paketen (z. B. @vue/compiler-core, vite) bezieht, könnte 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.

Wenn der Agent bestätigt, dass die Änderung durchgeführt wurde, sich das visuelle Ergebnis aber nicht geändert hat:

1. Harte Aktualisierung — Drücke Cmd+Shift+R (Mac) oder Ctrl+F5 (Windows). CSS-Änderungen werden häufig vom Browser zwischengespeichert.
2. Auf Konflikte bei der CSS-Spezifität prüfen — Der Agent hat möglicherweise Stile hinzugefügt, die von bestehenden Regeln überschrieben werden. Frage den Agenten: "Prüfe, ob der von mir angeforderte Stil von einer anderen CSS-Regel überschrieben wird, und korrigiere bei Bedarf die Spezifität."
3. Design Mode zur Prüfung verwenden — Wechsle in den Design Mode und klicke auf das Element. Der visuelle Editor links zeigt aktuell angewendete Farben, Abstände, Typografie- und Layouteigenschaften an, sodass du sehen kannst, ob deine angeforderte Änderung angewendet wurde.
4. Die richtige Datei verifizieren — Bei Projekten mit globalen Stylesheets und Stilen auf Komponentenebene hat der Agent möglicherweise die falsche Datei bearbeitet. Frage: "Wo hast du die Änderung angewendet? Zeig mir den Dateipfad und die Zeile."

Wenn das Problem weiterhin besteht, stelle den Chat-Link, einen Screenshot des unveränderten Elements und die genauen Stilwerte bereit, die du angefordert hast.

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.

1. Heranzoomen — Zoome in den Bereich hinein, bevor du klickst. Das hilft, eng verschachtelte Komponenten besser zu unterscheiden.
2. Textbeschreibung als Absicherung verwenden — Wenn durch wiederholtes Klicken immer das falsche Element ausgewählt wird, beschreibe es stattdessen im Chat. Beispiel: "Wähle die zweite Schaltfläche innerhalb der Preiskarte in der rechten Spalte aus."
3. Über Dateipfad referenzieren — Wenn du weißt, welche Datei die Komponente enthält, sage es dem Agenten direkt: "Bearbeite das Element in src/components/PricingCard.tsx, Zeile 42."

Wenn die Auswahlprobleme weiterhin bestehen, stelle einen Screenshot bereit, der das gewünschte Element hervorhebt, sowie den Chat-Link.