Concevoir et prévisualiser

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.

Fonctionnement de 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 commencer à 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 un build terminé. Design s’ouvre depuis la Visionneuse d'App, qui n’apparaît qu’après 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 s’affiche pas correctement ci-dessous.

Définir des styles globaux avec Theme

Un thème est le système de design 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é permet de créer 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 ce thème, 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 juger 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 "Voulez-vous appliquer le thème 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 abandonner 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 Voulez-vous réappliquer le thème 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 survivent à 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 par rapport à 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, et plus encore. 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’étalement 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 texte monospace — afin que vous puissiez juger un changement immédiatement plutôt que 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 aussi de Undo et Redo pour parcourir vos modifications, et 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 l’annulation, le rétablissement, l’exportation, l’importation et la réinitialisation.

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’abandonner si vous essayez d’appliquer un autre thème alors que des modifications non enregistrées sont en attente.

Réutiliser un thème dans 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 design, ou transmettez-le à un coéquipier afin que son projet corresponde au vôtre.

Si un thème ne s’affiche pas correctement

Appliquer un thème n’est pas une vérification de compatibilité, donc cela 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 a simplement l’air incorrect.

Une partie de votre app conserve son ancienne apparence. C’est le problème le plus courant. Un élément auquel on a attribué une valeur fixe, 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 jurer 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 design existant.

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 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. Lorsque les agents construisent avec un thème déjà appliqué, ils utilisent ses styles partagés dès le départ, donc moins d’éléments finissent 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 à 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 les 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 remplissage.
• 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 l’enregistrement effectué, et votre modification 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 que des modifications non enregistrées sont en attente, Atoms affiche Unsaved Changes et vous demande d’enregistrer ou d’abandonner avant de continuer.

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

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

Conseils :

1. Utilisez Éditeur visuel pour les changements cosmétiques et le chat pour les changements structurels comme de nouvelles pages, de nouvelles fonctionnalités ou de 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-click ou Cmd-click 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é, donc commencez par choisir où l’image doit aller.

1. Sélectionnez l’élément que vous voulez modifier dans l’aperçu. Tant que vous ne l’avez pas fait, 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 vignette 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 vignette 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 vignette à la place.

Décrire les changements au lieu de cliquer

Lorsqu’un changement est plus facile à décrire qu’à effectuer en cliquant, vous pouvez le demander aux agents à la place. Il y a deux endroits pour le faire, et les 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 passer de la description d’un changement à la modification directe des propriétés. Saisissez votre demande dans Ask the Atoms to change… et 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 s’appliquera.

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

- "Rendez cela 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 "améliorez l’apparence" 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 de faire 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 — passez d’une taille d’écran à l’autre pour tester la réactivité. Les changements de thème et de typographie qui semblent corrects sur ordinateur se cassent souvent sur mobile, donc vérifiez toujours le mobile avant de publier.
• Page selector — passez d’une page de votre app à l’autre.
• Refresh — rechargez l’aperçu s’il semble obsolète.
• Open in a new tab — affichez l’app en pleine largeur dans un onglet de navigateur séparé.
• Console — ouvrez le panneau de journal lorsqu’un problème apparaît.

Résultat attendu : vos modifications sont visibles sur chaque page et à chaque largeur d’appareil que vous comptez 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 rouges, le problème vient de l’aperçu plutôt que de Design. Consultez Dépannage du 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 abandonné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 design n’apparaîtront pas publiquement tant que vous n’aurez pas publié une nouvelle version.

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