Design EditorDocsUtiliser l’éditeur
Variables et thèmes
Les variables contiennent les couleurs, tailles et textes qu’un design répète. Les thèmes les changent toutes d’un coup, par exemple entre clair et sombre.
1Variables
Ouvrez le panneau Variables avec Cmd+Shift+V. Créez des variables de couleur, de nombre et de texte, recherchez-les, et liez-les aux remplissages, contours, tailles ou textes. Les agents peuvent aussi créer des variables vrai/faux.
2Thèmes
Ajoutez un thème pour créer un axe, comme Mode, puis ajoutez des variantes, comme Clair et Sombre. Chaque variable peut avoir une valeur par variante, et changer de variante redessine tout ce qui y est lié.
Enregistrez l’ensemble actuel comme préréglage pour le réutiliser dans d’autres fichiers. Les préréglages s’exportent et s’importent en fichiers .optheme.
3Systèmes de design
Quatre systèmes de design complets sont fournis avec l’appli : Halo, Lunaris, Nitro et shadcn. Chacun est un jeu de tokens complet avec thèmes clair et sombre. Appliquez-en un depuis Accueil, Systèmes de design, ou demandez-le à un agent.
4design.md
Le panneau Système de design (Cmd+Shift+D) conserve une description écrite du design : thème visuel, couleurs, typographie, styles des composants, principes de mise en page et notes pour la génération. Les agents la lisent avant de dessiner.
- Importez-la ou exportez-la en fichier
design.md. - Générez-la automatiquement à partir du design actuel avec votre modèle IA.
- Tout synchroniser avec les variables transforme ses couleurs en variables ; +Var les ajoute une par une.
5Guides de style
Le Centre de ressources propose 63 guides de style intégrés que l’agent peut suivre, plus les vôtres : importez n’importe quel fichier DESIGN.md, ou collez-en un, dans Styles. Épinglez un style pour que l’agent l’utilise pour chaque nouveau design.