Pas aan hoe je app eruitziet en bekijk daarna eerst het resultaat voordat je publiceert.

Design opent naast je live voorbeeld en laat je aanpassen hoe je project eruitziet zonder code te schrijven.

Deze gids behandelt het instellen van globale stijlen met Theme, het bewerken van afzonderlijke elementen met Visuele Editor, het vervangen van afbeeldingen vanuit Library, het beschrijven van wijzigingen in gewone taal en het controleren van je werk op verschillende apparaten voordat het live gaat.

Hoe Design werkt

Wanneer AI Agents een taak voltooien, verschijnt de App Viewer bovenaan de pagina. Selecteer Design om het ontwerppaneel links op het scherm te openen, met je live voorbeeld ernaast. Het heeft drie tabbladen:

• Theme stelt globale regels in voor de hele app — kleuren, lettertypen en effecten. Het best te gebruiken voordat je bouwt.
• Visuele Editor past de elementen aan die je hebt geselecteerd. Werkt op elk project, op elk moment.
• Library vervangt afbeeldingen of genereert nieuwe.

Theme stelt de regels in en Visuele Editor perfectioneert de details. Selecteer Exit om het paneel te sluiten.

Het Design-paneel opent links. Totdat je iets selecteert, vraagt Visuele Editor je om een element te kiezen.

Voordat je begint

Voordat je Design opent, zorg ervoor dat:

• Je project een voltooide build heeft. Design opent vanuit de App Viewer, die alleen verschijnt nadat de agents een taak hebben afgerond.
• Je weet dat wijzigingen pas live zijn nadat je publiceert. Je openbare URL blijft ongewijzigd totdat je de bijgewerkte versie publiceert.
• Je weet dat een theme alleen gedeelde stijlen bereikt. Elementen die met vaste waarden zijn gebouwd, behouden hun oude uiterlijk na een theme-wijziging. Zie hieronder Als een theme er niet goed uitziet.

Stel globale stijlen in met Theme

Een theme is het ontwerpsysteem van je project. Het definieert globale variabelen — paletten, typografie en afstand — die in je hele app worden toegepast, in plaats van instellingen op één element.

Theme gebruik je het best tijdens de voorbereidingsfase, voordat je begint met bouwen. Als je er vroeg één toepast, volgt alles wat de agents genereren het vanaf het begin.

Kies een theme

Het tabblad Theme opent met een veld Search Themes en groepeert themes in secties:

• Current Theme — wat je project nu gebruikt. Voordat je iets toepast, staat er No theme applied yet, en de knop + ernaast maakt een nieuw theme aan.
• Default Theme — 14 door ontwerpers samengestelde presets. Elk wordt getoond als een voorbeeld van een pagina die ermee is gebouwd, met de naam en een rij kleurstalen die het palet tonen. Deze kunnen niet worden verwijderd.
• My Theme — themes die je hebt gemaakt of aangepast. Deze kunnen worden hernoemd en verwijderd.

Elk theme verschijnt als een voorbeeld van een pagina die ermee is gebouwd, met de naam en een rij kleurstalen die het palet tonen, zodat je de richting kunt beoordelen voordat je het toepast.

Het Theme-tabblad, met bovenaan een toegepast theme en daaronder je opgeslagen themes.

Om er één toe te passen:

1. Selecteer het theme dat je wilt.
2. Atoms vraagt "Do you want to apply theme name?"
3. Selecteer Apply om te bevestigen, of Cancel om terug te gaan.
4. Controleer het voorbeeld.

Verwacht resultaat: het voorbeeld wordt bijgewerkt naar het theme dat je hebt gekozen, en het verschijnt nu onder Current Theme.

Opmerking: Als je niet-opgeslagen wijzigingen hebt in Visuele Editor, toont Atoms Unsaved Changes en vraagt het je om ze op te slaan of te verwerpen voordat je een nieuw theme toepast.

Werk een toegepast theme bij

Een stip op het tabblad Theme betekent dat er een nieuwere versie van je toegepaste theme beschikbaar is.

Om die te gebruiken, selecteer je Update op je huidige theme en bevestig je Do you want to re-apply theme name? Je project gebruikt dan de nieuwere versie.

Je hoeft niet bij te werken. Als je het laat staan, blijft je project de versie gebruiken die je hebt toegepast.

Opmerking: Als je app er niet uitziet zoals het theme dat je hebt geselecteerd, kunnen afzonderlijke elementen zijn overschreven in Visuele Editor. Die overschrijvingen richten zich op specifieke inhoud en blijven bestaan na een theme-wijziging.

Bouw of bewerk een theme in Theme Manager

Selecteer + naast Current Theme om er één vanaf nul te bouwen, of open een bestaand theme om het te wijzigen. Beide openen Theme Manager, waar je een theme verfijnt aan de hand van een live voorbeeld.

De instellingen staan op drie tabbladen:

• Color — de kleurrollen die je app gebruikt, gegroepeerd op doel: Base Colors, Card, Popover, Primary, Secondary en meer. Elke rol heeft zijn eigen waarde, dus het wijzigen van Primary bereikt elk element dat deze gebruikt.
• Fonts — je lettertypen Serif, Sans-serif en Mono.
• Effects — hoek-Radius en een Shadow die je instelt via kleur, dekking, vervaging, spreiding en offset.

Het voorbeeld ernaast is opgebouwd uit echte componenten — aanmeldformulieren, knoppen, invoervelden, gewone tekst en monospace-tekst — zodat je een wijziging direct kunt beoordelen in plaats van te gokken. Gebruik de schakelaar voor licht en donker eronder om beide te controleren, want een palet dat werkt op lichte oppervlakken kan contrast verliezen op donkere.

Onder het voorbeeld heb je ook Undo en Redo om door je wijzigingen te lopen, en Reset om het theme terug te zetten naar het beginpunt.

Theme Manager. Het voorbeeld wordt bijgewerkt terwijl je een waarde wijzigt, en de bediening eronder omvat ongedaan maken, opnieuw uitvoeren, exporteren, importeren en resetten.

Een theme opslaan

1. Selecteer Save.
2. Geef het een Theme Name, of behoud de voorgestelde naam.
3. Selecteer Save om te bevestigen.

Verwacht resultaat: je theme verschijnt onder My Theme op het tabblad Theme, met het palet weergegeven als kleurstalen. Pas het op dezelfde manier toe als elk ander theme.

Opmerking: Bewerkingen worden niet bewaard totdat je ze opslaat. Atoms houdt je tegen en biedt aan om op te slaan of te verwerpen als je een ander theme probeert toe te passen terwijl er nog niet-opgeslagen wijzigingen zijn.

Een theme hergebruiken in meerdere projecten

Theme Manager heeft Export en Import onder het voorbeeld. Exporteer een theme naar een bestand en importeer het vervolgens in een ander project om dezelfde ontwerprichting te hergebruiken, of geef het aan een teamgenoot zodat hun project overeenkomt met het jouwe.

Als een theme er niet goed uitziet

Het toepassen van een theme is geen compatibiliteitscontrole, dus normaal gesproken mislukt het niet. Een theme vervangt de gedeelde stijlwaarden waarop je app is gebouwd, wat betekent dat elk theme in de kiezer meestal op elk project kan worden toegepast.

Wat je in plaats daarvan kunt zien, is een theme dat succesvol wordt toegepast maar niet alles bereikt. Hiervoor is geen foutmelding — het ziet er gewoon verkeerd uit.

Een deel van je app behoudt zijn oude uiterlijk. Dit is het meest voorkomende probleem. Een element dat een vaste waarde heeft gekregen, een specifieke kleur of lettertype dat er direct op is ingesteld, in plaats van een van de gedeelde stijlen van je app — kan niet worden bereikt door een theme-wijziging, dus het behoudt zijn vorige uiterlijk en kan botsen met alles eromheen. Los het op in Visuele Editor, of vraag de agents in de chat om de vaste waarde te vervangen door de stijlen van je theme.

Tekst wordt moeilijk leesbaar. Een donker theme dat wordt toegepast op een lay-out die is ontworpen voor lichte oppervlakken kan ervoor zorgen dat tekst te weinig contrast heeft. Pas de getroffen elementen aan in Visuele Editor, of kies een theme dat dichter bij je bestaande ontwerp ligt.

Atoms vertelt je dat het theme niet kan worden toegepast. Dit komt weinig voor en betekent dat de interface van je project niet is gebouwd op het Atoms-themingsysteem. Gebruik in plaats daarvan Visuele Editor — alles is nog steeds element voor element mogelijk.

Belangrijk: Kies waar mogelijk vroeg een theme. Wanneer de agents bouwen terwijl er al een theme is toegepast, gebruiken ze vanaf het begin de gedeelde stijlen ervan, zodat minder elementen eindigen met vaste waarden die een latere theme-wijziging niet kan bereiken.

Bewerk afzonderlijke elementen met Visuele Editor

Selecteer een element in het voorbeeld om het te bewerken. Om aan meerdere tegelijk te werken, houd je Ctrl ingedrukt en klik je op Windows, of Cmd en klik je op Mac.

Belangrijk: De hieronder beschreven eigenschapsinstellingen werken op één element tegelijk. Wanneer je meerdere elementen hebt geselecteerd, wijzig ze dan door in de chat te beschrijven wat je wilt — zie Beschrijf wijzigingen in plaats van te klikken.

Een badge boven je selectie noemt het element en de grootte ervan — de lettergrootte voor tekst, of de afmetingen voor een container — zodat je kunt bevestigen dat je het bedoelde element hebt en niet de container ervan.

Het tabblad Visuele Editor toont vervolgens de eigenschappen die beschikbaar zijn voor dat element, gegroepeerd in secties:

• Layout — marge en padding.
• Appearance — achtergrondkleur, dekking en hoekradius. Radius loopt van None via Small, Medium, Large, XL, 2XL, 3XL tot Full.
• Content — de tekst van het element.
• Style — lettertypefamilie, gewicht, grootte, tekstuitlijning en decoratie.
• Class — de stijlklassen die op het element zijn toegepast, standaard ingeklapt.

Welke secties verschijnen, hangt af van wat je hebt geselecteerd: een tekstelement biedt Content en Style, terwijl een container mogelijk alleen Layout, Appearance en Class toont.

Er verschijnt ook een zwevende werkbalk boven je selectie met de meest gebruikte instellingen binnen handbereik — lettertype, gewicht, uitlijning en kleur voor tekst — naast de verwijderoptie en het promptveld dat hieronder wordt beschreven.

Wijzigingen verschijnen in het voorbeeld terwijl je ze maakt. Om ze te verlaten, gebruik je Discard onderaan het voorbeeld.

Je wijzigingen opslaan

Bewerkingen worden niet bewaard totdat je ze opslaat. Zodra je een wijziging hebt aangebracht, verschijnen Discard en Save onderaan het voorbeeld.

• Save bewaart je wijzigingen.
• Discard gooit ze weg en zet het element terug naar hoe het was.

Verwacht resultaat: de knoppen verdwijnen zodra je opslaat, en je wijziging maakt nu deel uit van het project.

Opmerking: Als je Design probeert te verlaten, een ander theme toepast of Selecteer om te chatten gebruikt terwijl er nog niet-opgeslagen werk openstaat, toont Atoms Unsaved Changes en vraagt het je om op te slaan of te verwerpen voordat je doorgaat.

Opslaan bewaart de wijziging in je project. Het zet deze niet op je live site — zie Je wijzigingen publiceren.

Met een element geselecteerd toont Visuele Editor de eigenschappen ervan. De zwevende werkbalk boven de selectie schakelt tussen het beschrijven van een wijziging en het direct bewerken ervan.

Tips:

1. Gebruik Visuele Editor voor cosmetische wijzigingen en de chat voor structurele wijzigingen zoals nieuwe pagina's, nieuwe functies of backendlogica.
2. Om dezelfde wijziging toe te passen op een rij kaarten of knoppen, selecteer je ze allemaal met Ctrl-click of Cmd-click en beschrijf je de wijziging één keer in de chat. Als je ze elk via de eigenschapsinstellingen bewerkt, moet je jezelf herhalen.

Afbeeldingen vervangen met Library

Library past een afbeelding toe op het element dat je hebt geselecteerd, dus begin met te kiezen waar de afbeelding moet komen.

1. Selecteer het element dat je wilt wijzigen in het voorbeeld. Totdat je dat doet, toont Library Select an element to start visual editing.
2. Open het tabblad Library en kies een bron — Image, Generate of Upload.
3. Pas je afbeelding toe. Hoe je dit doet, hangt af van waar deze vandaan komt. Voor een ingebouwde afbeelding beweeg je eroverheen en selecteer je Use asset. Voor een afbeelding die je hebt gegenereerd of geüpload, selecteer je de voltooide miniatuur.
4. Controleer het voorbeeld. De afbeelding wordt meteen toegepast op je geselecteerde element.
5. Selecteer Save onderaan het voorbeeld, of Discard om het ongedaan te maken.

Verwacht resultaat: je gekozen element bevat de nieuwe afbeelding, en de knoppen Save en Discard verdwijnen zodra je opslaat.

Het Library-tabblad met afbeeldingscategorieën en Popular Images.

Waar de afbeeldingen vandaan komen

Image is de ingebouwde collectie. Gebruik Search assets voor iets specifieks, of blader door een categorie — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings en People, met More tags voor de rest. Door een categorie te selecteren open je deze; gebruik de pijl terug om terug te keren. Popular Images hieronder toont een algemene selectie. Beweeg over een afbeelding en selecteer Use asset om deze toe te passen.

Generate maakt een nieuwe afbeelding op basis van een beschrijving en vereist een Pro- of Max-plan. Typ wat je wilt onder Describe the image you want to generate en selecteer Generate. Resultaten verschijnen onder het veld. Selecteer een voltooide miniatuur om deze op je element toe te passen.

Upload voegt je eigen bestand toe via slepen en neerzetten, plakken of klikken. Afbeeldingen kunnen in JPEG-, PNG-, GIF-, BMP-, TIFF- of WEBP-indeling zijn, tot 4 MB. Geüploade afbeeldingen verschijnen onder het neerzetgebied — selecteer er één om deze toe te passen.

Opmerking: Use asset verschijnt alleen op de ingebouwde afbeeldingen. Afbeeldingen die je genereert of uploadt, worden in plaats daarvan toegepast door hun miniatuur te selecteren.

Beschrijf wijzigingen in plaats van te klikken

Wanneer een wijziging makkelijker te beschrijven is dan om door te klikken, kun je het in plaats daarvan aan de agents vragen. Er zijn twee plaatsen om dit te doen, en beide werken op wat je momenteel hebt geselecteerd.

• De zwevende werkbalk op je selectie. Er verschijnt een kleine werkbalk boven het element dat je hebt gekozen. De twee pictogrammen schakelen tussen het beschrijven van een wijziging en het direct bewerken van eigenschappen. Typ in Ask the Atoms to change… en verzend.
• De chatinvoer onder het Design-paneel. Wanneer een element is geselecteerd, toont de invoer een label Design en de prompt Ask the Atoms team to modify the selected element…, zodat de agents je instructie op dat element toepassen in plaats van op het hele project.

De zwevende werkbalk staat boven je selectie. De chip links toont op welk element de instructie wordt toegepast.

Beschrijf het resultaat, niet het mechanisme:

- "Maak dit rustiger — meer witruimte, kleinere kop."

- "Laat de stijl van deze knop overeenkomen met de pricing-pagina."

Vage instructies zoals "make it look better" geven onvoorspelbare resultaten.

Opmerking: Door op een eigenschap in Visuele Editor te klikken, wijzig je deze direct. Door een prompt te verzenden vraag je de agents om het werk te doen, wat langer duurt. Voor een eenvoudige kleur- of afstandswijziging bewerk je de eigenschap direct.

Bekijk een voorbeeld van je wijzigingen

Gebruik de werkbalk boven het voorbeeld:

• Device view — schakel tussen schermgroottes om responsiviteit te testen. Theme- en typografiewijzigingen die er op desktop goed uitzien, gaan vaak mis op mobiel, dus controleer altijd mobiel voordat je publiceert.
• Page selector — ga tussen de pagina's van je app.
• Refresh — laad het voorbeeld opnieuw als het verouderd lijkt.
• Open in a new tab — bekijk de app op volledige breedte in een apart browsertabblad.
• Console — open het logpaneel wanneer iets er niet goed uitziet.

Verwacht resultaat: je wijzigingen zijn zichtbaar op elke pagina en bij elke apparaatbreedte die je wilt ondersteunen.

Herstellen van een probleem met het voorbeeld

Als het voorbeeld verouderd lijkt, blijft laden of rode fouten toont, zit het probleem in het voorbeeld en niet in Design. Zie Probleemoplossing voor build en preview voor de stappen voor probleemoplossing — Refresh, het paneel Console, Resolve en hoe je een fout meldt die blijft bestaan.

Eén ding dat specifiek is voor Design: als het lijkt alsof je bewerkingen zijn verdwenen, controleer dan of je ze hebt opgeslagen. Niet-opgeslagen wijzigingen worden verworpen wanneer je Design verlaat — zie Je wijzigingen opslaan.

Je wijzigingen publiceren

Wijzigingen in Design blijven in je werkproject totdat je publiceert. Selecteer Publish in de rechterbovenhoek, of Update als het project al live is.

Opmerking: Als je project Specify Versie gebruikt in plaats van Always Latest, blijft de live site vergrendeld op de versie die je hebt gekozen, en je ontwerpwijzigingen verschijnen niet openbaar totdat je een nieuwe versie publiceert.

Voor de fouten die de agents tijdens een build melden, zie Probleemrapport.