L'IA a atteint des capacités proches de l'humain dans de nombreux domaines, mais la conception a longtemps été un point faible. Cependant, je pense que beaucoup de gens comprennent mal ce que signifie « concevoir avec l'IA ».
Dans cet article, basé sur le post « Comment concevoir réellement avec l'IA » de Leon Lin (@LexnLin), j'ai soigneusement organisé des méthodes pratiques pour procéder à la conception avec l'IA en français.
À la fin de l'article, je distribue un kit de système de design pour créer des conceptions de haute qualité avec Claude.
Vous pouvez le recevoir en bas de l'article.
Prérequis à garder en tête
« Concevoir avec l'IA » ne signifie pas tout laisser faire à l'IA. Les idées, la direction, l'intuition et la créativité viennent de vous. Il est plus facile d'y voir clair si vous considérez l'IA comme un outil pour « donner forme (exécuter) » ces éléments.
Le flux général se compose de ces 3 étapes :
- Développez vos propres idées
- Rassemblez des inspirations
- Traduisez vos pensées en prompts et laissez l'IA créer
Vous pouvez utiliser n'importe quel outil ou environnement (harnais) comme Cursor, Codex ou Claude. L'essentiel réside dans « la conversion de vos pensées en instructions ».
L'IA est très bonne pour l'exécution, mais elle ne possède pas encore une véritable créativité. Elle comprend les « règles de conception » telles que les espaces blancs, la typographie, la théorie des couleurs et la hiérarchie. Cependant, elle ne peut pas comprendre ce qui est « vraiment bon », « original » ou « significatif » — en d'autres termes, le goût.
C'est le plus grand écart. À ce stade, vous ne pouvez pas donner un véritable goût à l'IA, mais vous pouvez contourner cette limitation en supposant qu'il existe.
Méthode 1 : Utiliser des compétences de conception
C'est l'approche la plus rapide. Lorsque vous manquez de temps ou que vous réalisez quelque chose de petit, il est efficace de s'appuyer sur des « compétences de conception » pré-préparées.
Exemples :
- Impeccable (impeccable.style
- Compétences UI d'Emil Kowalski (GitHub : emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
Le processus est très simple :
- Ajoutez des compétences de conception
- Donnez du contexte à l'IA
- Envoyez quelques prompts pour qu'elle crée un site, une application ou une affiche
- Corrigez les problèmes évidents
- Publiez
Les résultats sont généralement « assez bons ». Ils peuvent ressembler à d'autres conceptions générées par l'IA, mais l'utilisation de compétences de haute qualité évite les pires échecs et l'aspect « IA ». C'est la méthode que beaucoup de gens utilisent réellement.
Méthode 2 : Concevoir vous-même avec l'IA
Si vous voulez créer quelque chose qui « se démarque vraiment », vous devez aller plus loin. Vous voulez que les utilisateurs sentent que votre produit est « bien pensé » lorsqu'ils le touchent — pour cela, un processus plus intentionnel est nécessaire.
Que ce soit une application mobile, une application de bureau, un site web, une page d'atterrissage, un tableau de bord ou une affiche, vous avez d'abord besoin d'une direction claire. Si vous ne savez pas ce que vous voulez créer, l'IA ne le trouvera pas pour vous.
Commencez par le « sens »
Avant tout, définissez les fondations. Essayez de répondre à ces questions :
- À qui est-ce destiné ?
- Quel problème cela résout-il ?
- Quelle sensation cela doit-il procurer ?
- Qu'est-ce que cela incarne ?
L'interface utilisateur reflète le « sens » d'un produit. Notez-les. Vous pouvez aussi utiliser l'IA ici, mais l'astuce est de l'utiliser pour vous poser des questions plutôt que pour concevoir.
Par exemple, demandez à l'IA de vous poser :
- De quoi parle ce produit ?
- Qui sont les utilisateurs visés ?
- Quelles émotions voulez-vous transmettre ?
- Quelle doit être l'atmosphère de la marque ?
- Quelles couleurs et polices conviennent ?
- Minimaliste / Ludique / Premium / Technique / Expérimental — quelle direction ?
Rassemblez de l'inspiration
Une fois la direction définie, commencez à rassembler des références. Une source puissante est Mobbin, qui contient des écrans de produits réels dans diverses catégories.
L'important ici n'est pas seulement de regarder et de penser « c'est beau ». Demandez-vous pourquoi c'est beau.
- Est-ce la mise en page ?
- Les espaces blancs ?
- La typographie ?
- La structure ?
- L'interaction ?
Sauvegardez ce que vous aimez et organisez-les dans des dossiers comme :
- Navigation
- Hero
- Tarifs
- Cartes
- Écrans mobiles
- Tableau de bord
- Animation
- Typographie
Prendre le temps de constituer votre propre bibliothèque de références est ainsi que vous cultivez le « goût ».
D'autres sources utiles incluent Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee et Lummi.
Remarque : évitez de copier des conceptions en bloc. Il est important de combiner plusieurs idées et de les élever pour qu'elles correspondent à votre produit.
Cartographiez la structure
Ensuite, définissez ce que vous devez réellement construire. Pour un site web, cela peut être la navigation, le hero, les fonctionnalités, les tarifs, les témoignages, l'appel à l'action et le pied de page.
Pour une application, cela peut être l'intégration, l'accueil, la recherche, le profil, les paramètres, les flux principaux et les états vides.
Chaque section a besoin d'un contenu clair. Pour une section hero, vous avez besoin d'un titre, d'une description, d'un appel à l'action et d'éléments visuels. L'IA peut aider pour le texte, mais la « clarté » vient finalement de vous.
Construisez par composant
Enfin, il est temps de produire. Reprenez les idées individuelles que vous avez référencées et reconstruisez-les pour qu'elles correspondent à votre produit.
Au lieu de dire « fais un site web entier », l'astuce est de dire « sur la base de ce style, fais une section hero adaptée à ma marque ».
Procédez étape par étape : Navigation → Hero → Cartes → Boutons → Typographie → Détails. L'IA est bien meilleure pour les petites tâches, et cela vous permet de garder le contrôle.
Générez des ressources personnalisées
Utilisez la génération d'images si nécessaire. Les outils de génération d'images sont maintenant suffisamment puissants. L'astuce est de communiquer clairement le contexte comme la couleur, le style, la composition et l'objectif.
Évitez les images de stock génériques. L'utilisation d'éléments visuels personnalisés crée une unité dans l'ensemble.
Flux de travail global
En résumé, le flux est le suivant :
- Définissez l'idée
- Clarifiez l'objectif et l'utilisateur
- Décidez de la direction de la marque
- Rassemblez des références
- Organisez-les
- Cartographiez la structure
- Créez des composants
- Générez des ressources
- Ajoutez des interactions
- Peaufinez l'ensemble
Vous obtenez des résultats bien meilleurs qu'en créant avec un seul prompt.
Méthode 3 : Utiliser des tableaux d'inspiration
Il existe aussi un « juste milieu » un peu plus rapide. Au lieu d'assembler chaque élément un par un, vous fournissez à l'IA un ensemble de références sélectionnées.
Rassemblez des captures d'écran de Mobbin, Awwwards, Webflow, etc., et demandez :
Veuillez combiner le style et la direction de ces références pour créer un design pour mon produit. Cependant, ne les copiez pas exactement.
Bien sûr, cela suppose que vous ayez fourni suffisamment de contexte et que vous ayez d'abord laissé l'IA poser des questions. C'est plus rapide que le travail manuel mais donne de bien meilleurs résultats qu'un prompt générique.
Résumé des 3 approches
- Méthode 1 : Compétences de conception — Rapide, résultats décents
- Méthode 2 : Par composant — Plus lent, mais la meilleure qualité
- Méthode 3 : Tableau d'inspiration — Équilibré
Autres outils utiles
- Génération SVG : Des outils comme Quiver peuvent créer des SVG. Comme les éléments sont séparés, ils sont plus faciles à animer.
- Vidéo : Des outils comme Google Flow. Peut améliorer les héros, les arrière-plans et les démos de produits.
- Bibliothèques d'images : Des plateformes comme Lummi. Mais choisissez des images qui correspondent à la marque.
- Superposition : Ajoutez de la profondeur, du mouvement et de l'interaction grâce à la suppression d'arrière-plan et à la superposition. L'accumulation de détails fait une grande différence.
Conclusion
L'IA ne remplace pas votre réflexion.
- Quoi créer
- Pourquoi c'est important
- Pour qui c'est
- Quelle sensation cela doit procurer
C'est toujours vous qui décidez de ces choses. L'IA se contente de les exécuter plus rapidement. Les meilleurs résultats ne viennent pas de meilleurs prompts, mais d'un meilleur goût.
*Cet article a été reconstruit en français à partir du post X de Leon Lin (@LexnLin) « How To Actually Design With AI. »
Je distribue gratuitement le « Kit de système de conception Claude » sur LINE.
▼ Inscrivez-vous sur LINE pour recevoir le « Kit de système de conception Claude »
https://t.co/90omRA4UQ7
Veuillez rejoindre l'Open Chat (LINE OpenChat), puis depuis le LINE officiel mentionné dans les notes, envoyez :
Design System
et vous pourrez recevoir l'avantage.
※ Veuillez vous abstenir d'envoyer des mots-clés dans l'Open Chat lui-même.
Je recommande de mettre le template dans Claude Design tel quel et d'essayer de réaliser un seul document. Cela vous donnera déjà une idée de l'utilisation d'un système de conception.
▼ Inscrivez-vous sur LINE pour recevoir le « Kit de système de conception Claude »
