L'atelier de prototypage en IA 2026 : de zéro à la création d'applications et de sites web avec Figma Make & Lovable - Figma Make &

1. Les bases du prototypage avec Figma Make, ChatGPT et Lovable: Y a-t-il un avenir pour les chefs de produit qui ne peuvent pas travailler avec l'IA ? Honnêtement, non. Nous venons d'entrer dans une toute nouvelle ère de gestion de projet basée sur l'IA, un type différent qui évolue plus vite, est plus intelligent et transforme les idées en prototypes en quelques heures seulement. Si vous voulez vous démarquer, si vous voulez rester pertinent et si vous voulez diriger, vous avez besoin de ces compétences. J'ai créé ce cours juste après que deux directeurs deux entreprises différentes m'aient dit que mes prototypes d'IA ressemblaient à du travail d'agence. Et tout cela s'est fait en une journée sans développeurs et sans attente. Cela m'a donné le courage de partager tout ce que j'ai appris avec vous. Ce cours n'est pas théorique. ne s'agit pas de cadres de recyclage, et ce n'est certainement pas quelque chose que vous trouverez dans un livre. C'est réel. C'est pratique. Et c'est l'avantage qui sépare les meilleurs PM des autres. Et je l'ai fait pour toi. Vous pouvez ainsi devenir le type de chef de produit que les équipes recherchent, dont les startups ont besoin et qui répondent aux exigences futures. 2. Créer vos modèles GPT et UX: D'accord. Bienvenue à cette conférence. La première consiste à construire un prototype à l'aide d'outils d'IA. Et quel est le meilleur point de départ ? Bien entendu, il s'agit d'une fenêtre de recherche Google. Pour commencer, nous devons donc mettre HantPT en forme pour nous fournir bonnes instructions pour Lovable ou Et il n'y a pas de moyen plus simple de le faire que de télécharger d'abord Lovable Prompting Bible. C'est ici. Vous pouvez voir qu'il y a beaucoup de choses là-dedans. Mais avec Control A, Control C, alors passer à ChatGPT est la première chose à faire Maintenant, nous allons créer un GPT dans Cha GPT . Cela se trouve sous Explore. Ensuite, nous créons, nous l'appellerons Figma, et nous fleurirons tous les deux en prototypage GPT Ce que vous pouvez faire, c'est télécharger des fichiers pour créer les connaissances nécessaires au GPT Mais je pense que nous pouvons ignorer cela et le créer. Il n'y a que moi pour ça et ensuite, en toute sécurité. Nous allons attendre quelques secondes, visionner le GPT, et maintenant nous allons commencer à entraîner notre GPT La première chose que nous allons dire, c'est que vous êtes un expert expérimenté de l'expérience utilisateur, compétent et qui a lu les livres les plus sophistiqués expérience utilisateur logicielle. Tu l'as ? Me donne une liste des principaux livres sur l'expérience utilisateur. Vous devez y réfléchir lorsque vous parlez à un enfant et que vous apprenez à combattre en mode Speed. Nous le racontons ensuite maintenant, prenons trois bonnes pratiques chacune et nous m' en donnons longues explications détaillées de longues explications détaillées. Attends un peu. Dites-le à ce magasin en toute connaissance de cause. OK, alors nous devons réfléchir à ce que nous allons demander, au type de produit. Et pour cet exercice, nous pouvons créer un outil d'observabilité rapide basé sur Datadog et les outils de traçage de Grafana et Nous allons donc dire au GPT d'analyser Datadog Grafana, les traces de Dina, les modèles d'expérience utilisateur, d' examiner les formulaires et d'isoler les meilleurs modèles d'expérience utilisateur, de navigation, de fonctionnalités et de découvrabilité Expérimentez-le et formulez-le dans une bible de l'observabilité UX Soyez extrêmement détaillé lorsque vous expliquez ces deux étudiants de premier cycle distraits en UX qui ont une bonne compréhension de l'UX, mais une capacité d'attention limitée qui peut facilement dériver. Nous vous rappelons de vous souvenir de la partie qui s'éloigne facilement, car c'est ainsi que nous allons traiter Lavaba Et ce sont des aides fantastiques pour la construction de prototypes. Ils sont très facilement distraits et vous devez leur donner suffisamment de détails avant qu'ils ne commencent à comprendre ce qu'ils font C'est donc exactement ce que nous disons ici. Voyons ce que le GPT va arriver. Et voici notre Bible de l'expérience utilisateur. Il nous indique exactement ce que doit faire une solution d'observabilité en termes d'expérience utilisateur, donc cela peut être méchant C'est une bonne solution d'observabilité pour les utilisateurs qui l'utilisent Attendons que le GPT soit terminé, puis encore une fois, nous allons lui dire de stocker les données en sa possession. Je vais faire défiler la page lentement pour que vous puissiez arrêter la vidéo et voir ce que le GPT propose Je lis en temps réel, et le son est plutôt correct pour Lovable et Figma pour faire un bon prototypage, alors attendons que ça Tu vois, hallucine ça ici. Faisant partie du domaine de l'observabilité, c'est de l'or. OK, maintenant nous disons « trier » en votre connaissance de cause. Nous y voilà. Ensuite, nous passons à l'adorable Bible inspirante. Nous allons dire au GPT que c'est la Bible inspirante adorable Conservez-le à votre connaissance et respectez toujours ces meilleures pratiques lorsqu'on vous demande de créer une invite pour Lovable Dev ou Figma Make Comme je ne connais pas le même type de Bible pour Figma Make, je vais encore une fois demander au GPT de consulter des forums, des articles, etc. Et créez-le tout seul. Nous y voilà. C'est un long document. Mais il suffit de cliquer. Et cela devrait être fait en quelques secondes. Maintenant, ce que nous allons vous demander, c'est d'examiner Read it et d'autres formulaires destinés aux experts qui ont donné de bons conseils pour Figma Make et sur la manière de créer les meilleures instructions pour Créez le même style de Bible inspirante que la Bible adorable que vous connaissez. OK, alors allons-y. Il va falloir réfléchir pendant un moment et épeler la Bible qui l'inspire pour Figma Make . Il faudra juste un peu de temps pour générer le gros document et le stocker, puis nous serons presque prêts à partir. C'est bon. Maintenant c'est terminé. Vous avez officiellement les deux bibles de punting stockées dans votre GPT C'est votre petit monstre pour fabriquer vos pantalons, et vous devez le traiter avec soin et en prendre soin Donc, chaque fois que vous lisez un livre ou que vous avez un article intéressant, venez ici et donnez peu d'amour à votre GPT et quelques articles supplémentaires, afin qu'il devienne encore plus intelligent OK, maintenant, une fois que nous en aurons fini avec cela, nous pourrons commencer à construire notre premier. C'est ce qu'il y a de plus stratégique. Donc, pour résumer, nous avons créé un GPT, nous lui avons demandé de rechercher les meilleurs modèles, connaissances et bonnes pratiques en matière d'expérience Ensuite, nous y avons ajouté la Lovable Prompting Bible. Nous lui avons demandé de créer la Bible d'inspiration Figma, dans le même style, et nous lui avons demandé de tout stocker Ensuite, nous avons choisi le domaine à partir duquel nous allons créer des produits. Donc, actuellement, ce sera de l'observabilité, mais peut-être que cela peut être des outils commerciaux Peut-être que cela peut être une application d'écoute de musique. Peut-être que cela peut être quelque chose pour créer des sites Web personnels pour différentes personnes. Tu dois trouver les meilleurs. Et demandez au GPT d' analyser ces sites Web, obtenir les meilleures pratiques et les meilleurs modèles, stocker dans ses connaissances, afin qu'il sache ce qu'il doit voir et comment créer l'invite, pour qu' elle soit vraiment bonne Maintenant que tout est dans les connaissances, nous pouvons commencer par créer notre première invite. Donc, pour commencer, je vais rassembler quelques liens et de nombreuses captures d'écran pour les choses que j'aime. Ce que nous allons créer c'est une application pour surveiller les vaisseaux spatiaux. Donc, ce que je vais faire, c'est rechercher les meilleures applications de recherche existantes et en alimenter le GPT Très bien, j'ai donc trouvé quelques articles qui parlent des missions spatiales et de la surveillance de différents engins spatiaux J'ai donc d'abord mis leurs liens ici. Ensuite, j'ai mis différents articles et les images qu'ils contiennent pour la surveillance des engins spatiaux comme Ds in Grafana, dans Data Dub, ce logiciel de contrôle spatial pour ces personnes, encore plus de logiciels d'engins spatiaux, encore plus de logiciels de vaisseaux spatiaux Ils sont tous là. Celui-ci ne l'est pas. Il est également ajouté. Et maintenant vient l'invite, qui est la suivante : vous créez une première invite Figma Make Il doit être détaillé et donner suffisamment de choses pour qu'un étudiant américain de premier cycle puisse suivre sans se laisser distraire Ce que nous sommes en train de construire est un prototype d' outil de surveillance des vaisseaux spatiaux sur le thème de Gufan Il est vraiment important de choisir une équipe et de dire au GPT laquelle elle est Vous devez analyser Grafana, sa structure, son expérience utilisateur, son interface utilisateur en détail et indiquer à iGMA Make comment créer le prototype Le prototype comportera essentiellement trois écrans, un pour la vue d'ensemble, un pour l'analyse opérationnelle et un pour l'analyse du lancement et de l'atterrissage. Assurez-vous de donner trop de détails afin qu'aucune erreur ne se produise. Et voici un conseil que je veux vous montrer à 100 %. Lorsque vous faites cela, assurez-vous de faire une recherche approfondie. Actuellement, je l' ai intégré à ma réflexion. Nous allons le dire encore plus, comme une réflexion approfondie. Nous allons maintenant créer notre première invite, qui est super stratégique et sans elle, comme je vous l'ai dit au début, votre prototype risque de s' éloigner tellement. C'est donc ce que vous devez faire. Parfois, il faut plusieurs essais où vous demandez à ChatGPT de le créer, puis de le lire Imprimez-le ensuite à nouveau, relisez-le et modifiez-le pour avoir enfin ce dont vous avez besoin. Voyons donc ce que cela donne. C'est bon. Et maintenant, après mûre réflexion, encore une fois, si vous avez la possibilité non seulement d'utiliser la réflexion approfondie, mais aussi de faire une analyse approfondie, vous pouvez le faire à coup sûr, et ce sera mieux. Mais maintenant, nous avons ce dont nous avons besoin, et c'est notre première invite, contenu, les tâches, les directives, tout. 3. Perfectionner la bible du prototypage Figma Make: Les critères de réussite sont vides, donc cela doit être sûr, mais dans ce que je vais faire, et si vous le souhaitez, vous pouvez également le faire pour un effort supplémentaire. Vous pouvez le copier d'ici, créer un graphique normal à partir de Chan GPT, cliquer ici, dire Deep Research et le raconter Faites une recherche approfondie, assurez-vous que cela est conforme aux normes les plus strictes en matière d'expérience utilisateur et d' IA, ce qui incite à être mméique Vérifiez vos connaissances pour vous assurer qu'il répond aux critères de réussite, notamment facilité de découverte et l'utilisation excessive des fonctionnalités Vous collez le gros réservoir, et il va faire des recherches très approfondies à ce sujet. Vous recherchez une invite Figma Make détaillée ? Oui, une version complète. Oui Disposition fema simulée. Et relancez les recherches, ça va prendre un petit moment. Mais le message sera encore meilleur. Attendons donc les recherches. Une fois la recherche terminée, une fois que l'invite est terminée, nous allons réellement l'appliquer. Découvrez ce que Figma Make va en faire. Et bien sûr, testez-le et appréciez-le, voyez quelle sera la différence Mais attendez un peu, puis nous passerons à notre prochaine conférence où nous donnerons vie à cette invite et la concrétiserons. Ce sera votre premier écran pour découvrir notre parfait outil de surveillance des avions satellites et des vaisseaux spatiaux Restez à l'affût. Rendez-vous lors de la prochaine conférence. 4. L'état d'esprit du prototypage en matière de PM: Pouvez-vous obtenir un prototype solide à partir de l'IA sans lui donner le contexte approprié ? Exactement. Tu peux Dans cette conférence, nous allons nous concentrer sur l' élément le plus important du processus. Et il s'agit de créer votre invite de prototypage principale. Celui qui créera le premier visuel, celui qui servira de base à tout ce qui suit, votre résultat le plus stratégique tout au long du processus de création. Voici votre brief. Si vous le gâchez, votre prototype sera éparpillé et il dérivera de plus en plus à chaque prochaine invite. Je vais vous montrer comment utiliser Cha GPT comme un assistant intelligent, comment lui donner les bons ingrédients et comment s' assurer qu' il se comporte davantage comme un penseur senior de l'expérience utilisateur que comme un adolescent distrait Mettons en place votre prototype pour qu'il soit un succès. Allons chercher votre bâtiment. On se voit à l'intérieur. 5. La stratégie « Visuels et logique » de base : Synchroniser les invites et les images avec l'IA.: OK, maintenant, après des recherches approfondies, nous avons notre message principal. C'est le Saint Graal. Il suffit de le prendre, Oop, aller en bas, de le copier, et c'est parti Sur le côté gauche, c'est adorable. Sur le côté droit, voici Figma Make. Voyons ce qui va se passer lorsque nous ajouterons l' invite principale et quelques captures d'écran. Mettons donc la grosse invite aux deux endroits, puis joignons les captures d'écran. Nous avons convenu que nous étions en train de créer un prototype de grafana J'ai donc rassemblé cinq bonnes captures d'écran de Grafana. Tellement adorable et Figma le fait. Nous serons en mesure de comprendre, oh, il va falloir le faire un par un. OK, un, deux, trois. D'accord, il y a notre première différence. Ici, vous pouvez en ajouter jusqu'à trois, ici vous pouvez en ajouter jusqu'à cinq. Alors, êtes-vous prêt à voir notre premier écran ? Encore une fois, j'ai les captures d'écran les plus importantes et les plus représentatives, l'énorme message principal, trois , deux, un, allons-y. Et allons-y. Voyons ce qui se passe une fois cela fait. Les deux systèmes fonctionnent. Concevez des itérations à partir de Lovable Sur le côté droit, Figure écrit le code. Voyons qui le fera en premier. Voyons qui le fait le mieux. Allons-y. Lovable a été le premier. Attendons la création de Figma maintenant Et maintenant c'est le moment de vérité. Voyons ce qui se passe avec Figma dans quelques secondes. Allons-y. Je dirais que c'est assez similaire. Maintenant, quand on le regarde des deux côtés, on vraiment l'impression que c'est assez similaire. Vous fournit un tableau de bord. Développons, développons et voyons tout cela. Oui, celui-ci est adorable. Et voici celui de Figma. Je dirais que d'une manière ou d'une autre, le Figma ressemble un peu plus à Grafana, mais ils sont donc assez décalés et il n'y a absolument rien Essayons quelques crevettes, juste pour voir comment les choses se passent. Voyons voir. Ramenons Chan chi PT. Accédez à notre générateur d'invite et dites-le, je veux une invite qui rendra le prototype applicable, similaire au framework de scènes de Pana Assurez-vous de me donner une façade figma adorable qui deviendra raisonnable Jetez les menus, tous mes personnages et les graphiques. Voyons ce que Cha GPT va apporter. Assurez-vous d'enrichir l'invite en demandant à ce que le type de manifestant du polo soit plus amusant. Maintenant, pendant que nous attendons, je voudrais regarder l'une de ces captures d'écran que j'aime le plus, afin de vous montrer comment une image signifie 1 000 mots. Voyons lequel choisir . C'est toujours le dernier. OK, copions ceci posté aux deux endroits ici, adorable. Et prenons celui de la mission spatiale proprement dite de Grafana, celui-ci, posté ici, posté ici. Je crois que j'en ai raté un. OK. Et nous avons oublié de nourrir Lovable Voilà, adorable. Passons maintenant à Brant, qui est intéressé Allez, le GPT. Pages, tableaux de bord. Va vite, adorable. Allons-y Figma Mic. Maintenant, cela devrait nous donner une cliquabilité suffisante autour des prototypes Voyons en quoi cela consiste à opposer son veto à la pensée. Et maintenant, juste pour récapituler, nous avons ici l'état de l'espace, la communication, le système thermique, le contrôle de l'altitude Nous avons des biographies et des séries chronologiques, tout comme Igufan a eu l'idée à partir de toutes les maquettes et a fourni surveillance du système électrique et thermique, un bon tableau de bord pour un tel Ici, c'est un peu pareil, mais j'ai eu l' étrange impression qu' il voulait vraiment imiter le noir Et, encore une fois, il s'agit d'une énergie thermique courante pour la santé. Essentiellement, il sait ce qu'il visualise, mais il y a quelques écarts Cela s'est beaucoup plus inspiré de Grafana et c'est très similaire, même si ce type de design en verre liquide n'est pas mon préféré, mais nous allons vous le demander un peu plus, et cela permettra une bien meilleure visualisation Je suis presque certain qu'avec cette invite, cela va arriver. Si ce n'est pas le cas, nous allons simplement le demander un peu plus, voir ce qui se passe ensuite. OK, Volvo est prête. Et encore une fois, en passant en revue les dernières nouveautés, nous y voilà. Je les ai, mais ça ne semble pas vraiment cliquable. Rien n'est cliquable, et je ne peux rien choisir d'intéressant Voyons ce que fera Figo. Donnez un autre message pendant que vous attendez. Donnez-moi une sélection, menu déroulant, filtrez en haut. Cela me donnera la possibilité de choisir parmi les quatre noms de vaisseaux spatiaux. Rendez également le filtre interactif et capable de filtrer les tableaux de bord ci-dessous, faire en sorte que la batterie, le SOC, génération P et les autres cases du haut soient cliquables et mènent à une redéfinition des tableaux de bord factices vers factices Regarde si Figma a fait quelque chose ou si elle réfléchit encore Allons-y. Il existe même un prototype de guide. Tout semble bon. Peut-être que c'est Oh, tu vois, c'est cliquable, et ça va quelque part Les éléments sur la droite sont flicables. Intéressant Ça l'a tué. Il y a une sorte de service en plus. Nous allons revenir en arrière. OK. Maintenant, comme nous les avons tous, ils sont tous cliquables. Lorsque je clique, j' ai un autre tableau de bord, ce qui est incroyable. Donnez-moi un bouton de retour verre liquide au milieu et en bas de la chanson pour que je puisse revenir à l'écran précédent. Nous serons plus convaincants avec le prototype Figma Make D'habitude, je suis vraiment content de Figma Make. Aujourd'hui, je pense que je le confonds avec la dernière invite. Voilà, et quand je clique, ce sera bien si j'appuie sur un bouton de retour. Ça y est. Le petit bouton de retour. Fantastique Nous en avons donc fini avec l'adorable pour cette session Je pense que cette fois, cela a été une très bonne expérience. Maintenant, concentrons-nous sur la création de Figma et voyons ce qui s'y passe, pour savoir si elle va sortir du coma C'est bon, c'est blanc maintenant. Je préfère quand c'est blanc. Arrangez tout mieux. Suivez la navigation latérale de Kafana dont je vais vous donner une capture d'écran Et puis je mets en pause la même navigation latérale. Ou nous pouvons faire autre chose. Jouez à dog krafana.com, ouvrez-le. Navigation latérale ouverte. Faisons-le. Nous le donnerons dans le premier menu de l'espace aérien de gauche. Et ce tableau de bord devrait l'être. Enfin, suivez les perspectives et le style généraux de Grafana. Il se décolle donc et navigue comme une capture d'écran de Grafana, deux. Maintenant, donnons-en une autre. Faisons des grenades. Oui OK. Cela fera l'affaire. N'imitez pas le texte et les mesures. Tu ne fais que coiffer. Voyons comment ça se passe maintenant. Cela devrait être bien meilleur. Parfois, il faut être un peu plus convaincant. Un petit redémarrage musclé. Et voilà. Cela ressemble plus à ça. Se Finger Make aime vraiment plus de captures d'écran et lui dire quoi faire. Et encore une fois, vous voyez que lorsque vous cliquez, il y a le petit bouton de retour. Il vous fournit des visualisations exactement de style Grafana Ils sont tous là. C'est merveilleux. Avec tout cela en main, nous avons notre première page, et nous pouvons aller de l'avant. Lors de notre prochaine conférence, nous verrons lequel choisir. Lequel est le meilleur, même si sont à la fois des outils phénoménaux, des outils phénoménaux, et savoir comment prototyper est Mais nous y voilà. Nous en avons couvert un sur la base d'un. Ayez votre écran principal. Vous avez votre prototype principal. Voyons maintenant si nous allons utiliser Figma make all over bow lors de nos prochaines sessions, et quelle est la différence ? Quelles sont les similitudes et comment aller de l'avant ? Rendez-vous lors de la prochaine conférence. 6. Créer votre invite principale et récapituler la méthode.: Sympa. C'était la partie la plus importante de tout le processus de construction. Vous savez maintenant comment sculpter votre premier message avec précision et sans devinette Vous avez vu comment combiner des éléments visuels, des liens et une logique pour aider Cha GPT à faire exactement ce dont vous avez besoin Et n'oubliez pas que les déchets entrants sont équivalents aux déchets sortants. Un excellent prototype repose sur une IA intelligente et bien alimentée. Lors de la prochaine conférence, nous transformerons cette invite en écrans réels à l'aide visuels audacieux et d' instructions intelligentes. Allons-y 7. Figma Make et Lovable : la confrontation: Vous avez maintenant beaucoup plus de contrôle, et je suis sûr que vous pouvez le sentir. En combinant des visuels et des instructions détaillées, vous pilotez l'IA comme un directeur artistique et pas simplement comme un rédacteur rapide Cette approche vous permet de créer du flux, maintenir la cohérence et d'obtenir des écrans qui ressemblent à ceux du même produit. Ensuite, nous verrons quel outil utiliser, qu'il s'agisse de Figma mak ou Lovable, et quelles sont les différences et les similitudes Alors restez connectés et à bientôt à l'intérieur. 8. La comparaison finale en pratique: Et nous revenons à l' écran de Lovable Figma, Lovable sur le côté droit, Figma Make Maintenant, cette conférence porte sur le choix d'un outil. Et je suis vraiment là pour vous dire que quel que soit celui que vous allez choisir , vous allez choisir le bon. Ces deux outils sont tous deux de fantastiques outils de prototypage Air, et ils ont beaucoup en commun, mais ils présentent également de nombreuses différences Même maintenant, lorsque vous regardez l'écran, vous pouvez voir que sur la gauche, Figma make semble un peu plus structuré, un peu plus professionnel avec un design intégré Il est propre et compatible avec Figma à coup sûr. Oui, encore une fois, il peut être nécessaire de nous convaincre, comme vous l'avez vu, que nous devions créer une ou deux instructions supplémentaires sur le prototype Mais au final, le résultat est vraiment époustouflant. C'est un peu plus lent. Il faut un peu plus de temps pour comprendre les choses. Mais quand il comprend les choses, vous pouvez voir qu'il est vraiment facile à utiliser. Et pour moi, et à l'avenir, Figma sera probablement mon choix pour poursuivre le cours, mais c'est adorable Allons-y. Voici adorable. Ovable est incroyable parce qu'il a son propre esprit. C'est extrêmement rapide car il repose sur des modèles de conception qui sont très largement applicables et qui sont émotionnels. Ils sont comme des modèles de design à part entière. Lovable a toujours son propre truc, c' qu'il est vraiment proche de ce que vous lui demandez Mais il convient tout de même vraiment à vos idées visuelles et rapides en matière d'IA. Encore une fois, c'est émouvant et cela vous donne des résultats vraiment très rapides, très proches de ce que vous demandez et parfois extrêmement professionnels. Les deux fonctionnent merveilleusement bien. Ma cha GPT, comme vous l'avez vu, mais vous ne devez jamais oublier que Lovable possède cette fantastique Bible d' inspiration que vous devez obtenir et envoyer à votre GPT, afin qu'il sache Et ce qui est encore mieux, c' est que la Bible inspirée par Lovable fonctionne à la fois pour Lovable pour Figma Make Enfin, les connaissances en matière d'expérience utilisateur qui sous-tendent tout cela. Vous avez vu que lorsque nous avons commencé à enseigner notre GPT, nous lui avons fourni différents liens et différentes captures d'écran, non seulement en rapport avec les instructions de l'IA, mais aussi pour une bonne expérience utilisateur en général Et je vous laisse avec ça. Vous devez toujours demander à votre GPT des comme le livre préféré du Silicon Valley Product Group, qui contient d'énormes connaissances sur l'expérience utilisateur et sur la façon de créer des produits que vos utilisateurs adoreront ou sur tout autre produit que vous aimez, que vous aimez, sur le plan théorique Il suffit de prendre des captures d'écran de ces livres, obtenir des citations de ces livres et de les transmettre à votre GPT Ensuite, le choix des outils est facile car FigMomCN, tous adorables, combinés au cha GPT, et les bons articles et les bonnes connaissances constituent la trinité sacrée du prototypage IA de cette période vraiment intéressante de la civilisation humaine, à savoir la partie de l' histoire de l'IA que Donc, à partir d'aujourd'hui, à partir de cette conférence, nous allons utiliser Figma make pour poursuivre notre expérience de prototypage et notre parcours de prototypage Restez à l'affût des améliorations que nous allons apporter ce prototype d'engin spatial. Rendez-vous lors de la prochaine conférence. 9. Qui gagne et que faut-il utiliser ?: Avez-vous déjà construit un prototype à partir d'un outil d'IA ? Cela fonctionne, mais ça ne me convient pas vraiment. Cela se produit lorsque vous travaillez uniquement avec des textes ou uniquement des éléments visuels. Dans cette conférence, nous allons combiner les deux. Vous apprendrez comment afficher les outils d' IA écran par écran à l'aide de captures d' écran et d' instructions détaillées pour obtenir exactement ce dont vous avez besoin sans laisser l'IA dériver. C'est là que votre prototype commence à devenir réalité. Allons-y 10. Créer des prototypes AU de bout en bout avec Figma Make: Avez-vous déjà été tellement coincé dans votre prototype que l'IA crée des écrans étranges et les bloque toujours mal, et vous devez revenir en arrière, retravailler si souvent que vous finissez par abandonner et vous devez revenir en arrière, retravailler si souvent que vous finissez Cela signifie généralement qu'il a été créé d'abord par l'écran plutôt que par le flux. Dans cette conférence, nous utiliserons des outils pour cartographier parcours réels des utilisateurs afin que votre prototype puisse les suivre. Vous apprendrez à créer un flux à la fois et à connecter écrans en fonction d'interactions réelles sans deviner ce que l'utilisateur doit faire Cette étape fait le lien entre la stratégie et l'exécution. Alors, on va t'emmener dans le bâtiment, on se voit à l'intérieur 11. Créer des flux d'utilisateur pour vous aider à concevoir un prototype complet: Bienvenue dans la prochaine étape que nous allons faire avec notre idée fantastique de créer un prototype, l'outil d' observabilité des engins spatiaux Maintenant, même si nous avons quelques graphiques et que nous interagissons avec les boutons, nous voulons en tirer le meilleur parti. Nous ne voulons pas qu'il soit aussi statique qu'il soit interactif et qu'il nous fournisse beaucoup plus de détails sur ce vaisseau spatial et sur la façon dont nous allons l'observer. Prends ça avec un grain de sel, et pense-y. Il existe tous les autres prototypes que vous allez réaliser où les utilisateurs peuvent interagir différemment avec le produit que vous créez. Il faut savoir stratégiquement et techniquement ce qui se passe lorsqu'un utilisateur clique ici ou là, où il sera dirigé et quel sera son parcours utilisateur. Donc, pour aujourd'hui, nous allons avoir trois parcours différents en cliquant sur les différentes ressources, comme le courant thermique de la batterie Health Power. De plus, nous allons demander l'ajout de quelques boutons sur ces graphiques qui nous indiqueront les prévisions pour les différentes ressources. Enfin, nous allons rendre la chronologie des événements cliquable afin que nous puissions voir plus de détails sur les événements Cependant, même si nous avons cette vague idée en tête, ce que nous pouvons faire pour nous détendre et avoir un bon visuel, c'est ici dans Mirror, nous pouvons créer un tableau. Il existe un très beau tableau prêt à l'emploi , appelé modèle de site Web. Celui-ci, qui est l'organigramme du site Web et le câblage du site Web. Pour cela, je vais utiliser l'organigramme du site Web. Nous allons l' utiliser prérempli. Et maintenant, restons très simples. Je vais supprimer certaines choses juste pour que ça reste facile. Nous n'en avons pas besoin. D'accord. Voilà, je n'en ai pas besoin. Nous avons juste besoin du premier écran. Donc, notre premier écran est comme si j'étais assis ici, je vais juste le copier. Allons-y. Mets-le ici. Et nous avons dit que nous allions avoir trois connexions différentes. a un ici. Donnons-lui un peu de couleur pour qu' il soit plus visible et donnons-lui du poids. Allons-y. Quelle est la meilleure couleur, celle-ci. Donc celui-ci ira ici, celui-ci ira ici, et celui-ci ira ici. Allez. Ici, lorsque nous cliquons, nous pouvons mettre du texte, donc c'est plus facile pour nous. Lorsqu'un utilisateur clique sur une carte ci-dessus, vous devriez être en mesure de voir un sous-ensemble de tableaux de bord et d' alertes liés aux domaines courants de la santé, de l'alimentation C'était quoi et thermique ? Et bien plus encore. Maintenant, nous sommes là, et nous savons que le prototype ouvre actuellement ce tableau de bord. Cependant, nous n'y trouvons que des éléments aléatoires, et nous voulons le rendre plus exploitable et fournir des données réelles utiles aux gens Nous n'allons donc pas revenir à Lovable, nous allons à Chenept Nous allons aller voir notre ami, l'adorable prototype imaginaire. Je vais lui demander quelque chose. Nous allons lui demander de me donner des mesures et des visualisations réalisables avec des seuils ou engins spatiaux indiquant l'état de santé général Quel était l' autre ? Santé globale, énergie électrique et thermo, électricité, énergie et thermo, ils seront utilisés pour un prototype d'observabilité dans Figma. Donnez-moi une invite grise, comme nous le faisions auparavant pour un étudiant de premier cycle facilement distrait en UX Le graphique construit à partir de ces éléments va montrer dans une vue intégrée un tiroir lorsque vous cliquez sur une certaine carte au-dessus du dessin Voyons ce qui va se passer. En attendant l'invite, nous pouvons faire encore mieux. Comme nous l'avons dit, les images valent 1 000 mots, nous voulons donc voir le type de graphique. Voyons donc si nous pouvons faire ce qui suit. Nous pouvons voir le tableau de bord des tiroirs, les images , et pour le plaisir, nous pouvons simplement y chercher quelque chose qui nous plaît. Je dirais que c' est suffisant. Et c'est aussi simple que cela. Nous allons le copier. Nous allons y retourner. Mais voyez quel message nous avons. Copiez et collez pour y être invité. Mais dans la figma M, et attendez-le. Cela va donc s'ouvrir à partir de tout cela ici. Ici, il y a une astuce que je veux vous montrer, et débarrassons-nous des écrans à partir de maintenant, juste pour libérer de l'espace pour notre texte. Lorsque vous ajouterez les écrans ultérieurement, seront plus beaux si vous le souhaitez. Mais dans le cas des événements, ce que vous voulez voir lorsqu'un événement s'ouvre et lorsqu' il est lié à une santé thermique globale ou à une ressource électrique, vous devez essentiellement relier la même vue intérieure et ouvrir un tiroir lorsque vous cliquez sur. Je suis prêt avec cette invite. Nous pouvons aller de l'avant et vérifier que chacune de ces cartes doit être cliquable Et lorsque vous cliquez sur la carte, vous apparaissez à l'intérieur, mais lorsque vous cliquez sur l' événement, un tiroir apparaît. Ces deux éléments seront liés entre eux. Et c'est ce type de relation que je veux vous montrer ici et le fait que vous devez créer cet arbre de parcours utilisateur afin de réussir . Les meilleurs endroits pour le créer visuellement ici dans Mirror. Dans cet esprit, nous pouvons maintenant revenir à notre prototype et nous demander de voir ce qui va se passer. Une fois que cela se produira, nous pourrons essayer de créer les événements peu rapidement. J'obtiens donc ce que j'avais auparavant. Je vois que la chronologie des événements est l'en-tête de la carte Je dois donc absolument demander à CHANGPT de créer des vues d'aperçu pour l'onglet événements et de m' assurer que vous mettez toujours le bon nom dans le widget de chronologie des événements Ensuite, nous publions l'invite initiale. Disons-le encore une fois, lorsqu'un événement s'ouvre et qu'il est lié à l'une des trois cartes du dessus, il doit renvoyer à un tiroir. Nous devons donner à HAGPT l'essence du parcours d'utilisation Lorsqu'un utilisateur clique sur un événement, il doit ouvrir un tableau de bord. Il devrait s'agir d'un tableau de bord prédéfini pour le moment, un tableau de bord M, afin qu'il puisse avoir de bonnes visualisations Il devrait fournir des KPI pour ces événements, et ensuite, nous allons le relier aux vues d'informations des quatre cartes ci-dessus Voyons donc ce qui va se passer maintenant. Obtenir ceci, le coller dans le chat GPT, pour avoir un très bon et long bal de fin d'année, à la fois par santé globale et par batterie, afin que nous puissions avoir tous ces liens Je vais donc suivre l'invite précédente car ce sera l'invite de création de liens, et je vais simplement laisser le fait que Figma besoins pour créer ces vues intérieures dans l'onglet des événements. Ensuite, nous allons faire le lien. Alors, tu es prêt ? Nous cliquons dessus et Chad GPT nous donne l'invite. Découvrez ce que fait Figma Make pendant cette période. Cela fonctionne toujours. Voyons donc comment cela se passera une fois l'invite terminée. 12. Créer un prototype complet en connectant les flux d'utilisateurs: OK, maintenant Figma Make réfléchit. Et ce que nous devons faire ici maintenant, c'est prendre ce bal de fin d'année en GPT que nous avons créé précédemment Les KPI figurant dans les quatre premières cartes ou dans les vues d'informations sont donc les vues d'informations sont similaires à ceux que nous allons créer pour les événements ultérieurs Nous nous retrouvons ici pour les quatre meilleures cartes en matière de thermique, de santé, de batterie, etc. Soyez cliquable et pour ouvrir une vue intérieure que nous verrons plus tard, cliquez sur le lien vers la chronologie des événements sur la droite Maintenant, Figma Make est presque terminé, et une fois que c'est fait, nous allons lui indiquer les KPI Encore une fois, considérez-le comme un arbre. Nous allons relier certaines parties des vues intérieures, des cartes situées en haut, à certaines parties de la chronologie des événements , afin de pouvoir organiser un événement lorsqu' un certain seuil est atteint depuis la vue intérieure Nous y voilà. Maintenant, lorsque nous cliquons dessus, il y a une erreur. Donne-lui une seconde. Essaie encore. Lorsque nous cliquons dessus. Nous y voilà. Voici les vues intérieures. Mais encore une fois, ils n' affichent pas les mêmes KPI que nous voulons Nous allons donc demander à Figma Make de s'assurer que les différentes vues respectent les mêmes KPI que ceux que nous lui avons fournis précédemment Nous collons une grosse invite de Chan GPT avec tous les Lambdas, tous les seuils, et ça recommence à fonctionner voyez, tous les différents KPI que nous pouvons associer à un événement lorsqu'un certain seuil est atteint Et c'est facile à comprendre, non ? Si un vaisseau spatial surchauffe ou perd sa batterie, il devrait y avoir un événement nous disant : « Hé, il se peut qu'il tombe devrait y avoir un événement nous disant : « Hé, en panne ou que quelque chose de grave puisse se produire OK, Figma Make est en train de se terminer , juste un tout petit peu Un briquet qui va se réparer tout seul. Peut-être un peu plus de temps. Mais maintenant que tout sera terminé, vous verrez que les mêmes KPI que ceux que nous avions dans ChatGPT figureront dans ChatGPT figureront dans tableaux de bord pour la vue des informations OK, finis-le maintenant. On y est presque. Et c'est fait. Cliquons dessus. Et ils l'ont. Nous pouvons voir les KPI que nous voulions Nous pouvons consulter la chronologie des événements dans le tableau de bord des informations, et nous sommes prêts à les connecter. Une chose qui m'agace vraiment c'est cette situation de suivi au sol Je voulais avoir une carte avec une petite maquette à l'intérieur, afin que ce ne soit pas cette petite fenêtre noire Je veux voir le vaisseau spatial et sa destination dans ce widget, afin qu' il soit beaucoup plus exploitable Et nous pouvons voir sa position. Créez donc une carte de situation de Ground Track avec une maquette de petit avion et montrez sa position Et encore une fois, faisons-le comme s' il s'agissait d'un être humain. C'est vraiment bien qu'une fois que vous avez reçu une bonne invite initiale, vous puissiez commencer à converser avec Figma d'une manière lisible par un humain Et grâce au miracle du temps, cela devrait désormais nous fournir un bien meilleur visuel, et nous verrons notre avion sur une petite carte dans ce widget en 21. Nous y voilà. Voici notre petit avion et les endroits où il peut aller, où il a été tellement meilleur, si agréable visuellement. Maintenant, la dernière chose à faire est commencer à créer notre onglet d'événements. Et quand on fait ça, on veut le tiroir. Oui, nous avons déjà créé l'invite pour le tiroir et ce qu'il doit faire avec ChatGPT Encore une fois, nous copions l'invite et nous la donnons à Figma Make afin qu'il puisse cliquer sur les événements et ouvrir un tiroir de gauche à droite Ils doivent ouvrir les petits tiroirs prédéfinis que nous pouvons relier aux quatre meilleures cartes lorsqu'un seuil est dépassé. Voyons donc ce qui se passera lorsque Figma Make fini de travailler sur ces tiroirs Ce sera la dernière étape avant relier les deux et d' avoir un véritable parcours d'utilisation Figma Make est en train de finaliser une petite erreur que nous devons corriger Bien, voyons maintenant ce qui s'est passé avec notre chronologie des événements, et sont-ils cliquables ? Ils sont cliquables, mais ils ne semblent pas cliquables. Tu vois, le tiroir s'ouvre un tout petit peu. Je voulais vraiment qu'ils soient plus cliquables, et c'est ce que je vais demander à Figma Je veux que les événements apparaissent cliquables, qu'ils soient surlignés en bleu comme des hyperliens, et que le tiroir s'ouvre plus à gauche , au milieu de la page Et encore une fois, grâce à la magie de fgnomc qui comprend les humains, nous serons en mesure de voir s' il est capable de le faire lui demandant simplement en Voyons comment ça se passe. Notre message principal est solide, et je pense que Figma Make comprend maintenant ce qu'il fait et où nous voulons en venir Voyons voir. Figma Make est en train de finaliser Et oui, on y est. Ils sont bleus. Ils semblent cliquables et le tiroir s'ouvre au milieu de l'écran avec tous les KPI que nous voulions C'est un excellent résultat. Rendez-vous lors de la prochaine conférence. 13. Félicitations ! Vous l'avez fait ! Ensuite, nous allons nous lancer dans le tout !: C'est ainsi que vous maintenez votre prototype ancré dans le comportement réel de l'utilisateur. Vous disposez désormais d'un plan fonctionnel l'expérience réelle de vos utilisateurs, ce qui rend chaque écran que vous créez ensuite plus facile, plus rapide et plus ciblé Lors de la prochaine conférence, nous allons tout assembler et passer de zéro à un prototype fonctionnel. Construisons-le. On se voit à l'intérieur. 14. Créer votre marque, votre stratégie et votre invite de maîtrise: Vous êtes-vous déjà demandé à quoi ressemble réellement le fait de passer de zéro à un prototype fonctionnel en quelques heures, et non en quelques jours ? Eh bien, ça y est. Dans cette conférence, je vais vous expliquer le processus complet qui consiste à combiner votre message initial avec vos visuels et des instructions supplémentaires pour vos flux et tous les outils d'IA. Le pigmmic Holy Trinity, Lovable était doté du Vous verrez comment tout ce dont nous avons parlé se concrétise étape par étape. C'est là que la magie opère. Allons-y 15. Passer de 0 à 1 pour votre site web personnel avec Lovable (article: Encore une fois, nous sommes à l' écran de Lovable et du prototype du système de contrôle de mission AK Spacecraft Mais aujourd'hui, nous n' allons pas en parler. Nous allons faire quelque chose de totalement différent afin d'explorer non seulement Figma Make, mais aussi d' adorables superpouvoirs Ce que nous allons faire aujourd'hui, c'est créer votre propre site Web, développer votre marque et renforcer votre présence en ligne. Ceci est extrêmement important car chaque grand professionnel possède son propre site Web. Et maintenant, du début à la fin, faisons l'expérience complète de Lovable et de tout ce que nous avons appris lors des conférences précédentes Oh, sans plus attendre, comme nous l'avons dit, nous n' allons pas le faire. Nous allons accéder au tableau de bord et commencer quelque chose de totalement différent. Mais comme nous l'avons appris, nous devons d' abord planifier. C'est pourquoi j'ai planifié. Maintenant Miro. J'ai cette carte mentale de quoi devrait ressembler le site Web de quelqu'un et de ce que je voulais avoir. Il s'agit de l'arbre de l'expérience, de l'arbre du parcours utilisateur dont nous avons parlé. C'est simplifié car en fin de compte, il n'y a pas beaucoup de choses que vous pouvez faire sur d'un chef de produit ou page d'un chef de produit ou d'un consultant en produits. Alors voilà. abord, nous avons une page de prêt avec ma figurine préférée, des images , un logo et un nom, qui est divisée en trois chapitres principaux du site Web. L'un concerne les boutons d'appel à l'action, qui sont les premiers, les services qui viennent deuxième position et les contacts en troisième position. Sous les boutons d'action, nous avons LinkedIn, Medium et Substack où les gens peuvent me voir et me suivre sur LinkedIn Ils peuvent lire mes articles sur Medium et s'abonner à Medium et à Substack, selon leurs préférences Dans le domaine des services, c' est là que l'on gagne de l'argent. Si nous réfléchissons aux services que je fournis, disons agit d'une aide à l'embauche pour les entreprises, d'une aide à l'embauche des meilleurs BM, aide à la formation pour les entreprises et les personnes Eh bien, nous suivons cette formation, donc je vous propose ce service. Enfin, concevoir des CV sur mesure pour les futurs chefs de produit afin qu'ils puissent décrocher leur premier ou leur prochain emploi Sous contact, deux choses, cently ou n'importe quel planificateur de réunions que vous souhaitez utiliser, et un e-mail, afin que les gens puissent vous envoyer Avec cela, j'ai une idée générale de ce que doit faire mon site Web, qui est la première chose à faire. C'est vraiment important. Mais ensuite, outre ce qu'il devrait faire, nous devons savoir à quoi il devrait ressembler. Et je me demandais si je devrais préparer quelques liens avant les personnes que j'aime, etc. Mais ce serait super biaisé et super subjectif. Donc, ce que j'ai pensé faire et ce que nous allons faire maintenant, c'est de la super improvisation, en collaboration avec ChatGPT Passons donc à ChatGPT. Nous voulons le dire, je l'ai mis à réfléchir, afin que cela me donne de meilleures réponses. Et maintenant, réfléchissons de manière stratégique. L'objectif principal de ce site Web est le marketing. Il ne s'agit pas de gestion de produit. Donc, si nous pensons aux composants d'un tel site Web, le meilleur endroit où chercher est quelqu'un qui est un excellent spécialiste du marketing et possède son site Web personnel, quelqu'un qui est un excellent chef de produit et possède son propre site Web et un site Web, un site Web personnel extrêmement influent C'est donc ce que je vais demander à ChatGPT. Alors, donnez-moi trois sites Web. Un pour le célèbre Market Make qui a le plus de trafic de visiteurs. Trois sites Web personnels. Parmi les gens, un pour le spécialiste du marketing agricole, un pour le célèbre chef produit ou consultant en gestion de produits, et une personne très influente sur YouTube qui exerce une profession réputée Je souhaite que ces sites Web soient les plus fréquentés et influents auprès de leur groupe cible et qu'ils soient largement reconnus Nous y voilà. Trois personnes. Nous avons demandé, voyez où cela mène. Voyons maintenant où cela va nous mener. Il a un bon schéma de pensée, et voyons voir. Allons-y. Voici les trois personnes, Neil Patel, chef de produit, Marty Keegan, Andy Torsa Ali Abdal. Si vous n'avez pas regardé les podcasts Lee's, ils sont vraiment bons. OK. Nous avons ces trois-là. Je vais voir si les liens fonctionnent. Oui, ils le font Un seul VPG fonctionne. Voyons voir. D'accord. Bien. Incroyable. Nous savons donc maintenant à peu près à quoi ressemblera notre site Web et à quoi il va servir. Alors maintenant je vais faire une dernière chose. Je vais chercher ça. Je veux faire une capture d'écran, juste pour essayer de me faire économiser du travail. Je vais retourner à Chan GPT. Oh, dites-le, veuillez expliquer la structure d'un site Web et le libellé que nous utiliserons plus tard ou une adorable pompe. Nous y voilà. Fantastique. GPT a expliqué exactement ce que nous avions inclus dans la maquette Maintenant, ce que nous allons faire au GPT, c'est réparer Lovable prompt, exemple si vous parlez à un étudiant de premier cycle d' un lycée qui est un peu doué en UX, mais qui est extrêmement recyclable Assurez-vous qu'il suit la Bible Lovable point Dev Prompting. Il est extrêmement détaillé et le résultat est un site Web de marque personnelle parfait. Consultant en gestion de produits. Utilisez cette structure de site Web. Nous copions la structure du site Web à titre d'exemples de positionnement et d'apparence utilisons un mélange des sites Web suivants. Nous avons dit que Nopatel SVPGF la figurine se morphobe chacun à partir des liens suivants, et je vais lui donner Ce sont des choses que j'ai faites moi-même, plus ou moins avec l'aide, bien sûr, d'un peu de GPT Mais en gros, ce sont les figurines que j'adore utiliser. Ils font partie de ma marque, et je les aime suffisamment pour les mettre sur mon site Web. Je vais mettre ici des recherches approfondies au fur et à mesure que nous le faisons afin qu'il puisse y avoir une recherche plus approfondie et une meilleure marque. Voyons maintenant quelle magie va opérer . Oh, encore une chose. Assurez-vous d'utiliser les couleurs des figurines pour le site Web. D'accord. Eh bien, voyons ce qui se passera ensuite. Bien, avant de commencer, quels sont les surnoms et le logo à utiliser ? C'est bon. Le nom est donc Seal calf et F. Vous pouvez générer un logo composé des initiales, Vous voulez un ton et une sensation ? Utilisez le ton et l'ambiance des trois sites Web que j'ai édités, à savoir que je vais être extrêmement directif, afin qu'il ne pense à rien d'autre. Devrais-je écrire une invite, supposant que le site sera en supposant que le site sera construit avec un framer ou un code Webflow, le site sera construit en point adorable Dv Tout slogan spécifique que vous voulez sous votre nom, générez le slogan et inspirez-vous de set, Godin, violet, vache OK. Nous pensons que nous sommes bons ? Ce sera intéressant. Voyons maintenant où la recherche va enfin commencer. Génial. Il dit : «   Where is gonna get it », la couleur de mes thèmes avec les figurines, génère le slogan, génère le logo. Allons-y. Voyons comment ça se passe. Fantastique. Enfin, après 13 minutes de réflexion et de sauces en étain, nous avons le message Lovable. Je l'ai lu, et il est vraiment très bon, comme hier soir. Oh, nous avons un plan de voiture. temps d'y arriver, c'est ce que dit un GPT. Nous allons chez Lovable Nous lui donnons l'invite, mais j' ajouterais également plusieurs captures d'écran, car l'image compte 1 000 mots. Composons un ensemble rapide d'images. Tu peux le faire dans No, tout de suite Nuro. Je vais juste prendre ceux que j'aime le plus. Oups. Alors on y va. Je vais composer une image à partir de toutes ces images pour voir si elle va voler, afin de ne pas dépasser la limite de trois images. Je pense que nous avons un bon sous-ensemble d'images de figures en bâton. espace sur planches ? OK. Les images sont prêtes. Lovable est là. Oh, alors prenons deux images. Faisons Aileen. Et enfin, un VPG. OK. Maintenant que nous aurons les trois captures d'écran, l'invite, voyons ce qui va se passer. Lovable commence à fonctionner maintenant. Et une fois que ce sera fait, nous aurons, espérons-le, un très bon site Web personnel pour moi avec des figurines et de bonnes fonctionnalités, tout en un seul endroit. Voyons comment ça se passe. R. C'est un peu choquant, une fois que Lovobo a dévoilé le truc Et, oh, mon Dieu, j'ai vu ça et je me suis dit : « C'est la fin ». C'est la fin du cours. Lovo ne fait pas ce que je lui demande de faire. Mais lorsque nous faisons défiler la page vers le bas, nous voyons qu' un site web décent a effectivement permis de suivre mon travail. Il est écrit Linked in media newsletter. Il parle de soutien à l'embauche, de formation et d'atelier, de coaching de carrière civile. Il fournit de très très bonnes choses. Réservez un appel grâce à l'intégration de mon calendrier directement dans celui-ci. Envoyez-moi un e-mail. Je vérifierai ça plus tard. Mais le site général est fantastique. Nous avons ces choses, qui sont extrêmement laides. Maintenant, ce que nous allons faire, c'est retourner ChatGPT et lui dire Faisons trois sites web personnels avec des pages de destination phénoménales domaine de jeu est la gestion des produits, le marketing et le conseil. Mais avec un peu plus d'inspiration, je suis sûr que ce magnifique site web va se terminer ce magnifique site web va se Voyons ce que ChatGPT vous fournira. Quels sont ces trois sites Web personnels qui ont des pages de destination phénoménales selon ChatGPT ? OK. Et avec la magie du temps, nous avons nos concurrents Le premier, Non. Deuxième. Et encore une fois, c' est ma préférence personnelle. Cela dépend vraiment de ce à quoi vous vouliez ressembler. Celui-ci était meilleur. Ah, Lenny. Voilà Lenny Fantastique. Comme toujours, je veux m' inspirer de Lenny Si tu ne suis pas Lenny, tu sais quoi faire. D'accord. Nous allons donc dire à Lovable de créer la page de destination avec un nom similaire et de mélanger ces deux captures d'écran C'en est une et j'aime bien April Dun Fold, c'est sûr. Vous pouvez utiliser certaines de ces figurines **** au lieu de celle que vous avez créée. Je fais aussi des captures d'écran. Ce que je vais faire, c'est retourner sur Miro, les télécharger un par un OK. Terminé. Voyons si ça va être mieux, et espérons que ce sera mieux. C'est un peu mieux, mais le texte est juste volé. Et V encore mieux, à mon avis. Revenons au NGPT. Utilisons notre prototype , et je vais vous le dire. Je veux un pronto adorable, mais uniquement la page de destination un site Web personnel, afin qu'elle ressemble aux captures d'écran et qu'elle génère la figurine au lieu de l'humain sur la photo Il faut utiliser les joueurs et coller des figurines, comme pour les captures d'écran, je vais donner des besoins simples mais les gens veulent faire défiler la page vers le bas. OK, essayons encore une fois. Cette fois, nous allons d'abord passer en revue Chachi pet, celui-ci et celui-ci Oh, encore une chose. Assurez-vous de vous conformer à la Bible selon vos connaissances et d'être très détaillé lorsque vous expliquez à un diplômé du préscolaire ayant une compréhension limitée de l'expérience utilisateur qui est très facilement indissociable OK, faisons-le encore une fois. D'accord. Nous avons le message. Nous y voilà. Copions-le. Copions-le et voyons ce qui se passe. Bien, c'est beaucoup mieux. Maintenant, peut-être que nous pourrons simplement le faire, modifier l'espacement. Non, c'est bon, mais rembourré. OK, essayons autre chose, N. Supprimons les espaces blancs vides de King au-dessus et en dessous de la page de destination. Les boutons de positionnement, d'inquiétude et de stratégie touchent donc presque le haut de la page. Confirmez. 16. Les pièges et les éléments à prendre en compte lors de l'ajustement des prototypes aux produits: OK, maintenant c'est l'heure de faire quelque chose de drôle. Nous sommes partis au point où nous en étions arrivés là, avec tellement de rythme en haut et en bas qu'il était difficile de faire défiler la qu'il était difficile de faire défiler Je vais vous révéler un secret caché. À la fin de la conférence, j'ai essayé de le modifier, et j'ai essayé de me procurer des outils visuels et constater que je ne pouvais rien faire. Tu vois, quand je clique dessus, je ne peux pas supprimer les espaces vides derrière. Écrivez tout ce que je pouvais, puis accidentellement, j'ai fait défiler et j'ai vu que j' étais sur le zoom à 90 % Donc, essentiellement, cela ressemblera ceci plutôt qu'à ce que je vous ai montré précédemment. Donc, dans l' histoire, il y a beaucoup de pièces mobiles, alors prenez-en soin. Voyons ce que nous pouvons faire maintenant. Peut-être que nous pouvons ajouter un peu de rembourrage. Non, nous ne pouvons pas. Ce n'était pas bon. Alors jetons-le. Je pense que nous pouvons laisser cela de côté pour le moment, encore une fois. Et voyons quelque chose de différent. Ce que nous voulons faire, c'est l' agrandir et agrandir la police . Incroyable OK, ça a l'air fantastique maintenant. Ce que nous devons faire maintenant, c'est simplement changer le texte, créer ces boutons. Ce n'est pas la bonne couleur. Nous pouvons donc obtenir les modifications visuelles et commencer à les faire une par une afin d'avoir des instructions plus ciblées Créez ce bouton avec le style rose de tous les autres boutons et passez la souris dessus OK, maintenant c'est rose, mais faites en sorte qu'il soit toujours aussi rose que moyen. Disons-le comme ça. Modifications visuelles, adoptez le même style que le bouton situé derrière le médium Voyons comment il va réagir. Non, ce n'est pas ce que nous voulions, donc nous allons annuler le dernier changement, le rendre rose foncé une fois dans Dv OK. J'apprends comment ça fonctionnait. Le bouton semble plus cliquable et ressemble à un bouton. Faites-en sorte que cela ressemble au contraire du travail avec le bouton Mean. Il y a donc un certain contraste. Ensuite, je vais commencer à le demander pour ce truc. Les histoires de positionnement doivent être des boutons, et elles doivent être appelées. Je t'y aiderai. Contact, ils doivent créer un lien vers les parties respectives de la page en fonction de l. D'accord, j'aime bien. Ces choses devraient donc changer maintenant. Je préfère ça à ce qu'il y a ici. Alors apprenez comment cela fonctionne. Même style que les boutons. Je vous aide à assurer le service et le frontag afin que nous puissions avoir une certaine cohérence Oui OK, super sympa. Je veux que le parchemin voie comment j'aide à mettre en gras. OK. Sympa. Nous pouvons maintenant changer le texte, creuser, accéder à Chat GPT et le raconter C'est le titre de mon site Web. Rendez-le plus influent, plus court et plus percutant. Et le fait qu'il s'agisse d'un cabinet de conseil en gestion de produits. Cliquez sur Conseil en gestion de produits Word. J'aime bien ça. Changeons-le. Cliquez sur Conseil en gestion de produits Word. OK. Pouvez-vous même l'appeler Click Worth Product Management. La gestion des produits Click Worth est bonne. Les boîtes doivent être plus courtes et plus tranchantes. Encore une fois, vous pouvez faire ce que vous voulez avec le libellé. C'est extrêmement important. Mais vous pouvez le faire, comme nous l'avons fait pour l'adorable prototype GPT Allez-y et enseignez-le. Connaissances en marketing, apprenez-lui à bien faire passer ces phrases. Je transforme des produits complexes en un positionnement qui vend. Je vous aide à transformer des produits complexes en un positionnement simple. J'aide les fondateurs et les dirigeants à transformer la complexité en un positionnement qui fait vendre. OK, utilisons-le. Et encore une fois, c'est principalement à des fins de test, donc tout ira bien. Ensuite, nous pourrons redescendre. Ce sont des bruits. Je n'aime pas le fait qu' ils ne soient pas cliquables. Faites donc en sorte de clarifier la position et communiquer des boutons qui ouvrent des fenêtres contextuelles contenant du texte, puis générez un bon texte contextuel fournissant des détails sur le sous-titre et le titre L'idée est que lorsque je clique en tant qu'utilisateur, j'obtiens plus d'informations sur la façon dont je vous aide. Voyons comment ça se passe. Allons-y. Fantastique Faites en sorte que les icônes apparaissent en rose comme dans d in et dans les médiums ci-dessous afin que nous puissions avoir de la cohérence Les icônes sont roses. Faites-les passer en rose foncé lorsque l' utilisateur les survole, tout comme le fait de survoler l'icône de taille moyenne permet d' être encore plus Non, rien. Essayons encore une fois. Faites-les apparaître dans le style de la capture d'écran lorsque vous les survolez Parfois, les petites choses demandent beaucoup de clics. OK, j'ai fait quelque chose. Oui, cela le rend plus foncé, pas de la même couleur, mais si je le demande plusieurs fois, cela arrivera. Essayons de faire des choses plus importantes avant continuer à le demander si nous le voulons Maintenant, je veux ajouter les liens vers mon média et ma newsletter derrière les boutons et le lien suivant vers le bouton média. Ainsi, lorsque je clique, il s'ouvre dans un nouvel espace humide. Disons que je suis là et mettons le lien suivant derrière bouton de la newsletter où il s'ouvre. Je tape, je sous-pile sur ma sous-pile ou juste sur celle-ci pour gagner du temps Voyons comment ça se passe. D'accord. Voyons voir. Est-ce qu'il s'ouvre ? Ouaip. Lettre d'information. Ouaip. Œuvres. Des services. Maintenant, je vous demanderais lorsque je clique sur le soutien à l'embauche, sur les formations et les ateliers, sur CV et carrière, d'ouvrir une jolie fenêtre contextuelle avec du texte supplémentaire expliquant comment je m' OK, sympa et j'ai même changé le style comme je le voulais. Donc, lorsque je clique, Go pour entrer en contact. Quand je clique, ça me contacte et quand je clique, ça me contacte. Je dois vous dire que chaque fois que quelqu'un clique sur Get in Touch, il doit toujours ouvrir, réserver un appel lier galamment **** dans Street away Book call Voyons voir. Ensuite, nous devrons simplement corriger les boutons ci-dessous. Ce serait bien. Et peut-être que ces boutons seront terminés. Il s'agira d'un nouveau site Web progressif. OK, c'est fait. Voyons voir. Réservez une voiture Fantastique C'est une bonne chose. Maintenant, créez les boutons et envoyez-moi un e-mail, ressemblez aux boutons Travailler avec moi avec style et passez la souris En fait, commencez à aimer ceux-ci ici parce qu'ils ont un style différent parce qu'ils avancent. Ils vous redirigent en fait. Donc je suis d'accord avec ça. Faites en sorte que le bouton « m'envoyer un e-mail » soit aussi grand que le bouton « Réserver ». Oup, enfin. C'est bon. D'accord, d'accord, d'accord. Sympa. Je pense qu'avec cela, nous sommes vraiment prêts à voir comment je peux vous aider. Services. Réservez un appel pour dire que nous sommes bons. C'est ainsi que vous utilisez essentiellement Lovable pour créer votre propre site Et lorsque vous cliquez sur Publier, vous pouvez ajouter votre URL et la rendre publique. C'est fantastique. Merci beaucoup d'être restée avec moi pendant ces nombreuses conférences. Je suis absolument certain que vous allez désormais en finir avec le prototypage basé sur l'IA, et que vous comprenez parfaitement comment la relation entre Figmamk , adorable de Chan GPT se noue la relation entre Figmamk , adorable de Chan GPT, et à quel point vous pouvez communiquer avec ces trois outils pour générer à la fois des prototypes et des produits réels incroyables Rendez-vous lors de la prochaine conférence. 17. FÉLICITATIONS !VOUS AVEZ DÉBLOQUÉ UN LEVIER INFINI. CONSTRUISEZ L'AVENIR !: Et juste comme ça, vous un prototype fonctionnel en utilisant l'IA en un rien de temps. Il s'agit de la nouvelle norme. Vous savez désormais comment briefer l' IA, structurer les flux d'utilisateurs et transformer rapidement des idées en produits tangibles et testables Que vous prépariez un argumentaire, souteniez le design ou validez une idée, ce flux de travail vous donne un avantage Vous n'utilisez pas que des outils. Tu utilises une stratégie. Bon prototypage, et à bientôt. Un travail incroyable.