J'ai fusionné Google Stitch et Claude Code (le résultat est INCROYABLE)

Les meilleurs modèles d'IA au monde, c'est bien, ça génère du code, mais en général, c'est du code qui est dégueulasse. Le visuel, les designs sont complètement moches. Le marché a ce problème déjà depuis des années et aujourd'hui, j'ai une solution pour régler ce problème, et je dis bien gratuitement.

Donc, je vais te parler d'une combinaison que j'appelle dangereuse, c'est une combinaison entre Google Stitch et Cloud Code. C'est le combo qui tue aujourd'hui Figma et qui tue à peu près entre 3 à 5 métiers. À la fin de cette vidéo, tu vas comprendre ce qu'est Google Stitch 2.0, tu vas pouvoir enfin maîtriser le workflow hybride entre design et code, logique et visuel, et créer un site pro en quelques minutes.

Le problème, c'est ce qu'on appelle l'AI slope. Ça fait des années que je demande à Cloud, à ChatGPT de générer des interfaces, des éléments, des composants, etc. Et ils ont toujours été moches, toujours galérer à itérer, à dire "modifie, améliore, change de design". Voici une capture d'écran d'exemple, voilà. Les IA, elles ont toujours été fortes en logique, voilà, depuis des années, on le sait. Cloud, c'est encore mieux aujourd'hui, c'est le meilleur numéro 1, 4.6 Opus Thinking, voilà. Mais les interfaces, elles sont génériques, moches et sans identité. Alors qu'avec toutes les polices d'écriture qu'il y a dans le monde, les codes couleurs, les contrastes, les frameworks, les composants, on pourrait faire des choses vraiment exceptionnelles. Et ça, ce problème, c'est ce qu'on appelle l'AI slope.

Si on fait un avant-après, donc avant, ceux qui utilisaient Figma, alors pas tous bien sûr, mais je sais qu'il y en a beaucoup d'entre vous qui utilisent Figma ou qui l'ont déjà utilisé, ça peut être trop complexe ou trop chiant avec du CSS infini et le résultat, c'est qu'il y a de la frustration. Donc, si tu ne l'as jamais utilisé, tant mieux, tu n'as pas connu cette frustration. Par contre, maintenant, après cette vidéo, tu vas pouvoir utiliser Google Stitch qui va générer le design, Cloud Code qui va câbler le back-end, donc connecter les API, faire la logique par exemple mathématiques de la logique conditionnelle, tout ce qui va être back-end, c'est Cloud Code qui va le faire, et tout ce qui va être design, ça va être Stitch. Et on fusionne les deux, et tu verras, ça va être vraiment exceptionnel. Et le résultat, c'est que tu vas avoir un site professionnel en quelques minutes.

Pourquoi cette vidéo, c'est un tournant majeur sur le marché ? Parce que grâce à Stitch, on peut enfin faire des sites qui sont design et qui sortent du lot, que Cloud ne peut pas faire nativement. Si tu lui dis "fais un site moderne", "un site encore meilleur", "une police plus lisible", ça ne veut rien dire. Là, en fait, tu vas voir qu'on va fusionner deux outils hyper puissants. Il faut quand même en parler parce que le marché décide, le marché, on s'adapte ou on crève. L'action Figma, elle a plongé, voilà, donc elle a pris moins 60% en 6 mois et elle a pris moins 12% en 2 jours après Stitch 2.0.

Bon, maintenant, tu vas dire, bon, c'est bien ce que tu me racontes avec ton Stitch, etc. Qu'est-ce que c'est Stitch 2.0 ? C'est tout simplement un outil gratuit de Google Labs. Tu peux décrire ce que tu veux faire en texte. Tu peux lui donner aussi des images en contexte, des images d'inspiration. Et l'IA va te générer une interface complète en quelques secondes. Donc, ça ressemble à ça, c'est super simple. Tu vois, il y a un chatbot, on peut venir choisir si on veut faire du web, de l'app, modifier les modèles, faire du redesign, etc. Mais ça, on le verra par la suite, c'est tout simplement ça. Donc, là, cette vidéo, elle est câblée par rapport à la dernière mise à jour qu'ils ont pu effectuer, ce qui date du 18 mars 2026, comme tu es en train de le voir. Ce qu'ils ont rajouté, c'est qu'ils ont rajouté un mode voix natif, des prototypes instantanés, des design systems et des design MD pour s'adapter forcément à quoi ? À ce que le marché a décidé, soit Cloud Code. Un Canvas AI natif, donc natif IA. Et surtout, un agent de design intelligent.

Donc, bien sûr, le monde en parle sur X, il y a des pépites. Je peux te montrer par exemple à quel point c'est vraiment affolant pour beaucoup de personnes. J'ai déjà entendu une conférence récemment où une personne disait : "Oui, moi, je suis graphiste, j'ai peur, etc., comment faire ?" Mec, adapte-toi, rends-toi compte de là ce qui est en train de te tomber dessus. Il faut absolument que tu pivotes, que tu trouves une solution. Bon, regarde un petit peu. On part de ça, donc là, il y a les sources, tu vois directement qui l'a publié. Le mec part d'une image gribouillée comme ça de ce qu'il veut, et regarde ce qu'il sort après. Sur Stitch, c'est du Stitch, OK ? Après, on passera dessus. On fera un test, je te ferai une démo cash. Ensuite, on a ça, regarde. Une image, on dirait un CP qui a dessiné ça, et il te sort un site directement. Tu vois, il met le header, il fait des petits dessins, des boutons. Très simple, bam, il te sort ça. Ensuite, t'as d'autres profils qui peuvent designer des sites qui sont vraiment futuristes. Claude, initialement, il ne peut pas faire ça. En tout cas, il ne me l'a jamais fait. Même si tu fais un prompt hyper solide, il faut vraiment, vraiment itérer à fond et tu vas galérer. Ici, pareil. Alors là, c'est même pas un CP, je crois que c'est un enfant de 3 ans qui a dessiné ça. Et du coup, ça permet de faire le site. Il a vraiment bien compris la structuration et il te sort un site. Pareil, lui, il se compte, il fait pas mal de design. Il fait des comparaisons entre Google Stitch et Claude, c'est vraiment intéressant.

Nous, on va fusionner front-end et back-end, et c'est là où c'est puissant. Parce qu'avant, tu avais des designers qui étaient front-end, des designers back-end. Aujourd'hui, tu dois être un architecte hybride qui va faire les deux en même temps. Des sites hyper beaux, propres, avec un back-end solide, structuré. Des automatisations qui tournent, une logique conditionnelle. Du stockage en base de données avec double ou triple back-up. Tu seras vraiment un hybride. Donc, c'est ce qu'on peut appeler le vibe design. On a dit vibe code, etc. Moi, je reprends les termes du marché parce que c'est comme ça qu'on les détermine, même si j'aime pas récupérer des termes comme ça. Mais on peut appeler ça du vibe design.

Moi, je te montre un protocole. Le protocole, c'est : numéro 1, tu vas sur Dribbble, tu captures des designs qui te plaisent. On va le faire ensuite. Tu les donnes à Stitch comme référence visuelle, et l'IA va comprendre la vibe et générer un design unique. On verra avec des variations. Donc, Dribbble, c'est un site, voilà. C'est un petit peu comme un Behance, mais c'est en mieux, et tu peux choisir, tu vois, discover, animation, branding. Moi, je vais dans web design. Et dans web design, on regarde un petit peu des sites. Tu vois, il y a vraiment des sites qui sont assez futuristes. Ou pas forcément futuristes. Tu peux choisir ton style. Tu vois, tu as une barre de recherche. Tu vois, on va prendre par exemple celui-là. J'avais fait une fixette dessus tout à l'heure, je le trouvais vraiment propre. Design, la couleur orange un peu cloud. Tu vois, en plus, c'est les couleurs de cloud, un peu. Donc, on va garder ça. Pas le violet, mais là.

Le workflow complet que moi je te propose, c'est d'utiliser Dribbble à titre d'inspiration. Ensuite, de prendre 2 ou 3 captures d'écran. Si tu n'en as qu'une seule, ce n'est pas très grave, tu partiras sur une seule. Mais au moins avoir une base visuelle. Ensuite, tu vas sur Stitch 2.0, faire le design IA. On le fera ensuite, OK ? Le process de A à Z. Ensuite, tu vas exporter le HTML CSS. Parce que tu verras, pour exporter du HTML CSS, c'est vraiment violent. Et ensuite, en Cloud Code pour faire du backend deploy. Et toute cette méthodologie te permettra de faire un site en production suivant ton arsenal de compétences, les skills, les hooks, ta structuration et ta compétence sur Cloud Code entre une heure à une matinée globale. Vraiment, si tu galères, t'es débutant, en une journée, t'as un site propre. Voilà, backend, frontend, propre, nickel, design, déployé, sécurisé, tout nickel.

On le verra ensuite, mais le design MD automatique, c'est vraiment le grand changement de la dernière mise à jour. Donc, il va pouvoir générer un fichier design MD. Forcément, quand tu as un fichier markdown bien structuré, quand tu vas le mettre dans Cloud, ça va être vraiment de l'or. Il va pouvoir figer tes couleurs, tes polices, tes arrondis. Toutes tes pages futures auront la même identité. Ça pourrait être, en quelque sorte, ta charte graphique. Et là où ça change tout, ce que je te dis, c'est que c'est sourcé, c'est basique. J'ai été graphiste pendant plus de 10 ans, OK ? Ce que ça te coûte normalement, ce que je vais te montrer dans cette vidéo, entre 5 000 pour vraiment le mec le plus débutant, le micro-entrepreneur français qui démarre il y a 19 ans, entre 5 000 jusqu'à 15 000 euros sur le marché. Les sources, c'est coder.com noise en 2026.

Là, tu vas me dire, c'est quoi cette connerie 5 000, 15 000 ? Aujourd'hui, si tu vas avoir un graphiste et un designer pour faire une charte graphique, un design UI et un développement du site avec vraiment une compréhension de ton entreprise, pas juste un "moi, je veux couleur bleue". Non, quelle est ton identité ? Qu'est-ce que tu veux mettre en avant ? Quel est ton caractère ? Une vraie identité compactée dans du front-end, back-end. Tu en aurais pour 5 000 à 15 000 boules. Et aujourd'hui, bien sûr, tu te rends compte que ce que je suis en train de te montrer entre 5 000 à 15 000, tu peux l'avoir gratuitement. Et tu peux faire 350 générations gratuites par mois avec Google Stitch.

Donc, là, je t'ai fait un tableau comparatif. C'est simple. La méthode classique, c'est entre 5 000 à 15 000 balles pour avoir ce qu'on va faire. Stitch, c'est gratuit. Pour le temps, la méthode classique, c'est entre 2 à 6 semaines. Sur Stitch plus Cloud Code, quelques heures. Les itérations sont forcément payantes. Ah, monsieur le graphiste, monsieur le designer, j'aimerais changer ça, le mec va te majorer, c'est sûr. Peut-être pas tout le temps, mais bon, ça va t'emmerder déjà, tu vas perdre beaucoup de temps. Là, c'est illimité. Pour la cohérence, ça va dépendre du graphiste. Peut-être que ton graphiste, il a mangé un truc pas trop bon le matin et l'après-midi, il va te faire un design pourri. Il n'a pas mis le bon code couleur parce qu'il a pris une mauvaise décision. Bref. Et Stitch plus Cloud Code, ça va être du design MD automatique. Donc, ça va pouvoir être déterministe suivant tes choix. Tu auras ton code couleur X propre. Donc, le verdict : la méthode classique, la méthode vieille, c'est lent et cher. Et la méthode Stitch plus Cloud Code, c'est rapide et gratuit.

Donc, pour les débutants, amusez-vous avec Stitch, ce que je te recommande. Et pour les power users, donc vraiment ceux qui veulent aller loin, vous faites le combo Stitch plus Cloud Code. Sachez-le, il y a des MCP, il y a des frameworks, il y a des plugins qui font le design, UI, UX, il y a tout. Mais là, cette combinaison, elle est quand même puissante parce qu'elle est visuelle, on voit ses designs et ça rappelle Figma, en fait.

Donc, avant de passer à la pratique, si tu souhaites apprendre ces outils, automatiser les process de ton business, que tu sois avocat, fiscaliste, entrepreneur, tant que tu as une boîte ou un projet, premier lien dans la description, tu peux cliquer. J'ai un groupe gratuit. Consomme-y la valeur et ensuite, j'ai des offres payantes. Tu pourras voir directement ça tranquillement. Allez, c'est parti.

Donc, le plan d'action a trois phases. Premier, on va sourcing. Donc, c'est parti, on passe à la pratique. C'est là où ça excite tout le monde. Le plan d'action a trois phases. Première, sourcing. Donc, trouver l'inspiration sur Dribbble. Ça, on l'a fait, on a notre design. En plus, il est bancal, en plus, on ne voit pas toute la page. Donc, vous avez vu, on va partir d'une base qui n'est pas vraiment la meilleure. Mais comme ça, on va partir avec des difficultés. Vous allez voir ce qu'on va avoir. Numéro 2, phase de génération. Créer le design dans Stitch. C'est parti. Donc, là, ce qu'on va venir faire, c'est qu'on va venir copier cette image, tout simplement. Voilà. On va dans Stitch. Donc, là, c'est Google Stitch bêta. Tu tapes ça sur Google, tu l'auras. Donc, tu peux choisir ce que tu veux faire. Est-ce que tu veux faire une application ? Est-ce que tu veux faire un web ? On va partir sur un site web app. Donc, on va venir coller l'image, très simplement. Ici, on va pouvoir déterminer un prompt de ce qu'on veut faire. Parce que bien sûr, on a intégré notre image, mais il faudra donner un prompt de ce qu'on veut faire. Choisir le modèle. Donc, là, tu peux venir choisir. Tu as du Thinking 3.1 Pro. Tu as le Redesign aussi, pour redesigner un site existant. Et tu as des idées. Donc, moi, ce que je t'invite à faire, si tu veux partir d'une base, notre méthode là, il y a plein de protocoles, de méthodes. On va utiliser le 3.1 Pro. Il est puissant. Tu peux, bien entendu, utiliser la voix. Tu peux, bien entendu, changer le code couleur ici. Si tu veux partir sur des codes couleurs déjà déterminés, tu as des presets. Ou tu peux laisser Stitch décider. Sauf que nous, on a une image avec le code couleur. On veut le même code couleur, OK ? Donc, on se remet dessus et on va faire un vocal, OK ? "Base-toi sur l'image que je t'ai donnée. Crée une landing page complète sur mon offre de prestations de services, d'intégration, d'automatisation et de système d'intelligence artificielle pour les fiscalistes en France. Garde les mêmes couleurs, le même design et les mêmes polices d'écriture." Notre prompt, il est bon, il est là. Alors, bien sûr, ce qu'il faut faire, c'est des prompts plus qualitatifs. Après, tu peux créer des skills. Tu peux créer des projects. Avec même Cowork, si tu veux, tu peux faire pas mal de combinaisons. Mais là, c'est vraiment pour te montrer à quel point même un débutant peut faire ça. Après, pour aller plus loin, comme je t'ai dit, c'est dans la description. Bon, on va faire Web 3.1 Pro et on va balancer ça. Très simple, une seule capture d'écran et on envoie.

Donc, là, tu vois, c'est un petit peu comme Figma. C'est là où je trouve que c'est vraiment agréable. Ça me rappelle le workflow sur N810. C'est fluide, on peut se déplacer. C'est vraiment qualitatif. Tu vois, alors là, on a un canvas, tu vois, où on va pouvoir avoir notre image de base qui sera là. Donc, pour venir la voir, tu vois, en tant que... Pas forcément designer. Même moi, tu vois, j'étais graphiste. Donc, forcément, j'aime bien. Je trouve que c'est vraiment agréable, OK ? Mais il y en a beaucoup qui aiment ça. Parce que dans Cloud Code, quand tu colles une image ou dans une IA, il faut rouvrir l'image et tout. Là, tu as un canvas, en fait. Donc, tu vas pouvoir faire comme du Figma. Donc, là, il y a la génération qui s'effectue, OK ? Ici, on a le prompt. Tu vois, "base toi", on voit que c'est en train de travailler. OK, ça charge. Il y a le prompt qu'on a pu effectuer. Ici, ça travaille. Donc, là, tu vois, il vient de générer carrément la palette de couleurs. Donc, là, c'est juste démentiel. Tu vois, il te fait une palette de couleurs. Ça, je peux t'assurer... Bon, pour générer ça sur Illustrator sans template, je t'assure que ça, ça prend au moins 20 minutes. Donc, maintenant qu'on a le code couleur, c'est génial. Et là, qu'est-ce qu'il est en train de faire ? Il est en train de générer des screens. Alors, bien sûr, il va s'inspirer de Nano Banana 2, etc., des derniers modèles de chez Google. C'est tout l'avantage de l'écosystème Google pour ceux qui l'aiment bien. Et voilà, il nous a terminé, du coup, notre landing page, comme tu es en train de le voir. Donc, il a fait "tax alchimiste". Donc, il a essayé de mélanger les deux couleurs. Alors, ça ne ressemble pas vraiment à ce qu'on avait. Alors, la police, si elle ressemble un petit peu, les couleurs ne sont pas vraiment ressemblantes. Ce que j'aurais pu faire, c'est que j'aurais pu extraire le code couleur et lui donner. Il peut y avoir des désalignements, mais en tout cas, en fait, ce qu'il a respecté, tu vois, il est parti de cette base sur notre palette de couleurs. Alors, on va peut-être appeler ça notre base graphique, OK ? Mais cette base graphique, il a respecté. Donc, je ne sais pas pourquoi il m'a mis un truc de jeu vidéo comme ça. Il faudra mettre du code, peut-être. Donc, là, on a ça, OK ? Donc, c'est vraiment cool. On a notre première base. Et on va pouvoir faire plein de choses avec cette base. Donc, si je clique dessus, tu vois, sur la partie droite, tu as un menu. Et ce menu, tu as le design system. Tu peux cliquer dessus. Donc, tu peux venir voir les codes couleurs et cliquer dessus, venir les modifier. Donc, c'est notre palette de couleurs qu'on peut venir modifier en temps réel avec les couleurs primaires, secondaires, tertiaires, tu vois, la secondary. Donc, là, tu vois, si je mets du rouge, hop, sur ma palette de couleurs, il me la change et je peux save. Si je ne veux pas save, je sors. Donc, ça permet de venir la modifier. Donc, tu vois, c'est vraiment interactif.

Donc, ensuite, ce que je voulais te montrer, c'est le design MD. On a généré l'image, on clique dessus, on peut avoir le design MD. Imaginons qu'on a un site qui nous convient. Qu'est-ce qu'on a ici ? Eh bien, du text markdown. On peut venir le copier, l'intégrer dans Cloud, dans un fichier markdown, dans un skills. Si tu veux faire un skills spécialisé uniquement pour les designs futuristes, je ne sais pas, par exemple, Web 3, tu fais des sites uniquement pour des clients Web 3, tu viens de faire tes skills, tu vois, par exemple. Donc, ça, c'est vraiment cool. Donc, je te montre quelques fonctionnalités. On ne va pas faire le tour global. Ce n'est pas un tuto Stitch, bien sûr, pour te montrer à quel point ce n'est pas mal. Mais ici, tu vas pouvoir faire pas mal de choses. Donc, cliquer sur modifier, par exemple. Tous les blocs sont modifiables. Tu peux venir ici cliquer et mettre, tiens, je vais mettre "Accueil". Je ne vais pas mettre "homme". C'est quoi "homme" ? Je ne comprends pas. "Accueil". Tu peux venir modifier. Chaque bloc est modifiable. Tu fais "démarrer". Tu vas "démarrer" à la place de "commencer". Tu fais cette modification en direct, en temps réel. Et ça te permet, du coup, d'éditer. Tu vois, c'est vraiment quand même puissant. On soit d'accord. Aujourd'hui, il n'y a pas d'autre outil qui fait ça à ce niveau-là et qui a le bagage de Google derrière.

Bon, maintenant, je te montre un truc parce que là, tu te dis, bon, c'est logique. Tu sais, on a tous fait du mid-journey, des générations d'images. Une seule génération, ce n'est pas suffisant. Eh bien, on va faire un clic droit sur notre génération. On va cliquer sur Variants. OK ? Et on va faire Custom. Donc, tu peux faire plusieurs variantes. Les variantes de couleurs, les variantes d'images, de texte. Mais tu peux faire un Custom. Si tu ne sais pas trop quoi faire, tu vas faire un Custom. Tu vas choisir le nombre que tu veux. Tu peux venir mettre des instructions additionnelles. Par exemple, le code couleur, c'est ça, ou ça, ou ça. Tu fais ce que tu veux. J'ai envie de modifier. Je change le copywriting. Tu dis ce que tu veux. Nous, on va faire "Explore" et 3. Et maintenant, on va faire "Générer les variations". Voilà. Et maintenant, qu'est-ce qu'il va faire ? Il va travailler tranquillement. Je vais aller me faire un café. Et il va me générer 3 variations en partant de cette base. Pourquoi de cette base ? Parce que je l'ai sélectionnée. C'est un peu comme, si tu veux, un calque. Je sélectionne ce calque. Quand je fais clic droit, je peux faire plein de choses dessus. Il y a plein de fonctionnalités, tu vois. Après, ce n'est pas l'objectif ici. Mais on regarde des tutos sur YouTube, des tutos Stitch complets, etc. Ce n'est pas le but ici. Moi, c'est le but business. Ensuite, on va transplanter ça dans Code. Et ensuite, on va transplanter ça dans Cloud Code. Donc, là, je te montre un petit peu la fonctionnalité principale qui va nous servir. Parce que nous, derrière, on va faire du back-end. Donc, quand on clique sur cette génération, qu'est-ce qu'on va faire ? On va cliquer sur More. On peut voir le code. Mais surtout, nous, ce qui nous intéresse, c'est exporter. Parce qu'imaginons que ce design, il nous plaît. OK. On va partir de cette base. Bien sûr, on va faire des modifications, tu vois. Peut-être qu'on va modifier certains éléments, tu vois, pour le cabinet, etc. Et on va pouvoir exporter plusieurs choses. En Jules, en Zip, en Clipboard, en MCP, en Project Brief ou en Instant Prototypes. Eh bien, nous, qu'est-ce qu'on va faire ? On va l'exporter, par exemple, en Zip. Exportation. Donc, quand on l'a exporté, qu'est-ce qu'on a ? On a le screen, OK. Donc, on a le screen complet qui peut nous servir d'appui. Et on a le design MD. Nickel.

Donc, là, tu vois, il a généré des variantes. Alors, il y en a certaines, des fois, il peut péter les plombs. Tu vois, il a fait un site vraiment pas bon. Donc, ça, on clique dessus, Supprimer. Ça, c'est pas mal, tu vois. Alors, il est resté dans les couleurs. T'as dû donner des instructions. Après, il faut s'entraîner, il faut le tester, tu vois, pour créer plein de modèles. Alors, je ne sais pas pourquoi il est parti... Ah, là, il est parti complètement en steak. Bon, ça peut arriver. Bien sûr, le prompt initial est important. Et on part d'une image, quand même, qui n'est pas exceptionnelle. Donc, là, c'est pas top. On va relancer une variation, parce que, bien sûr, on a de la génération derrière. On va changer Layout. Alors, on va générer une variation. Et si elle ne nous convient pas, on partira sur cette base. Après, bien sûr, chacun doit tester, doit mettre ses prompts, faire son prompting. Mardan, Jason XML, on peut faire plusieurs types de prompting. OK, donc, là, on a une autre version. Tu vois, il a fait une version un petit peu différente. J'aime un peu mieux. Alors, ce truc de gamer, là, après, on changera l'image. Mais ça change tout. Franchement, le fiscaliste, comme ça, mi-alchimiste, mi-robot, c'est un petit peu... C'est marrant. Bon, imaginons qu'on va partir sur cette base. OK. Donc, on va supprimer toutes les autres. Bien sûr, je ne t'invite pas à supprimer. Moi, je suis un chaotique. Mais, voilà, déplace-les. Essaie de te faire un petit workflow propre, tu vois. On garde ça. On garde notre image de base. Nickel. Et là, ce qu'on va venir faire, imaginons qu'on a une bonne base. On va cliquer sur More. On va cliquer sur View Code. Ici, on a un code. Et qu'est-ce que c'est, ce code ? Eh bien, c'est le code de la page qu'on a généré. Parce que si on vient regarder directement le HTML, "fiscalité 4.0, automatisation, nous concevons des solutions d'intégration". Qu'est-ce que c'est ? "Fiscalité 4.0, automatisation, nous concevons des solutions". Donc, on a le code. Et en partant de ce code, qu'est-ce qu'on va faire ? Donc, View Code. Alors, bien sûr, tu peux aussi Download. Ici, regarde, tu fais Download. Et tu te retrouves avec le HTML qui est présent. Donc, là, tu ne le vois pas s'afficher. C'est normal parce que c'est la prévisualisation. Mais si je l'ouvre dans un navigateur, je l'ai dans un navigateur. Là, je suis sur une page. Tu vois, c'est directement créé. Donc, si je veux modifier, par exemple, ce HTML, je peux venir faire de l'inspect. Voilà, de l'inspect élément. Je vais venir changer l'automatisation. Et j'ai marqué "Coucou". Voilà, je fais Entrer. "Coucou AIA". Tu vois, on peut venir le modifier. C'est en temps réel. Bref.

Donc, maintenant, on va changer de dimension. Là, on était designer. On était code couleur. On était visuel, vivacité d'un site web, etc. Ok, bon. C'est de la landing page. On est bon. Maintenant, on va retourner sur View code. On va copier ce code-là. Et on passe sur la dimension Cloud Code. Et à partir de là, on change de métier. Donc, c'est parti. Nous sommes dans un nouveau repo. Donc, là, je vais zoomer pour que vous puissiez le voir. On va lancer un Cloud Update au cas où. Et on va lancer un Cloud. Est-ce qu'on a fait la dernière mise à jour ? Oui, on est à jour. On est à jour. On va lancer Cloud. On va Trust le folder. Là, je suis dans un dossier qui s'appelle KO à supprimer. Il est vide. Tu vois, c'est un repo qui est complètement vide. Maintenant, qu'est-ce qu'on va faire ? On a du code HTML. On a copié du code HTML. Donc, ce que je vais venir lui dire. Déjà, je vais venir faire deux points. Et je vais venir lui coller. Donc, là, forcément, tu vois plus de 325 lignes. OK. Et ce que je vais venir, je vais sauter une ligne. Je vais passer en mode plan. Pour que tu puisses savoir, j'ai déjà bypass les permissions dans mon settings JSON initial. Donc, c'est pour ça que quand je switch de mode, on ne voit pas le bypass. Mais nativement, je l'ai. Donc, quand je passe en mode plan, je suis quand même en bypass. C'est pour ne pas avoir un texte rouge qui s'affiche. Donc, là, je vais lui dire : "Base-toi sur le code HTML que je vais te donner et transforme le site landing page en multi page. Donc, plusieurs pages. Ensuite, tu vas ajouter une nouvelle page qui n'existe pas dans le HTML que je t'ai donné, qui va être génération de devis. Tu vas l'intégrer et tu vas créer un code en utilisant Next.js." Alors là, j'arrête la transcription. Vous savez pourquoi ? Parce que quand j'utilise des termes, là, tu vois, il est en train d'essayer de m'avoir. Parce que là, je ne peux pas remodifier. Je ne peux pas modifier ce texte-là. Donc, je vais lui dire : "Utilise deux points." Je vais écrire à la main. Parce que quand je dis Next.js, etc., il va faire n'importe quoi. "Utilise Next.js / React." Et on va venir lui dire. Alors, j'aime bien mettre des tirés comme ça. "Intègre un chatbot sur une page." Alors, tu vois, le prompt, c'est un bordel. Heureusement que j'ai des skills qui vont recalibrer, etc., des garde-fous. Sinon, c'est n'importe quoi. "Intègre un chatbot sur une page en intégrant, enfin, en ajoutant une API Open Router du modèle." Deux points. Et on va venir lui donner le modèle. Donc, là, modèle. On va venir chercher un petit Gemini. Parce que forcément, écosystème Google. On va jouer avec ça. On va combiner. Alors, un modèle que j'aime beaucoup, c'est le 3.1 Flashlight Preview, pour son coût, pour sa fenêtre de contexte de token, pour sa compréhension de longues instructions. Il est quand même assez solide. Et on va lui dire ça. Alors, bien sûr, j'ai déjà des instructions. J'ai déjà des skills qui sont entraînés. Qui savent comment intégrer Open Router, comment faire ça. Donc, si vous faites ça sans des instructions, sans un Cloud MD initial propre, vous n'allez pas avoir les mêmes résultats. C'est logique. Mais c'est pas grave. C'est pour vous montrer, en gros, la fusion avec le backend. Bon, du coup, il va se mettre en mode Superpowers. Il prépare son plan. Explorer le contexte de projet. Poser les questions de clarification. Bon, forcément, libre arbitre se veut. Proposer 2-3 approches. Présenter le design. Écrire la doc de spec. Et transition vers l'implémentation. Donc, là, maintenant, tu vois ce qui est cool. Bon, c'est un plugin. C'est le plugin Superpowers. Que j'en ai déjà parlé. Je l'utilise pas tout le temps. Mais là, sur ce projet-là, je l'ai activé. On se rappelle. Alors, attends. Je m'en rappelle même plus du design du site, OK ? Bon, l'espèce de design, d'ailleurs, c'est juste pour montrer qu'il y a quelque chose. Mais j'arrive à, mentalement, supprimer ce personnage de ma tête. Donc, je vois que le site est quand même pas mal. Intégration transparente. Là, on peut mettre une image. On peut mettre des animations. Ça reste quand même cohérent. Et surtout que c'est une landing page. Et ce que je lui ai demandé, c'est de créer multi-pages. En partant d'un seul HTML pour faire du multi-page. Il y a intégration API externe. OK. Donc, veux-tu découper ? 5 pages. 4 pages. 6 pages. Il me recommande 5. Allez, on part sur 5. On n'est pas là pour faire un projet hyper calibré. C'est juste pour la démo. Bulles flottantes. Widgets en bas à droite sur toutes les pages. Comme un chat support classique. Allez, on va faire ça. On va se faire un chatbot, au final. Je voulais qu'il fasse un chatbot intégré dans une page. Il me propose un chatbot en bas à droite. Allons-y. Ensuite, pour la page de vie, quel type de formulaire veux-tu ? Formulaire classique. Cabinet. Voilà. Donc, pour la page tarif qui n'existe pas dans le HTML, quel format ? 3 plans. Sur mesure. Gris. Allez, 3 plans. C'est un chat libre-arbitre, mais il ne fait que recommander, recommander, recommander. Il avance. Là, ce qui est cool, c'est que j'ai mis une fonctionnalité dans ma status line. Ce qui me permet de voir le coût que ça me coûte. Alors, ça ne me coûte pas ça. Parce que, bien sûr, j'ai l'abonnement à 200 balles par mois de Claude. Mais c'est pour voir, en gros, le coût de génération. Pour l'instant, on n'a payé que 61 centimes. On ne va pas dépasser les 5 dollars pour ça. Alors qu'initialement, ça coûte entre 5 à 15 000 boules. OK. Donc, là, il me dit quoi ? Quelle approche préfères-tu ? Pour le formulaire. Bon, s'il me propose du chat CNUI plus du Tailwind, c'est parce que je l'ai déjà entraîné dans mes skills. Et là, il a été trop influencé par mes skills. Je ne lui ai pas laissé d'ouverture. Donc, on va quand même faire ça. Ça peut causer des erreurs. Et là, c'est un problème, du coup, d'instruction déterministe. Donc, là, il va me présenter le design. Pour l'instant, tu vois, notre repo, il est vide. Il n'y a rien du tout. Il est en train de faire sa préparation. La préparation, c'est très important. Il faut passer beaucoup de temps avant. Dès que tu appuies sur lancer le plan, tu as passé au moins une heure derrière à réfléchir, à préparer ton plan, on va dire. Au minimum. Et j'en ai certain en interne. Je peux te citer Amine, qui est vraiment un alien dans les membres élite. Lui, il passe entre 3 à 4 jours. Avant d'appuyer sur le bouton "commencer à développer", il passe 3 à 4 jours à réfléchir, à poser des questions, à faire de la contextualisation à un niveau vraiment suprême. Donc, là, bien sûr, il va faire appel à Context7 pour aller vérifier les librairies sur Vercel, Next.js, chat CN et tout ce qu'il va importer. Et même Open Router, c'est nickel. Comme ça, il n'y aura pas force. Il y aura beaucoup moins d'erreurs, on va dire, grâce aux documentations en direct, en temps réel, des MCP, des documentations API. Du coup, il y aura moins d'erreurs. Ça va être nickel. Pour l'instant, on est propre. 77 centimes. On est à 5% du contexte sur la fenêtre d'un million. En input token, on est à 7000. Et en output, on est à 5000. Bien sûr, on n'a rien généré encore. C'est vide. Là, c'est que le travail de préparation. Mais franchement, ce n'est pas affolant. Tu ne vas pas péter une fenêtre de contexte avec ça. OK, donc la doc de spec, elle a terminé. Il ne manque plus que la transition vers l'implémentation. Forcément. Le plan est prêt. Nickel. Donc, 5 pages. Accueil, services, à propos, tarifs, devis. Alors attends, on va lire avant d'appuyer quand même, pour comprendre au moins la base. OK. Next.js. 15 approuters. TypeScript. Tailwind. Thème exact du HTML. Chatien UI. Formulaire plus chatbot. Chatbot flottant global via Open Router Streaming. Donc, là, avec la clé API que je lui avais demandé. Enfin, avec le modèle API. Gemini 3.1 Flashlight Preview. Le formulaire de devis classique, avec une estimation côté client. Donc, pas de backend là-dessus. Et 5 phases. Donc, foundation, page contenue, devis, chatbot, polish. Donc, il a bien structuré. Et on n'a plus qu'à appuyer sur yes, auto accept, edit. Et là, café. Et on va surtout, pendant que le café chauffe, voir en combien de temps il va le faire. On part de 6 minutes. OK. Donc, là, à 6 minutes, on fait un ancrage. Il a commencé. On va voir quand est-ce qu'il aura tout terminé, et qu'il sera sur le polish et le build. Bon, on est toujours à la phase 1. Ça fait déjà 4 minutes qu'il travaille. On va le laisser tourner. Il fait une vraie préparation. Pour l'instant, on est à 2,61$. Bon, on sera peut-être entre 5 et 10$, je pense, pour le résultat final. On va essayer de s'amuser, du coup, ici, pour faire des variations sur Stitch. Ça permet un petit peu de gaspiller des crédits. On va faire 5 variations. On ne va pas faire explore. On va faire reimagine. Pour réimaginer. Voilà. Des designs totalement différents. Et on va les lancer. Parce qu'il est vrai que là, il est en train de m'énerver, cet alchimiste-là. Ça n'a rien à voir avec la fiscalité de l'automatisation. Tu vois, là, j'aurais bien aimé plutôt des designs avec des espèces de particules, une lumière qui s'inspire de ça. Là, il a fait une lumière, peut-être, d'accord, mais ce n'est pas non plus du gaming. Le mec qui fait de la fiscalité d'automatisation, il y a... Je pense qu'il ne va pas mettre ça. Il faut qu'on casse l'ancrage. Là, il y

À un petit ancrage mauvais, je le sens depuis le début. Il faut que ça dégage, ça.

Tu vois, bien sûr, rien ne t'empêche de retourner sur Dribbble à ce moment-là, de repartir. Imaginons là, tu te dis, bon, j'aime bien. Alors, ça, c'est animé, tu vois. Tu peux venir ici, par exemple. On va rester sur ça animé. On va prendre un screen à ce moment-là. J'aime bien. Alors, hop, un screen ici. On va récupérer cette base-là, en faire une capture. On peut sortir. Qu'est-ce qui t'empêche de venir ici, de coller l'image ? Hop, tu fais... En fait, tu te fais un... On peut appeler ça un mood board, mais un mood board concret, tu vois.

Ce qu'on va faire, c'est que du coup, ça, alors, on peut venir CTRL-C, CTRL-V pour le coller, enfin, copier-coller. Tac, on peut venir cliquer droit et si on veut, on peut même en générer autre chose, tu vois, une preview, par exemple, version mobile. On va cliquer dessus pour voir ce que ça donne. Tu vois, ça te montre exactement à quoi ça ressemble, ton site en mobile. Clique droit, tablette. Donc, le responsif est quelque chose qui était chiant à l'époque à faire avec WordPress, voilà, avec Elementor, etc. Maintenant, c'est des choses qui sont natives, c'est des maths, quoi. On peut revenir sur le desktop. Voilà, nickel.

Donc, bien sûr, tu peux aussi l'étirer. C'est ça qui est vraiment cool, c'est que là, si je veux, je peux l'attraper comme ça, dans un coin. Alors, il faut bien y aller, ici. Et je peux venir voir le responsif en temps réel. Tu vois, ce n'est pas une image qui a été générée avec Nanobanana. Ça te permet de voir directement ton code, ton code HTML, en temps réel, dans un Canva, en fait. C'est ça qui est cool.

Tu vois, si un mec, il a un format... Imaginons, il y a un nouveau mobile qui sort, le gars, il a un mobile comme ça. Alors, attends. Demain, la nouvelle tendance, il y a des mobiles comme ça, j'en sais rien, imaginons. Le gars, il va voir ça, quoi. Il va voir l'alchimiste en gros, il va voir ce texte en bas, ça va être pourri. Ok, donc là, tu vois, il est reparti. Alors, je ne sais pas pourquoi il a fait une fixette. Tu vois, là, on a des bases qui sont quand même différentes. Alors là, attends, il faut que je revienne avec ma base. Ça ne va pas du tout, là. Hop, on va le remettre comme ça. Bon, on est parti de cette base-là, comme tu le vois. Regarde, il nous a quand même généré... Ah, tu vois, il nous a fait un truc qui n'a rien à voir, là. Confidentiel, fiscalité, c'est pas mal, ça. Ça fait un design qui est totalement différent, mais ça permet de tester. Tu vois, celui-là, j'aurais peut-être dû partir sur un truc plus comme ça, plus centralisé. C'est pas mal, ça. J'aime bien. Ensuite, on a ces deux modèles-là. Bon, là, il y a un dépassement. Rien n'empêche de venir le modifier. C'est vraiment pas mal. Franchement, c'est du très, très lourd.

Bon, qu'est-ce qu'il me dit de ce côté-là ? Ah oui, putain. En plus, je perds du temps parce que... Ah, putain, il a allé vite, là. Je perds du temps parce que deux fois d'affilée, ça m'est arrivé que je n'ai pas appuyé sur OK. Donc, techniquement, là, je suis à 14, mais normalement, je suis à 10. Donc, on va dire que ça fait un peu moins de 10 minutes. Forcément, projet sous convention Next.js. Comme j'ai des skills bien entraînés, il m'a fait un readme automatiquement, un Cloud MD, un agent MD. Et ensuite, on va le documenter. Alors, je vais préparer ma DOCS. Alors, là, j'ai fait une connerie. Je vais faire le slash ici. Je vais préparer mon skills, ma commande MD documentation. Dès qu'il a terminé, il va documenter. Tu vois, parce que là, il a fait une DOCS. Super powers. Mais logiquement, dans le dossier DOCS, il doit créer d'autres documentations. Architecture, stack technique, API, etc. Pour vraiment comprendre l'environnement global pour qu'il puisse travailler sans me faire perdre du contexte. Parce que là, regarde, ça nous a coûté 4,58 $. On est à la dernière étape. Donc, ça va nous coûter à peu près 5 $ pour l'AV1 du projet. Voilà. Ensuite, 10 % de fenêtre de contexte. C'est pas mal.

Là, il a trouvé une erreur. Chatien V4 a changé l'API. Donc, forcément, merci à Context7 qui recontextualise les bonnes documentations, les bonnes architectures de librairie. Et il met à jour ça en temps réel, en loop. Je lui ai même pas dit il y a une erreur là, corrige, nan, nan, nan. Il le fait tout seul, tu vois. Il a enlevé le AsChild. Il l'a modifié. Là, on voit qu'il a voulu faire un RMRF, mais moi, je les ai bloqués. Donc, j'ai bloqué ces commandes pour éviter qu'il me supprime des trucs quand je suis en mode automatique, on va dire, automode. Là, tu vois, commande dangereuse bloquée, utiliser une alternative save. Donc, là, il va trouver une alternative plus sécurisée de masquage ou quoi que ce soit, mais il évite de supprimer, quoi. Donc, les garde-fous sont présents, en fait. C'est ça qui est cool. C'est que je sais que dans le source, c'est bien présent. Dans le source, on a l'app. Chaque page a été segmentée, page à propos, page API. Donc, chat, tu vois, c'est le chatbot qu'on va vouloir. Tu vois, page API, chat, c'est le chatbot de vie. Donc, si on doit faire des modifications suivant une bonne documentation bien structurée, une bonne architecture de projet, des skills, et des garde-fous derrière, forcément, ça va être beaucoup plus scalable. Ce projet-là, dans six mois, je peux le maintenir très facilement si je suis toujours dans ma documentation proprement. Sachant que ce n'est pas juste un HTML avec tout écrasé dedans. Ce n'est pas maintenable, ce n'est pas, on va dire, modulable, modulaire, et surtout, scalable.

Donc là, il a terminé le build. Il a buildé. Alors, c'est marrant parce que je ne l'ai même pas demandé de build. Il a build ici. Alors, attends, il m'a dit qu'il a build. Elle est où, l'URL ? Alors, attends, déjà, je vais faire un md-documentation pour commencer. Alors, attends, peut-être que je me trompe. Ah non, il n'a pas déployé sur Vercel. Déjà, je fais un md-documentation. Comme ça, je documente. Ensuite, il faut que je mette Donc, on va y aller. On va fermer juste le SRC. Donc, dans l'env local, ici. Qu'est-ce qu'il attend sur la partie droite ? Alors là, tu ne vas peut-être pas le voir, mais je vais éclater comme ça. Voilà. Là, il est en localhost. Je croyais qu'il avait déployé sur Vercel. Bon, on va venir mettre ma clé API Open Router. On va aller à la générer. Donc, setting, donc API key, création d'une clé API. On va mettre stitch 2.0. On va l'expirer dans une heure comme ça, personne ne pourra me siphonner la tête. On récupère ça. On vient la mettre dans l'OpenAI API key. Et on va pouvoir lancer un npm run dev pour lancer le serveur de développement. Mais, je vais y dire, lance le serveur de développement pour qu'on puisse tester. A savoir que j'ai mis la clé API dans, voilà, on va l'écrire. Bon, c'est juste le problème de la transcription. 2.0.env. Ah non, c'était .env. .env.local. J'enlève l'arrobase parce qu'on ne peut pas taguer des fichiers masqués qui commencent par un . Bref.

Donc là, du coup, forcément, je le mets dans la queue. Donc, dans la liste d'attente. Là, ce que je te disais avec ma commande md documentation qui vient faire une documentation, tu vois, avant, regarde, la doc, elle était comme ça. Il y avait superpowers dedans. Dans superpowers, il y avait les specs. Et les specs, c'est un fichier markdown qui explique, voilà, les specs techniques de taxe alchimiste concernant superpowers. Comment il a utilisé, ok ? Parce qu'il s'est activé. Donc là, tu vois, il a lancé trois agents d'exploration. Un pour la structure du projet. Un pour, du coup, les composants et les pages. Et un, du coup, pour les thèmes d'exploration. Donc là, il y a du projet. Tu vois qu'il est en train d'écrire directement dans le dossier docs. Ça va arriver ici. Donc un readme. Tu vois, ça fait un deuxième readme. J'ai une convention très spécifique. Si j'utilise deux readme, je ne vais pas tout expliquer ici. Mais le backend est solide. Tu vois, il va venir mettre un timestamps quand est-ce que ça a été généré pour la maintenance des end of et la maintenance d'un projet sur le court, moyen et long terme. C'est très important. Donc là, il va venir mettre un timestamp quand est-ce que ça a été généré pour la maintenance des end of et la maintenance d'un projet sur le court, moyen et long terme. C'est très important.

Bon, on a dépassé les 5$ quand même. Là, il écrit les documentations. Bon, on est à 6,67$. Bon, je t'ai dit, on ne va pas dépasser les 10$. C'est vraiment violent. Je te rappelle, pour le contexte, si tu as passé la vidéo comme un sagouin, je ne paye pas ce prix-là. C'est juste le prix initial que ça aurait coûté avec le modèle 4.6 opus 1 million de contexte si j'avais payé. Donc ça me permet de pouvoir avoir une jauge. Tu vois, si je passe du temps pour un client, qu'est-ce qui m'empêche agent et end of. Bon, du coup, comme on a fait une nouvelle session, effectivement, ça a pris, on va dire, 10 minutes pour la génération complète du projet. Je n'ai toujours pas ouvert. On va ouvrir à la fin. Pour ensuite la documentation, on va arrondir. On est à 4,26$. On va arrondir 5 minutes pour la documentation. Donc au total, ça nous a pris au total une demi-heure. En partant de l'idée, si tu n'es pas... Là, je suis en vidéo, ça prend plus de temps. Mais en partant de l'idée initiale, on démarre, on commence sur Dribbble et on finit ici, une demi-heure.

Donc là, il a terminé. Donc là, bien sûr, comme je l'ai mis dans la queue, il me dit, le serveur dev tourne. Donc il a lancé. On va l'ouvrir en local et nous avons notre site qui est déployé. Donc là, on est bien sûr en localhost 3000. On n'est pas... Attendez, il faut que je vous sorte ce mème parce que celui-là, il me fait vraiment rire. C'est le seul mème... Ouais, bro, j'ai lancé ma startup. Bravo, envoie-moi le lien. Http localhost 3000. Alors ce mème... Les gars, préparez-vous parce qu'il y aura tellement des personnes C'est tellement marrant. Ah putain. Donc bref. Donc du coup, on voit qu'on est sur l'URL principale localhost 3000. Je ne vais pas déployer sur Vercel. J'ai mis ma clé API mais c'est juste pour tester en local, OK ? Donc là, on a la page qui a été générée. OK, bon, elle est très simple. On a le chatbot ici en bas à droite. On va voir s'il marche. Coucou. On va lui lancer... Alors là, putain, ça va gêner avec ma grosse tête. Eh bien, bonjour, je suis l'assistant virtuel de Taxalchimist. Est-ce que j'ai fait des itérations ? pour faire une expatriation intelligente en Europe, plutôt pays de l'Est. Qu'est-ce que vous me recommandez ? Après, bien sûr, là, il y a tout un travail d'architecture de documentation. Si tu le fais pour toi, il faut que tu fasses une documentation de ton entreprise, l'essence, les conseils que tu vas donner parce que là, on a lancé un chatbot, le système prompt, c'est de la merde, quoi. Bon, bonjour, pour toute stratégie liée à l'expatriation... Voilà, tu as ton chatbot qui est déjà configuré. OK, bon. Ça, ça marche.

Ensuite, on veut démarrer. Qu'est-ce qui se passe ? On arrive dans la génération de devis. On va faire quoi ? Calcul de TV automatisé. OK. Un volume. Entre moins de 50 écritures. Petit truc tranquille. Nom. On va mettre Mohamed Paul. Mohamed Paul. Moapol à rebase. Mail.com. Voilà, on met n'importe quoi. On met le meilleur numéro au monde. Générer mon devis. Voilà. Estimation de votre devis. 49 par mois. Envoyer la demande. Bon, je ne vais pas le faire. OK, donc je pensais qu'il allait générer un système de création de devis. Je n'ai pas été très clair, sémantiquement parlant. Du coup, il me... Envoyer la demande, ça fait quoi, du coup ? Ah non, ça envoie un email. OK. Bon, ça fait un petit générateur. Je voulais que ça génère un devis, mais je n'ai pas été très clair. Bon, ce n'est pas très grave. C'est quoi, ça ? Auto ? Non, c'était pour la structure. Bon, maintenant, est-ce qu'on a plusieurs pages ? Là, on est sur l'accueil. Logique, on est bon. Sur la page Service, est-ce qu'on change de page ? Oui, on est bien dans Service. On a une page Service, donc c'est bien splitté. Sur la page About ? OK. FEC, TVA, IS. Optimisation fiscale. Pricing. Donc, le triple page. Et puis, on a tout ce qu'il faut. On a même le chatbot. Alors, ça, c'est une extension que j'ai développée pour masquer des pages. Attends, je vais l'enlever. C'est chiant, ça. Voilà, on le dégage. Et là, le chatbot, il est nickel. Alors, bien sûr, il faut l'améliorer. Là, je ne peux même pas scroller. Il y a des bugs et tout. C'est des petits bugs à la con. Mais franchement, j'ai envie de te dire, en one-shot prompting sans itération, tu as déjà ton… Alors, bien sûr, ce mec-là, il faut le dégager. Il commence à me saouler. Après, c'est juste cette modification-là. Je n'aurais pas mis d'image. Moi, j'aurais juste mis un espèce de dégradé futuriste. Bref, donc maintenant, je ne vais pas aller plus loin. Tu vois, on est en Next.js, bien sûr, ici.

Bref, donc on a fait l'idée. Donc, partir du design. On a stitchisé. Donc, on a utilisé Stitch pour pouvoir faire des générations, etc. Faire un petit mood board, préparer notre code couleur. Ensuite, on a backendisé. Donc, on a fait un backend. Voilà, API, route, etc. Et je ne t'ai pas montré. La documentation, elle a été faite ici. Donc, grâce à ma commande slash md. C'est un skills. C'est un skills slash md. Voilà. Donc, on a l'architecture propre. Voilà. Split multifichier. Donc, suivant Next.js, tailwind, open router, estimation de vie par fonctionnalité, un readme, un API md, un architecture md, un commande md, un component md et un overview md. Donc là, je sais que cette méthodologie que j'ai, c'est adaptatif. Ce n'est pas tout le temps la même structure. Si vous copiez ça, ça ne va pas être un très bon résultat, je pense. Bref, tout ça pour dire que là, on a une bonne structure. En 2026, on l'aura atteint. Avec multi-API en instance, connexion, loop et déploiement en ligne. Et ça, en fait, ça va arriver dans quelques mois. Dans un maximum de 3 mois, on aura ça. Et ça marchera à tous les coups. Donc maintenant, on a respecté notre plan. On a fait le tour. On va continuer.

Donc, on refait un petit récap sur du coup ce qu'on a fait. On l'a vu, la phase 1 sourcing sur Dribbble. Dribbble, il y a aussi Godly Website. Il y en a plein. Il y a des captures d'écran. Pinterest, il y en a aussi, etc. Le mieux, c'est d'avoir 2-3 captures d'écran. Là, j'en ai fait avec une seule. 2-3, c'est mieux parce que tu vas pouvoir ajouter un petit peu le système de la couleur bleue. Tu mets blue, tu récupères 2-3. Voilà, génération dans Stitch, on l'a fait. Donc, avec les modes, redesign, design system. On n'a pas fait redesign. On a fait génération 3.1 Pro Gemini OK. Et la phase 3, je te l'ai montré. On a récupéré le code HTML. On l'a foutu dans, du coup, Cloud Code. Dans le terminal, on n'a pas implémenté du super base. On n'a pas fait de base de données. Mais on a fait directement la connexion API externe et un espèce de système de génération de vie qui était complètement pété. Mais bon, j'aurais dû être plus clair. Bien sûr, on peut connecter le MCP Stitch. Il y a un MCP. Donc là, tu peux aller directement GitHub Stitch MCP de David Beast. Tu vois le truc, il a une heure et tu es mis à jour. Donc, il y a un repo. Donc là, tu vois le truc, il est là. Stitch MCP. Voilà, depuis la dernière mise à jour, Stitch prend un tout nouvel intérêt. Tu peux venir le voir ici. Il a été déployé. Donc, documentation, il y a tout qui est expliqué. Troubleshooting, comment ça fonctionne. Tu peux demander à Léal, Donc, les limitations. Franchement, je ne sais même pas pourquoi j'ai mis cette slide. Pourquoi j'ai intermis ? Pourquoi j'ai foutu cette slide ? 350 générations par mois gratuit. Je ne sais même pas si on peut appeler ça une limite. Initialement, on aurait payé minimum 5000 balles pour avoir tout ça. Stitch, il est encore en bêta, bien sûr, il peut avoir des bugs. Le back-end, il est à faire dans CC. On l'a déjà fait, le back-end. Ok, je te montre un exemple. Et la qualité, elle va varier selon le prompt. Donc, le prompt de base qu'on a fait sur Stitch, c'était de la merde. Il faut le savoir. Donc voilà, le résultat, tu l'as vu.

Ce qu'il faut retenir de cette vidéo, c'est que Stitch, ça fait du design gratuit. C'est par Google, c'est solide. 350 générations par mois gratuites. Le vibe design, le terme vibe design qui vient se pluguer avec du vibe coding, donc du vibe documentation, du vibe architecture, du vibe API, connexion route, fonctionnalité, dépendance, interdépendance, etc. Donc, screenshot dribble UI unique. Le design MD qu'on n'a même pas récupéré mais qu'on aurait pu récupérer et mettre dans notre projet aussi, bien sûr, avec les conventions backend que chacun souhaite faire sur VS Code, sur Warp ou sur n'importe quelle IDE que vous utilisez. Cloud Code, il va câbler le backend en quelques prompts. On l'a vu, un prompt, un seul prompt. J'ai juste choisi ce qu'il me proposait. Il m'a laissé un peu de livre arbitre et le combo qui remplace 5 000 balles à 15 000 balles de prestations. Si ça t'a plu, n'hésite pas à liker, partager et commenter si jamais tu connais des MCP, des repos qui sont puissants, qui permettent de faire des designs futuristes, des designs robustes. Et puis moi, je te dis à très vite si tu aimes aider.