Design och förhandsgranska

Design öppnas bredvid din liveförhandsgranskning och låter dig ändra hur ditt projekt ser ut utan att skriva kod.

Den här guiden går igenom hur du ställer in globala stilar med Theme, redigerar enskilda element med Visual Editor, ersätter bilder från Library, beskriver ändringar med vanligt språk och kontrollerar ditt arbete på olika enheter innan det går live.

Så fungerar Design

När AI Agents slutför en uppgift visas App Viewer högst upp på sidan. Välj Design för att öppna designpanelen till vänster på skärmen, med din liveförhandsgranskning bredvid. Den har tre flikar:

• Theme ställer in globala regler för hela appen — färger, typsnitt och effekter. Används bäst innan du bygger.
• Visual Editor justerar de element du har valt. Fungerar på alla projekt, när som helst.
• Library ersätter bilder eller genererar nya.

Theme sätter reglerna, och Visual Editor finjusterar detaljerna. Välj Exit för att stänga panelen.

Designpanelen öppnas till vänster. Tills du väljer något uppmanar Visual Editor dig att välja ett element.

Innan du börjar

Innan du öppnar Design, se till att:

• Ditt projekt har en slutförd build. Design öppnas från App Viewer, som bara visas 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 theme bara påverkar delade stilar. Element som har byggts med fasta värden behåller sitt gamla utseende efter en theme-ändring. Se Om ett theme inte ser rätt ut nedan.

Ställ in globala stilar med Theme

Ett theme är ditt projekts designsystem. Det definierar globala variabler — paletter, typografi och mellanrum — som gäller i hela appen, 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 theme

Fliken Theme öppnas med ett fält för Search Themes och grupperar themes i sektioner:

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

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

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

Så här använder du ett:

1. Välj det theme 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 theme du valde, och det visas nu under Current Theme.

Obs: Om du har osparade ändringar i Visual Editor visar Atoms Unsaved Changes och ber dig spara eller förkasta dem innan du använder ett nytt theme.

Uppdatera ett använt theme

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

För att använda den, välj Update på ditt nuvarande theme 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 ditt projekt att köra den version du använde.

Obs: Om din app inte ser ut som det theme du valde kan enskilda element ha åsidosatts i Visual Editor. Dessa åsidosättningar riktar sig mot specifikt innehåll och finns kvar efter en theme-ändring.

Bygg eller redigera ett theme i Theme Manager

Välj + bredvid Current Theme för att bygga ett från grunden, eller öppna ett befintligt theme för att ändra det. Båda öppnar Theme Manager, där du finjusterar ett theme 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 och fler. Varje roll har sitt eget värde, så att en ändring av Primary påverkar varje element som använder den.
• 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, och Reset för att återställa theme 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 theme

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 theme visas under My Theme på fliken Theme, med sin palett visad som färgprover. Använd det på samma sätt som vilket annat theme 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 theme medan det finns osparade ändringar.

Återanvänd ett theme i flera projekt

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

Om ett theme inte ser rätt ut

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

Det du i stället kan se är ett theme 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 inställt på sig, i stället för en av appens delade stilar — kan inte påverkas av en theme-ändring, så det behåller sitt tidigare utseende och kan krocka med allt runt omkring. Åtgärda det i Visual Editor, eller be agenterna i chatten att ersätta det fasta värdet med ditt themes stilar.

Text blir svår att läsa. Ett mörkt theme 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 theme som ligger närmare din befintliga design.

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

Viktigt: Välj ett theme tidigt när du kan. När agenterna bygger med ett theme 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 theme-ändring inte kan påverka.

Redigera enskilda element med Visual Editor

Välj ett element i förhandsgranskningen för att redigera det. Om du vill arbeta med flera samtidigt håller du ned Ctrl och klickar i Windows, eller Cmd och klickar på Mac.

Viktigt: Egenskapskontrollerna som beskrivs nedan fungerar på ett element i taget. När du har flera element valda ska du i stället ändra dem genom att beskriva vad du vill ha i chatten — se Beskriv ändringar i stället för att klicka.

En etikett ovanför ditt val visar elementets namn och storlek — teckenstorleken för text eller måtten för en behållare — så att du kan bekräfta att du har valt det element du avsåg och inte dess behållare.

Fliken Visual Editor visar sedan de egenskaper som är tillgängliga för det elementet, grupperade i sektioner:

• Layout — marginal och utfyllnad.
• Appearance — bakgrundsfärg, opacitet och hörnradie. Radius går från None via Small, Medium, Large, XL, 2XL, 3XL till Full.
• Content — elementets text.
• Style — typsnittsfamilj, vikt, storlek, textjustering och dekor.
• Class — de stylingklasser som används på elementet, hopfällda som standard.

Vilka sektioner som visas beror på vad du har valt: ett textelement erbjuder Content och Style, medan en behållare kanske bara visar Layout, Appearance och Class.

Ett flytande verktygsfält visas också över ditt val med de vanligaste kontrollerna nära till hands — typsnitt, vikt, justering och färg för text — tillsammans med kontrollen för att ta bort och promptfältet som beskrivs nedan.

Ändringar visas i förhandsgranskningen medan du gör dem. Om du vill överge dem använder du Discard längst ned i förhandsgranskningen.

Spara dina ändringar

Redigeringar sparas inte förrän du sparar dem. När du har gjort en ändring visas Discard och Save längst ned i förhandsgranskningen.

• Save behåller dina ändringar.
• Discard kastar bort dem och återställer elementet till hur det var.

Förväntat resultat: knapparna försvinner när du har sparat, och din ändring är nu en del av projektet.

Obs: Om du försöker lämna Design, använda ett annat theme eller använda Select to Chat medan det fortfarande finns osparat arbete visar Atoms Unsaved Changes och ber dig spara eller förkasta innan du fortsätter.

Att spara behåller ändringen i ditt projekt. Det publicerar den inte på din livewebbplats — se Publicera dina ändringar.

Med ett element valt visar Visual Editor dess egenskaper. Det flytande verktygsfältet över markeringen växlar mellan att beskriva en ändring och att redigera den direkt.

Tips:

1. Använd Visual Editor för kosmetiska ändringar och chatten för strukturella ändringar som nya sidor, nya funktioner eller backendlogik.
2. Om du vill göra samma ändring i en rad kort eller knappar markerar du dem alla med Ctrl-klick eller Cmd-klick och beskriver ändringen en gång i chatten. Om du redigerar var och en via egenskapskontrollerna måste du upprepa dig.

Ersätt bilder med Library

Library använder en bild på det element du har valt, så börja med att välja var bilden ska placeras.

1. Välj elementet du vill ändra i förhandsgranskningen. Tills du gör det visar Library Select an element to start visual editing.
2. Öppna fliken Library och välj en källa — Image, Generate eller Upload.
3. Använd din bild. Hur du gör detta beror på var den kommer ifrån. För en inbyggd bild håller du muspekaren över den och väljer Use asset. För en bild som du har genererat eller laddat upp väljer du dess färdiga miniatyrbild.
4. Kontrollera förhandsgranskningen. Bilden används direkt på ditt valda element.
5. Välj Save längst ned i förhandsgranskningen, eller Discard för att ångra det.

Förväntat resultat: ditt valda element får den nya bilden, och knapparna Save och Discard försvinner när du har sparat.

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 nedanför visar ett allmänt urval. Håll muspekaren ö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 en Pro- eller Max-plan. 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 att dra och släppa, klistra in eller klicka. Bilder kan vara i formaten JPEG, PNG, GIF, BMP, TIFF eller WEBP, upp till 4 MB. Uppladdade bilder visas under släppområdet — 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 du väljer deras miniatyrbild.

Beskriv ändringar i stället för att klicka

När en ändring är lättare att beskriva än att klicka sig fram till kan du be agenterna i stället. Det finns två ställen att göra det på, och båda fungerar på det du för närvarande har valt.

• Det flytande verktygsfältet över ditt val. Ett litet verktygsfält visas över det element du har valt. Dess två ikoner växlar mellan att beskriva en ändring och att redigera egenskaper direkt. Skriv i Ask the Atoms to change… och skicka.
• Chattinmatningen under Designpanelen. När ett element är valt visar inmatningen etiketten Design och prompten Ask the Atoms team to modify the selected element…, så att agenterna tillämpar din instruktion på det elementet i stället för på hela projektet.

Det flytande verktygsfältet ligger över ditt val. Brickan till vänster visar vilket element instruktionen kommer att gälla för.

Beskriv resultatet, inte mekanismen:

- "Gör detta lugnare — mer luft, mindre rubrik."

- "Matcha stylingen på den här knappen med prissidans."

Vaga instruktioner som "gör att det ser bättre ut" ger oförutsägbara resultat.

Obs: Om du klickar på en egenskap i Visual Editor ändras den direkt. Om du skickar en prompt ber du agenterna att göra arbetet, vilket tar längre tid. För en enkel ändring av färg eller mellanrum ska du redigera egenskapen direkt.

Förhandsgranska dina ändringar

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

• Device view — växla mellan skärmstorlekar för att testa responsivitet. Theme- och typografiändringar som ser rätt ut på dator går ofta sönder på mobil, så kontrollera alltid mobil 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.

Återställ efter ett problem med förhandsgranskningen

Om förhandsgranskningen ser inaktuell ut, fortsätter att ladda eller visar röda fel ligger problemet i förhandsgranskningen snarare än i Design. Se Felsökning för build och preview för felsökningsstegen — Refresh, panelen Console, Resolve och hur du rapporterar ett fel som kvarstår.

En sak som är specifik för Design: om dina redigeringar verkar ha försvunnit, kontrollera om du sparade dem. Osparade ändringar förkastas när du lämnar Design — se Spara dina ändringar.

Publicera dina ändringar

Designändringar 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 livewebbplatsen 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.