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.
Vad är Appvisaren?
När dina AI Agents slutför 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 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 Refresh när som helst för att ladda om den senaste versionen av förhandsgranskningen.
Appvisarens verktygsfält
Ett smalt verktygsfält sitter ovanför förhandsgranskningsfönstret. Från vänster till höger är detta vad varje kontroll gör:
- Design: växlar visuellt redigeringsläge. När det är aktivt väljer ett klick på vad som helst i förhandsgranskningen det elementet för redigering — se ”Ändra din app” nedan.
- Device toggle: visningsikonen växlar förhandsgranskningen till mobilvy och tillbaka, så att du kan kontrollera responsivitet utan att lämna sidan.
- Refresh: laddar om förhandsgranskningsfönstret. Ditt första steg när förhandsgranskningen ser inaktuell ut eller har hängt sig.
- Home: hoppar tillbaka till appens startsida från var du än har navigerat.
- Page selector: 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.
- Open in new tab: 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.
- Console: längst till höger öppnar panelen med systemloggar och felmeddelanden, ditt första stopp när något ser trasigt ut.
Verktygsfältet ovanför förhandsgranskningen: Design till vänster, sedan Device toggle (”Show mobile preview”), refresh, home, page selector, open-in-new-tab och Console till höger.
Pilikonen öppnar appen som körs i en egen webbläsarflik — en pålitlig nödutgång om den inbäddade förhandsgranskningen beter sig fel.
Så använder du Appvisaren
Steg 1: Vänta tills förhandsgranskningen har laddats
När agenterna är klara laddar Appvisaren din förhandsgranskning i huvudfönstret. Detta tar vanligtvis några sekunder upp till en minut.
Längre än 2 minuter? Klicka på Refresh i verktygsfältet. Om den fortfarande har hängt sig, kontrollera om det finns fel i Console (se steg 3).
Steg 2: Förhandsgranska och testa interaktioner
När den har laddats tittar du på din riktiga app:
- Kontrollera responsivitet: använd Device toggle 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 hover-lägen. 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 utforskning och slutförande av 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 laddas eller ser trasig ut väljer du Console i Appvisarens verktygsfält. Console-panelen ö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, så analyserar AI och åtgärdar alla identifierade buggar automatiskt, och förhandsgranskningen laddas om när korrigeringarna är på plats. 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 visuellt redigeringsläge. Design är endast tillgängligt i kvalificerade skrivbordsprojektlägen för användare med redigeraråtkomst; om du inte ser det, använd metod 2 i chatten. Klicka sedan på valfritt element direkt i förhandsgranskningen. Elementet markeras med en kontur och en etikett som anger vad du valde och dess storlek, till exempel en h1, en knapp eller 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 kantlinjefärger via en färgväljare.
- Avstånd: padding, 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 Library för att 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 i appen:
Gör bakgrundsfärgen mörkare.
Minska paddingen runt sidhuvudet.
Ändra knappfärgen till blå.
Kontroller före publicering
Appvisaren är sista stoppet före Publish. Den här checklistan hjälper dig att fånga vanliga problem innan användarna ser dem:
- Förhandsgranskningen laddas utan problem, och Console visar inga röda felmeddelanden.
- Layouten håller i mobilvyn, inte bara på dator.
- 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 page selector får åtminstone en snabb genomgång, inte bara startsidan.
Allt klart? Tryck på Publish i det övre högra hörnet och dela länken.
Snabbreferens
- Uppdatera förhandsgranskningen — ikonen Refresh i Appvisarens verktygsfält.
- Byt enhetsvy — Device toggle i verktygsfältet för att testa olika skärmstorlekar.
- Hoppa mellan sidor — rullgardinsmenyn page selector i verktygsfältet.
- Öppna i en ny flik — pilikonen i verktygsfältet.
- Visa felloggar — välj Console 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 laddas, och Appvisaren fungerar normalt, ge den en stund. Om det tar längre än 2 minuter klickar du på ikonen Refresh eller kontrollerar Console-panelen efter fel.
Varför visar min Appvisare röda felmeddelanden?
Agents 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 och 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 padding, justering, bredd, färg eller radbrytningsbeteende. Bifoga en referensbild när visuell matchning är viktig.
- Tillämpa en ändring och verifiera sedan dator- och mobillayouter samt viktiga tillstånd som laddning, tomt, hover och fel.
- Om resultatet förstör ett annat område, gå tillbaka till den senaste fungerande versionen och försök igen med ett snävare 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 uttryckligt meddelande säger att saldot för Cloud & AI är otillräckligt eller att appen är pausad, öppna Settings → Cloud & AI och kontrollera det saldot. Fyll inte på enbart baserat på en tom skärm.
- Dokumentera eventuella Console- eller Network-fel utan att dela cookies, tokens eller hemliga värden.
Om skärmen förblir tom, kontakta 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 med 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, kontakta Support med Chat Link, fullständig Viewer URL, version, tid och tidszon, påverkade miljöer, skärmbild och rensade Console- eller Network-fel.
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äfta att versionen matchar det du ser i Preview. Om de skiljer sig åt, publicera igen.
- Testa plattformens Prod-underdomän — Om du använder en anpassad domän, öppna standard-Prod-URL:en 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 stil kan responsivt beteende på mindre skärmar oavsiktligt gå sönder.
- Förhandsgranska i mobilbredd först — Använd Device toggle 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 Device toggle ä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 padding till 16px."
- Be agenten bevara befintliga media queries — När du begär ändringar för dator, 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 verkar trasiga, visar platshållarikoner eller inte laddas:
- 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 laddas. Komprimera bilder eller konvertera till PNG, JPG eller WebP.
- Kontrollera molnlagring — 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:
- Återställ — 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 strikt 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 av typen Issue Report visas i Appvisaren, klicka på Resolve så analyserar AI och åtgärdar alla identifierade fel automatiskt. Om ingen Resolve-knapp visas, kopiera det exakta felmeddelandet från panelen Console och klistra in det till agenten med: "Fix this build error: [error message]."
- Kontrollera senaste ändringar — Om felet uppstod efter en specifik redigering, gå 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 återapplicera ändringar stegvis.
- 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 (Appvisaren, 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 det fullständiga felmeddelandet.
Om problemet kvarstår, ange det fullständiga 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 gjord 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 cachelagras ofta av webbläsaren.
- Kontrollera konflikter i CSS-specificitet — Agenten kan ha lagt till stilar som åsidosätts av befintliga regler. Be 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 som används, så att du kan se om din begärda ändring tillämpades.
- 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å. Nästlade eller överlappande element kan orsaka felaktigt val.
- Zooma in — Zooma in på området innan du klickar. Detta hjälper till att skilja nära nästlade komponenter åt.
- Använd textbeskrivning som reserv — Om upprepade klick 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 problemen med val kvarstår, ange en skärmbild som markerar elementet du vill ha och Chat Link.