00:00:00Pourquoi le passage du design au code est-il encore l'étape la plus problématique de la création avec l'IA ?
00:00:04On pourrait penser qu'il existerait aujourd'hui un moyen simple de concevoir quelque chose,
00:00:06de le modifier et de voir le code se mettre à jour.
00:00:08Mais tous les outils testés par notre équipe font soit du design, soit du code. Jamais les deux.
00:00:13Stitch et Bolt fonctionnent par requêtes vers du code. Il n'y a pas de canevas de design modifiable.
00:00:17L'MCP de Figma est en lecture seule : l'IA peut extraire des designs, mais pas concevoir dessus.
00:00:22Et si vous utilisez un agent de codage direct, chaque changement de design impose de tout réécrire.
00:00:26Alors, quand Pencil.dev a commencé à faire parler de lui en promettant un pont bidirectionnel
00:00:31entre le design et le code, cela a attiré notre attention. Mais en l'utilisant concrètement,
00:00:35ce pont n'était pas aussi fluide qu'on l'espérait. Ce qui ne devait être qu'un simple test
00:00:40a poussé notre équipe à aller beaucoup plus loin pour rendre ce flux de travail opérationnel.
00:00:44Vous avez probablement déjà entendu parler de Pencil.dev,
00:00:47le nouvel outil de design par IA qui gagne beaucoup en popularité chez les designers ces derniers temps.
00:00:51C'est essentiellement un pont entre les outils de design populaires spécialisés dans la conception
00:00:56et les outils de développement IA adaptés à l'implémentation de ces modèles de design.
00:01:00Il se connecte aux IDE agentiques célèbres et propose de nombreuses fonctionnalités qui
00:01:04facilitent le flux design-to-code, comme la génération de composants,
00:01:08le support de bibliothèques UI et la génération automatique de classes CSS.
00:01:11Pour les habitués de Figma, l'interface est sans doute celle qui s'en rapproche le plus.
00:01:15C'est actuellement gratuit et notre équipe l'a téléchargé pour le tester.
00:01:18Nous avons pris l'application de bureau, ce qui nous a permis de nous connecter
00:01:23aux plateformes IA installées. Nous l'avons reliée à Claude Code, notre outil principal,
00:01:27car Pencil.dev s'appuie en arrière-plan sur des plateformes comme Claude Code et Codex
00:01:32pour fonctionner. Une fois l'application installée,
00:01:36l'MCP a été configuré automatiquement pour Pencil.dev et les outils sont apparus directment dans Claude Code.
00:01:41Dès lors, tous les modèles d'OpenAI et d'Anthropic étaient disponibles dans le chat.
00:01:46Nous avons choisi Opus 4.6 parmi tous les modèles. Cet outil a de réelles capacités de design.
00:01:51Il stocke les fichiers de design au format “.pen” dans le dossier du projet,
00:01:56un format basé sur JSON que vous pouvez suivre avec Git. Mais la fonctionnalité
00:02:01qui le distingue vraiment, c'est sa capacité à servir de pont bidirectionnel
00:02:06entre l'agent de codage et le design dans l'application. Toutefois, ce n'était pas tout à fait ce qu'on attendait
00:02:10d'une synchronisation bidirectionnelle. On imaginait que Claude ou n'importe quel agent synchroniserait
00:02:16automatiquement le design vers le code et inversement, mais ce n'est pas le cas.
00:02:21On a dû lancer la synchro manuellement via des requêtes, car il n'analyse pas
00:02:26automatiquement les sections du design pour les implémenter en HTML. Certes,
00:02:32le résultat était identique au canevas, mais répéter cela après chaque modification était trop lourd.
00:02:37Notre équipe travaillait sur la page d'accueil d'un studio de direction de création,
00:02:41déjà conçue avec Pencil.dev et connectée à Claude Code. À première vue,
00:02:46le site était solide avec une direction créative claire, exactement comme prévu.
00:02:51Nous avons implémenté le design une fois avec Claude et l'avons synchronisé avec notre projet Next.js,
00:02:56mais beaucoup d'éléments sur la page ne nous plaisaient pas et nécessitaient des ajustements.
00:03:01On devait modifier plein de choses de manière répétée, mais on ne pouvait pas demander sans cesse à Claude
00:03:06de synchroniser à nouveau le projet ; c'est une tâche trop répétitive. Pour résoudre ça,
00:03:10nous avons créé un script. Ce script utilise plusieurs bibliothèques JavaScript conçues
00:03:15pour surveiller les changements de fichiers. Il inclut aussi des périodes de pause pour éviter
00:03:20de solliciter Claude inutilement, de gaspiller des jetons et d'atteindre les limites de session.
00:03:25Le but du script est de surveiller le fichier “.pen” contenant le design, et dès qu'une modification
00:03:29est détectée, il lance le CLI de Claude avec une requête pour synchroniser le projet.
00:03:34La période de pause permet de ne pas synchroniser instantanément chaque petite modification.
00:03:39Pour l'utiliser, il suffit de lancer la commande “npm run sync” et l'outil commence
00:03:44immédiatement à surveiller notre fichier de design “.pen”. Si l'on modifie quoi que ce soit
00:03:49pendant que le script tourne, chaque sauvegarde déclenche automatiquement
00:03:54le CLI de Claude et lance la synchronisation du changement vers le projet sans intervention manuelle.
00:03:59Mais avant d'utiliser ce script, il y a une étape préalable. Vous devez pré-configurer
00:04:04toutes les permissions nécessaires pour l'édition, comme la lecture, l'écriture et les appels d'outils MCP,
00:04:10en les ajoutant dans le fichier “setting.json” du dossier “.claude”. Sinon, Claude restera
00:04:15bloqué indéfiniment sur la demande de permission. Sans cela, Claude ne peut rien modifier
00:04:20et ne pourra pas mener à bien l'implémentation. Avec ce script, tout est devenu plus simple
00:04:24car plus besoin de demander manuellement la synchro. Chaque itération était surveillée
00:04:29par le script et envoyée automatiquement à Claude pour l'implémentation.
00:04:34Ce script, ainsi que le code source de l'application, sont disponibles sur AI Labs Pro.
00:04:39Pour ceux qui ne connaissent pas, c'est notre nouvelle communauté où vous trouverez
00:04:43des modèles prêts à l'emploi pour vos projets, liés à cette vidéo et aux précédentes.
00:04:48Si vous appréciez notre travail et souhaitez nous soutenir, c'est le meilleur moyen. Lien en description.
00:04:52L'une des forces de Claude Code est d'utiliser un système multi-agents qui parallélise
00:04:57et accélère de nombreuses tâches. On s'est dit : pourquoi ne pas essayer avec Pencil.dev ?
00:05:02Puisqu'il est connecté via MCP, on a testé l'usage de plusieurs agents pour l'implémentation Next,
00:05:07en laissant chacun travailler sur un aspect différent de l'appli simultanément. L'utiliser avec
00:05:12Claude Code a facilité l'accès à nos fichiers de contexte comme le PRD et le guide UI,
00:05:18que nous créons généralement avant de commencer. Nous devions implémenter les autres pages
00:05:23du site au-delà de la simple landing page. Nous lui avons demandé de gérer cette tâche
00:05:28en confiant chaque aspect à un agent distinct. Nous avons commencé par l'exploration
00:05:33et appelé les outils MCP. Comme il y avait cinq pages, Claude a généré cinq agents,
00:05:39chacun dédié à une page. Peu après, la première version du design était créée.
00:05:44Toutes les pages nécessaires ont été générées en respectant la cohérence avec la landing page,
00:05:48en utilisant les mêmes polices et styles. Une fois le design fini, on a fait “Command+S”
00:05:54et le script a pris le relais pour implémenter automatiquement le design dans l'application.
00:05:58À ce stade, même si le site semblait solide, il manquait quelque chose.
00:06:03Il n'y avait aucun mouvement et il fallait des animations au défilement pour guider l'œil
00:06:08sur ce qui n'était qu'une mise en page statique. Pour cela, on a choisi GSAP,
00:06:14notre bibliothèque favorite pour ses animations JavaScript robustes et sa simplicité
00:06:19pour les animations complexes. On a utilisé pour cela une requête très détaillée en XML.
00:06:26On privilégie le XML car les modèles Claude sont optimisés pour ce format de requêtes,
00:06:31ce qui facilite l'analyse des instructions. La requête contenait les détails de la tâche,
00:06:36les dépendances et des notes importantes ciblant chaque élément spécifique
00:06:41et précisant le comportement de chaque section. Une fois soumis à Claude Code,
00:06:46il a effectué de nombreux ajouts, intégré les composants GSAP et installé la bibliothèque.
00:06:51L'implémentation terminée, on a vérifié le site. Avec les animations, le site était
00:06:56beaucoup plus vivant et interactif. L'expérience utilisateur était totalement différente
00:07:00de la version précédente, qui était désespérément statique. Cette requête est aussi
00:07:04disponible sur AI Labs Pro pour vos propres projets. Par ailleurs, si vous aimez
00:07:09notre contenu, n'hésitez pas à cliquer sur le bouton Hype, cela nous aide énormément.
00:07:14Même après avoir ajouté les effets visuels avec GSAP, nous avons ajouté une couche
00:07:19avec Lenis par-dessus le défilement initial. Lenis est une bibliothèque open source
00:07:25très populaire pour créer un défilement fluide et immersif sur les sites web.
00:07:30Vous vous demandez sûrement pourquoi utiliser une autre bibliothèque après GSAP,
00:07:35mais Lenis et GSAP sont en fait très complémentaires. GSAP contrôle ce qui se passe
00:07:39quand on scrolle, et Lenis contrôle l'aspect et la sensation du défilement lui-même.
00:07:44Sans Lenis, le scroll est saccadé ; avec, la page coule naturellement et les animations GSAP
00:07:49semblent plus organiques. Nous avons donc rédigé une autre requête détaillée pour cela.
00:07:54Nous avons suivi la même approche XML que pour GSAP. La requête Lenis se concentrait
00:07:59sur l'amélioration des animations de défilement existantes. Elle listait les dépendances,
00:08:04définissait les instructions et décrivait précisément les éléments, le placement
00:08:09des animations et le comportement souhaité, en finissant par les règles. Nous l'avons soumise
00:08:13à Claude Code qui a modifié l'ensemble du dépôt. Une fois tout implémenté,
00:08:18le site s'était nettement amélioré. Le changement majeur était la fluidité du défilement,
00:08:23rendant la navigation sur le site beaucoup plus immersive. Le site étant construit
00:08:28et doté de toutes ses fonctionnalités, il ne restait plus qu'à vérifier sa conformité
00:08:32aux standards UX avant de terminer. Pour cela, nous avons créé une compétence via
00:08:38le Skill Creator appelée “Audit UX”. Cette compétence vise à vérifier la qualité des éléments UI,
00:08:44à examiner divers aspects du site et à s'assurer que tout respecte les normes UX.
00:08:49Elle comprenait plusieurs phases : collecte du contexte, analyse d'une check-list en 9 points
00:08:54et phase de rapport avec un score par critère. Elle incluait aussi des références
00:08:59sur la check-list UX détaillée et des scripts Python destinés à détecter
00:09:04automatiquement des problèmes d'UX que l'œil humain pourrait rater.
00:09:08L'audit a compilé les problèmes, signalant deux points critiques et plusieurs défauts majeurs
00:09:14et mineurs. Le point critique concernait le contraste des couleurs. Le score initial
00:09:19était un C. Après avoir détaillé les changements requis, nous lui avons demandé
00:09:24d'appliquer les correctifs. Une fois terminés, bien que le site n'ait pas radicalement changé
00:09:29visuellement, l'utilisabilité s'était grandement améliorée, facilitant la navigation
00:09:34et assurant la conformité WCAG. Un nouvel audit a fait passer la note de C à B,
00:09:40signifiant que tous les problèmes majeurs étaient réglés. Voilà qui nous amène
00:09:45à la fin de cette vidéo. Si vous voulez soutenir la chaîne et nous aider à continuer,
00:09:50vous pouvez le faire via le bouton Super Thanks ci-dessous. Comme toujours, merci
00:09:55d'avoir regardé et à la prochaine !