Vue de création
Aperçu de la mise en page
La Vue de création est un environnement d'édition à trois panneaux que vous ouvrez en double-cliquant sur n'importe quel groupe dans la Zone des composants. Elle fournit une liste de blocs à gauche, un éditeur de code au centre et une prévisualisation en direct à droite, avec une Boîte d'invite IA le long du bas.
Panneau de liste de blocs
Le panneau gauche affiche tous les blocs du groupe actuel. Chaque bloc montre un aperçu en carte avec le nom du bloc et une liste de fichiers numérotée en dessous. Utilisez la barre d'outils en haut pour naviguer en arrière, basculer entre les vues liste et divisée, ou cliquez sur le bouton + pour ajouter un nouveau bloc.
Éditeur de code
Le panneau central est un éditeur de code à onglets où vous écrivez et modifiez le contenu des blocs. Les onglets sont organisés par type de fichier :
Texte
Écrivez de la documentation, du markdown ou du contenu en texte brut pour le bloc.
HTML
Modifiez la structure HTML de votre composant.
CSS
Ajoutez des styles pour votre composant.
JavaScript
Ajoutez de l'interactivité et de la logique à votre composant.
Prévisualisation en direct
Le panneau droit affiche un aperçu en direct de votre composant. Au fur et à mesure que vous ajoutez du HTML, CSS et JavaScript dans l'éditeur, l'aperçu se met à jour pour montrer le résultat compilé. Vous pouvez également glisser-déposer des fichiers ou coller du contenu (Ctrl+V) directement dans la zone d'aperçu pour les ajouter au bloc. Utilisez l'icône œil pour basculer l'aperçu et le bouton BG pour changer l'arrière-plan de l'aperçu.
Boîte d'invite IA
La barre inférieure est le champ de saisie IA. Utilisez-le pour décrire les modifications et laisser l'IA générer ou modifier le contenu de votre bloc. Il comprend un sélecteur de modèle, un champ de saisie texte, des entrées vocale et emoji, et un bouton Générer. Deux boutons de mode — A et V — basculent entre le mode IA directe et le mode Variations.
Catégories de génération IA
Le sélecteur de modèle IA révèle les catégories de génération qui déterminent quel type de contenu l'IA produit :
Génération de texte
Générez ou modifiez du contenu textuel tel que du code, de la documentation et du balisage.
Génération d'images
Créez des images à partir d'invites textuelles ou modifiez des images existantes avec l'IA (texte-vers-image et image-vers-image).
Génération de vidéos
Générez des vidéos à partir de descriptions textuelles ou animez des images fixes en vidéo (texte-vers-vidéo et image-vers-vidéo).
Mode IA direct (A)
Lorsque le bouton A est actif, l'IA effectue des modifications directes sur votre composant. Le texte du champ affiche « Décrivez les modifications à appliquer à votre composant » et un badge indique quel fichier sera modifié (par ex. « Modifiera : text »). Ce mode est idéal pour des modifications rapides et spécifiques au fichier actuellement sélectionné.
Mode variation (V)
Lorsque le bouton V est actif, l'IA génère plusieurs variations de votre composant au lieu de le modifier directement. Le texte du champ passe à « Décrivez les variations que vous souhaitez générer » et un compteur avec des contrôles − / + apparaît pour que vous puissiez choisir combien de variations créer. Les variations générées apparaissent dans un panneau dédié où vous pouvez les examiner et ajouter vos versions préférées au groupe.