🧩 Génération de Composants Visuels (VC)¶

Les Composants Visuels (Visual Components) sont des briques d'interface modulaires réutilisables sur l'ensemble des pages d'un site. L'IA built-in peut concevoir, tester et assembler ces composants à la demande.

🏗️ Structure d'un Visual Component¶

Chaque composant visuel possède : 1. Un arbre de nœuds isolé (NodeTree). 2. Des slots dynamiques pouvant recevoir du texte, des images ou des collections de données. 3. Une feuille de style encapsulée liée aux design tokens globaux.

<!-- Exemple de composant généré par l'IA : Card Grade Sisal -->
<article class="grade-card" data-vc="grade-item">
  <div class="grade-badge">Grade 1 Superior</div>
  <h3 class="grade-title">Fibre Extra-Longue Mandrare</h3>
  <p class="grade-description">Couleur blanc crème naturelle, humidité < 13%, résistance exceptionnelle.</p>
  <ul class="grade-specs">
    <li>Longueur : 90 - 120 cm</li>
    <li>Pureté : 99.8%</li>
  </ul>
</article>

⚡ Workflow de Génération par l'IA¶

Prompt initial : L'utilisateur demande la création d'un composant (ex: « Crée un composant réutilisable pour afficher les retours clients et partenaires »).
Génération & Enregistrement : L'IA crée la structure dans la collection des Visual Components.
Insertion sur le canevas : L'IA insère une instance de référence (<vc-ref id="vc_xyz">) sur la page active.
Propriétés surchargées : Le designer peut modifier le texte ou l'image spécifique à chaque page tout en conservant le style centralisé.