Que fait Iconsaz : packs d'icônes sur mesure ?
Créez un nouveau pack d'icônes original qui semble appartenir à la marque de l'utilisateur : même sensation de trait que sa typographie, même langage de coins que son interface, même ambiance que son marketing. Le niveau de qualité est celui des meilleurs packs publics (Lucide, Phosphor, Tabler, Heroicons, Material Symbols, Untitled UI) : une grille, une règle de trait, une taille optique, des noms prévisibles. Le résultat est le propre pack de l'utilisateur, pas une copie d'aucun d'entre eux.
Fichiers de cette compétence
| Fichier | À lire quand |
|---|---|
references/question-flow.md | Étape 1 : formulation exacte, options, valeurs par défaut et regroupement des 14 questions |
references/style-rules.md | Étapes 2 à 7 : règles de référence, mapping marque-à-style, règles de construction, catalogue de démarrage, banque de métaphores |
references/rtl-and-culture.md | Étape 8, et à chaque fois que le produit est en RTL ou livré dans plusieurs régions |
templates/style-brief.md | Étape 3 : copier et remplir ; c'est aussi le fichier que l'utilisateur conserve |
scripts/validate_icons.py | Étapes 6, 7 et 9 : vérifie la grille, le padding, le trait, viewBox, currentColor, les couches cachées, le nommage, l'exhaustivité, les paires RTL |
scripts/preview_sheet.py | Étapes 6 et 9 : génère preview.html (tailles, zoom sur grille, clair/sombre, couleur, bascule RTL) |
scripts/package_pack.py | Étape 10 : valide puis compresse SVGs + copies plates prêtes pour Figma + aperçu + brief + guide d'import |
Les scripts sont en Python 3.8+ pur, sans dépendances. Exécutez-les avec python scripts/<nom>.py --help.
Deux modes
- Nouveau pack : exécutez tout le flux ci-dessous.
- Étendre un pack : l'utilisateur partage un brief stylistique créé précédemment par cette compétence (il contient un bloc JSON
icon-spec). Sautez l'entretien et l'analyse de marque. Lisez le brief, demandez seulement quelles icônes ajouter (et proposez des métaphores pour les abstraites), dessinez-les selon les chiffres exacts du brief, validez-les, ajoutez-les à la liste d'icônes, incrémentez la version mineure et ajoutez une ligne de changelog. Ne modifiez jamais la grille, le trait, le padding ou le rayon dans ce mode : faire correspondre exactement les anciennes icônes est le but principal. Si l'utilisateur souhaite un changement de style, il s'agit d'une nouvelle version majeure où chaque icône doit être redessinée.
Flux de travail
Gardez l'utilisateur impliqué à trois étapes : l'analyse de marque (étape 2), le brief (étape 3) et les icônes de test (étape 6). Dessiner 60 icônes sur une hypothèse erronée leur fait perdre beaucoup plus de temps qu'une confirmation supplémentaire.
1. Entretien
Posez les 14 questions du fichier references/question-flow.md, dans l'ordre, trois ou quatre à la fois. Utilisez un outil de questions structuré (tel que AskUserQuestion) pour les questions à choix multiples lorsqu'il est disponible, et une simple discussion pour les téléchargements et les réponses tapées.
- Si l'utilisateur saute une question, choisissez la valeur par défaut du fichier de référence, dites ce que vous avez choisi et pourquoi en une ligne, et passez à la suite. Ne reposez pas la question.
- Ne demandez pas les icônes existantes de l'utilisateur, et s'il vous les propose, remerciez-le et mettez-les de côté. Il s'agit d'un nouvel ensemble ; les anciennes icônes tirent le style vers ce que l'équipe essaie de quitter. Les règles de leur système de design (grille, trait, rayon) sont les bienvenues, c'est ce que demande la question 9.
- Les captures d'écran téléchargées contiendront les icônes actuelles. Utilisez-les uniquement pour savoir où des icônes sont nécessaires (étape 4), jamais comment elles devraient être.
2. Analyse de l'ADN de la marque
Étudiez tout ce qui a été téléchargé : logo, guide de marque, couleurs, police d'écriture, tableaux d'ambiance, marketing et captures d'écran. Déduisez le style à partir des preuves en utilisant les tables de correspondance dans references/style-rules.md ("De la marque au style d'icône"). Examinez :
- Police : épaisseur des hampes aux tailles d'interface, terminaisons (rondes, plates, anguleuses), rondeur des panses, hauteur d'x, géométrique vs humaniste. Cela définit le poids du trait et les extrémités/joins.
- Logo : poids du trait par rapport à sa taille, formes des coins, angles (45° vs libres), tout motif signature (une encoche, une boucle, un coin coupé) qui pourrait devenir un trait subtil à l'échelle du pack.
- Captures d'écran de l'interface : rayon des coins des composants, largeur des bordures, densité, espacement. Cela définit le rayon des coins des icônes et la série de tailles.
- Couleur et imagerie : ils n'informent que l'ambiance. Les icônes sont livrées en
currentColor.
Présentez les résultats sous forme de tableau et demandez à l'utilisateur de les confirmer ou de les corriger :
| Signal | Preuve | Décision | Confiance |
|---|---|---|---|
| Trait | La police de corps est Nunito Regular, hampes ≈ 1,6 px à 16 px de texte | 2 px à 24, 1,75 à 20 | Élevée |
Dites clairement quand les preuves sont minces ("aucune police fournie, donc le trait est déduit du logo uniquement, confiance moyenne").
3. Brief stylistique
Copiez templates/style-brief.md, remplissez chaque section et montrez-le à l'utilisateur. Il couvre la grille et le padding, le trait par taille, les extrémités et les joins, le rayon des coins, les styles et états, les tailles, l'ambiance, le nommage, les décisions RTL et la liste complète des icônes regroupées par catégorie. Le bloc JSON icon-spec en bas est ce que les scripts lisent, alors gardez-le synchronisé avec le texte. Obtenez une approbation explicite avant de dessiner quoi que ce soit.
4. Recherche d'icônes manquantes
Parcourez chaque capture d'écran région par région (navigation, en-têtes, barres d'outils, boutons, lignes de liste, champs de formulaire, états vides, toasts et statuts, lignes de paramètres, cartes) et listez chaque endroit qui a besoin d'une icône. Présentez un tableau — écran, emplacement, icône nécessaire, déjà dans la liste ? — et ajoutez les icônes manquantes à la liste du brief après l'accord de l'utilisateur. S'il n'y a pas de captures d'écran, utilisez le catalogue de démarrage dans references/style-rules.md ainsi que le contexte du produit.
5. Options de métaphore
Pour chaque concept abstrait (remboursement, consultation, synchronisation, intégration, abonnement, fidélité, conformité, etc.), proposez deux ou trois idées visuelles avec une justification d'une ligne chacune, et signalez tout risque culturel en utilisant references/rtl-and-culture.md. La "Banque de métaphores" dans references/style-rules.md fournit des points de départ. Laissez l'utilisateur choisir, puis enregistrez le choix dans le brief, car le prochain designer doit savoir pourquoi remboursement est une pièce avec une flèche de retour.
6. Icônes de test
Dessinez d'abord trois ou quatre échantillons : accueil, recherche, paramètres, et l'icône la plus caractéristique du produit. Réalisez chaque icône dans tous les styles approuvés, à toutes les tailles. Ensuite, exécutez :
python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html
Corrigez chaque erreur, examinez vous-même l'aperçu (ouvrez-le dans un navigateur si vous en avez un et vérifiez les tailles 1×, pas seulement le zoom), puis montrez-le à l'utilisateur. Demandez ce qui semble décalé. Les ajustements typiques à ce stade : trait un peu plus lourd ou plus léger, coins plus doux, plus ou moins de détails. Mettez à jour le brief en cas de changement. Ne commencez pas l'ensemble complet tant que l'utilisateur n'a pas approuvé les échantillons.
7. Ensemble complet
Dessinez chaque icône du brief en suivant "Comment dessiner" ci-dessous. Travaillez catégorie par catégorie et exécutez le validateur après chacune, afin de ne pas découvrir une erreur systématique 80 icônes plus tard.
8. RTL et culture
Si la direction du texte est RTL ou les deux, créez une version miroir -rtl de chaque icône directionnelle (flèches, retour et avant, envoyer, répondre, annuler et rétablir, déconnexion, retrait de liste, etc.). Laissez les icônes non directionnelles inchangées ; mettre en miroir une horloge ou un bouton de lecture est une erreur. Vérifiez chaque icône par rapport à la liste des risques culturels. Les deux listes se trouvent dans references/rtl-and-culture.md. Marquez les icônes directionnelles dans la liste directional de la spécification pour que le validateur vérifie les paires.
9. Vérification finale
Exécutez le validateur sans --samples. Il doit rapporter zéro erreur. Ensuite, vérifiez visuellement, car un script ne peut pas juger de la reconnaissabilité :
- Chaque icône du brief existe dans chaque style et taille (validateur : exhaustivité).
- Chaque icône suit le brief : grille, padding, trait, extrémités, joins, rayon (validateur).
- La taille optique est uniforme dans l'ensemble ; rien ne semble plus grand ou plus petit que ses voisins dans la grille d'aperçu (validateur avertit des valeurs aberrantes).
- Chaque icône reste claire à la plus petite taille : visualisez la ligne 1× de l'aperçu. Si deux détails fusionnent, supprimez-en un à cette taille plutôt que d'affiner le trait.
- Les noms suivent
catégorie/nom/variante/taille, en kebab-case minuscule, et signifient la même chose partout (validateur : nommage). - Les paires RTL existent et se reflètent vraiment l'une l'autre (validateur : RTL).
- Aucun symbole culturellement risqué ne s'est glissé.
Corrigez tout ce qui échoue et relancez les vérifications avant de livrer.
10. Livraison
Figma Professional (ou supérieur) : construisez la bibliothèque avec le MCP Figma. Si ses outils sont manquants ou non authentifiés, dites à l'utilisateur qu'il doit être connecté et proposez l'archive zip à la place. Si une compétence Figma telle que figma-use est disponible, chargez-la avant le premier appel d'écriture.
- Créez un nouveau fichier avec trois pages : Couverture, Icônes et Utilisation.
- Sur Icônes, faites une section par catégorie. Pour chaque icône, transformez chaque SVG en nœud (
figma.createNodeFromSvg), convertissez chacun en composant, nommez les composants avec des propriétés de variante (style=outline, state=default, size=24), et combinez-les avecfigma.combineAsVariantsen un ensemble de composants nommécatégorie/nom. Conservez les traits en tant que traits ; ne les vectorisez pas. - Construisez une catégorie par appel d'écriture. Les lots volumineux expirent, et un échec coûte une catégorie, pas tout le pack. Prenez une capture d'écran après chaque catégorie et comparez-la avec l'aperçu.
- Couverture : nom du pack, version, mots d'ambiance et une grille d'icônes héros. Utilisation : tailles et quand utiliser chacune, espacement à côté du texte, règle actif/inactif, règle RTL, nommage, exemples à faire/ne pas faire, et "pour ajouter des icônes, partagez le brief stylistique avec la compétence".
- Remettez également l'archive zip du chemin suivant, car les développeurs ont besoin des SVGs de toute façon.
Figma Gratuit (ou pas de Figma) : le MCP Figma ne peut pas écrire de fichiers de bibliothèque sur les forfaits gratuits, livrez donc des fichiers à la place :
python scripts/package_pack.py icons/ --brief style-brief.md --out dist/
Il refuse de conditionner en cas d'erreurs, et aussi en cas d'avertissements jusqu'à ce que vous les ayez examinés ; ajoutez --allow-warnings seulement une fois que chaque avertissement restant est intentionnel. Il écrit ensuite dist/<pack>-v<version>.zip contenant svg/ (l'arborescence catégorie/nom/variante/taille.svg), figma/ (copies plates catégorie__nom__variante__taille.svg qui deviennent des noms avec barre oblique dans Figma après un renommage par lot), preview.html, manifest.json, le brief stylistique, et IMPORT-TO-FIGMA.md avec des instructions pas à pas pour importer les icônes et les transformer en composants avec variantes. Résumez ces étapes également dans le chat.
11. Sauvegarder le brief
Sauvegardez le brief stylistique final à côté du livrable (nommé <pack>-style-brief.md) et dites à l'utilisateur, avec ces mots ou des mots proches : "Conservez ce fichier. La prochaine fois que vous aurez besoin d'icônes, partagez-le d'abord avec moi et les nouvelles correspondront exactement à ce pack."
Comment dessiner
Écrivez les SVGs à la main sur la grille convenue, comme vous construiriez des vecteurs dans un outil de design. Chaque taille est dessinée sur son propre canevas natif (viewBox="0 0 20 20" pour 20 px, etc.), de sorte que les petites tailles peuvent avoir leur propre trait et des détails simplifiés, comme les tailles optiques de Material et les ensembles 20 et 16 px de Heroicons.
- Racine :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">. Définissez la peinture sur la racine et laissez les formes hériter, ce qui rend chaque icône identique. - Utilisez des primitives (
circle,rectavecrx,line,pathavec arcs) sur la grille. Gardez les coordonnées sur des unités entières ou demi-entières (quarts d'unité au maximum). Les points hors grille deviennent flous en 1×. - La couleur est uniquement
currentColor. Les formes remplies utilisentfill="currentColor". Le second ton du bicolore estcurrentColoravec l'opacité du brief, jamais une seconde couleur. - Pas de transformations, d'éléments cachés, de
<text>, d'images intégrées, de<style>, d'ID ou de métadonnées d'éditeur. Aplatissez tout en géométrie simple. - Ajustez la forme à son repère (cercle, carré, rectangle portrait ou paysage ; voir style-rules), afin qu'une icône ronde et une icône carrée paraissent de la même taille.
- Les espaces intérieurs ont au moins la largeur d'un trait, plus larges en 16 px.
- Les variantes remplies suivent la même silhouette que le contour, avec les détails découpés sous forme d'espaces. Elles doivent se lire comme la même icône, "allumée".
- Pour créer une taille plus petite, partez de la géométrie 24 px mise à l'échelle sur le nouveau canevas, accrochez les points à la grille, définissez le trait de cette taille à partir du brief, puis supprimez les détails qui ne tiennent plus. Ne vous contentez jamais de redimensionner le fichier.
- Faites correspondre la police de la marque : les extrémités et les joins reflètent ses terminaisons, les courbes reflètent ses panses, et une signature à l'échelle du pack (une encoche, un coin coupé) peut faire écho au logo si le brief le demande.
Un icône de contour minimal :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7"/>
<path d="M15.5 15.5 21 21"/>
</svg>
Structure des fichiers
icônes/<catégorie>/<nom>/<variante>/<taille>.svg ex. icônes/nav/accueil/contour/24.svg
icônes/nav/fleche-retour-rtl/contour/24.svg jumeau RTL miroir
style-brief.md modèle rempli avec le bloc icon-spec
preview.html généré
dist/<pack>-v<version>.zip généré
Le nom d'icône canonique est le chemin sans .svg, donc nav/accueil/contour/24. C'est aussi le nom du composant Figma, ce qui maintient le code, le design et les fichiers en phase.
Parler à l'utilisateur
Beaucoup de personnes utilisant ceci sont des designers, pas des développeurs. Dites "épaisseur de ligne" à côté de "trait", "rondeur de coin" à côté de "rayon", et expliquez toute sortie de script en une phrase au lieu de la coller brute. Gardez chaque échange court : quelques questions, une décision, ou une chose à examiner.