Concevoir avec l'IA : Claude, Codex, Figma | Guide Complet
Apprenez à concevoir avec l'IA en utilisant Claude d'Anthropic, Codex d'OpenAI, Google Stitch, Mobbin et Figma. Ce guide complet vous montre comment j'utilise les outils d'IA dans les workflows de design produit réels, de l'idéation précoce et la réflexion UX au wireframing
Description complète
Apprenez à concevoir avec l'IA en utilisant Claude d'Anthropic, Codex d'OpenAI, Google Stitch, Mobbin et Figma. Ce guide complet vous montre comment j'utilise les outils d'IA dans les workflows de design produit réels, de l'idéation précoce et la réflexion UX au wireframing, au design haute fidélité, aux systèmes de design, au prototypage et à l'interface utilisateur prête pour la production. Nous examinerons comment Claude, Codex, Google Stitch, Mobbin et Figma s'intègrent dans le processus de design, comment éviter les résultats génériques générés par l'IA, et comment les designers peuvent travailler plus vite, prendre de meilleures décisions et dépenser moins de tokens sans perdre le goût, la structure ou le contrôle. 🔗 LIENS CLÉS 📣 REJOIGNEZ LA COMMUNAUTÉ : https://uicollective.co/ ❎ Suivez-moi sur X : https://x.com/KirkMDesign Pourquoi rejoindre UI Collective Academy ? Accédez aux cours premium, aux téléchargements premium et bien plus encore (je construis largement cela en solo...en essayant de rendre l'enseignement du design accessible à tous, votre soutien est précieux !) ↪️ Besoin d'un système de design ? (également inclus dans l'académie) : https://collectivekit.co/ 🔗 AUTRES VIDÉOS DE SYSTÈME À REGARDER Construire un système de design : https://youtu.be/opTANvl9G1g Système de design complexe et configuration des variables Figma : https://youtu.be/L-tpK7Eeuow Vidéo Claude Design : https://youtu.be/eXlSgQmz02E 🔗 PLUS DE LIENS Faites-nous construire ou réparer votre système de design : https://designsystemlabs.co/ 📣 Économisez 20% sur le plan annuel Mobbin : http://mobbin.com/uicollective Google Stitch : https://stitch.withgoogle.com/ Claude Design : https://claude.ai/design [email protected] 0:00 Une introduction 0:52 L'IA n'est pas un outil, l'IA est un workflow 6:43 La stack de design IA 7:32 Claude vs Codex 9:16 Configuration du design IA (compétences Figma et Figma MCP) 16:31 Google Stitch 21:27 Où j'utilise Stitch dans mon workflow 23:29 Claude Design 27:01 Résultat Claude Design 28:35 Quand utiliser Google Stitch avec Claude Design 31:44 Limitation Claude Design 32:35 Expérience de comparaison Claude et Codex 38:25 Meilleure utilisation des tokens IA 40:45 Systèmes de design et IA 42:04 Limitations du système de design Claude Design 45:32 Construire des tokens de design avec l'IA 49:01 Variables Figma et IA 52:26 Composants du système de design et IA 58:32 Entraîner l'IA sur notre système de design 1:01:34 Compétences Claude du système de design 1:08:04 Composants et compétences Claude 1:13:48 Ajouter des compétences Claude à Codex 1:15:09 IA et recherche de design avec Mobbin 1:17:24 Construire des interfaces utilisateur en production avec Claude Code 1:22:43 Construire des interfaces utilisateur avec ChatGPT 1:24:26 Affiner notre design IA 1:25:13 Pousser vers Figma et résultat final 1:27:08 Outro
Chapitres
- 0:00 An Introduction
- 0:52 AI is Not a Tool, AI is a Workflow
- 6:43 The AI Design Stack
- 7:32 Claude vs Codex
- 9:16 AI Design Setup (Figma Skills & Figma MCP)
- 16:31 Google Stitch
- 21:27 Where I Use Stitch In My Workflow
- 23:29 Claude Design
- 27:01 Claude Design Output
- 28:35 When to Use Google Stitch With Claude Design
- 31:44 Claude Design Limitation
- 32:35 Claude and Codex Comparison Experiment
- 38:25 Best Use of AI Tokens
- 40:45 Design Systems and AI
- 42:04 Claude Design Design System Limitations
- 45:32 Building Design Tokens with AI
- 49:01 Figma Variables and AI
- 52:26 Design System Components and AI
- 58:32 Training AI On Our Design System
- 61:34 Design System Claude Skills
- 68:04 Components and Claude Skills
- 73:48 Adding Claude Skills to Codex
- 75:09 AI and Design Research with Mobbin
- 77:24 Building Production UI’s with Claude Code
- 82:43 Building UI’s with Chat GPT
- 84:26 Refining Our AI Design
- 85:13 Pushing to Figma and Final Result
- 87:08 Outro