ashuwhy/brand-identity

Identité de marque

Le processus ci-dessous est la partie durable. Les modèles d'image, les spécifications d'icônes et les tailles de store changent ; vérifiez toujours la spécification actuelle de la plateforme avant de générer quoi que ce soit, et les mentions (vérifié 2026-10) indiquent les tailles les plus susceptibles d'évoluer.

Les scripts se trouvent dans ~/claude-skills/tools/brand/. make_versus.py (la fiche de l'étape 3) et make_fonts.py (étape 5) fonctionnent sur n'importe quelle application tels quels. Le reste (prompts, dessin des candidats, le rendu d'assets, les cadres store, les affiches) a été écrit pour une application spécifique et utilise son symbole, donc lisez-les pour comprendre la méthode et adaptez-les. Ils nécessitent rsvg-convert, Pillow, fontTools et Chrome headless.

1. Brief

Un brief unique partagé en amont de chaque concept (tools/brand/logo-prompts.md en est un exemple) :

• où il sera utilisé (icône de lanceur, fiche store), donc il doit être lisible à 48px et survivre en silhouette monochrome
• vecteur plat, formes solides, pas de dégradés, ombres, 3D, texture ou texte
• la palette exacte en hexadécimal, et « rien d'autre »
• un symbole centré sur un carré aux coins arrondis
• plusieurs variations dans une grille par exécution, de sorte qu'une exécution explore un concept au lieu de miser sur un seul rendu
• une liste d'interdits des clichés de la catégorie

Terminé quand : le brief tient en un paragraphe et chaque concept tient en une ligne supplémentaire.

2. Itérations

• Itération 1 : six ou sept concepts plus un brief ouvert. Choisissez-en un.
• Itération 2 : gardez le gagnant et variez un axe par prompt (géométrique vs arrondi, ce que signifie l'accent, le contre, le test de stress en petit monochrome). Décrivez l'anatomie des lettres en mots ; les modèles confondent des glyphes similaires d'écritures différentes.
• Montrez à des personnes extérieures au projet avant d'aller plus loin. La façon dont un symbole, une police ou une couleur est perçue par le public peut ruiner un symbole qu'aucun prompt n'aurait détecté. Un commentaire extérieur vaut une itération.
• Itération 3 : test – un enfant pourrait-il le dessiner de mémoire après un seul coup d'œil ? Créditez tout croquis à son auteur.

3. Fiche comparative

Redessinez les deux ou trois finalistes en code (chaînes SVG), puis confrontez-les à ce qu'une icône de lanceur rencontre réellement (make_versus.py fait tout à partir des SVG) :

• les masques cercle et squircl
• une vue floutée « en un coup d'œil »
• les icônes à thème (monochrome) en tons clair et foncé du système
• 48, 32, 24 et 16 px, agrandis
• la couverture d'encre, et un verdict en une ligne par candidat

Faites confiance à la fiche plutôt qu'à une préférence. Un symbole qui a besoin d'explications perd face à un symbole qui se lit de lui-même.

Terminé quand : un candidat gagne sur la fiche et je peux dire en une phrase pourquoi.

4. Un seul dessin, tous les assets

Le gagnant devient une fonction paramétrée (couleurs, détails activés ou non en dessous d'une certaine taille). Un seul script génère tous les assets à partir de celle-ci ; icon-assets.md contient la matrice et la règle derrière chaque taille. Dans l'application, dessinez le symbole avec un composant utilisant les mêmes nombres plutôt que d'exporter des PNG, afin qu'il soit net à toutes les tailles et puisse changer de couleur en mode sombre.

Ensuite, un kit logo (versions verrouillées et symbole seul, clair et foncé, SVG et PNG) dans la documentation du dépôt, pour que personne ne fasse une capture d'écran de l'application pour obtenir le logo.

5. Typographie

Auto-hébergez les polices, réduisez-les au woff2 avec fontTools (les scripts dont le produit a besoin, plus sa devise et ses symboles), en conservant les axes variables. Une construction qui télécharge des polices a une dépendance réseau qui peut faire échouer un déploiement. (vérifié 2026-10 : next/font/google a échoué une construction Vercel de cette manière.)

6. Visuels store et affiches

• Générez les cadres store en HTML via Chrome headless aux tailles actuelles du store (vérifié 2026-10 : captures d'écran téléphone 1080x1920, graphique de fonctionnalité 1024x500, icône de fiche 512px RVB sans alpha). Utilisez de vraies captures d'un vrai téléphone à l'intérieur d'un cadre dessiné. Chrome peut sortir avec un code non nul après écriture, donc traitez le fichier de sortie comme le signal de succès.
• Aucun nom ou donnée réelle d'utilisateur sur aucun écran, et chaque affirmation dans le texte est vraie pour la version examinée.
• Téléchargez avec play.py icon et play.py art (voir expo-release). L'icône de fiche est son propre asset ; aucune construction ne la modifie.
• Affiches et vignettes : concevez pour chaque recadrage que l'application effectue, et téléchargez chaque rendu vers un nouveau chemin (voir mobile-performance, Images).