00:00:00Salut ! Aujourd'hui, on va parler de Paper. Paper, c'est en gros Figma, mais pour Claude Code ou
00:00:05Cursor. Voici un exemple. On a l'application de bureau Paper lancée, et
00:00:10on peut tout contrôler via Claude Code, ce que vous voyez juste ici. Et c'est
00:00:14aussi génial parce qu'on peut très facilement basculer entre ses composants
00:00:19et son code. Des entreprises comme Vercel, Ze ou Dub l'utilisent. Donc beaucoup de
00:00:24produits vraiment cool s'en servent. Voici à quoi ressemble l'application au démarrage.
00:00:28C'est le projet de démonstration que vous aurez la première fois. Vous pourrez
00:00:31télécharger l'application sur paper.design/downloads, et l'étape suivante
00:00:35consiste à installer un serveur MCP. Si vous voulez l'installer dans
00:00:40Cursor, cliquez simplement sur ce bouton, ce que j'ai déjà fait, mais là, nous
00:00:43allons plutôt l'essayer avec Claude Code. On va copier ça. Cela
00:00:47va ajouter le serveur MCP Paper au niveau de l'utilisateur, ce qui signifie que
00:00:53chaque projet sur l'ordinateur pourra y accéder. D'habitude, c'est limité au projet quand
00:00:57on ajoute un serveur MCP, mais ici, le transport est local. Cela
00:01:01va se connecter à l'application de bureau Paper. Je vais donc l'installer
00:01:06ici, et maintenant que c'est fait, on va ouvrir Claude. J'ai ouvert
00:01:11quatre fenêtres ici dans Cmux. C'est en gros Ghosty qui tourne à la manière
00:01:17de Tmux avec quatre fenêtres distinctes pour faire
00:01:19plusieurs démos différentes. Je me suis dit : pourquoi ne pas avoir plusieurs fenêtres ? Ensuite,
00:01:22on va copier ce prompt dans un terminal. On va
00:01:28créer une application de suivi de dépenses dans Paper. Voyons le résultat. On peut
00:01:33voir qu'une démo comme celle-ci va apparaître, on verra bien en direct. En attendant,
00:01:36je vais lancer d'autres tâches en parallèle. Crée-moi
00:01:40une page d'accueil de démo dans Paper et épate-moi. Voyons s'il
00:01:44s'en sort bien. Crée-moi un tableau de bord pour une appli de finance. Allons-y, et
00:01:48crée le design system pour une application sociale de type Twitter. Je vais tout
00:01:53lancer en parallèle. Je ne sais pas du tout ce que ça va donner, alors
00:01:56voyons voir. Ici, vous pouvez voir l'exécution précédente en cours.
00:02:00On a un brief créatif, une palette. C'est Claude Code qui réfléchit,
00:02:04ajoute des éléments à l'application de bienvenue de Paper, mais allons
00:02:08tout en bas. Ok, c'est fini. Voyons à quoi ça ressemble. On va dézoomer
00:02:13pour voir si c'est quelque part par là. Oh, on voit que nos autres
00:02:17applications sont en train d'être construites, et voici notre appli de saisie de dépenses,
00:02:22ce qui est vraiment cool. Le design est plutôt solide, et d'ailleurs, quand je l'ai
00:02:25lancé plus tôt, je crois que le résultat était un peu différent. On voit que les autres
00:02:30tournent toutes en parallèle. Ce qui est génial avec cette application Paper,
00:02:34c'est que c'est essentiellement Figma. Tout ce dont vous avez l'habitude sur Figma,
00:02:39vous le retrouvez ici, c'est très similaire. Je peux aller modifier des choses et
00:02:43revenir faire des éditions. Supprimer la section d'upload et mettre autre chose à la place.
00:02:53Voyons ce qui se passe quand on fait ça, pendant que tout le reste continue
00:02:56de tourner en arrière-plan. Si on revient ici, j'espère que cette section d'upload
00:03:00sera supprimée. Notre page d'accueil a l'air pas mal du tout. "Design with intention,
00:03:04create without limits". Au passage, on voit nos autres
00:03:09composants prendre forme. Le design system a l'air vraiment cool et pro.
00:03:12On aurait pu payer un designer des milliers de dollars pour obtenir exactement ça.
00:03:16C'est vraiment top. Et bien sûr, tout est modifiable
00:03:20exactement comme dans Figma. Voilà le rendu final de la page d'accueil, et
00:03:24on va passer ça dans React avec Tailwind dans une seconde. Voici le
00:03:28tableau de bord, et l'autre tâche est aussi terminée. On voit ici la largeur divisée,
00:03:33ça a été ajusté aussi. On obtient des designs vraiment professionnels,
00:03:36et tout ce qu'on a fait, c'est utiliser un prompt. Pour tout cela, on peut utiliser
00:03:42l'écosystème de compétences que Claude Code ou Cursor nous fournissent déjà.
00:03:46On pourrait utiliser la compétence de design front-end pour tout concevoir
00:03:50si on le voulait. Je vais maintenant demander une page HTML avec ce design dans mon
00:03:54navigateur pour voir le résultat. En revenant sur Paper, je vais vous montrer
00:03:58quelques autres trucs. Sur ce composant, ce que je peux faire,
00:04:03c'est "copier comme Tailwind" ou "copier comme React CSS". En général, je fais juste un
00:04:08copier-coller, mais on va aussi voir dans un instant que Claude Code peut
00:04:13charger ça pour nous pour qu'on puisse l'ouvrir dans un navigateur. Et
00:04:17waouh, regardez, il l'a fait ! C'est assez incroyable.
00:04:20Voici le bouton... enfin bref, c'est génial. Si on
00:04:24inspecte la page, voyons ce qui a été généré réellement.
00:04:29Il a utilisé du HTML et du CSS, mais on aurait pu lui faire faire
00:04:35avec React et Tailwind. On peut construire des choses comme dans Figma, c'est
00:04:40exactement pareil. Sur le côté, on peut tout changer, comme
00:04:44la couleur. C'est vraiment la même chose que Figma, mais j'ai
00:04:48assemblé ce composant aussi parce que je voulais voir le rendu
00:04:51en le copiant-collant dans une application classique. Et voilà, c'est exactement
00:04:55ce qu'il a fait. Le résultat est pile ce que je voulais. Ici,
00:05:00vous voyez ce qui a été copié-collé. C'est le composant d'arrière-plan. Je vous
00:05:05montre à nouveau comment j'ai fait : "copier comme Tailwind", je vais
00:05:10dans Cursor, je colle, et voilà ce que ça donne. Maintenant, je vais
00:05:14annuler un peu tout ça. C'est en fait un composant que j'avais
00:05:20collé avant pour l'appli de suivi de dépenses. On voit la barre du haut, le montant, etc.
00:05:26C'est donc du React et du Tailwind pour pratiquement la même chose
00:05:29qu'on vient de faire. Voici le code React réel dans notre appli. C'est
00:05:34une autre variante. C'est ce que j'ai généré il y a 20 minutes. Ça, c'est la
00:05:40version 1, et l'autre version était en HTML et CSS classique.
00:05:44Les deux ont un très bon rendu. Je suis curieux de voir comment les autres applis sortent
00:05:49si on passe par Claude Code. Je demande une version HTML de tous les
00:05:53écrans qu'on vient de concevoir. Ce que j'ai fait aussi, c'est un
00:05:58clic droit "copier comme React CSS", je suis allé dans Cursor, j'ai collé, et c'est une vraie appli.
00:06:04Elle tourne sur localhost 3001. C'est une page de démo que j'ai ajoutée à
00:06:09Inbox Zero, et ça fonctionne parfaitement, ce qui est super.
00:06:13Bon, pour une première fois, ce n'est pas encore responsive, mais à part ça,
00:06:18c'est du solide. Il y a encore du travail pour le responsive, mais le concept
00:06:22est vraiment cool. Et voici la version HTML qui vient de
00:06:26charger suite à notre prompt. Celle-ci est un peu plus responsive. Ça commence à
00:06:33galérer un peu ici, mais c'est au moins mieux que l'autre version.
00:06:36C'est plutôt sympa. Maintenant, je veux vous montrer qu'on peut aussi
00:06:41générer des images. Si on fait Cmd+I, voyons si on peut faire ça,
00:06:46on va lui demander de nous générer une image. Le prompt que j'ai écrit est de créer
00:06:50une belle publicité pour Inbox Zero, un assistant email IA qui vous aide à atteindre
00:06:54votre "inbox zero" rapidement. Vous voyez qu'il y a différents modèles comme Nano Banana
00:06:59Pro. Commençons par un pack varié pour voir. J'espère que ça va marcher.
00:07:05Et oui, il a commencé à créer quatre images. Je veux
00:07:10réessayer car je suis curieux de voir le résultat avec Nano Banana Pro.
00:07:14Relançons la création. Une autre image est en cours, et j'espère qu'elles
00:07:19vont bientôt apparaître. Oh, voilà les pubs ! Bon,
00:07:25elles sont pas mal. Elles ont besoin de travail, mais pour un premier essai,
00:07:29c'est cool. Regardez celle-là : "Inbox Zero". On pourrait trouver des designers
00:07:35qui font moins bien que ça. De ces quatre, c'est probablement celle-ci
00:07:39que je préfère. Mais bon, c'est du premier jet, on pourrait
00:07:43itérer énormément là-dessus. Voyons ce que donne Nano Banana Pro. Celle-là pourrait
00:07:47être la plus impressionnante. "Votre voie rapide vers le calme, l'assistant email IA".
00:07:51Franchement, c'est du solide pour un premier jet, c'est un bon visuel. Je trouve
00:07:55ça intéressant aussi, on dirait qu'il connaît le logo. Est-ce que l'IA a capté le
00:08:00logo d'Inbox Zero ou est-ce juste un hasard si le texte ressemble autant à notre logo ?
00:08:04Avant de terminer, je veux vous montrer deux dernières choses. Si je clique sur
00:08:09cette image et que j'appuie sur S, je peux appliquer différents effets. Ici,
00:08:13on voit cet effet d'eau sur l'image. Si je réappuie sur S, on a cet effet de métal liquide.
00:08:18Je ne sais pas trop comment ça fonctionne, ni si c'est vraiment lié à l'image,
00:08:21mais on peut créer des effets vraiment cool et les
00:08:24utiliser sur sa page d'accueil. Voici une autre version de l'image qu'on a créée.
00:08:27Autre point appréciable : les couleurs sont censées être
00:08:33cohérentes et précises. Paper possède le premier sélecteur de couleurs uniforme au monde
00:08:37qui facilite la gestion des couleurs. Pour ceux qui ne connaissent pas le problème, on peut avoir
00:08:41une couleur dans Figma et une autre sur son site web, et ça ne correspond pas.
00:08:45C'est super agaçant. On a eu le cas avec les bleus de notre site où Figma
00:08:48affichait une chose et le site une autre, alors que c'était
00:08:52censé être le même code hexadécimal pour la couleur.
00:08:56Si vous avez déjà eu ce souci comme nous, c'est une fonctionnalité très
00:08:59appréciable. Et la toute dernière chose que je veux vous montrer : créer un
00:09:04design system dans Paper à partir de notre base de code existante. On voit qu'il commence
00:09:08à analyser le code, c'est du Claude Code classique. Il a récupéré nos
00:09:12polices. Là on a un petit souci car on a apparemment atteint la limite hebdomadaire
00:09:17d'outils MCP pour Paper Pro dans cette vidéo, donc on ne verra pas le résultat
00:09:20final, mais en gros, on aurait pu lui donner notre base de code
00:09:23actuelle, voir le rendu dans Paper, faire nos modifications directement dans
00:09:28Paper et réinjecter le code dans le projet. C'est vraiment une
00:09:32super fonctionnalité. Un cas où ça nous aurait été
00:09:35très utile, c'est pour nos composants de démo. Quand on
00:09:39fait une capture d'écran pour une page d'accueil, d'habitude,
00:09:43le plus simple est de juste prendre un screenshot. Mais souvent, je veux modifier un peu,
00:09:47changer le texte, masquer certains emails réels, et l'avoir
00:09:50dans Figma ou Paper est bien plus simple parce qu'on peut taper et éditer exactement
00:09:55ce qu'on veut, et ce n'est plus un screenshot, on peut l'exporter en PNG ou JPEG.
00:09:58Voici l'appli sociale type Twitter qu'on construisait,
00:10:03les designs sont aussi très cool. Enfin bref, j'espère que vous avez aimé la
00:10:07vidéo, malgré les nombreux sauts d'un sujet à l'autre. C'est ma façon de
00:10:10coder en ce moment, en lançant plusieurs trucs en parallèle, et ça a
00:10:14déteint un peu sur la vidéo. J'espère que ça vous a aidé, dites-moi
00:10:17ce que vous allez construire avec Paper. C'est un outil très utile, je pense
00:10:20passer à la version Pro très bientôt. N'oubliez pas de
00:10:24vous abonner pour les prochaines vidéos !