Le mode Design
Changer un titre, la couleur d’un bouton ou la police du site ne devrait pas demander un message à l’agent. Le mode Design te permet de faire ces retouches toi-même, directement sur l’aperçu : chaque réglage est écrit dans le code de ton app et s’affiche aussitôt. C’est gratuit (aucun crédit) et instantané.
Le mode Design a deux onglets :
- Élément : tu cliques sur un élément de l’aperçu (un titre, un bouton, une image…) et tu modifies son contenu et son style ;
- Thème : tu changes les couleurs et les polices de tout le site d’un coup, y compris le mode sombre.
Ouvrir le mode Design
Section intitulée « Ouvrir le mode Design »En haut du panneau de gauche, clique sur Design dans la bascule Chat | Design (le badge Gratuit le rappelle). Tu peux aussi passer par le menu + du chat → Modifier directement, qui ouvre directement l’onglet Élément.
L’éditeur affiche alors l’onglet Aperçu à droite. Pour revenir à l’agent, clique sur Chat.
L’onglet Élément
Section intitulée « L’onglet Élément »Choisir un élément
Section intitulée « Choisir un élément »- Ouvre l’onglet Élément. Si aucun élément n’est choisi, le choix démarre tout seul ; sinon, clique sur Choisir dans l’aperçu.
- L’aperçu affiche « Clique sur un élément pour le modifier · Échap pour annuler ». Survole l’app : l’élément sous ta souris est mis en évidence.
- Clique sur l’élément à retoucher. Le panneau affiche ses réglages, avec en haut son nom et le fichier du code où il se trouve.
- Pour passer à un autre élément, clique sur Changer en haut du panneau, puis sur le nouvel élément (Annuler pour garder l’actuel).
Une fois l’élément choisi, l’aperçu redevient utilisable normalement : tu peux par exemple survoler un bouton pour voir son état au survol.
Les réglages
Section intitulée « Les réglages »Les réglages sont regroupés par section. Seules celles qui ont du sens pour l’élément s’affichent (pas de réglages de texte pour une image, par exemple).
| Section | Réglages |
|---|---|
| Contenu | Texte de l’élément ; pour une image, Image (adresse) avec le bouton Choisir une image du projet, et Description de l’image ; pour un lien, Lien ; pour un champ de formulaire, Texte d’exemple. |
| Couleurs | Couleur du texte, Fond et Bordure. |
| Texte | Police, Taille du texte, Graisse (de Léger à Extra-gras) et Alignement (à gauche, centré, à droite). |
| Espacement | Marge intérieure ↔ et ↕, Marge extérieure horizontale et verticale, et Espace entre les éléments pour un conteneur qui aligne d’autres éléments. |
| Forme | Épaisseur de bordure, Arrondi et Ombre. |
| Avancé | Classes Tailwind : les classes de style brutes de l’élément, modifiables à la main. |
Comment ça se règle :
- Les champs de texte s’appliquent après une courte pause dans la frappe, quand tu quittes le champ ou sur Entrée. Les Classes Tailwind, elles, s’appliquent seulement quand tu quittes le champ ou sur Entrée.
- Les tailles, marges, arrondis et ombres se règlent avec – et +, cran par cran. Revenir sous le premier cran remet la valeur par défaut.
- Les couleurs : clique sur un réglage de couleur pour ouvrir le choix. Les Couleurs du thème sont proposées en premier, avec leur Opacité (de 100 à 10). Sous Autres couleurs (hors thème)…, tu trouves le blanc, le noir, une Couleur personnalisée et toute la palette par teinte et nuance. Attention : ces couleurs hors thème « ne suivront pas le panneau Thème ».
- La police : par défaut, une des polices du thème du projet, ou une famille générique (Sans empattement, Avec empattement, Chasse fixe).
L’état au survol
Section intitulée « L’état au survol »En haut des réglages de style, deux onglets : Normal et Survol. Choisis Survol pour régler ce qui change quand la souris passe sur l’élément : les couleurs (texte, fond, bordure) et l’ombre. Survole ensuite l’élément dans l’aperçu pour voir le résultat. En Survol, « comme l’état normal » signifie que rien ne change au passage de la souris.
Changer une image
Section intitulée « Changer une image »Sur une image, clique sur Choisir une image du projet : la bibliothèque des images du projet s’ouvre, et tu peux aussi y envoyer une nouvelle image. L’image choisie remplace l’ancienne aussitôt. Pense à mettre à jour la Description de l’image (utile pour l’accessibilité et le référencement). Voir Les images du projet.
Demander à l’agent
Section intitulée « Demander à l’agent »En bas du panneau, Demander à l’agent te ramène au chat avec l’élément en cours déjà sélectionné : il ne te reste qu’à écrire ta demande. Utile quand le réglage voulu n’existe pas dans le panneau (une animation, un nouveau bloc, un comportement). Voir Sélectionner un élément.
Les limites (et les messages du panneau)
Section intitulée « Les limites (et les messages du panneau) »Le mode Design modifie le code de ton app à l’endroit exact où se trouve l’élément. Certains cas ne s’y prêtent pas, et le panneau le dit :
| Message | Ce que ça veut dire |
|---|---|
| « Le style de cet élément est calculé dans le code… » | Ses classes sont construites par du code (selon un état, une condition). Les réglages de style ne sont pas proposés : demande le changement à l’agent, ou choisis un élément voisin. |
| « Une partie du style dépend de conditions dans le code… » | Seuls les réglages fixes sont modifiables ici ; la partie conditionnelle reste telle quelle. |
| « Cet élément est affiché N fois (liste ou composant réutilisé)… » | L’élément vient d’un composant réutilisé ou d’une liste : ta retouche s’applique à toutes ses copies. |
| « Cet élément est une entrée d’une liste de N… » | Le style vaut pour toutes les entrées, mais le texte seulement pour celle que tu as choisie. |
« Texte écrit dans src/…. » |
Le texte n’est pas écrit dans l’élément lui-même mais dans un autre fichier (une liste de données, une constante) : ta modification y est faite. |
| « Cet élément a changé dans le code : clique de nouveau dessus dans l’aperçu » | Le code a bougé depuis ton clic (par exemple après un travail de l’agent) : choisis l’élément de nouveau. |
Un texte transmis à un composant par son parent n’est pas modifiable ici : demande-le à l’agent.
L’onglet Thème
Section intitulée « L’onglet Thème »Le thème regroupe les couleurs et les polices de tout le site. Les apps créées par l’agent utilisent des couleurs par rôle (le fond, le texte, la couleur principale…) : en changeant un rôle, tous les éléments qui l’utilisent changent ensemble. En bas du panneau, un rappel : « Tout le site suit ces réglages. » Pour aller plus loin, lis Design et thème.
Clair et sombre (en tête du panneau)
Section intitulée « Clair et sombre (en tête du panneau) »Le panneau explique : « Une variante sombre du thème, dérivée de vos couleurs. » Clique sur Ajouter un mode sombre : Highwind crée une version sombre de chaque couleur à partir de tes couleurs claires, et l’aperçu passe en sombre pour que tu la règles.
- Couleurs modifiées ci-dessous : choisis Clair ou Sombre. Toutes les couleurs et palettes du panneau s’appliquent alors à ce mode, et l’aperçu l’affiche.
- Mode affiché par défaut :
- Selon l’appareil : le site suit le réglage clair ou sombre de l’appareil du visiteur ;
- Sombre : le site s’affiche en sombre pour tout le monde ;
- Clair : le site s’affiche en clair ; le mode sombre ne sert que si le site propose un bouton pour basculer.
- Retirer le mode sombre : supprime la variante sombre, après confirmation (« Retirer le mode sombre ? »).
Palettes
Section intitulée « Palettes »Huit palettes toutes faites (Océan, Forêt, Terracotta, Prune, Nuit, Corail, Ocre, Graphite) changent toutes les couleurs du mode en cours d’un clic. À partir d’une couleur… génère une palette complète à partir d’une couleur que tu choisis (celle de ton logo, par exemple). Les palettes sont pensées pour rester lisibles.
Les couleurs par rôle
Section intitulée « Les couleurs par rôle »Chaque couleur se règle avec sa pastille (sélecteur de couleur) ou en tapant son code hexadécimal (#0b7d83) :
- Fond et texte : Fond, Texte, Texte secondaire, Cartes et blocs, Bordures ;
- Couleurs de marque : Principale, Texte sur la principale, Accent, Texte sur l’accent ;
- Autres couleurs : les rôles propres à ton app, si l’agent en a ajouté (par exemple une couleur de succès ou de mise en avant).
Les alertes de contraste : quand un texte devient difficile à lire sur son fond, un petit triangle apparaît à côté du rôle concerné. Survole-le pour lire le détail, par exemple « Contraste 2,8:1 sur « Fond » : peu lisible (4,5:1 conseillé) ». Ajuste l’une des deux couleurs jusqu’à ce que l’alerte disparaisse.
Deux polices se choisissent dans la liste, classée par catégorie (sans empattement, avec empattement, chasse fixe) : Texte (le corps du texte) et Titres. Un exemple de phrase s’affiche dans la police choisie.
Projet sans thème
Section intitulée « Projet sans thème »Les projets plus anciens peuvent avoir leurs couleurs écrites en dur dans le code. Le panneau l’indique : « Ce projet n’a pas encore de thème… ». Clique sur Ranger les couleurs avec l’agent : c’est un message à l’agent (il consomme des crédits) qui range toutes les couleurs et polices dans le thème, sans changer l’apparence du site. Ensuite, tout se règle ici. Les polices, elles, restent réglables même sans thème.
Enregistrement et versions
Section intitulée « Enregistrement et versions »- Chaque réglage est enregistré tout de suite dans le code de ton app : le bas du panneau affiche Enregistrement… puis Enregistré.
- Une version est créée à la fin de ta séance : quand tu reviens au Chat, quand l’agent démarre, ou quand tu quittes l’éditeur. Un message le confirme dans le chat : « Retouches visuelles enregistrées (version N) : … » pour l’onglet Élément, « Thème enregistré (version N). » pour le thème.
- Tu peux donc enchaîner plusieurs retouches : elles forment une seule version, que tu peux annuler d’un coup en restaurant la version précédente. Voir Versions et historique.
- Aucun crédit n’est utilisé, quel que soit le nombre de retouches.