Ajustez l’apparence de votre app, puis prévisualisez le résultat avant de publier.

Design s’ouvre à côté de votre aperçu en direct et vous permet de modifier l’apparence de votre projet sans écrire de code.

Ce guide explique comment définir des styles globaux avec Theme, modifier des éléments individuels avec Éditeur visuel, remplacer des images depuis Library, décrire des changements en langage courant et vérifier votre travail sur différents appareils avant la mise en ligne.

Comment fonctionne Design

Lorsque les Agents IA terminent une tâche, la Visionneuse d'App apparaît en haut de la page. Sélectionnez Design pour ouvrir le panneau de conception à gauche de l’écran, avec votre aperçu en direct à côté. Il comporte trois onglets :

• Theme définit des règles globales pour toute l’app — couleurs, polices et effets. À utiliser de préférence avant de construire.
• Éditeur visuel ajuste les éléments que vous avez sélectionnés. Fonctionne sur n’importe quel projet, à tout moment.
• Library remplace des images ou en génère de nouvelles.

Theme définit les règles, et Éditeur visuel peaufine les détails. Sélectionnez Exit pour fermer le panneau.

Le panneau Design s’ouvre à gauche. Tant que vous ne sélectionnez rien, Éditeur visuel vous invite à choisir un élément.

Avant de commencer

Avant d’ouvrir Design, assurez-vous que :

• Votre projet a une build terminée. Design s’ouvre depuis la Visionneuse d'App, qui n’apparaît qu’une fois que les agents ont terminé une tâche.
• Vous savez que les changements ne sont pas en ligne tant que vous n’avez pas publié. Votre URL publique n’est pas affectée tant que vous ne publiez pas la version mise à jour.
• Vous savez qu’un thème n’affecte que les styles partagés. Les éléments construits avec des valeurs fixes conservent leur ancienne apparence après un changement de thème. Voir Si un thème ne semble pas correct ci-dessous.

Définir des styles globaux avec Theme

Un thème est le système de conception de votre projet. Il définit des variables globales — palettes, typographie et espacement — qui s’appliquent à toute votre app, plutôt qu’à un seul élément.

Theme s’utilise de préférence pendant la phase de préparation, avant de commencer à construire. En appliquer un tôt signifie que tout ce que les agents génèrent le suit dès le départ.

Choisir un thème

L’onglet Theme s’ouvre avec un champ Search Themes et regroupe les thèmes en sections :

• Current Theme — ce que votre projet utilise actuellement. Avant d’appliquer quoi que ce soit, il affiche No theme applied yet, et le bouton + à côté crée un nouveau thème.
• Default Theme — 14 préréglages sélectionnés par des designers. Chacun est affiché comme un aperçu d’une page construite avec lui, avec son nom et une rangée d’échantillons montrant sa palette. Ils ne peuvent pas être supprimés.
• My Theme — les thèmes que vous avez créés ou personnalisés. Ils peuvent être renommés et supprimés.

Chaque thème apparaît comme un aperçu d’une page construite avec lui, avec son nom et une rangée d’échantillons montrant sa palette, afin que vous puissiez évaluer la direction avant de l’appliquer.

L’onglet Theme, avec un thème appliqué en haut et vos thèmes enregistrés en dessous.

Pour en appliquer un :

1. Sélectionnez le thème souhaité.
2. Atoms demande "Do you want to apply theme name?"
3. Sélectionnez Apply pour confirmer, ou Cancel pour revenir en arrière.
4. Vérifiez l’aperçu.

Résultat attendu : l’aperçu se met à jour avec le thème choisi, et celui-ci apparaît désormais sous Current Theme.

Remarque : Si vous avez des modifications non enregistrées dans Éditeur visuel, Atoms affiche Unsaved Changes et vous demande de les enregistrer ou de les ignorer avant d’appliquer un nouveau thème.

Mettre à jour un thème appliqué

Un point sur l’onglet Theme signifie qu’une version plus récente de votre thème appliqué est disponible.

Pour l’utiliser, sélectionnez Update sur votre thème actuel et confirmez Do you want to re-apply theme name? Votre projet utilisera alors la version plus récente.

Vous n’êtes pas obligé de le mettre à jour. Si vous le laissez tel quel, votre projet continue d’utiliser la version que vous avez appliquée.

Remarque : Si votre app ne ressemble pas au thème que vous avez sélectionné, certains éléments individuels ont peut-être été remplacés dans Éditeur visuel. Ces remplacements ciblent un contenu spécifique et persistent après un changement de thème.

Créer ou modifier un thème dans Theme Manager

Sélectionnez + à côté de Current Theme pour en créer un à partir de zéro, ou ouvrez un thème existant pour le modifier. Dans les deux cas, cela ouvre Theme Manager, où vous affinez un thème à l’aide d’un aperçu en direct.

Ses paramètres sont répartis sur trois onglets :

• Color — les rôles de couleur utilisés par votre app, regroupés par usage : Base Colors, Card, Popover, Primary, Secondary, etc. Chaque rôle a sa propre valeur, donc modifier Primary affecte chaque élément qui l’utilise.
• Fonts — vos polices Serif, Sans-serif et Mono.
• Effects — le Radius des coins, et une Shadow que vous contrôlez par la couleur, l’opacité, le flou, l’étendue et le décalage.

L’aperçu à côté est construit à partir de composants réels — formulaires de connexion, boutons, champs de saisie, texte courant et monospace — afin que vous puissiez évaluer immédiatement un changement au lieu de deviner. Utilisez le basculeur clair/sombre en dessous pour vérifier les deux, car une palette qui fonctionne sur des surfaces claires peut perdre en contraste sur des surfaces sombres.

Sous l’aperçu, vous disposez également de Undo et Redo pour parcourir vos modifications, ainsi que de Reset pour ramener le thème à son état initial.

Theme Manager. L’aperçu se met à jour lorsque vous modifiez une valeur, et les contrôles en dessous couvrent annuler, rétablir, exporter, importer et réinitialiser.

Enregistrer un thème

1. Sélectionnez Save.
2. Donnez-lui un Theme Name, ou conservez celui proposé.
3. Sélectionnez Save pour confirmer.

Résultat attendu : votre thème apparaît sous My Theme dans l’onglet Theme, avec sa palette affichée sous forme d’échantillons. Appliquez-le de la même manière que n’importe quel autre thème.

Remarque : Les modifications ne sont pas conservées tant que vous ne les enregistrez pas. Atoms vous arrêtera et vous proposera d’enregistrer ou d’ignorer si vous essayez d’appliquer un autre thème alors que des modifications non enregistrées sont en attente.

Réutiliser un thème sur plusieurs projets

Theme Manager propose Export et Import sous l’aperçu. Exportez un thème dans un fichier, puis importez-le dans un autre projet pour réutiliser la même direction de conception, ou transmettez-le à un coéquipier afin que son projet corresponde au vôtre.

Si un thème ne semble pas correct

L’application d’un thème n’est pas une vérification de compatibilité, donc elle n’échoue normalement pas. Un thème remplace les valeurs de style partagées sur lesquelles votre app est construite, ce qui signifie que n’importe quel thème du sélecteur peut généralement être appliqué à n’importe quel projet.

Ce que vous pouvez voir à la place, c’est un thème qui s’applique correctement mais n’affecte pas tout. Il n’y a pas de message d’erreur pour cela — cela semble simplement incorrect.

Une partie de votre app conserve son ancienne apparence. C’est le problème le plus courant. Un élément auquel une valeur fixe a été attribuée, une couleur spécifique ou une police définie directement sur lui, plutôt qu’un des styles partagés de votre app — ne peut pas être affecté par un changement de thème, il conserve donc son apparence précédente et peut entrer en conflit avec tout ce qui l’entoure. Corrigez-le dans Éditeur visuel, ou demandez aux agents dans le chat de remplacer la valeur fixe par les styles de votre thème.

Le texte devient difficile à lire. Un thème sombre appliqué à une mise en page conçue pour des surfaces claires peut laisser un texte avec trop peu de contraste. Ajustez les éléments concernés dans Éditeur visuel, ou choisissez un thème plus proche de votre conception existante.

Atoms vous indique que le thème ne peut pas être appliqué. C’est rare, et cela signifie que l’interface de votre projet n’a pas été construite sur le système de thèmes d’Atoms. Utilisez plutôt Éditeur visuel — tout reste possible élément par élément.

Important : Choisissez un thème tôt lorsque c’est possible. Quand les agents construisent avec un thème déjà appliqué, ils utilisent ses styles partagés dès le départ, de sorte que moins d’éléments se retrouvent avec des valeurs fixes qu’un changement de thème ultérieur ne peut pas affecter.

Modifier des éléments individuels avec Éditeur visuel

Sélectionnez un élément dans l’aperçu pour le modifier. Pour travailler sur plusieurs éléments à la fois, maintenez Ctrl et cliquez sous Windows, ou Cmd et cliquez sur Mac.

Important : Les contrôles de propriétés décrits ci-dessous agissent sur un seul élément à la fois. Lorsque plusieurs éléments sont sélectionnés, modifiez-les plutôt en décrivant ce que vous voulez dans le chat — voir Décrire des changements au lieu de cliquer.

Un badge au-dessus de votre sélection indique le nom de l’élément et sa taille — la taille de police pour le texte, ou les dimensions pour un conteneur — afin que vous puissiez confirmer que vous avez bien l’élément voulu plutôt que son conteneur.

L’onglet Éditeur visuel affiche alors les propriétés disponibles pour cet élément, regroupées en sections :

• Layout — marge et padding.
• Appearance — couleur d’arrière-plan, opacité et rayon des coins. Radius va de None à Full en passant par Small, Medium, Large, XL, 2XL et 3XL.
• Content — le texte de l’élément.
• Style — famille de police, graisse, taille, alignement du texte et décoration.
• Class — les classes de style appliquées à l’élément, réduites par défaut.

Les sections affichées dépendent de ce que vous avez sélectionné : un élément de texte propose Content et Style, tandis qu’un conteneur peut n’afficher que Layout, Appearance et Class.

Une barre d’outils flottante apparaît également au-dessus de votre sélection avec les contrôles les plus courants à portée de main — police, graisse, alignement et couleur pour le texte — ainsi que le contrôle de suppression et le champ de prompt décrit ci-dessous.

Les changements apparaissent dans l’aperçu au fur et à mesure. Pour les abandonner, utilisez Discard en bas de l’aperçu.

Enregistrer vos modifications

Les modifications ne sont pas conservées tant que vous ne les enregistrez pas. Une fois qu’un changement a été effectué, Discard et Save apparaissent en bas de l’aperçu.

• Save conserve vos modifications.
• Discard les annule et remet l’élément dans son état précédent.

Résultat attendu : les boutons disparaissent une fois que vous enregistrez, et votre changement fait désormais partie du projet.

Remarque : Si vous essayez de quitter Design, d’appliquer un autre thème ou d’utiliser Sélectionner pour discuter alors qu’un travail non enregistré est en attente, Atoms affiche Unsaved Changes et vous demande d’enregistrer ou d’ignorer avant de continuer.

L’enregistrement conserve le changement dans votre projet. Cela ne le met pas sur votre site en direct — voir Publier vos modifications.

Lorsqu’un élément est sélectionné, Éditeur visuel affiche ses propriétés. La barre d’outils flottante au-dessus de la sélection permet de basculer entre la description d’un changement et sa modification directe.

Conseils :

1. Utilisez Éditeur visuel pour les changements cosmétiques et le chat pour les changements structurels tels que de nouvelles pages, de nouvelles fonctionnalités ou la logique backend.
2. Pour effectuer le même changement sur une rangée de cartes ou de boutons, sélectionnez-les tous avec Ctrl-clic ou Cmd-clic et décrivez le changement une seule fois dans le chat. Modifier chacun via les contrôles de propriétés signifie vous répéter.

Remplacer des images avec Library

Library applique une image à l’élément que vous avez sélectionné, commencez donc par choisir où l’image doit aller.

1. Sélectionnez l’élément que vous souhaitez modifier dans l’aperçu. Tant que vous ne le faites pas, Library affiche Select an element to start visual editing.
2. Ouvrez l’onglet Library et choisissez une source — Image, Generate ou Upload.
3. Appliquez votre image. La méthode dépend de sa provenance. Pour une image intégrée, survolez-la et sélectionnez Use asset. Pour une image générée ou téléversée, sélectionnez sa miniature finale.
4. Vérifiez l’aperçu. L’image est appliquée immédiatement à l’élément sélectionné.
5. Sélectionnez Save en bas de l’aperçu, ou Discard pour annuler.

Résultat attendu : l’élément choisi affiche la nouvelle image, et les boutons Save et Discard disparaissent une fois l’enregistrement effectué.

L’onglet Library avec des catégories d’images et Popular Images.

D’où viennent les images

Image est la collection intégrée. Utilisez Search assets pour quelque chose de précis, ou parcourez une catégorie — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings et People, avec More tags pour le reste. Sélectionner une catégorie l’ouvre ; utilisez la flèche de retour pour revenir. Popular Images en dessous affiche une sélection générale. Survolez n’importe quelle image et sélectionnez Use asset pour l’appliquer.

Generate crée une nouvelle image à partir d’une description et nécessite un forfait Pro ou Max. Saisissez ce que vous voulez sous Describe the image you want to generate et sélectionnez Generate. Les résultats apparaissent sous le champ. Sélectionnez une miniature terminée pour l’appliquer à votre élément.

Upload ajoute votre propre fichier par glisser-déposer, collage ou clic. Les images peuvent être aux formats JPEG, PNG, GIF, BMP, TIFF ou WEBP, jusqu’à 4 Mo. Les images téléversées apparaissent sous la zone de dépôt — sélectionnez-en une pour l’appliquer.

Remarque : Use asset n’apparaît que sur les images intégrées. Les images que vous générez ou téléversez s’appliquent en sélectionnant leur miniature à la place.

Décrire des changements au lieu de cliquer

Lorsqu’un changement est plus facile à décrire qu’à effectuer en cliquant, vous pouvez le demander aux agents. Il y a deux endroits pour le faire, et tous deux agissent sur ce que vous avez actuellement sélectionné.

• La barre d’outils flottante sur votre sélection. Une petite barre d’outils apparaît au-dessus de l’élément choisi. Ses deux icônes permettent de basculer entre la description d’un changement et la modification directe des propriétés. Saisissez votre demande dans Ask the Atoms to change… puis envoyez-la.
• Le champ de chat sous le panneau Design. Lorsqu’un élément est sélectionné, le champ affiche un libellé Design et le prompt Ask the Atoms team to modify the selected element…, afin que les agents appliquent votre instruction à cet élément plutôt qu’à l’ensemble du projet.

La barre d’outils flottante se place au-dessus de votre sélection. La puce à gauche indique à quel élément l’instruction sera appliquée.

Décrivez le résultat, pas le mécanisme :

- "Rendez ceci plus apaisant — plus d’espace blanc, un titre plus petit."

- "Faites correspondre le style de ce bouton à celui de la page de tarification."

Des instructions vagues comme "make it look better" donnent des résultats imprévisibles.

Remarque : Cliquer sur une propriété dans Éditeur visuel la modifie immédiatement. Envoyer un prompt demande aux agents d’effectuer le travail, ce qui prend plus de temps. Pour un simple changement de couleur ou d’espacement, modifiez directement la propriété.

Prévisualiser vos modifications

Utilisez la barre d’outils au-dessus de l’aperçu :

• Device view — basculez entre les tailles d’écran pour tester la réactivité. Les changements de thème et de typographie qui semblent corrects sur desktop cassent souvent sur mobile, alors vérifiez toujours le mobile avant de publier.
• Page selector — naviguez entre les pages de votre app.
• Refresh — rechargez l’aperçu s’il semble obsolète.
• Open in a new tab — affichez l’app en pleine largeur dans un onglet séparé du navigateur.
• Console — ouvrez le panneau de logs lorsque quelque chose semble incorrect.

Résultat attendu : vos modifications sont visibles sur chaque page et à chaque largeur d’appareil que vous souhaitez prendre en charge.

Récupérer après un problème d’aperçu

Si l’aperçu semble obsolète, continue à charger ou affiche des erreurs en rouge, le problème vient de l’aperçu plutôt que de Design. Consultez Dépannage de la build et de l’aperçu pour les étapes de dépannage — Refresh, le panneau Console, Resolve et comment signaler une erreur persistante.

Une chose spécifique à Design : si vos modifications semblent avoir disparu, vérifiez si vous les avez enregistrées. Les modifications non enregistrées sont ignorées lorsque vous quittez Design — voir Enregistrer vos modifications.

Publier vos modifications

Les changements effectués dans Design restent dans votre projet de travail jusqu’à la publication. Sélectionnez Publish dans le coin supérieur droit, ou Update si le projet est déjà en ligne.

Remarque : Si votre projet utilise Specify Version plutôt que Always Latest, le site en ligne reste verrouillé sur la version choisie, et vos changements de conception n’apparaîtront pas publiquement tant que vous ne publierez pas une nouvelle version.

Pour les erreurs signalées par les agents pendant une build, consultez Signaler un problème.