micro-ui-illustration

Boîte à outils d'illustration vectorielle

Combinez les idées de l'utilisateur et les images de référence, clarifiez progressivement le sujet via des échanges, puis utilisez les outils de dessin fournis ici. Par défaut, les contraintes de style Micro-UI ci-dessous s'appliquent ; les directions explicites et les spécifications du projet de l'utilisateur sont prioritaires.

Style et composition par défaut de Micro-UI

Ces règles rétablissent les limites stylistiques de la version précédente pour les nouvelles illustrations Micro-UI ; elles ne limitent pas la technologie SVG en général.

• Découpes de contrôles réels : Le sujet principal doit présenter une structure reconnaissable d'outil ou de contrôle. N'utilisez pas de barres grises répétitives, de cartes vides ou d'icônes sans signification pour simuler une interface ; extrayez d'abord les caractéristiques d'identité de l'objet depuis la référence.
• Sujet principal sans contour : Les grandes formes sont délimitées par des aplats de couleur, des masques et des ombres portées légères. Les traits d'icônes, les lignes de règle et les traits d'ambiance très discrets sont autorisés ; la taille des icônes et des traits respecte les spécifications du projet cible.
• Composition en couches par défaut : Organisez l'espace selon « fond porteur → plan intermédiaire (découpe de contrôle) → plan focal avant », le plan environnemental est optionnel. Le papier, les documents et les rapports peuvent utiliser un fond ; si le contrôle lui-même forme une entité complète, un fond supplémentaire peut être omis. Chaque couche doit servir le sujet, ne pas ajouter d'éléments juste pour créer des couches.
• Atomes monocouches et interdiction de récursion : Si le sujet est déjà composé de plusieurs sous-modules, les sous-modules restent des entités pleines et colorées, sans imbrication de troisièmes couches de micro-contrôles, pseudo-graphiques ou petits symboles. Le niveau structurel est calculé selon la fonction visuelle, non selon le nombre de balises <g> SVG.
• Élément minimal de 16px : À la taille d'affichage cible, la largeur et la hauteur des blocs de couleur indépendants sont d'au moins 16px ; les traits d'icônes nécessaires, les lignes de règle et les points d'indication d'état (diamètre max 3px) sont exclus. Ne contournez pas cette règle en augmentant la résolution d'exportation. Si la taille réduite ne le permet pas, réduisez le nombre d'éléments ou simplifiez l'expression.
• Détails sobres : Par conteneur, par défaut pas plus de trois éléments principaux ; pas de pseudo-texte dense, pas de conteneurs hauts et vides avec peu de contenu. Le texte n'est utilisé que pour exprimer l'identité, l'état ou l'action.
• Couleurs par jetons : Le code source référence des rôles de couleur définis de manière centralisée, puis les mappe aux jetons du projet ; n'écrivez pas de valeurs hexadécimales ou littérales dispersées. Un SVG indépendant peut résoudre les rôles en couleurs réelles lors de l'exportation, tout en conservant la source de mappage pour garantir l'affichage même en dehors de l'hôte.

Choisissez le matériel pertinent parmi Images de référence et enregistrements d'analyse en fonction du sujet actuel ; si vous avez besoin de paramètres d'éclairage ou d'exemples de code, lisez Construction et exemples complets. Les règles de style sont appliquées par défaut ; si des exceptions sont nécessaires, l'IA juge en fonction des références et de la taille d'affichage, et explique l'objet de l'exception, la raison et le résultat de la vérification visuelle, sans demander une autorisation répétée pour un dessin ordinaire.

Apprentissage du flux de référence utilisateur

Lorsque l'utilisateur fournit une image de référence et souhaite s'en inspirer, suivez les étapes suivantes pour analyser et enregistrer :

1. Réception de l'intention : L'utilisateur envoie une image de référence et explique les caractéristiques qu'il souhaite reprendre (par exemple « reprendre l'effet d'épaisseur de l'ouverture du dossier » ou « reprendre la proportion de surface de cette palette bleu-vert »).
2. Analyse des points clés : L'IA examine l'image et décompose selon cinq aspects :
   • Forme : Comment le contrôle est découpé, le contour extérieur et la taille des coins arrondis ;
   • Couleurs : Proportion de surface entre le fond clair, la couleur fonctionnelle principale et le point focal surligné ;
   • Hiérarchie : Relations d'avant-arrière, décalages et espaces blancs ;
   • Composition : Centre de gravité du sujet dans le canevas et flux visuel ;
   • Éclairage : Décalage, diffusion et transparence des ombres portées.
3. Sauvegarde et enregistrement :
   • Placez l'image dans le répertoire assets/reference-images/ ;
   • Ajoutez les conclusions de l'analyse au references/visual-reference-map.md en indiquant clairement ce qui peut être repris et ce qui relève du contenu métier spécifique de l'image originale (à ne pas copier).
4. Changement de style et absence d'image :
   • Si l'utilisateur demande explicitement un changement de style, ajustez les paramètres selon les nouvelles exigences pour éviter les conflits entre les nouvelles et anciennes règles ;
   • En l'absence d'image de référence, dessinez selon les règles et cas existants, sans exiger d'image de l'utilisateur.
5. Clarification conceptuelle :
   • « Apprentissage » signifie ici analyser l'image de référence et enregistrer les points clés pour s'y référer lors du dessin ; il ne s'agit pas d'entraîner un modèle, et il n'est pas affirmé que le modèle a appris ce style de manière permanente.

Clarification progressive par dialogue

Lorsque la direction d'une nouvelle illustration n'est pas encore définie, l'IA guide activement l'utilisateur pour exprimer progressivement ses idées, sans produire une image dès la réception d'un mot-clé. Organisez d'abord les informations fournies par l'utilisateur (usage, scénario, référence, préférences et contraintes) et clarifiez uniquement les lacunes qui affectent le jugement actuel du design ; les informations déjà confirmées sont conservées et ne sont pas redemandées.

Proposez d'abord quelques options concrètes pour aider l'utilisateur à exprimer ses préférences, puis approfondissez progressivement en fonction des choix et des explications de l'utilisateur. À chaque tour, posez une question courte et spécifique autour d'une décision clé, donnez peu d'options réellement différentes, expliquez comment chaque option se traduirait visuellement, et donnez une recommandation. Le tour suivant doit reprendre ce que l'utilisateur vient de confirmer pour cibler davantage les aspects non encore clarifiés (scénario, sujet ou composition), sans répéter des options générales. Permettez à l'utilisateur de décrire, combiner ou rejeter librement ces options, sans l'enfermer dans des choix. Ne déversez pas un questionnaire complet en une seule fois, et ne transférez pas le travail de composition professionnelle à l'utilisateur.

En fonction des informations manquantes, progressez selon la logique suivante ; les parties déjà claires pour l'utilisateur sont sautées :

1. Cibler le contenu exprimé : À partir de l'usage et du thème, déterminez ce que l'utilisateur souhaite vraiment faire comprendre au spectateur : objet, action, état ou relation. Transformez les mots fonctionnels généraux en scènes concrètes et formulez une intention d'image claire pour confirmation par l'utilisateur.
2. Cibler la direction visuelle : En vous appuyant sur l'analyse du matériel, montrez des références pertinentes, indiquez les aspects de forme, couleur, espace ou texture qui peuvent être repris, et demandez à l'utilisateur ce qu'il aime et n'aime pas en particulier. Distinguez la base stylistique de la composition scénique : aimer une référence ne signifie pas en copier la disposition.
3. Cibler la composition de l'image : Par le dialogue, comprenez progressivement les idées de l'utilisateur sur le sujet, les relations entre les objets, le point focal et la sensation générale, donnez des conseils spécifiques basés sur les références pour aider l'utilisateur à faire des choix.

Ne poursuivez la clarification que sur ce qui n'est pas encore clair, sans suivre mécaniquement une liste de questions. Une fois l'idée clarifiée, résumez brièvement l'intention de l'image et la composition principale confirmées par les deux parties, attendez que l'utilisateur donne explicitement l'autorisation (« on peut commencer », « on peut y aller », ou équivalent) avant de dessiner. Si l'autorisation a déjà été donnée et que la direction est claire, exécutez directement sans reconfirmation. Les détails ultérieurs sont contrôlés par l'utilisateur ; ajustez selon ses modifications sans définir d'étapes de validation d'échantillon ou de retouche d'approbation. Pour les modifications locales, ne clarifiez que la cible ambiguë, sans relancer tout le processus.

De la référence à la forme et à la composition

Identifiez d'abord la structure de reconnaissance de l'objet dans l'expérience de l'utilisateur : non seulement le contour et les composants, mais aussi les proportions clés, l'ordre d'agencement et les relations de connexion. Le texte ou les rectangles arrondis génériques ne peuvent pas remplacer ces caractéristiques. Choisissez un objet entier ou une découpe partielle selon l'usage ; simplifiez de préférence par cadrage et omission ; lorsque vous exagérez, conservez les relations structurelles qui rendent l'objet crédible, sans transformer un nom de fonction en un processus par défaut.

Choisissez les références pertinentes en fonction de l'objet actuel et du problème de forme à résoudre, ouvrez effectivement l'image ; si vous devez comprendre la mise en œuvre, lisez le SVG correspondant et regardez le rendu. Ne parcourez pas systématiquement la bibliothèque de matériaux. L'analyse doit déterminer « quelle relation spécifique rend la référence valable, et comment l'utiliser dans ce cas », par exemple contraste d'échelle, support ou masquage, sans se limiter à énumérer des effets comme les coins arrondis ou les ombres douces. La base stylistique n'équivaut pas à copier la disposition scénique ; sans code source, le mode de mise en œuvre est une hypothèse à vérifier.

Décidez ainsi ce qui est conservé, supprimé, ou peut être exagéré, puis organisez le sujet principal, les éléments auxiliaires et les espaces blancs avec les grandes formes. Vérifiez d'abord si l'objet est crédible et si la hiérarchie est établie, puis ajoutez des détails et des matériaux ; si seules des légendes ou des ombres peuvent sauver l'ensemble, revenez à la forme. Le jugement est effectué par l'IA, sans ajouter d'étape de confirmation utilisateur. Pour la conversion en chemins, coordonnées et filtres, voir Convertir la référence en dessin.

Les variantes doivent modifier la relation sujet principal, le point de vue ou la composition ; un simple changement de lignes, textures ou couleurs correspond à un changement de matériau dans la même composition, et ne peut pas être appelé une nouvelle scène. Ne transformez pas la combinaison d'objets du sujet actuel en un modèle fixe pour les travaux futurs.

Les objets dans un même espace partagent des ombres, des épaisseurs et des sources lumineuses ; les icônes et le texte dans un plan sont d'abord positionnés dans les coordonnées locales, puis mappés globalement sur la surface ; dessinez d'abord les entités arrière, puis les entités avant. Les contours adjacents doivent être clairement séparés ou clairement masqués, en évitant les tangences, les interstices étroits ou les icônes à moitié coupées. La géométrie unifiée est gérée par les outils de construction, la pertinence du sujet principal reste jugée par l'analyse des références et le rendu à la taille réelle.

Vérification et révision locale

Étapes de contrôle interne : rendu → visualisation réelle → identification des problèmes → re-vérification. Après avoir terminé le dessin ou la modification, utilisez scripts/render.mjs pour exporter des PNG à 1× et 3× à partir du SVG ou de la page de présentation, ouvrez effectivement les deux images, et vérifiez point par point selon la « Validation visuelle avant livraison » ci-dessous en notant les problèmes spécifiques. La vérification à 1× porte sur l'identification du sujet, la composition, les proportions et les espaces blancs ; à 3× sur les coins arrondis, les masquages, les joints, les découpes et les ombres. Le facteur de zoom d'exportation ne remplace pas la taille d'affichage cible ; si la taille cible diffère de la taille intrinsèque du SVG, spécifiez-la via --width, --height.

Effectuez au moins une première vérification et une re-vérification après correction ; si la première vérification ne révèle aucun problème, effectuez un second contrôle indépendant sans chercher à modifier inutilement. Après chaque correction, refaites un rendu, ouvrez l'image et confirmez que les problèmes spécifiques sont résolus. Si des problèmes demeurent insolubles ou que l'environnement ne permet pas le rendu, indiquez-le clairement sans déclarer la validation visuelle réussie. Ce processus est un contrôle qualité interne de l'IA, sans ajouter d'étape de validation d'échantillon ou de retouche d'approbation utilisateur.

Lorsque des variables CSS de rôle sont impliquées, transmettez le mappage JSON généré par le projet via --vars ; les variables manquantes sans repli valide doivent être résolues, n'ajoutez pas de couleurs vous-même. Le mappage du projet et l'image exportée sont sauvegardés dans le répertoire de la tâche, sans écrire les valeurs de couleur du projet dans le skill. Les commandes, dépendances et plages de capture d'écran sont décrites dans Rendu et visualisation.

Comparez l'image finale avec la référence sélectionnée côte à côte : contours, proportions, coins arrondis, surfaces colorées, ombres et densité de détails, pour juger de la cohérence visuelle.

Après le rendu, identifiez des problèmes visuels spécifiques, puis modifiez en conséquence ; vérifiez la reconnaissance de l'objet, les proportions, les chevauchements, l'alignement et les limites, sans vous satisfaire d'un fichier valide ou d'une exportation réussie en lieu et place d'un jugement visuel.

Avant de modifier, localisez l'objet et la portée visés par l'utilisateur, en utilisant la structure vectorielle existante pour des ajustements locaux. Après modification, comparez les images avant/après pour confirmer que la forme et la composition déjà approuvées sont conservées.

Validation visuelle avant livraison

Après le rendu, vérifiez selon les points suivants ; corrigez d'abord les problèmes, puis livrez. La validité du fichier ou la réussite de l'exportation ne constituent pas une validation visuelle.

• Les proportions clés, l'agencement et les connexions correspondent à l'expérience réelle de l'objet ; après omission ou exagération, la structure d'identification est conservée, et le thème n'est pas deviné uniquement grâce au titre ou à quelques symboles.
• Les tailles et les chevauchements du fond, du plan intermédiaire et du plan avant ont une hiérarchie ; si le fond est omis, le sujet principal a un contour complet.
• La hauteur du conteneur est adaptée au contenu ; le plan avant n'accapare pas le centre de gravité par une surface vide excessive.
• Les sous-modules composites n'ont pas de micro-contrôles récursifs ; à la taille d'affichage cible, les blocs de couleur indépendants respectent 16px, les traits nécessaires et les micro-points sont distingués comme exceptions.
• Les formes adjacentes sont clairement séparées ou masquées, sans tangence, interstice étroit, mauvaise imbrication ; le texte et les icônes ne sont pas accidentellement masqués par le plan avant.
• Les ombres différencient les niveaux sans être sales ou noires, les surfaces colorées sont cohérentes avec la référence ; toutes les couleurs sont traçables jusqu'à une configuration de rôle ou un jeton de projet.
• En comparaison côte à côte avec la référence sélectionnée, vérifiez si les relations d'échelle, de contour, d'espace ou de texture empruntées sont effectives dans l'image finale, et non pas seulement si des effets similaires sont utilisés ; examinez à la fois la taille d'origine et la taille d'affichage réelle, expliquez les corrections spécifiques, sans inventer de note ou d'approbation utilisateur.

Processus de collecte des exemples

Après avoir terminé et vérifié, demandez une fois activement ; la collecte n'a lieu qu'après l'accord explicite de l'utilisateur.

1. Règle de demande :
   • Une fois l'illustration terminée et le contrôle interne effectué, l'IA demande activement une fois : « Satisfait de cette illustration ? Souhaitez-vous l'ajouter à la bibliothèque d'exemples pour référence future ? »
   • Si l'utilisateur demande encore des modifications, modifiez d'abord l'image, sans répéter la demande.
   • Si l'utilisateur refuse, ne répond pas, ou dit simplement « satisfait » sans accord explicite pour la collecte, celle-ci n'est pas effectuée.
   • N'automatisez pas la collecte de chaque résultat produit.
2. Exécution de la collecte :
   • Vérifiez les fichiers : le code source .svg éditable et l'image .png rendue doivent tous deux être présents ; vérifiez les doublons de nom, n'écrasez pas les fichiers existants.
   • Exécutez le script de collecte : scripts/collect-example.mjs ;
   • Mettez à jour automatiquement references/example-guide.md en enregistrant le nom du thème, les caractéristiques constructives et les scénarios d'utilisation.

Méthodes de dessin SVG combinables

Outils de construction SVG explique l'utilisation locale de scripts/build-kit.mjs : contours, caméra unifiée, extrusion de solides, mappage de surface, boîte englobante et exportation des rôles de couleur. Utilisez selon les besoins de l'image, sans exiger une tridimensionnalité pour chaque illustration.

Index des outils

Ce que vous voulez réaliser	Outils et exemples
Contours droits, arcs, courbes organiques	Chemins et courbes
Fusion, perçage, découpe locale, transition transparente	Combinaisons de formes et masques
Déplacement, rotation, mise à l'échelle, cisaillement, projection plane	Coordonnées et transformations
Aplat de couleur, dégradé, ombre, texture répétée	Remplissage et matériaux
Largeur de texte, taille d'étiquette, boîte de ligne et limites	Outils de texte et de mise en page
Aperçu navigateur, re-rendu local, comparaison d'images	Rendu et visualisation
Collecte sécurisée des exemples et mise à jour de l'index	Guide de collecte des exemples

Exemples modifiables et matériaux

Lors de l'observation des références, ouvrez effectivement l'image SVG correspondante, mettez en correspondance les effets locaux avec les modes de mise en œuvre, puis réfléchissez à comment les utiliser pour le thème actuel. Des angles d'observation spécifiques et des exemples sont donnés dans Convertir la référence en dessin.

• Construction et exemples de code : échelles d'objets, éclairage, rôles de couleurs et limites d'utilisation des cas historiques.
• Modèles de thèmes : cinq images Typography, ainsi que les SVG et PNG de l'image de recherche/filtre.
• Bibliothèque d'exemples originaux : Signets, calendrier, téléchargement, contenu mobile en SVG et PNG.
• Matériaux de style : Références visuelles disponibles.
• Images de référence et enregistrements d'analyse : Analyse des références utilisateur et index des caractéristiques.

Les paramètres des exemples sont les mises en œuvre d'œuvres spécifiques, modifiables. Ce qu'il faut dessiner, quelles techniques combiner, comment communiquer et livrer, est déterminé par la tâche actuelle.