스크립트
00:00:00Un bon design est vraiment important, car si vous voulez des clients, l'aspect visuel de votre site est la première chose
00:00:05qu'ils jugent. Il existe de nombreux outils pour vous y aider, et Claude Design est l'un des plus
00:00:09puissants du moment. Mais un bon design ne s'obtient pas en se contentant de donner des instructions à l'outil. C'est pourquoi
00:00:14dans cette vidéo, nous allons passer en revue un processus en cinq étapes que vous pouvez appliquer avec Claude Design
00:00:18vous-même. Que vous n'ayez jamais ouvert Claude Design ou que vous l'utilisiez depuis des mois, il y a
00:00:22quelque chose ici pour vous. Si vous ne l'avez jamais ouvert auparavant, ce n'est pas grave puisque nous commençons par voir ce qu'est
00:00:27réellement l'outil. Et si vous l'utilisez déjà pour concevoir, nous verrons comment intégrer Claude Design
00:00:32avec Claude Code pour le rendre beaucoup plus puissant. Utilisez donc les repères temporels ci-dessous pour y accéder directement.
00:00:37Maintenant, si vous découvrez la chaîne, bienvenue. Nous sommes en fait une entreprise de logiciels et nous avons construit
00:00:41un système complet autour de Claude Design basé sur nos processus internes. Alors sans perdre plus
00:00:47de temps, entrons dans le vif du sujet. Cette section est uniquement destinée à ceux qui ne savent pas ce qu'est Claude Design. Donc
00:00:52si vous le savez déjà, vous pouvez passer à la suivante. Il est d'abord sorti en tant qu'aperçu de recherche
00:00:57lors du lancement par Claude de leur modèle Opus 4.7. C'est essentiellement un outil de conception doté d'une interface très facile à utiliser
00:01:02qui permet à tout le monde, même aux non-initiés, de créer de superbes designs avec de simples
00:01:07instructions. Et il est disponible sur tous les abonnements payants. Cela ne s'arrête pas aux sites web non plus. Vous pouvez
00:01:12également concevoir vos présentations, vos documents et même créer des animations avec. De plus, Claude Design est disponible
00:01:17sur Claude Desktop et sur le site web de Claude. Vous n'avez donc pas nécessairement besoin d'installer l'application de bureau.
00:01:22Si vous souhaitez l'utiliser sur l'application, il vous suffit de la télécharger, d'exécuter l'installation et de vous connecter à votre compte.
00:01:27Ensuite, vous ouvrez la barre latérale, vous cliquez sur design, et son interface s'ouvre pour vous permettre de commencer à l'utiliser.
00:01:32Claude Design vous donne le choix entre tous les modèles de Claude, même Fable, qui est leur modèle le plus performant
00:01:37bien que vous n'y ayez qu'un accès limité. Leur modèle phare pour un usage général reste Opus,
00:01:42et il demeure le meilleur pour la conception. Mais le problème avec ces modèles Opus, c'est qu'ils consomment
00:01:46énormément de jetons. Haiku, en revanche, en utilise beaucoup moins, mais peut nécessiter davantage
00:01:51de raffinement pour obtenir un bon design. Et en plus de cela, vous pouvez définir le niveau d'effort pour chaque
00:01:55modèle. Le niveau d'effort contrôle fondamentalement l'intensité de la réflexion du modèle avant d'agir. Nous utilisons
00:02:01Opus 5, le modèle le plus récent à ce jour, avec un effort moyen pour nos tâches de conception, car cela nous permet de concevoir
00:02:06facilement sans gaspiller trop de jetons. Cela vous permet également d'importer tous vos MCP et compétences, ce qui facilite
00:02:12grandement l'utilisation de votre propre système directement à l'intérieur. Pour ceux qui l'ignorent, les MCP permettent
00:02:18à un agent de se connecter à des éléments extérieurs, comme d'autres outils et services, et les compétences sont des ensembles d'instructions qui apprennent à l'agent à mieux faire quelque chose grâce à des conseils étape par étape et à des références qu'il peut suivre. Maintenant, avant de commencer, il y a une chose à garder à l'esprit : il y a une limite au nombre de designs
00:02:23que vous pouvez créer. Claude Design fonctionne sur une limite de 5 heures, mais ce n'est pas seulement pour vos designs. Tout ce que vous
00:02:28faites sur Claude compte pour cette même limite. Dans cette fenêtre de 5 heures, il y a un plafond sur le nombre de jetons que vous
00:02:33pouvez dépenser, et une fois épuisés, vous devez attendre la fin de ces 5 heures avant de pouvoir l'utiliser
00:02:38à nouveau. Et même s'il s'est grandement amélioré depuis sa sortie, Claude Design reste
00:02:44très gourmand en jetons ; par conséquent, si vous l'utilisez de manière intensive, attendez-vous à ce que vos limites s'épuisent plus vite. Donc, afin de
00:02:49compenser cette forte consommation de jetons, vous devez prendre certaines mesures avant de vous lancer directement dans la rédaction d'instructions.
00:02:53Ces étapes sont importantes car elles garantissent l'obtention du design souhaité sans gaspiller
00:02:59trop de jetons. La première chose à faire est de créer le fichier design.md. Il s'agit d'un format
00:03:04initié par Google, qui regroupe tous les détails de l'identité visuelle de votre marque. Votre agent de codage IA lit ce fichier
00:03:09avant d'écrire quoi que ce soit, de sorte que chaque écran produit respecte fidèlement votre marque. Il n'a jamais à deviner,
00:03:15et ne s'écarte donc jamais de votre identité. Désormais, Claude Design intègre une fonction permettant de créer des systèmes de design.
00:03:20Un système de design est fondamentalement un ensemble de choix stylistiques qui s'appliquent à l'ensemble de votre site. Il contient vos polices,
00:03:25vos couleurs et tous les autres détails qui constituent votre design, et il vous permet de les utiliser pour concevoir
00:03:30d'autres créations. Ainsi, tous les designs élaborés à l'aide d'un système de design suivront le même style et donneront l'impression
00:03:35de faire partie du même site. Mais la principale raison pour laquelle vous souhaitez commencer avec un fichier design.md prédéfini est que
00:03:40tous ces modèles génèrent des designs qui se ressemblent de manière identique. Si vous laissez Claude Design élaborer le système de design de son
00:03:46côté, il se rabat simplement sur les couleurs et les styles génériques que les modèles Opus utilisent partout, et
00:03:51par conséquent, votre site finit par ressembler à n'importe quel autre site créé par une IA. En revanche, si vous
00:03:57lui fournissez un fichier design.md pour fonder le système de design, ce fichier lui indique précisément ce que vous voulez, ce qui assure un contrôle
00:04:02bien supérieur sans qu'il ne retombe sur ces valeurs par défaut. Et comme nous l'avons déjà mentionné, l'autre
00:04:07raison est la cohérence. Puisque l'ensemble du système de design repose sur ce fichier unique, chaque page adopte
00:04:12exactement le même style, ce qui permet à votre site multipage de conserver une apparence cohérente. Pour ce faire, nous avons créé une compétence
00:04:17qui planifie le fichier design.md pour vous. Pour utiliser cette compétence, vous l'exécutez à l'intérieur de Claude Code. Et Claude
00:04:22Code est essentiellement un autre outil conçu par Anthropic. Il s'agit d'un outil de codage par IA que vous exécutez dans votre terminal
00:04:27et qui peut créer des applications entières pour vous. Pour l'installer, il vous suffit de vous rendre sur leur site officiel, de copier la commande
00:04:33d'installation et de l'exécuter dans votre terminal. Une fois cela fait, vous tapez claude dans le terminal,
00:04:39et vous pouvez commencer à l'utiliser en saisissant vos instructions. Puisque nous allions construire l'application dans Claude
00:04:45Code, nous avons simplement placé cette compétence dans le dossier skills situé à l'intérieur du dossier .claude, qui correspond
00:04:49généralement à l'emplacement de tous les paramètres et configurations de Claude Code. Vous ne possédez probablement pas ce dossier, mais vous pouvez simplement
00:04:54dire à Claude Code dans la zone de texte que vous devez installer des compétences dans le projet, et il se chargera
00:04:59de le configurer pour vous et d'y insérer la compétence de lui-même. Le dossier .claude ne sera pas visible lorsque vous l'ouvrirez
00:05:05dans Finder. C'est parce que son nom commence par un point, et les fichiers commençant par un point sont traités comme
00:05:10des fichiers système, si bien que Finder les masque par défaut. Pour y accéder, il vous faut donc un éditeur de code,
00:05:15c'est-à-dire une application qui vous permet de voir tous les fichiers de votre projet dans un seul endroit organisé. Celui que nous utilisons
00:05:20est VS Code, créé par Microsoft, et c'est celui que la plupart des développeurs utilisent en raison de sa facilité
00:05:25d'utilisation. Pour l'installer, rendez-vous sur leur site officiel, téléchargez le programme d'installation correspondant à votre système
00:05:31d'exploitation et lancez l'installation. Ensuite, ouvrez simplement le dossier de votre projet dedans pour
00:05:36pouvoir tout visualiser, y compris les fichiers cachés. Dès que vous souhaitez développer une application,
00:05:40vous invoquez cette compétence à l'aide de sa commande slash, qui est un raccourci saisi avec une barre oblique pour
00:05:45l'activer et lui donner une instruction précisant ce que vous voulez construire. Elle mène un entretien avec vous et planifie en détail
00:05:49l'identité visuelle du produit, et une fois qu'elle dispose de toutes les informations, elle rédige
00:05:54l'intégralité du fichier design.md, tout en le validant par rapport aux normes de Google grâce à l'exécution de scripts. Cette compétence
00:05:59contient également des références anti-clichés, qui regroupent tous les motifs courants trahissant un design généré par une IA.
00:06:03Planifier d'abord un fichier design.md est donc véritablement la meilleure option. De plus, si vous vous demandez où
00:06:09vous procurer cette compétence, ne vous inquiétez pas, nous vous l'indiquerons plus tard dans la vidéo. À présent, l'application que nous construisons dans cette vidéo
00:06:15est une application de gestion de projets qui centralise la gestion de tous vos projets de code. Pour commencer,
00:06:21vous donnez d'abord à Claude Code une instruction incluant la commande slash de la compétence, en lui décrivant à grands traits
00:06:26l'application que vous souhaitez créer et son utilité, et l'outil commence par analyser l'identité visuelle
00:06:31de votre concept. Une fois cela fait, il commence à vous poser des questions, par exemple si vous avez une
00:06:36couleur en tête pour votre site web. Si vous avez déjà arrêté votre choix sur les couleurs de votre marque, vous pouvez les lui transmettre,
00:06:41ou le laisser choisir de lui-même. Étant donné que vous utilisez la compétence, il évitera les couleurs génériques par défaut,
00:06:46vous n'avez donc pas à vous soucier de cet aspect convenu, mais il est toujours préférable de les avoir déterminées
00:06:51au préalable. Ce que nous faisons habituellement, c'est utiliser Coolors, un site qui génère et visualise
00:06:55des palettes de couleurs, afin que vous puissiez voir comment les teintes s'associent. Dès que vous trouvez une combinaison de couleurs
00:07:00qui vous plaît, vous pouvez cliquer sur exporter, puis choisir l'option code, ce qui vous fournira
00:07:05un texte qu'il vous suffit de copier-coller dans Claude Code. Claude Code se chargera
00:07:09d'intégrer ces données dans vos fichiers design.md pour vous. Ensuite, il créera le fichier design.md et exécutera
00:07:14quelques étapes de vérification. Et le fichier de design correspond exactement à la structure établie par Google.
00:07:18Bien que ce format Google soit facile à comprendre pour le modèle d'IA, il est difficile pour vous de
00:07:24visualiser concrètement les designs qui en découleront, ce qui ne vous permet pas de déterminer si le rendu correspond
00:07:29à vos attentes finales ou s'il nécessite des modifications. Mais évitez de faire le test à l'intérieur de Claude Design. Vous y générez
00:07:33vos designs, et imaginons qu'ils ne vous plaisent pas. Vous devez alors retourner dans le fichier design.md,
00:07:38le modifier et tout regénérer. Chacun de ces cycles vous coûte des jetons. Il existe de nombreux
00:07:43outils conçus pour visualiser un fichier design.md, et l'un de ceux que nous avons utilisés est design.md.space. N'importe lequel
00:07:48d'entre eux vous montre l'apparence de votre fichier de design et la façon dont toutes les couleurs choisies pour différentes zones
00:07:53fonctionnent ensemble. Il visualise également l'ensemble des éléments, ce qui simplifie grandement la prise de décision. Cela étant,
00:07:59ce n'est qu'une façon de créer un design.md, il en existe d'autres. Si vous préférez ne pas en concevoir un par
00:08:04vous-même, vous pouvez tout simplement copier le design d'un site populaire à titre d'exemple. En toute honnêteté, en reprendre un
00:08:10comme référence est une méthode déjà employée par beaucoup. Vous l'utilisez comme point de départ et y apportez des modifications
00:08:15pour vous l'approprier, un peu à la manière de ceux qui se sont inspirés de l'esthétique épurée de Notion pour l'adapter
00:08:19à leurs propres designs après quelques ajustements. À cette fin, il existe un site nommé getdesign.md, qui répertorie
00:08:24un grand nombre de marques ainsi que tous leurs styles sous forme de fichiers design.md que vous pouvez récupérer vous-même. Puisque nous
00:08:29disposons déjà de notre propre fichier design.md, nous pouvons avancer avec Claude Design et créer un nouveau
00:08:34de nombreuses marques et leurs styles sous forme de fichiers design.md que vous pouvez récupérer vous-même. Puisque nous
00:08:39avons déjà notre propre design.md, nous pouvons avancer avec Claude Design et créer un nouveau
00:08:44système de design à partir de celui-ci. Lorsque vous en créez un nouveau, il demande les détails du produit. Mais puisque vous
00:08:49avez un design.md, vous le téléchargez simplement comme ressource. Ensuite, il commence à générer le nouveau système en
00:08:55lisant le fichier, en créant des tâches et en les traitant une par une. Après un moment, Claude Design
00:09:00crée le système de design et visualise le tout pour vous, en développant les différents éléments qui feront
00:09:06partie de l'application. Pour pouvoir suivre ce flux de travail, vous aurez besoin de cette
00:09:10compétence. Nous l'avons publiée sur GitHub et mise en lien dans la description pour que vous puissiez l'obtenir gratuitement.
00:09:14Pour l'utiliser, donnez simplement ce lien à Claude Code en lui demandant de la configurer, et il l'installera
00:09:19et la placera dans le dossier .claude sans que vous ayez à faire quoi que ce soit. Une fois le système de design
00:09:24verrouillé et prêt à être utilisé, il y a une autre étape très importante avant de commencer
00:09:29à construire le site : la création de wireframes de ce que vous voulez bâtir. Un wireframe est essentiellement
00:09:34un croquis brut qui vous permet de voir où vont tous les éléments et s'ils sont bien placés.
00:09:39Vous pourriez vous lancer directement dans la création du site, mais cela pose des problèmes. Vous devriez attendre longtemps
00:09:43car Claude Design est lent pour créer des designs, et si après tout cela le design ne correspond pas à vos
00:09:48besoins, vous devriez tout refaire. Pour ce faire dans Claude Design, sélectionnez le système de design que
00:09:53vous venez de créer, choisissez l'option wireframe et donnez-lui une consigne précisant le nombre d'écrans souhaité.
00:09:58Ensuite, cela vous permet également de créer plusieurs options pour chaque écran afin que Claude puisse vous proposer quelques
00:10:03styles différents pour chaque écran parmi lesquels choisir. La génération sera rapide et vous pourrez
00:10:08analyser la structure et parcourir toutes les variations créées pour la même page. Il y a aussi
00:10:12une fonction de commentaire : pour modifier un élément précis, il vous suffit d'y laisser un commentaire. Un commentaire
00:10:18transmet les détails exacts de cet élément ainsi que votre consigne pour que Claude sache précisément quelle zone doit
00:10:23être modifiée et de quelle manière. C'est bien plus efficace que de simplement donner une consigne en laissant Claude deviner
00:10:28de quelle zone vous parlez. Pour en ajouter un, sélectionnez l'outil commentaire, cliquez sur l'élément
00:10:33exact que vous souhaitez changer et tapez votre modification. Vous pouvez ajouter autant de commentaires que nécessaire.
00:10:38Vous pouvez les envoyer un par un, mais il vaut mieux les regrouper et les envoyer tous en même temps pour qu'il les traite
00:10:42conjointement et corrige tout en une seule fois. Cela réduit votre temps d'attente au minimum. Continuez donc
00:10:48à affiner jusqu'à ce que la structure vous convienne, et une fois terminé ici, vous pourrez passer à la suite. Si
00:10:52vous appréciez la vidéo jusqu'ici, abonnez-vous à la chaîne et cliquez sur le bouton J'aime. Ce petit geste
00:10:57de soutien compte beaucoup pour nous. Une fois le wireframe conçu, il est temps de passer au design
00:11:03réel. Vous pouvez également utiliser le même outil pour créer quelques variations. Puisque vous demandez
00:11:06généralement à Claude de réaliser plusieurs variantes d'un même design, vous choisissez d'abord celle que vous préférez
00:11:10parmi celles que vous venez de créer. Chacune de ces pages est identifiée par son numéro de code, il vous suffit de la sélectionner
00:11:15par ce biais. Ensuite, vous lui donnez une consigne pour transformer ces écrans en un design détaillé et complet,
00:11:20en lui demandant de conserver la mise en page et la structure du wireframe avec un espacement et une hiérarchie propres.
00:11:26Claude Design lit ensuite tous les éléments créés lors de l'élaboration du système de design.
00:11:31À l'aide de ceux-ci, il construit le site entier afin qu'il corresponde exactement au système de design
00:11:36et au wireframe, exactement comme nous en avons besoin. Tout comme sur le wireframe, vous pouvez laisser des commentaires pour corriger des choses
00:11:41ici aussi. Et vous aurez probablement besoin de nombreux changements car il a tendance à mal choisir les couleurs des boutons.
00:11:46Certains boutons doivent attirer l'attention et arborer une couleur vive pour ressortir, vous pouvez donc lui demander
00:11:50de corriger cela. Et comme il se construit par-dessus le wireframe, le site peut paraître un peu vide
00:11:55au départ avec seulement les éléments basiques ajoutés sur le croquis, vous pouvez donc lui demander d'ajouter des textures
00:12:00et des éléments pour un rendu plus riche. Vous pouvez également appliquer des modifications directement sur le design : si vous avez un petit
00:12:05changement comme la suppression d'un élément, vous pouvez le faire directement sur le visuel sans solliciter Claude.
00:12:10De cette façon, la modification est appliquée sans que vous ayez à attendre ni à gaspiller des jetons pour si peu.
00:12:15Une fois les modifications terminées, vous pouvez demander à Claude Design de peaufiner l'aspect général,
00:12:20et il apporte des touches subtiles et pertinentes au design. La première version de l'application est
00:12:25donc terminée, mais il manque quelque chose : les animations. Celles-ci sont importantes car
00:12:29elles améliorent l'expérience utilisateur et guident le regard vers l'essentiel. Des effets comme l'apparition au défilement
00:12:35ou d'autres menues touches rendent le site plus vivant. Nous avons donc demandé à Claude Design
00:12:40d'ajouter des animations sur l'ensemble des écrans, telles que des apparitions au défilement ou d'autres petits détails
00:12:45donnant vie au site. Nous lui avons demandé de rester subtil et d'éviter les effets trop élastiques qui font artificiels.
00:12:50Une fois le travail de Claude Design terminé, on pouvait voir les animations d'apparition au défilement et de texte, rendant le site
00:12:55beaucoup plus interactif. Lorsque le design vous satisfait, vous pouvez passer à l'étape suivante : le transfert.
00:13:00Le design dans Claude Design est à présent finalisé, et il est temps de lui donner vie en le transformant en le produit réel
00:13:05que nous allons livrer en fin de compte. Claude Design ne proposait pas cela auparavant, mais vous pouvez désormais exporter vos designs
00:13:10directement dans Claude Code. Il utilise le MCP de Claude Design, qui permet essentiellement à Claude Design et
00:13:15Claude Code de communiquer entre eux. Et cela fonctionne dans les deux sens. Vous pouvez donc transférer
00:13:21vos designs de Claude Design vers Claude Code, et vice-versa de la même manière. Vous ouvrez Claude
00:13:26Code à nouveau et y collez la consigne obtenue depuis Claude Design. Il commence par lire les métadonnées,
00:13:31c'est-à-dire les informations récapitulatives du design, puis il liste les fichiers du projet. Il lit le système de design
00:13:36en premier, car c'est là qu'il est défini, puis il parcourt tous les éléments un par un.
00:13:42Une fois qu'il a le design complet, il le bâtit dans votre projet avec toutes les animations présentes
00:13:47dans Claude Design. Mais nous devions vérifier cette conversion pour nous assurer qu'elle avait été bien faite. Visuellement,
00:13:52tout semblait correct, mais il pouvait encore subsister des problèmes internes lorsque le code brut de Claude Design
00:13:57est converti en véritable application. Nous avons donc demandé une révision approfondie, et il a commencé à comparer le design.md
00:14:02avec ce qui avait réellement été construit pour voir s'ils concordaient. Cette vérification a mis en évidence plusieurs problèmes
00:14:08tels que des soucis de responsivité, ce qui signifie simplement que l'application ne s'affichait pas correctement sur différentes tailles d'écran,
00:14:12comme les mobiles ou les tablettes. Ce que génère Claude Design a tendance à présenter ce défaut, car il s'agit
00:14:17encore d'une version préliminaire ; ce qu'il conçoit s'avère donc optimal pour le format exact pour lequel il a été pensé.
00:14:22Un design conçu pour un site web aura fière allure dessus, mais pas toujours sur d'autres tailles d'écran, nous avons donc appliqué les correctifs,
00:14:27et après cela, la partie visuelle de l'application était fonctionnelle et responsive. Pour achever cette
00:14:32application et la rendre opérationnelle, nous devions la connecter à ce que l'on appelle une base de données.
00:14:36Le problème actuel est que même si l'application est entièrement fonctionnelle, et que cliquer sur des boutons fonctionne et ajoute
00:14:41les détails d'un nouveau projet, si nous rouvrons l'application, tous les progrès accomplis à l'intérieur
00:14:46auront disparu. C'est pourquoi nous avons besoin d'une base de données afin que toutes ces données soient stockées au sein de l'application et que les utilisateurs
00:14:51puissent réellement s'en servir. Pour cela, nous avons utilisé Supabase. C'est l'un des fournisseurs backend les plus populaires,
00:14:57et l'un des meilleurs moyens de gérer les utilisateurs et toutes vos données. Supabase ne nous est pas inconnu. Nous l'utilisons
00:15:02dans presque chaque application que nous développons, peu importe pour qui, et même nombre de nos outils internes
00:15:08fonctionnent entièrement dessus. C'est parce qu'il nous délégue une grande partie du travail
00:15:12que nous aurions sinon dû faire nous-mêmes. C'est également l'une des bases de données les plus utilisées,
00:15:17simplement en raison de sa facilité de connexion avec des agents IA comme Claude Code. Supabase propose aussi
00:15:22une compétence d'agent qui regroupe des instructions, des scripts et des ressources que l'agent peut exploiter pour interagir
00:15:28avec Supabase de manière plus fiable. Ainsi, il sait tout ce dont il a besoin pour tirer le meilleur parti des outils de Supabase.
00:15:33Pour l'installer, il suffit de copier la commande d'installation et de la fournir à l'agent. Ce pack contient deux compétences :
00:15:39l'une est la compétence Supabase, qui sert de guide d'utilisation, et l'autre est la compétence de bonnes pratiques,
00:15:43qui regroupe les meilleures méthodes pour optimiser les performances de votre application. Une fois l'installation terminée,
00:15:48vous verrez ces deux nouvelles compétences s'ajouter à votre projet. La compétence Supabase s'active dès qu'il y a
00:15:53une tâche liée à la base de données ou à la connexion, et la compétence de bonnes pratiques entre en jeu
00:15:58lorsque vous voulez que Claude Code accélère votre application en mentionnant les mots “optimiser les performances” dans votre consigne.
00:16:04Tout cela est appuyé par une vaste bibliothèque de références pour toutes sortes de problèmes. Une fois ces compétences installées,
00:16:08vous pouvez donner à Claude Code la consigne de construire le backend et d'y relier le design existant,
00:16:13afin que l'application entière fonctionne réellement. Puisque nous ne voulions pas que l'agent intervienne sur la structure
00:16:18de l'organisation des données de l'application, nous l'avions déjà préparée nous-mêmes et ajoutée dans
00:16:22le dossier principal du projet. Étant donné que la compétence n'est qu'un ensemble d'instructions, elle ne peut pas accéder à votre projet
00:16:27sur les serveurs de Supabase pour y effectuer des modifications. Ce sont juste des textes indiquant à l'agent quoi faire,
00:16:32elle ne contient donc aucun outil lui permettant d'agir en dehors de l'agent. C'est pourquoi la compétence Supabase
00:16:36vous demande de connecter soit leur CLI (l'outil que vous exécutez depuis le terminal),
00:16:41soit le MCP. L'un ou l'autre fournit à l'agent les outils nécessaires pour travailler directement sur votre projet Supabase,
00:16:46évitant ainsi toute intervention manuelle de votre part. Nous avons opté pour le MCP car il est plus simple à configurer,
00:16:51et nous n'avons pas à nous soucier des clés permettant à la CLI de se connecter à votre compte. Pour l'associer,
00:16:56vous vous rendez sur leur site officiel, copiez la commande d'installation pour l'agent que vous utilisez,
00:17:01et l'exécutez dans le terminal ouvert dans le dossier de votre projet. Ensuite, vous lancez la commande /mcp
00:17:05dans Claude Code pour voir qu'il est connecté, mais vous ne pourrez pas l'utiliser immédiatement car il n'est pas
00:17:10connecté à un compte. Une fois que vous sélectionnez Authentifier, vous êtes redirigé vers le navigateur pour vous connecter,
00:17:15et le MCP est alors opérationnel. Dès que le MCP est branché, Claude Code charge la compétence
00:17:20et se met au travail sur l'application. Il a apporté de nombreux changements et exécuté des tests sur ces requêtes de base de données
00:17:25afin de garantir la création de la meilleure version possible. Il a aussi pris soin de verrouiller toutes les zones qui
00:17:30ne devraient pas être accessibles à n'importe quel utilisateur, et ce, grâce aux consignes de la compétence. C'est aussi simple que cela :
00:17:34Supabase gère l'intégralité du backend pour vous, entièrement via la compétence. L'application est désormais bâtie
00:17:39et pleinement fonctionnelle. Il ne reste plus qu'une seule étape : le déploiement, c'est-à-dire la mise en ligne
00:17:44pour que n'importe qui puisse l'utiliser. Mais nous n'allons pas aborder cela ici, gardez donc un œil sur
00:17:49les prochaines vidéos où nous détaillerons le sujet. La compétence que nous avons présentée fait en réalité partie d'un ensemble
00:17:53de design plus vaste que nous utilisons en interne dans nos projets. Si vous souhaitez accéder à ce système,
00:17:59vous pouvez le retrouver au sein d'AI Labs Pro, qui est notre communauté. C'est également là que vous trouverez
00:18:04d'autres compétences et ressources présentées dans nos vidéos, ainsi qu'un espace pour échanger avec notre
00:18:08équipe. Si vous appréciez notre travail et souhaitez soutenir la chaîne, c'est la meilleure façon de le faire.
00:18:14Le lien se trouve dans la description. C'est la fin de cette vidéo. Si vous souhaitez soutenir
00:18:18la chaîne et nous aider à continuer à produire ce genre de contenu, vous pouvez le faire en utilisant le bouton Super thanks
00:18:23ci-dessous. Comme toujours, merci d'avoir regardé et à très bientôt pour une prochaine vidéo.
00:18:28À bientôt !
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기