Visuell redigering och förhandsgranskning

Visuell redigering fungerar direkt i App Viewer. Använd verktygsfältet under förhandsgranskningen för att välja element, redigera text, ersätta bilder, använda ett tema och förhandsgranska dina ändringar innan du publicerar.

Använd Select element för AI-assisterade ändringar, Edit Text för direkta textändringar och Theme för globala stilar som färger, typsnitt och effekter.

Så fungerar visuell redigering

När AI-agenterna slutför en uppgift visas App Viewer högst upp i projektet. Verktygsfältet för visuell redigering finns under förhandsgranskningen.

• Select element låter dig välja ett eller flera element och be agenterna att ändra dem.
• Edit Text låter dig redigera text direkt i förhandsgranskningen.
• Theme öppnar temakontrollerna för globala stilar.

Verktygsfältet kan fällas ihop när du inte behöver det.

Innan du börjar

Innan du börjar redigera, se till att:

• Ditt projekt har en slutförd build. Verktygen för visuell redigering är tillgängliga i App Viewer efter att agenterna har slutfört en uppgift.
• Du vet att ändringar inte är live förrän du publicerar. Din offentliga URL påverkas inte förrän du publicerar den uppdaterade versionen.
• Du vet att ett tema bara påverkar delade stilar. Element som är byggda med fasta värden behåller sitt gamla utseende efter en temaändring. Se Om ett tema inte ser rätt ut nedan.

Ange globala stilar med Theme

Ett tema är projektets designsystem. Det definierar globala variabler — paletter, typografi och avstånd — som gäller i hela din app, i stället för inställningar på ett enskilt element.

Theme används bäst under förberedelsestadiet, innan du börjar bygga. Om du använder ett tidigt följer allt som agenterna genererar det från början.

Välj ett tema

Välj Theme i verktygsfältet under App Viewer. Panelen Theme innehåller ett fält för Search Themes och grupperar teman i sektioner:

• Current Theme — det som ditt projekt använder nu. Innan du använder något står det No theme applied yet, och knappen + bredvid skapar ett nytt tema.
• Featured Theme — 15 förinställningar utvalda av designers. Varje tema visas som en förhandsgranskning av en sida byggd med det, med dess namn och en rad färgrutor som visar dess palett. Dessa kan inte tas bort.
• Your Theme — teman som du har skapat eller anpassat. Dessa kan byta namn och tas bort.

Varje tema visas som en förhandsgranskning av en sida byggd med det, med dess namn och en rad färgrutor som visar dess palett, så att du kan bedöma riktningen innan du använder det.

Fliken Theme, med ett använt tema högst upp och dina sparade teman under det.

Så här använder du ett:

1. Välj det tema du vill ha.
2. Atoms frågar "Do you want to apply theme name?"
3. Välj Apply för att bekräfta, eller Cancel för att gå tillbaka.
4. Kontrollera förhandsgranskningen.

Förväntat resultat: förhandsgranskningen uppdateras till det tema du valde, och det visas nu under Current Theme.

Obs: Om du har osparade text- eller bildändringar ber Atoms dig att spara eller förkasta dem innan du använder ett nytt tema.

Uppdatera ett använt tema

En punkt på fliken Theme betyder att en nyare version av ditt använda tema är tillgänglig.

För att använda den, välj Update på ditt nuvarande tema och bekräfta Do you want to re-apply theme name? Ditt projekt använder då den nyare versionen.

Du måste inte uppdatera. Om du låter bli fortsätter projektet att använda den version du använde.

Obs: Obs: Om din app inte ser ut som temat du valde kan enskilda element ha stilar som åsidosätter temat. Dessa åsidosättningar riktar sig mot specifikt innehåll och finns kvar efter en temaändring.

Bygg eller redigera ett tema i Theme Manager

Välj + bredvid Current Theme för att bygga ett från grunden, eller öppna ett befintligt tema för att ändra det. Båda öppnar Theme Manager, där du finjusterar ett tema mot en liveförhandsgranskning.

Dess inställningar finns på tre flikar:

• Color — de färgroller som din app använder, grupperade efter syfte: Base Colors, Card, Popover, Primary, Secondary med flera. Varje roll har sitt eget värde, så att ändring av Primary påverkar varje element som använder det.
• Fonts — dina typsnitt Serif, Sans-serif och Mono.
• Effects — hörnens Radius och en Shadow som du styr med färg, opacitet, oskärpa, spridning och förskjutning.

Förhandsgranskningen bredvid dem är byggd av riktiga komponenter — inloggningsformulär, knappar, inmatningsfält, brödtext och monospace-text — så att du kan bedöma en ändring direkt i stället för att gissa. Använd växlingen för ljust och mörkt under den för att kontrollera båda, eftersom en palett som fungerar på ljusa ytor kan förlora kontrast på mörka.

Under förhandsgranskningen finns också Undo och Redo för att gå igenom dina ändringar, samt Reset för att återställa temat till där det började.

Theme Manager. Förhandsgranskningen uppdateras när du ändrar ett värde, och kontrollerna under den omfattar ångra, gör om, exportera, importera och återställ.

Spara ett tema

1. Välj Save.
2. Ge det ett Theme Name, eller behåll det föreslagna.
3. Välj Save för att bekräfta.

Förväntat resultat: ditt tema visas under My Theme på fliken Theme, med dess palett visad som färgrutor. Använd det på samma sätt som vilket annat tema som helst.

Obs: Redigeringar sparas inte förrän du sparar dem. Atoms stoppar dig och erbjuder att spara eller förkasta om du försöker använda ett annat tema medan det finns osparade ändringar.

Återanvänd ett tema i flera projekt

Theme Manager har Export och Import under förhandsgranskningen. Exportera ett tema till en fil och importera det sedan till ett annat projekt för att återanvända samma designriktning, eller ge det till en teamkamrat så att deras projekt matchar ditt.

Om ett tema inte ser rätt ut

Att använda ett tema är inte en kompatibilitetskontroll, så det misslyckas normalt inte. Ett tema ersätter de delade stilvärden som din app bygger på, vilket innebär att vilket tema som helst i väljaren vanligtvis kan användas på vilket projekt som helst.

Det du i stället kan se är ett tema som används utan problem men inte påverkar allt. Det finns inget felmeddelande för detta — det ser bara fel ut.

En del av din app behåller sitt gamla utseende. Detta är det vanligaste problemet. Ett element som har fått ett fast värde, en specifik färg eller ett typsnitt direkt på elementet i stället för en av appens delade stilar — kan inte påverkas av en temaändring, så det behåller sitt tidigare utseende och kan krocka med allt runt omkring. Välj det berörda elementet och beskriv ändringen i projektchatten.

Text blir svår att läsa. Ett mörkt tema som används på en layout som är utformad för ljusa ytor kan göra att texten får för låg kontrast. Justera de berörda elementen i Visual Editor, eller välj ett tema som ligger närmare din befintliga design.

Atoms säger att temat inte kan användas. Ovanligt, och det betyder att projektets gränssnitt inte byggdes på Atoms temasystem. Använd Visual Editor i stället — allt går fortfarande att göra element för element.

Viktigt: Välj ett tema tidigt när du kan. När agenterna bygger med ett tema som redan är använt använder de dess delade stilar från början, så färre element får fasta värden som en senare temaändring inte kan påverka.

Redigera element med Visual Editor

1. Hovra över verktygsfältet för visuell redigering och välj Select element.
2. Verktygsfältet visar Click to select, Ctrl/Cmd + Click for multiple.
3. Välj ett element i förhandsgranskningen. För att välja flera element håller du ned Ctrl i Windows eller Cmd på Mac medan du väljer.
4. Dina val bifogas till projektchatten. Verktygsfältet visar antalet valda, till exempel Edit 1 selection in chat window.
5. Beskriv den ändring du vill ha i projektchatten och skicka ditt meddelande.
6. Välj Select element igen för att lämna markeringsläget.

Använd projektchatten för ändringar som layout, färger, avstånd, styling eller ändringar som påverkar flera valda element.

Redigera text direkt

1. Välj Edit Text i verktygsfältet under App Viewer.
2. När Click text content to edit visas väljer du den text du vill ändra.
3. Redigera texten direkt i förhandsgranskningen.
4. Du kan redigera flera textelement innan du sparar. Verktygsfältet visar antalet väntande redigeringar, till exempel 1 text change eller 2 text changes.
5. Välj Save för att behålla alla väntande textändringar, eller Discard för att ta bort dem.

Du kan också dubbelklicka på text medan du använder Select element för att börja redigera den direkt.

Spara eller förkasta dina ändringar

Direkta text- och bildändringar används inte förrän du sparar dem. När ändringar väntar visar verktygsfältet antalet ändringar tillsammans med Discard och Save.

• Save använder alla väntande direkta redigeringar.
• Discard tar bort de väntande redigeringarna och återställer de berörda elementen till deras tidigare tillstånd.

Om du försöker lämna redigeringsläget med väntande ändringar visar Atoms:

Osparade ändringar

Du har osparade ändringar. Spara eller förkasta ändringarna innan du lämnar redigeringsläget.

Välj Cancel för att fortsätta redigera eller Discard för att lämna utan att behålla ändringarna.

När du sparar uppdateras arbetsprojektet. Den livepublicerade webbplatsen uppdateras inte förrän du publicerar.

Ersätt en bild

1. Gå in i läget Select element.
2. Välj bilden du vill ersätta.
3. Välj en bild från bildbiblioteket, eller använd uppladdningskontrollen på den valda bilden.
4. Kontrollera ersättningen i förhandsgranskningen.
5. Välj Save för att använda bildändringen, eller Discard för att ta bort den.

Om du också anger en instruktion i projektchatten kan bildersättningen och chattinstruktionen skickas tillsammans.

Fliken Library med bildkategorier och Popular Images.

Var bilderna kommer ifrån

Image är den inbyggda samlingen. Använd Search assets för något specifikt, eller bläddra i en kategori — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings och People, med More tags för resten. Om du väljer en kategori öppnas den; använd bakåtpilen för att gå tillbaka. Popular Images nedan visar ett allmänt urval. Hovra över en bild och välj Use asset för att använda den.

Generate skapar en ny bild från en beskrivning och kräver ett abonnemang på Pro eller Max. Skriv vad du vill ha under Describe the image you want to generate och välj Generate. Resultaten visas under fältet. Välj en färdig miniatyrbild för att använda den på ditt element.

Upload lägger till din egen fil genom dra-och-släpp, inklistring eller klick. Bilder kan vara i formaten JPEG, PNG, GIF, BMP, TIFF eller WEBP, upp till 4 MB. Uppladdade bilder visas under släppytan — välj en för att använda den.

Obs: Use asset visas bara på de inbyggda bilderna. Bilder som du genererar eller laddar upp används i stället genom att välja deras miniatyrbild.

Beskriv ändringar i chatten

När du har valt ett eller flera element med Select element beskriver du resultatet du vill ha i projektchatten.

Till exempel:

• "Gör den här sektionen lugnare, med mer luft och en mindre rubrik."
• "Matcha de här knapparna med stilen på prissidan."

Var specifik om det avsedda resultatet. Instruktioner som "gör att det ser bättre ut" kan ge oförutsägbara resultat

Förhandsgranska dina ändringar

Använd verktygsfältet ovanför förhandsgranskningen:

• Device view — växla mellan skärmstorlekar för att testa responsivitet. Tema- och typografiändringar som ser rätt ut på datorn fungerar ofta dåligt på mobil, så kontrollera alltid mobilen innan du publicerar.
• Page selector — flytta mellan sidorna i din app.
• Refresh — ladda om förhandsgranskningen om den ser inaktuell ut.
• Open in a new tab — visa appen i full bredd i en separat webbläsarflik.
• Console — öppna loggpanelen när något ser fel ut.

Förväntat resultat: dina ändringar syns på varje sida och vid varje enhetsbredd som du avser att stödja.

Återhämta dig från ett problem med förhandsgranskningen

Om förhandsgranskningen ser inaktuell ut, fortsätter att ladda eller visar röda fel kan problemet ligga i App Viewer snarare än i dina visuella redigeringar. Se Felsökning för build och förhandsgranskning för felsökningsstegen — Refresh, panelen Console, Resolve och hur du rapporterar ett fel som kvarstår.

Om dina direkta text- eller bildredigeringar verkar ha försvunnit, kontrollera om du sparade dem. Osparade ändringar kan förkastas när du lämnar redigeringsläget — se Spara eller förkasta dina ändringar.

Publicera dina ändringar

Visuella redigeringar stannar i ditt arbetsprojekt tills du publicerar. Välj Publish i det övre högra hörnet, eller Update om projektet redan är live.

Obs: Om ditt projekt använder Specify Version i stället för Always Latest förblir den livepublicerade webbplatsen låst till den version du valde, och dina designändringar visas inte offentligt förrän du publicerar en ny version.

För de fel som agenterna rapporterar under en build, se Issue Report.