66666-design/ai-design-director

Directeur Artistique IA (ai-design-director)

Idée originale : Anshu Chimala « How to turn your AI into a world-class designer » (Lenny's Newsletter, 2026-09-01). Ce fichier est une réécriture et extension indépendante, ne contient pas le texte original.

Pourquoi les sorties par défaut sentent l'IA

Le modèle choisit à chaque étape le mot suivant « le plus susceptible de plaire à tout le monde ». Les décisions de design (couleurs, disposition, polices) sont donc lissées : dégradé violet, texte à gauche/image à droite, barre de navigation en haut, gros bouton centré. Dire « sois unique » ou « un peu aléatoire » ne sert à rien – le modèle écrira simplement « quelque chose qui sonne aléatoire » mais identique à chaque fois. Les variations doivent être injectées de l'extérieur du modèle, et le goût doit être supervisé par un humain ou un évaluateur indépendant.

Processus global

1. Découverte : Diverge d'abord pour trouver des directions que personne d'autre ne prendra.
2. Définition : Approfondis la direction pour former une identité de design propre.
3. Livraison : Peaufine, simplifie, enlève les traces d'IA.

Chaque étape doit produire quelque chose de visuel (capture d'écran) – pas d'auto-évaluation textuelle.

---

I. Découverte

Technique 1 : Graine aléatoire de pensée (String Seed of Thought)

Le modèle ne sait pas vraiment faire du hasard. Utilisez plutôt le shell pour générer un nombre aléatoire et demandez-lui d'y « lire » une direction créative.

python3 scripts/seed.py         # ou : head -c 48 /dev/urandom | base64 | tr -dc 'A-Za-z0-9'

Instructions pour l'implémenteur :

• Exécutez d'abord le script pour obtenir une longue chaîne aléatoire.
• Trouvez-y l'inspiration pour définir une direction : palette de couleurs, mise en page, police, rythme, métaphore. Observez les motifs, chiffres spéciaux, formes de lettres – tout ce qui peut stimuler.
• Utilisez votre jugement pour rendre cette direction belle.
• La graine n'est qu'une inspiration ; elle ne doit pas apparaître dans le produit final.

Pour plusieurs propositions, utilisez une nouvelle graine pour chacune, générez en parallèle, puis choisissez.

Technique 2 : Brief créatif audacieux et spécifique

Remplacez « fais une landing page » par des exigences visuelles, par exemple :

• « Chaque section ressemble à une image de jeu pixel art, tout en restant une landing page fonctionnelle. »
• « Entièrement située dans une petite ville 3D isométrique vivante, où chaque fonction est un quartier. »
• « Asymétrie agressive, couleurs et polices discordantes, blancs inquiétants – brise toutes les règles tout en restant beau. »

Méthode en trois étapes pour trouver des idées :

1. Demandez au modèle de lister « large mais pas profond » une multitude de directions de langage de design, une phrase chacune.
2. Choisissez-en quelques-unes, écrivez votre réaction honnête (ce que vous aimez, détestez, ce qui est bateau), et laissez le modèle resserrer selon votre goût.
3. Satisfait, faites-lui écrire une invite concise pour que l'agent d'implémentation fasse une première version prototype.

Principe : Nourrir l'IA directement avec des idées d'IA ne donne que ce que tout le monde a ; les choix humains sont la source de l'unicité. Les idées qui semblent « impossibles » valent la peine d'être essayées ; gardez les invites ratées pour les tester avec de nouveaux modèles.

---

II. Définition

Technique 3 : Sous-agent d'évaluation indépendant (boucle de rétroaction positive)

L'implémenteur n'est pas objectif – il voit son propre code et ses justifications. Ouvrez un agent « évaluateur de design » séparé :

Chaque tour :

1. Prenez une capture d'écran du design actuel (largeur desktop + mobile).
2. Appelez l'évaluateur dans un tout nouveau contexte, en ne lui donnant que la capture d'écran ; pas de code, pas de détails d'implémentation, pas de versions précédentes, pas de commentaires antérieurs.
3. L'évaluateur décrit d'abord l'esthétique que ce design veut atteindre, puis imagine ce que ferait un top studio de design, puis liste les plus grands écarts.
4. Enfin, donnez une note de 0 à 10 : à quel point sommes-nous proches du niveau de ce studio ?

L'invite de l'évaluateur doit préciser :

• Regardez à la fois la structure globale et la composition, ainsi que les détails.
• Pénalisez les usages excessifs, tape-à-l'œil, les motifs génériques « IA ».
• Les retours doivent être concrets, brefs, pas de bla-bla.
• Soyez audacieux et affirmé, ne choisissez pas une réponse sûre ou facile.

Règles :

• La condition d'arrêt n'est donnée qu'à l'implémenteur (ex. « On considère le design comme final quand l'évaluateur atteint 9/10 ou plus »), pas dans l'invite de l'évaluateur, pour garder son objectivité. Utilisez la même invite à chaque tour.
• Faites d'abord 1–2 tours pour voir si le design converge, puis décidez d'ajouter des tours, pour éviter de brûler des tokens inutilement.
• Pour l'évaluateur, utilisez de préférence un modèle plus grand et plus raffiné ; l'implémenteur peut utiliser un modèle moins cher et plus rapide, mais pas trop petit pour exécuter la direction. L'évaluateur ne fait que des décisions, donc sa consommation est faible.
• Les critères de l'évaluateur doivent être aussi objectifs que possible. Idéal : « Voici 5 images : 4 œuvres professionnelles + 1 nôtre. Classez-les par niveau de finesse et de goût. » Vous pouvez joindre des images de référence comme moodboard, en précisant « sert de base de comparaison, ne pas copier ».

Technique 4 : Enrichir l'image avec la génération d'images

Les agents codeurs adorent utiliser des dégradés, des formes géométriques, des motifs simples à la place des images – c'est justement une trace d'IA. Demandez activement :

• Utilisez la génération d'images pour les visuels principaux, textures, illustrations, photos de produits ; vous pouvez combiner avec des shaders ou des effets 3D.
• Vérifiez le rendu image par image dans le navigateur.
• La clé API n'est utilisée qu'en développement local, avec un quota séparé, placée dans un fichier ignoré par git (ex. .env.agents), et mentionnée dans AGENTS.md comme « utilisation développement, ne pas publier avec le produit ». Ne l'écrivez jamais dans le code ou le produit final.

Technique 5 : Utiliser la génération vidéo pour des animations avancées

• Éléments animés : Générez des boucles sur fond uni, puis supprimez le fond (par incrustation chroma ou modèle de matting vidéo) pour superposer n'importe où dans l'interface – sans que cela ressemble à une vidéo. Pour des effets comme la réfraction du verre, rendez d'abord sur la couleur de fond de la page (en cuisant la réfraction) avant de faire le matting.
• Transitions d'état : Interpolez entre deux images clés (début et fin) pour générer un segment de transition ; l'image finale d'un segment sert d'image de début pour le suivant, garantissant une transition fluide ; l'utilisateur fait défiler ou interagit et la lecture se fait image par image.
• Les modèles vidéo évoluent vite ; utilisez une plateforme agrégatrice avec une seule clé pour que l'agent choisisse le modèle le plus adapté.

---

III. Livraison

Technique 6 : Faire le ménage

L'IA ne fait qu'ajouter, rarement supprimer. La retenue en elle-même semble haut de gamme. Demandez systématiquement : « Est-ce vraiment nécessaire à l'écran ? » Les éléments courants à supprimer :

• Lueurs d'arrière-plan, barres de progression lumineuses, dégradés inutiles.
• Accents de couleur et surlignages de texte arbitraires.
• Étiquettes, conteneurs et espaces blancs redondants quand l'image suffit.
• Boutons et champs de formulaire faits maison, plus moches que les composants natifs – privilégiez les composants natifs.
• Texte explicatif excessif.

Supprimer du code est « risqué » pour le modèle – vous devez clairement l'y pousser.

Technique 7 : Éliminer les traces d'IA (cette section est une liste maison de ce dépôt)

Avant de livrer, vérifiez point par point et corrigez si applicable :

• Dégradés violet/bleu-violet, cartes en verre empilées, coins arrondis partout avec grandes ombres.
• Zone héroïque standard texte à gauche/image à droite + barre en haut + bouton principal centré.
• Trois colonnes égales de « cartes de fonctionnalité » avec icônes linéaires.
• Emoji utilisés comme icônes ; formes blob décoratives et grilles de fond inutiles.
• Formules de titres passe-partout (« Libérez votre… », « Conçu pour… ») et mots marketing vides.
• Rythme identique à chaque bloc : petite étiquette, grand titre, sous-titre, bouton.
• Police uniquement sans-serif système ; trop ou trop peu de niveaux de taille.
• Contenu inventé (statistiques, témoignages, logos) – tout supprimer ou remplacer par des données réelles.
• Problèmes d'accessibilité : contraste insuffisant, focus manquant, débordement mobile – c'est aussi « non professionnel ».

---

Liste d'exécution pour l'agent

1. Identifiez l'usage, le public, les marques ou contraintes à respecter (sinon n'en ajoutez pas).
2. Phase de conception : une graine aléatoire + un brief créatif spécifique par solution ; produisez 2 à 4 solutions en parallèle, capture d'écran pour choix humain.
3. Une fois choisie, entrez dans la boucle d'évaluation : capture → évaluation dans nouveau contexte → modification → nouvelle capture ; faites 1–2 tours, vérifiez la convergence.
4. Si nécessaire, ajoutez des assets image/vidéo, vérifiez image par image.
5. Faites le ménage + passez la liste des traces d'IA + vérifiez l'accessibilité (contraste du corps de texte ≥4.5:1).
6. Livraison : capture d'écran finale, historique des notes d'évaluation, graines et briefs utilisés (pour reproductibilité).

Sécurité

• N'écrivez aucune clé API dans le produit final, le dépôt ou les logs.
• Pour les assets générés, respectez les droits d'auteur : ne demandez pas d'imiter le travail d'artistes vivants ni de marques déposées.
• Les images de référence servent de base de comparaison, ne copiez pas le design d'autrui.