Le design par IA vient de franchir un nouveau cap

Françaisالعربية Deutsch English Español हिन्दी Bahasa Indonesia 日本語 한국어 Português Русский 中文

컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

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 !

Key Takeaway

L'intégration de Pencil.dev avec des agents de codage comme Claude Code, optimisée par des scripts de synchronisation personnalisés, permet de transformer radicalement le flux de travail de la conception à la mise en production.

Highlights

Introduction de Pencil.dev comme un pont bidirectionnel innovant entre le design UI et le code source.

Utilisation de Claude Code et du protocole MCP pour automatiser l'implémentation des maquettes.

Développement d'un script de synchronisation personnalisé pour pallier l'absence de mise à jour automatique en temps réel.

Mise en œuvre d'une architecture multi-agents pour générer simultanément plusieurs pages d'un site web.

Optimisation de l'expérience utilisateur via les bibliothèques d'animation GSAP et de défilement fluide Lenis.

Réalisation d'un audit UX automatisé avec des scripts Python pour garantir l'accessibilité et la conformité WCAG.

Timeline

Le défi de la transition du design au code

L'auteur souligne la difficulté persistante de synchroniser les modifications entre les outils de design et le code source. Il mentionne que la plupart des outils actuels, comme Stitch ou l'MCP de Figma, sont soit limités au design, soit au code, sans véritable interopérabilité. Les agents de codage directs obligent souvent à réécrire de larges portions de code lors d'un changement visuel. Pencil.dev est introduit comme une solution potentielle promettant un pont bidirectionnel entre ces deux mondes. L'équipe a décidé de tester cet outil pour voir s'il pouvait réellement fluidifier leur flux de travail créatif.

Configuration technique de Pencil.dev et Claude Code

Pencil.dev est décrit comme un outil de design par IA qui se connecte aux IDE agentiques célèbres pour faciliter la génération de composants et de classes CSS. L'interface est familière pour les utilisateurs de Figma et permet de stocker les fichiers au format ".pen", un format basé sur JSON compatible avec Git. L'équipe utilise l'application de bureau connectée à Claude Code via le protocole MCP (Model Context Protocol). Pour les tests, le modèle Opus 4.6 a été sélectionné pour ses capacités avancées en design et en programmation. Cette configuration permet d'accéder aux modèles d'OpenAI et d'Anthropic directement depuis l'interface de discussion.

Automatisation de la synchronisation avec un script personnalisé

Bien que Pencil.dev soit bidirectionnel, la synchronisation n'est pas automatique et nécessite des requêtes manuelles répétitives. Pour résoudre ce problème, l'équipe a développé un script Node.js utilisant "npm run sync" pour surveiller les modifications du fichier ".pen". Ce script utilise des bibliothèques de surveillance de fichiers et inclut des périodes de pause pour éviter de gaspiller des jetons d'IA. Il est crucial de pré-configurer les permissions de lecture et d'écriture dans le fichier "setting.json" pour éviter que Claude ne reste bloqué. Grâce à cette automatisation, chaque sauvegarde du design déclenche instantanément une mise à jour du code dans le projet Next.js.

Architecture multi-agents et génération de pages

L'une des fonctionnalités les plus puissantes de Claude Code est sa capacité à utiliser un système multi-agents pour paralléliser les tâches de développement. L'équipe a testé cette approche pour générer cinq pages différentes du site web en même temps, assurant une cohérence visuelle totale. Chaque agent s'est vu confier une page spécifique tout en respectant le guide UI et le document de relations produit (PRD) fournis en contexte. En utilisant le raccourci "Command+S", le script de synchronisation a permis d'implémenter l'ensemble des designs dans l'application de manière quasi instantanée. Cette méthode réduit considérablement le temps nécessaire pour passer d'une simple landing page à un site complet.

Animations avancées avec GSAP et Lenis

Pour transformer une mise en page statique en une expérience immersive, l'équipe a intégré la bibliothèque d'animation GSAP via des requêtes structurées en XML. Le format XML est privilégié car les modèles Claude sont optimisés pour analyser ces instructions détaillées concernant les dépendances et les comportements. Après GSAP, la bibliothèque Lenis a été ajoutée pour lisser le défilement et rendre les animations plus organiques et moins saccadées. La complémentarité entre GSAP, qui contrôle les déclencheurs de mouvement, et Lenis, qui gère la sensation de scroll, est essentielle pour un rendu professionnel. Le résultat final est un site web vivant et interactif qui capte l'attention de l'utilisateur.

Audit UX final et conformité aux standards

La dernière étape du processus consiste en un audit UX rigoureux réalisé via un outil nommé Skill Creator. Cette compétence d'audit analyse le site selon une check-list en 9 points, incluant des scripts Python pour détecter les erreurs invisibles à l'œil nu. Lors du premier passage, le site a reçu une note de C en raison de problèmes critiques de contraste de couleurs. Après avoir demandé à Claude d'appliquer les correctifs nécessaires, l'utilisabilité s'est améliorée et le score est monté à B, garantissant la conformité WCAG. La vidéo se conclut sur l'importance de ces finitions techniques pour assurer une navigation fluide et accessible à tous les utilisateurs.

Community Posts

Pencil.dev et Claude Code : Un workflow IA pour fusionner design et code en temps réel

makedream2026년 2월 28일10860

Write about this video