Appvisare
Förhandsgranska din liveapp, testa dess interaktioner och kör kontroller före publicering — med en fullständig genomgång av verktygsfältet och alla sätt att göra visuella redigeringar.
Förhandsgranska din liveapp, testa dess interaktioner och kör kontroller före publicering — med en fullständig genomgång av verktygsfältet och alla sätt att göra visuella redigeringar.
Vad är Appvisaren?
När dina AI Agents har slutfört en uppgift öppnas Appvisaren högst upp på sidan. I stället för att bara se hur det du har skapat ser ut kan du interagera med det som en fullt fungerande app—klicka dig genom sidor, testa funktioner och göra visuella ändringar utan att skriva kod. Den fungerar också som den sista kontrollpunkten före publicering: om något ser fel ut eller beter sig oväntat kan du upptäcka och åtgärda det innan användarna ser det.
Innan du börjar: Agentbearbetning kan ta en liten stund. Medan uppgiften körs visar Terminal-panelen till höger aktivitet i realtid, inklusive filskapande, kodgenerering och eventuella fel som uppstår längs vägen. Du kan också använda ikonen Uppdatera när som helst för att läsa in den senaste versionen av förhandsgranskningen igen.
Appvisarens verktygsfält
Ett smalt verktygsfält finns ovanför förhandsgranskningsfönstret. Från vänster till höger är detta vad varje kontroll gör:
- Design: växlar läget för visuell redigering. När det är aktivt väljer du det elementet för redigering genom att klicka på vad som helst i förhandsgranskningen — se ”Ändra din app” nedan.
- Enhetsväxling: visningsikonen växlar förhandsgranskningen till mobilvy och tillbaka, så att du kan kontrollera responsiviteten utan att lämna sidan.
- Uppdatera: läser in förhandsgranskningsfönstret på nytt. Ditt första steg när förhandsgranskningen ser inaktuell ut eller har hängt sig.
- Hem: hoppar tillbaka till appens startsida från var du än har navigerat.
- Sidväljare: rullgardinsmenyn i mitten listar appens sidor, välj en för att förhandsgranska den direkt i stället för att klicka dig dit.
- Öppna i ny flik: pilikonen öppnar förhandsgranskningen i en separat webbläsarflik. Särskilt användbart när den inbäddade förhandsgranskningen har hängt sig eller inte svarar.
- Konsol: öppnar panelen med systemloggar och felmeddelanden på högerkanten, ditt första stopp när något ser trasigt ut.
Verktygsfältet ovanför förhandsgranskningen: Design till vänster, sedan enhetsväxlingen (”Visa mobilförhandsgranskning”), uppdatera, hem, sidväljaren, öppna-i-ny-flik och Konsol till höger.
Pilikonen öppnar appen som körs i en egen webbläsarflik — en pålitlig utväg om den inbäddade förhandsgranskningen beter sig konstigt.
Så använder du Appvisaren
Steg 1: Vänta tills förhandsgranskningen läses in
När agenterna är klara läser Appvisaren in din förhandsgranskning i huvudfönstret. Detta tar vanligtvis några sekunder upp till en minut.
Längre än 2 minuter? Klicka på Uppdatera i verktygsfältet. Om den fortfarande har hängt sig, kontrollera om det finns fel i Konsol (se steg 3).
Steg 2: Förhandsgranska och testa interaktioner
När den har lästs in tittar du på din riktiga app:
- Kontrollera responsivitet: använd enhetsväxlingen för att växla mellan dator- och mobilvy och bekräfta att layouten håller på mindre skärmar.
- Klicka igenom interaktionerna: öppna varje navigeringslänk, tryck på knapparna, skicka formulären och utlös hovringstillstånd. En sida som renderas är inte samma sak som en sida som fungerar.
- Gå igenom den viktigaste resan: följ vägen som betyder mest, från landningssidan till att utforska och slutföra den huvudsakliga uppmaningen till handling, från början till slut.
- Testa i en riktig flik: öppna förhandsgranskningen i en ny webbläsarflik för en sista genomgång i den miljö som dina användare faktiskt kommer att ha.
Steg 3: Kontrollera fel (om något ser fel ut)
Om appen inte läses in eller ser trasig ut väljer du Konsol i Appvisarens verktygsfält. Konsolpanelen öppnas under förhandsgranskningen, medan Terminal är ett separat område för uppgiftsaktivitet. Den samlar systemloggar och felmeddelanden som genereras under bygget. Röda felmeddelanden kan innehålla en beskrivning av vad som gick fel och ytterligare diagnostiska detaljer.
Så här åtgärdar du fel:
- Klicka på Resolve i aviseringen Issue Report, AI analyserar och åtgärdar automatiskt alla identifierade buggar, och förhandsgranskningen läses in igen när korrigeringarna har genomförts. Du kan följa förloppet live i Terminal-panelen.
- Ingen Resolve-knapp? Klicka på “…” (fler alternativ) bredvid agentens senaste meddelande och välj Feedback för att nå supportteamet — inkludera din Chat Link och en skärmbild av felet.
För hela flödet för felhantering, se Issue Report.
Steg 4: Ändra din app
Metod 1 — Klicka för att redigera (bäst för visuella ändringar)
Välj först Design i Appvisarens verktygsfält för att aktivera läget för visuell redigering. Design är endast tillgängligt i kvalificerade desktop-projekttillstånd för användare med redigeraråtkomst; om du inte ser det använder du metod 2 i chatten. Klicka sedan direkt på valfritt element i förhandsgranskningen. Elementet markeras med en kontur och en etikett som anger vad du valde och dess storlek, en h1, en knapp, ett kort. En infogad rad med texten “Ask the Atoms to change…” visas direkt vid elementet, så att du kan beskriva en ändring som är avgränsad till exakt den platsen, och en visuell redigerare öppnas till vänster för praktiska justeringar:
- Färger: text-, bakgrunds- och kantfärger via en färgväljare.
- Avstånd: utfyllnad, marginal och mellanrummet mellan element.
- Typografi: teckenstorlek, vikt och teckensnittsfamilj.
- Layout: justering, flexbox- och grid-egenskaper.
- Textinnehåll: redigera orden direkt på plats.
Varje ändring uppdaterar förhandsgranskningen direkt, så att du ser resultatet i realtid. Den visuella redigeraren innehåller också en flik för bibliotek där du kan bläddra bland och lägga till färdigbyggda resurser: ikoner, bilder och UI-komponenter, direkt i ditt projekt.
Klicka-för-att-redigera i praktiken: rubriken är vald (med dess tagg och storlek visade), och den infogade raden låter dig be om en ändring av exakt detta element.
Metod 2 — Beskriv det i chatten
Berätta för agenterna vad som ska ändras med vanligt språk, så tillämpar de det på appen:
Gör bakgrundsfärgen mörkare.
Minska utfyllnaden runt sidhuvudet.
Ändra knappfärgen till blå.
Kontroller före publicering
Appvisaren är sista stoppet före Publicera. Den här checklistan hjälper dig att fånga vanliga problem innan användarna ser dem:
- Förhandsgranskningen läses in utan problem, och Konsol visar inga röda felmeddelanden.
- Layouten håller i mobilvyn, inte bara på desktop.
- Varje interaktion fungerar: navigering, knappar, formulär och den primära uppmaningen till handling.
- Platshållarinnehåll är ersatt, hakparentesmarkerade platshållare som [Company name] är lätta att missa och mycket synliga när sidan väl är live.
- Varje sida i sidväljaren får åtminstone en snabb genomgång, inte bara startsidan.
Ser allt bra ut? Tryck på Publicera i det övre högra hörnet och dela länken.
Snabbreferens
- Uppdatera förhandsgranskningen — ikonen Uppdatera i Appvisarens verktygsfält.
- Byt enhetsvy — enhetsväxlingen i verktygsfältet för att testa olika skärmstorlekar.
- Hoppa mellan sidor — sidväljarens rullgardinsmeny i verktygsfältet.
- Öppna i en ny flik — pilikonen i verktygsfältet.
- Visa felloggar — välj Konsol i Appvisarens verktygsfält; loggpanelen öppnas under förhandsgranskningen.
- Åtgärda fel automatiskt — knappen Resolve i aviseringen Issue Report.
- Redigera visuella element — klicka på valfritt element i förhandsgranskningen för att välja det och öppna den visuella redigeraren.
- Rapportera ett problem — “…” → Feedback på valfritt agentmeddelande.
Vanliga frågor
Varför visar min Appvisare en laddningsskärm?
Webbplatsen läses in, och Appvisaren fungerar normalt, ge den en stund. Om det tar längre än 2 minuter klickar du på ikonen Uppdatera eller kontrollerar Konsolpanelen efter fel.
Varför visar min Appvisare röda felmeddelanden?
Agenter kan stöta på problem under bygget, vilket ibland orsakar fel på webbsidan. Klicka på Resolve så reparerar agenterna det åt dig; när det är åtgärdat återgår förhandsgranskningen till det normala. Röda meddelanden är en signal, inte en kris.
Varför kan jag inte ta bort Atoms-märket från min publicerade sida?
Borttagning av märket kräver Pro eller högre. Klicka på din avatar i det övre högra hörnet, välj Settings, gå sedan till Plans & Billing och välj planen Pro eller Max. När du har uppgraderat tas Atoms-märket automatiskt bort från dina publicerade sidor.
Hur åtgärdar jag problem med sidlayout eller stil med hjälp av Design Mode?
- Öppna Design Mode och välj exakt det element som är feljusterat eller felaktigt stylat.
- Ange sidan och brytpunkten, det aktuella problemet, det önskade resultatet och vad som inte får ändras.
- Använd mätbara instruktioner som utfyllnad, justering, bredd, färg eller radbrytningsbeteende. Bifoga en referensbild när visuell matchning är viktig.
- Tillämpa en ändring och verifiera sedan desktop- och mobillayouter samt viktiga tillstånd som laddning, tomt, hovring och fel.
- Om resultatet förstör ett annat område går du tillbaka till den senaste fungerande versionen och försöker igen med ett smalare mål.
Varför visar Appvisaren en tom vit skärm?
- Bekräfta om problemet bara påverkar Appvisaren, Preview URL eller även den publicerade webbplatsen.
- Uppdatera en gång, öppna Preview i en ny flik och testa ett inkognitofönster.
- Kontrollera om den aktuella uppgiften eller bygget fortfarande körs. Vänta tills det är klart innan du försöker igen.
- Om ett tydligt meddelande säger att saldot för Cloud & AI är otillräckligt eller att appen är pausad, öppna Settings → Cloud & AI och granska det saldot. Fyll inte på enbart baserat på en tom skärm.
- Dokumentera eventuella fel i Konsol eller Network utan att dela cookies, tokens eller hemliga värden.
Om skärmen förblir tom kontaktar du Support med Chat Link, fullständig Viewer URL, tid och tidszon, påverkade miljöer, skärmbild och rensade feldetaljer.
Varför visar min Preview eller Appvisare en tom skärm eller laddar för alltid?
- Kontrollera om endast Appvisaren, Preview URL eller den publicerade webbplatsen påverkas.
- Uppdatera en gång, öppna Preview i en ny flik och testa ett inkognitofönster.
- Kontrollera om den aktuella uppgiften eller bygget fortfarande körs och vänta tills det är klart.
- Testa den senast kända fungerande versionen. Om den fungerar, jämför den senaste ändringen som introducerade den tomma skärmen.
- Öppna Settings → Cloud & AI endast när produkten uttryckligen rapporterar otillräckligt saldo eller pausad app.
Om problemet kvarstår kontaktar du Support med Chat Link, fullständig Viewer URL, version, tid och tidszon, påverkade miljöer, skärmbild och rensat fel från Konsol eller Network.
Varför ser mina ändringar i Design Mode korrekta ut i Preview men inte på den publicerade webbplatsen?
Preview och den publicerade webbplatsen är oberoende kanaler. Att spara eller förhandsgranska skickar inte ändringar till produktion.
- Klicka på Update i panelen Publish — Öppna panelen Publish och klicka på Update. Vänta tills statusen visar Up to date.
- Gör en hård uppdatering av den live webbplatsen — Tryck på Cmd+Shift+R (Mac) eller Ctrl+F5 (Windows), eller öppna URL:en i ett inkognitofönster för att utesluta webbläsarcache.
- Kontrollera versionsnumret för den publicerade versionen — I panelen Publish bekräftar du att versionen matchar det du ser i Preview. Om de skiljer sig åt publicerar du igen.
- Testa plattformens Prod-underdomän — Om du använder en anpassad domän öppnar du standard-URL:en för Prod separat. Om Prod-underdomänen är uppdaterad men den anpassade domänen inte är det, är problemet DNS- eller CDN-cachelagring.
Om problemet kvarstår, ange Preview URL, Prod URL, jämförande skärmbilder sida vid sida och tiden då du klickade på Publish eller Update.
Varför ser min sida trasig ut på mobil efter att agenten gjorde ändringar?
När agenten ändrar layout eller styling kan den oavsiktligt förstöra responsivt beteende på mindre skärmar.
- Förhandsgranska i mobilbredd först — Använd enhetsväxlingen i Appvisarens verktygsfält för att växla till mobilvy och kontrollera resultatet innan publicering.
- Använd Design Mode i mobilvy — Växla till Design Mode medan enhetsväxlingen är inställd på mobil. Klicka på det trasiga elementet så att agenten riktar in sig endast på den komponenten i den skärmstorleken.
- Ange uttryckliga responsiva begränsningar — Berätta exakt för agenten hur mobillayouten ska se ut. Exempel: "På skärmar smalare än 768px, stapla korten i en enda kolumn och sätt utfyllnaden till 16px."
- Be agenten bevara befintliga media queries — När du begär desktop-ändringar, lägg till: "Ändra inte några befintliga responsiva eller mobila stilar."
Om problemet kvarstår, ange Chat Link, en skärmbild av den trasiga mobillayouten och en referensbild av den förväntade layouten.
Varför saknas bilder eller laddas inte i Preview eller på den publicerade webbplatsen?
Om bilder ser trasiga ut, visar platshållarikoner eller inte går att läsa in:
- Kontrollera sökvägar till bildfiler — Öppna avsnittet Files och verifiera att bildfilerna finns på de sökvägar som refereras i din kod. Agenten kan ha flyttat eller bytt namn på filer under redigeringar.
- Verifiera filstorlek och format — Mycket stora bilder eller format som inte stöds kanske inte kan läsas in. Komprimera bilder eller konvertera till PNG, JPG eller WebP.
- Kontrollera Cloud-lagring — Gå till Settings > Cloud & AI för att bekräfta att du har tillgängligt lagringsutrymme.
- Gör en hård uppdatering — Tryck på Cmd+Shift+R (Mac) eller Ctrl+F5 (Windows) för att rensa cachade bildreferenser.
Om problemet kvarstår, ange Chat Link, URL:en till den saknade bilden och en skärmbild av det trasiga tillståndet.
Agenten ändrade fel element eller förstörde andra delar av sidan. Vad ska jag göra?
När agenten ändrar orelaterade element eller introducerar regressioner i andra delar av sidan:
- Rulla tillbaka — Gå till History och Remix från den senaste stabila versionen. Detta återställer chattkontexten samtidigt som din kod bevaras.
- Använd Design Mode för att isolera — Växla till Design Mode och klicka direkt på det specifika elementet. Detta förankrar agentens redigeringsomfång till den komponenten.
- Lägg till uttryckliga begränsningar — Ange tydligt vad som INTE får ändras. Exempel: "Ändra endast sidhuvudets bakgrundsfärg till #1A365D. Ändra inte navigeringsfältet, sidfoten eller någon annan komponent."
- En ändring per prompt — Gör en ändring, verifiera resultatet och gå sedan vidare till nästa.
Om agenten upprepade gånger orsakar regressioner i andra element, gör Remix från en stabil version och försök igen med en snävt avgränsad instruktion.
Varför visar Preview ett byggfel eller ett saknat beroende?
Om panelen Preview visar ett byggfel, en röd felbanner eller ett meddelande om saknade paket:
- Använd knappen Resolve — Om en avisering för Issue Report visas i Appvisaren klickar du på Resolve så analyserar och åtgärdar AI automatiskt alla identifierade fel. Om ingen Resolve-knapp visas kopierar du det exakta felmeddelandet från Konsolpanelen och klistrar in det till agenten med: "Fix this build error: [error message]."
- Kontrollera senaste ändringar — Om felet uppstod efter en specifik redigering går du till History och jämför med den senaste fungerande versionen för att identifiera vilken ändring som orsakade felet.
- Remix från den senaste fungerande versionen — Om felet är svårt att lösa, gör Remix från din senaste lyckade kontrollpunkt och tillämpa ändringarna stegvis igen.
- Kontrollera paketkompatibilitet — Om felet hänvisar till ett specifikt paket, fråga agenten: "Check whether [package name] is compatible with the current project setup and fix any version conflicts."
Obs: Om felmeddelandet hänvisar till plattformskomponenter (App Viewer, startup script, Publish, deploy record) eller interna filer i tredjepartspaket (t.ex. @vue/compiler-core, vite), kan detta vara ett plattformsproblem snarare än ett agentproblem. Kontakta Support med hela felmeddelandet.
Om problemet kvarstår, ange hela felmeddelandet, Chat Link och en skärmbild av felet.
Varför får mina ändringar av teckensnitt, färg eller avstånd ingen effekt?
Om agenten bekräftar att ändringen är klar men det visuella resultatet inte har ändrats:
- Gör en hård uppdatering — Tryck på Cmd+Shift+R (Mac) eller Ctrl+F5 (Windows). CSS-ändringar cachas ofta av webbläsaren.
- Kontrollera konflikter i CSS-specificitet — Agenten kan ha lagt till stilar som åsidosätts av befintliga regler. Fråga agenten: "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
- Använd Design Mode för att inspektera — Växla till Design Mode och klicka på elementet. Den visuella redigeraren till vänster visar aktuella färger, avstånd, typografi och layoutegenskaper, så att du kan se om din begärda ändring har tillämpats.
- Verifiera rätt fil — För projekt med både globala stilmallar och stilar på komponentnivå kan agenten ha redigerat fel fil. Fråga: "Where did you apply the change? Show me the file path and line."
Om problemet kvarstår, ange Chat Link, en skärmbild av det oförändrade elementet och de exakta stilvärden du begärde.
Varför väljer Design Mode fel komponent när jag klickar?
Design Mode använder den visuella layouten för att avgöra vilken komponent du riktar in dig på. Kapslade eller överlappande element kan orsaka felaktigt val.
- Zooma in — Zooma in på området innan du klickar. Detta hjälper till att skilja mellan tätt kapslade komponenter.
- Använd textbeskrivning som reserv — Om klick upprepade gånger väljer fel element, beskriv det i chatten i stället. Exempel: "Select the second button inside the pricing card in the right column."
- Referera med filsökväg — Om du vet vilken fil som innehåller komponenten, säg det direkt till agenten: "Edit the element in src/components/PricingCard.tsx, line 42."
Om problem med val kvarstår, ange en skärmbild som markerar det element du vill ha och Chat Link.