00:00:00Paper est peut-être l'un des outils de design les plus en vogue actuellement pour les designers orientés IA,
00:00:05et les flux de travail par agents IA.
00:00:06Il vous permet de concevoir ici sur un canevas et de le porter en code,
00:00:11mais aussi de faire l'inverse.
00:00:13C'est donc un flux de travail complet et bidirectionnel.
00:00:15Je vais vous montrer comment l'utiliser et comment l'installer.
00:00:17De plus, cela fait partie de ma série de 30 jours sur le design natif pour l'IA,
00:00:22où vous êtes mis au défi de prendre ce design juste ici,
00:00:25sur lequel nous avons travaillé lors du défi précédent,
00:00:27et d'utiliser Paper pour intégrer et compléter cette section du design.
00:00:32Avant de passer à ce défi et à la manière d'y participer,
00:00:36laissez-moi vous montrer comment installer concrètement Paper.
00:00:38Rendez-vous sur paper.design, dans la section Docs.
00:00:41La première chose à faire est de télécharger l'application de bureau Paper.
00:00:46C'est une application simple et rapide.
00:00:48Ensuite, utilisez-vous Cursor ?
00:00:50Utilisez-vous Claude Code ?
00:00:51Ou bien Codex, Copilot, ou autre ?
00:00:54Moi, j'utilise Claude Code.
00:00:55C'est extrêmement facile à installer.
00:00:57Il suffit de prendre cette ligne ici après avoir tapé "Claude"
00:01:00et de l'avoir lancé dans votre terminal,
00:01:03puis de la coller, et l'installation se fera.
00:01:05Vous saurez que ça fonctionne si vous tapez cette commande, /mcp,
00:01:10et que vous voyez Paper s'afficher.
00:01:13Vous pouvez aussi voir Pencil, que nous aborderons très prochainement.
00:01:17Alors, voici l'application Paper.
00:01:19Elle doit impérativement rester ouverte.
00:01:21Et ensuite, bien sûr, vous lancez Cursor ou Claude Code,
00:01:24et vous connectez le MCP.
00:01:26Alors, quelle est l'étape suivante ?
00:01:27Eh bien, vous pouvez utiliser Paper de plusieurs manières.
00:01:31Vous pouvez commencer un design ici en utilisant l'outil cadre,
00:01:35en créant votre mise en page.
00:01:37L'interface est familière.
00:01:39Si vous comprenez déjà l'Auto Layout de Figma,
00:01:41vous saurez structurer des mises en page de zéro ici, à la main, si vous le souhaitez.
00:01:46Mais nous n'allons pas adopter cette approche.
00:01:48Nous allons essentiellement demander à Claude ou autre,
00:01:52selon que vous utilisiez Cursor ou non,
00:01:53de se servir du serveur MCP de Paper,
00:01:58et de concevoir une mise en page pour nous.
00:02:00Ensuite, nous allons améliorer ce design
00:02:02et y apporter des modifications personnalisées visuellement dans Paper,
00:02:05pour enfin le réimporter.
00:02:06Nous allons donc lui demander de créer une mise en page
00:02:09pour un type d'entreprise fictive.
00:02:10Avant cela, je voulais faire une petite expérience sur coolers.co.
00:02:14Ce site existe depuis toujours.
00:02:16Mais si vous cliquez sur "Démarrer le générateur",
00:02:18puis que vous appuyez sur la barre d'espace,
00:02:20vous pouvez trouver différents thèmes,
00:02:22ou plutôt l'application les génère d'elle-même.
00:02:24Et vous pouvez ensuite personnaliser les couleurs vous-même si vous voulez.
00:02:28Pour ma part, je vais continuer à faire défiler...
00:02:31D'accord, celui-ci a l'air intéressant.
00:02:32C'est une palette de couleurs plus claires.
00:02:33C'est assez coloré, etc.
00:02:36Ce que je vais faire, c'est une capture d'écran.
00:02:39Il y a les codes couleurs en bas,
00:02:41que nous pourrons copier dans Claude Code ou votre outil habituel comme contexte.
00:02:46Et nous allons lui demander d'utiliser ces couleurs
00:02:51pour créer une mise en page pour une entreprise fictive.
00:02:53Pour le prompt, je vais utiliser la compétence "front-end design" de Claude Code.
00:02:59Elle produit généralement de meilleurs résultats.
00:03:01Mais si vous n'êtes pas assez précis,
00:03:04elle vous donnera un résultat très générique.
00:03:08On va voir ce qu'il nous crée,
00:03:10puis nous irons peaufiner ce design dans Paper.
00:03:12D'abord, je tape /front-end-design,
00:03:15comme vous pouvez le voir ici.
00:03:17Je crois qu'il est intégré d'office à Claude Code maintenant,
00:03:19sinon, je mettrai un lien vers une vidéo en description
00:03:22qui montre comment l'ajouter comme compétence.
00:03:25Donc, /front-end-design.
00:03:28Maintenant, je vais spécifier mon prompt.
00:03:29Voici un prompt très court.
00:03:32Utilise le serveur MCP de Paper.
00:03:34Il est crucial de bien préciser cela.
00:03:36Conçois une mise en page SaaS moderne pour une entreprise fictive
00:03:39qui utilise l'IA pour l'assurance qualité dans la fabrication de produits.
00:03:43Ça a l'air ennuyeux.
00:03:43Ça doit être conçu pour le bureau avec une barre de navigation et une section héros.
00:03:47C'est tout.
00:03:47Je veux que tu utilises la palette de couleurs.
00:03:49Les valeurs hexadécimales sont indiquées au bas de chaque couleur sur la capture d'écran,
00:03:53qui est juste ici.
00:03:54Tu n'es pas obligé d'utiliser toutes les couleurs.
00:03:56Assure-toi simplement du contraste et du rendu esthétique.
00:03:59Voilà.
00:04:00Je vais donc appuyer sur Entrée,
00:04:02et on va commencer à le voir extraire des informations via le serveur MCP de Paper,
00:04:07et on pourra lancer Paper pour voir ce qui se passe en temps réel.
00:04:11Malheureusement, il y a un problème sur mon PC avec Windows 11,
00:04:15ça fait cet effet de clignotement.
00:04:16J'ai déjà contacté le fondateur à ce sujet,
00:04:18vous ne devriez probablement pas avoir ce souci.
00:04:21Ok, et voici ce qu'il a proposé.
00:04:23À mon avis, c'est assez moyen,
00:04:25et on sent tout de suite que...
00:04:27"Tiens, c'est de l'IA qui a généré ça pour l'essentiel."
00:04:30Nous allons donc utiliser Paper pour ajuster ce design visuellement,
00:04:34avant de le réexporter.
00:04:36Alors, qu'est-ce que je vais faire ?
00:04:37D'abord, je veux agrandir un peu ceci.
00:04:39Ok, pour nous donner de l'espace blanc par ici.
00:04:42Ensuite, l'étape suivante, c'est...
00:04:45vous devez vous familiariser avec les calques ici.
00:04:48Dans cette section, vous pouvez voir les calques ici sur le côté,
00:04:51et on voit que nous avons une section héros avec deux colonnes, gauche et droite.
00:04:56Je ne veux pas de ça.
00:04:57Je veux plutôt une zone comme celle-ci,
00:05:01qui occupe... c'est une section à colonne centrée,
00:05:05et nous allons mettre une section intéressante derrière.
00:05:08Mais d'abord, on va s'occuper de ça,
00:05:11et nous allons centrer tout le texte,
00:05:15et aussi augmenter la largeur de ceci.
00:05:17Ici en haut, on voit que la largeur est réglée sur "auto".
00:05:20On peut aussi avoir une largeur fixe,
00:05:23on peut lui faire remplir le conteneur,
00:05:25ou l'ajuster au contenu.
00:05:26"Fit content" revient au même.
00:05:28"Fill container".
00:05:29D'accord, ça va remplir l'espace disponible ici,
00:05:33puis je vais prendre cet élément,
00:05:36et juste là,
00:05:38on voit qu'il est déjà configuré comme un conteneur Flexbox avec un écart de 32 entre les éléments.
00:05:44Donc, si nous ajustons cela,
00:05:46vous verrez comment tout commence à s'écarter.
00:05:48Et je veux m'assurer que tout soit bien centré dans cet espace.
00:05:53Maintenant, tout ne fonctionne pas encore parfaitement,
00:05:55car nous devons faire d'autres ajustements.
00:05:57Si les éléments ne se comportent pas comme prévu, continuez simplement l'inspection.
00:06:01Par exemple, cette zone.
00:06:04Allons-y, centrons cela.
00:06:06Et encore une fois, je clique simplement sur les options de centrage.
00:06:08C'est du texte, donc on peut centrer ce texte.
00:06:10Ok, ça avance bien.
00:06:12Ici, on va centrer tout ça.
00:06:15Et je vais centrer celui-là aussi.
00:06:18Très bien, je peux faire un clic droit et choisir "Encadrer la sélection" (Frame Selection).
00:06:21Ah, ça a fonctionné automatiquement.
00:06:24Il faut juste être prêt à expérimenter avec toutes ces capacités de mise en page.
00:06:30C'est la même chose qu'avec Figma.
00:06:31Il faut comprendre comment travailler avec la mise en page,
00:06:35car cet outil essaie de représenter le navigateur réel directement sur le canevas.
00:06:40Il peut donc être un peu délicat de déplacer les choses,
00:06:43quand on ne sait pas trop comment elles interagissent entre elles.
00:06:44Alors, passez un peu de temps là-dessus.
00:06:46Ensuite, je vais faire une capture d'écran de ceci,
00:06:49juste pour intégrer certaines de ces couleurs d'une manière qui me semble meilleure que ce qu'il a fait.
00:06:55Parce que, remarquez, il a pris certaines couleurs, mais pas toutes.
00:06:58Ce n'est pas qu'on en ait forcément besoin.
00:07:00Mais je veux juste vous montrer le processus pour faire quelques ajustements supplémentaires ici.
00:07:05Par exemple, si on veut que la section d'en-tête ait une couleur d'arrière-plan spécifique.
00:07:10Je vais prendre ce remplissage ici,
00:07:13et nous allons utiliser celle tout en haut.
00:07:15C'est FC6471.
00:07:19Ok, c'est affreux, parce que le texte ne ressort plus du tout, n'est-ce pas ?
00:07:23Je vais prendre cette zone, les couleurs de sélection.
00:07:27On va mettre ça en blanc.
00:07:28On va aussi mettre le noir en blanc.
00:07:31Et, si on veut, on peut faire CTRL + clic gauche pour le sélectionner,
00:07:35et le mettre en gras pour celui-ci.
00:07:37Ok, Spectral AI.
00:07:39Je vais mettre cette partie noire en blanc.
00:07:43Ici, je n'aime vraiment pas le dégradé.
00:07:45Alors oui, nous avons évidemment le support des dégradés ici.
00:07:48Peut-être que je vais rendre celui-ci plus clair.
00:07:51C'est juste une sorte de logo générique bizarre, peu importe.
00:07:56Ça ne m'inquiète pas trop.
00:07:57On déplace ça.
00:08:00Ok, et enfin, par ici, ce contraste est terrible.
00:08:04Alors, on peut peut-être mettre ça en blanc.
00:08:11Celui-ci peut passer au noir, et on va aussi éclaircir ce texte-là.
00:08:20Ok, donc comme vous le voyez, c'est très rapide et facile de faire des ajustements.
00:08:23Maintenant, disons par exemple qu'on veuille prendre cet arrière-plan et ajouter un truc cool,
00:08:29comme un effet de shader.
00:08:30Ici, si vous cliquez, vous voyez "Shaders".
00:08:34C'est l'un des aspects vraiment géniaux de cet outil,
00:08:38on peut créer des shaders très intéressants et uniques.
00:08:42Comme, par exemple, cet anneau de fumée juste ici.
00:08:45Très bien, essayons ça.
00:08:46Je clique dessus.
00:08:47En faisant ça, il va l'ajouter comme un élément supplémentaire dans le DOM,
00:08:51le Document Object Model.
00:08:53C'est du jargon de développeur front-end dont vous n'avez peut-être jamais entendu parler.
00:08:57C'est là qu'avoir un bagage technique aide un peu.
00:09:00Ce que nous voulons, c'est le positionner en "absolu" juste là.
00:09:05En faisant ça, il sort un peu du modèle de boîte conventionnel, comme on l'appelle.
00:09:09Et on peut déplacer cet objet n'importe où, mais attention,
00:09:11car si vous survolez certains éléments, il s'insérera dedans.
00:09:14Nous voulons le structurer pour qu'il soit tout en haut, à gauche et à droite,
00:09:20et qu'il remplisse toute cette section héros.
00:09:23Pour faire ça ici, on va d'abord mettre la position X à zéro,
00:09:28puis la position Y à zéro également.
00:09:31Ensuite pour la largeur, on met 100%, et pareil pour la hauteur.
00:09:35Mais là, on cache tout, n'est-ce pas ?
00:09:39Malheureusement, pour une raison obscure, il n'y a pas de "Z-index" visible ici.
00:09:42Le Z-index est une propriété CSS pour les éléments en position absolue
00:09:47où vous contrôlez l'empilement, le flux.
00:09:50Pas le flux, mais l'ordre.
00:09:52Il devrait se trouver sous tous ces éléments.
00:09:54Et donc, malheureusement, je ne vois pas cette option,
00:09:57mais nous pourrons corriger cela après l'avoir importé dans Claude Code
00:10:04et de retour dans notre code HTML et CSS.
00:10:05Mais pour l'instant, on peut quand même voir le résultat en ajustant les paramètres ici.
00:10:10Tous les shaders ont leurs propres paramètres modifiables juste ici.
00:10:15Vous pouvez donc changer la vitesse et tout le reste.
00:10:18Vous voyez ici que nous avons un fond noir.
00:10:21Si on le passe à 0 %, ah, d'accord, on commence à voir ce qu'il y a derrière.
00:10:26On ne voit pas encore bien le premier plan.
00:10:28Pour le premier plan, prenons cette couleur et sélectionnons notre anneau de fumée.
00:10:36Nous allons appliquer cette couleur au remplissage.
00:10:39Enfin, au premier plan plutôt.
00:10:43Bon, ça a toujours l'air un peu ridicule, non ?
00:10:46Modifions donc certains de ces autres éléments.
00:10:50Nous avons l'échelle, l'épaisseur...
00:10:54Oh, c'est intéressant.
00:10:56Et le rayon.
00:10:58Comme vous le voyez, c'est vraiment amusant de tester tout ça.
00:11:03Le rendu commence à être sympa.
00:11:04Je tâtonne encore un peu.
00:11:07Oui, ça me plaît bien comme ça.
00:11:09Essayons maintenant d'expérimenter avec un autre shader.
00:11:11Ce qui est génial, c'est qu'en passant l'opacité de ces valeurs à 0 %,
00:11:18on peut voir ce qui se cache derrière.
00:11:19Bien sûr, je ne veux pas que ce soit le résultat final dans le navigateur.
00:11:23Nous utiliserons donc la propriété z-index pour corriger cela plus tard,
00:11:27car je ne vois pas encore où l'ajuster ici.
00:11:30Très bien, je vais rester sur ce choix
00:11:32et on verra ce que ça donne une fois le problème de z-index réglé.
00:11:35Je pense que nous allons utiliser celui-là.
00:11:39On le sélectionne pour pouvoir l'envoyer,
00:11:43vous savez, dans Cursor ou Claude Code.
00:11:46Ensuite, on retourne dans notre terminal.
00:11:48Voici ce que je vais demander : utilise le serveur MCP Paper
00:11:50pour traduire le design sélectionné en HTML, CSS et JavaScript
00:11:53fonctionnels dans un fichier index.html.
00:11:56Assure-toi que tout soit parfaitement traduit.
00:11:58J'ai joint une capture des réglages du shader pour garantir l'exactitude.
00:12:01C'est important, car j'ai discuté avec le fondateur
00:12:04et pour l'instant, toutes les informations ne sont pas transmises,
00:12:08du moins d'après mes premiers tests sur les shaders.
00:12:11Appuyons sur Entrée pour voir le résultat.
00:12:14Et voilà, c'est terminé.
00:12:15C'est parti.
00:12:16Le voici.
00:12:17Ce n'est pas une copie conforme à 100 %, surtout pour le shader
00:12:22que vous voyez en arrière-plan.
00:12:24Le mien semble un peu différent.
00:12:28Avec des sortes de lignes fluides plus larges.
00:12:31Ce qu'il faudrait faire, c'est prendre une capture d'écran ici.
00:12:34Assurez-vous de capturer les paramètres de dégradé
00:12:36et de maillage, ou peu importe ce que vous utilisez,
00:12:38pour essayer de l'améliorer de manière itérative.
00:12:42Je pense que ce sera corrigé très bientôt
00:12:44lorsqu'ils intégreront correctement les shaders et la façon
00:12:47dont le MCP gère la traduction de ces données.
00:12:51Maintenant, j'aimerais que vous alliez sur designcourse.com.
00:12:56Le lien est en bas pour rejoindre le défi de 30 jours
00:13:01consacré au design natif par IA.
00:13:04Et je veux que vous utilisiez Paper.
00:13:06Il y a un compte gratuit pour terminer ce design.
00:13:11C'est celui sur lequel nous avons travaillé lors du dernier défi.
00:13:14Et dans cette section plus sombre que vous voyez là,
00:13:17où il est écrit "votre design ici",
00:13:18je veux que vous utilisiez Paper avec le flux qu'on vient de voir.
00:13:24Téléchargez l'élément sur la page du défi,
00:13:27qui contient le code HTML que vous voyez là,
00:13:30et complétez le design en dessous avec Paper.
00:13:33C'est la page du défi ici dans Figma.
00:13:35Vous pouvez l'utiliser comme référence si vous voulez.
00:13:38Ce n'est pas obligatoire.
00:13:39Mais voici les instructions.
00:13:40Créez simplement un compte gratuit.
00:13:42Téléchargez l'index.html sur la page du défi.
00:13:45Utilisez Paper pour finir le design dans l'espace vide de cette section.
00:13:49C'est ici que votre design s'insère.
00:13:52Designez-le comme vous voulez et écrivez ce que vous voulez.
00:13:54Il faut juste que l'intégration soit fluide.
00:13:56Ensuite, vous êtes libre de faire ce que vous voulez pour la suite,
00:13:59y compris intégrer des animations ou de l'interactivité.
00:14:02Si c'est le cas, envoyez une capture vidéo pour votre soumission,
00:14:04car notre système accepte les fichiers vidéo.
00:14:07J'ai hâte de voir vos créations.
00:14:09J'en passerai en revue 8 ou 10, comme je l'ai fait durant tout le défi,
00:14:13sous forme de critiques vidéo, et on verra ce que vous proposez.
00:14:16Le futur du design est vraiment passionnant.
00:14:18On voit apparaître tous ces nouveaux outils basés sur des workflows d'IA.
00:14:24Paper en fait partie, Pencil en est un autre, et il y en aura beaucoup d'autres.
00:14:28On verra qui tirera son épingle du jeu.
00:14:30Est-ce que ce sera Figma ?
00:14:31Je n'en sais rien.
00:14:32On verra bien.
00:14:33À très bientôt.
00:14:34Au revoir.