Comment j'ai créé la landing page de Jaydai avec l'IA
Rendons à César ce qui est à César.
Nous sommes très fiers de vous présenter la nouvelle landing page de Jaydai sur laquelle vous vous trouvez actuellement 🍾🍾Cette landing page, on a voulu la rendre la plus belle et informative possible, et je ne sais pas vous, mais nous on est super contents du résultat!
Mais si je vous disais qu’il nous a fallu une semaine en tout et pour tout pour fabriquer de A à Z cette vitrine?
Vous ne me croiriez sûrement pas…
Une landing page, responsive, multilingue, multi-thème (nuit/jour) avec autant d’effets visuels et d’informations ? Bien-sûr moi je suis le roi d’Angleterre (j’ai toujours connu cette expression à propos de la reine d’Angleterre, (mais il faut vivre avec son temps)?Alors je vais vous le dire tout de suite : non ce site n’a pas été fait uniquement par une IA. Et non, je ne risque pas de me faire grand remplacer par des algos.En revanche, réaliser ça en une semaine, sans aucun budget, aurait été 100% impossible sans une IA.Et avant de vous détailler (avec des preuves) le déroulé exact de ce projet, je voulais vous partager dès à présent quelques enseignements :
TL;DR (Trop Long; Donc Résumé)
Pour ceux qui veulent aller à l'essentiel:
Il ne faut jamais prendre pour acquis que l’IA n’est pas capable de faire quelque chose. J’ai testé de faire générer des sites par de l’IA des dizaines de fois, ça n’a jamais marché. Mais ça c’était avant la sortie de Manus qui est l’outil que j’ai utilisé. L’IA avance vite, ses limites aussi, n’hésitez jamais à “réessayer”.
Une IA, c’est rarement suffisant pour un projet d’envergure. Dans mon cas, j’ai utilisé Claude, chatGPT et Manus. Et évidemment ma propre intelligence et mes connaissances techniques.
Il est temps de revoir nos ambitions à la hausse. Jamais de la vie, pour une landing page comme la nôtre, on serait partis sur une version similaire, ça aurait pris beaucoup trop de temps. Et en utilisant un outil no-code basique, on aurait peut-être mis 2 jours plutôt que 7, mais on aurait eu une version dix fois moins impressionnantes (et pas les mêmes taux de conversion que ceux qu’on a actuellement 😉)
Les étapes
Passons maintenant à la démarche étape par étape.
1
Découvrir Manus
Allez faire un tour sur leur site pour en savoir plus, mais en quelques mots : Manus, c’est un agent IA généraliste qui a son propre Operating system. C’est-à-dire que vous lui envoyez un prompt, et lui ne vous répond pas tout de suite, il analyse la situation, vous pose des questions complémentaires et utilise son ordinateur interne pour répondre à votre demande.
2
LE prompt
A savoir sur Manus : dans la version gratuite, vous pouvez envoyer des prompts de moins de 1000 caractères et vous obtenez comme cadeau de bienvenue 1000 crédit. Chaque demande consomme des crédits (la mienne valait à peu près 300 crédits). Une fois le prompt initial, Manus clarifie et se met à coder dans son coin (une bonne dizaine de minutes dans mon cas). Vous trouverez ci-dessous l’exacte conversation que j’ai eue : 👉 Le Replay
3
La vérification
Honnêtement au moment de checker ce qu’il avait fait, je n’y croyais pas trop. Et c’était beaucoup trop fastidieux d’aller checker tout le code. Alors j’ai choisi la solution offensive : déployer le code sans le toucher. Si vous voulez reproduire chez vous :
- Télécharger le fichier jaydai-landing-code.zip et ouvrez le
- Ouvrez un terminal et allez dans ce dossier et lancer la commande suivante :
pnpm install && pnpm run dev - Ouvrez
localhost:3000et vous avez la version originale.
4
Prendre cette base pour faire générer des idées à Claude
J’ai mis mon code sur github et comme Claude est capable de lire des repo github, il a eu accès à tout mon code et m’a généré pas mal de choses que j’ai intégré (notamment dans la version entreprise).
5
Générer des images de grande qualité
En l'occurence, j'ai utilisé chatGPT pour générer des images qui correspondent aux couleurs de Jaydai. Avec la nouvelle version du générateur d’images c’est très efficace.
6
Coder par soi-même… En s’aidant d’outils d’IA
Il y avait quand même un peu de boulot (à peu près une semaine) pour faire marcher tous les boutons, créer un petit backend pour récupérer les demandes de contact, etc. Heureusement, j'ai pu m'aider de quelques outils comme Claude (très utile pour les traductions), chatGPT (très utile pour les images), Cursor (très utile pour le code) et un peu de Manus aussi, notamment pour l’optimisation SEO.
7
Ouvrir une bonne bière avec son associé et profiter du moment 🍻
Preuves à l'appui 👇
A ne pas reproduire chez vous
Tous les prompts que j'ai utilisé
Si vous voulez reproduire un projet de ce genre chez vous, voici en détail les différents prompts que j'ai utilisé.Je vous les ai laissé en VO (souvent en anglais car cest souvent mieux pour le code, et avec des fautes d'orthographe (pour vous montrer que ce n'est pas ce qui importe le plus quand on prompte) 😉.
Tous les prompts pour la création de cette landing page
N'hésitez pas à copier-coller et à tester par vous même...
Générer la structure avec Manus
Première tentative de faire générer une landing page fonctionnel avec Manus
Agent IACode frontend
I will send you some information about my company, and I want you to create a Next.js landing page using tailwnd css, shadcn and 21st dev omponents.
My landing page need to have :
- an animated hero section (for example https://21st.dev/mikolajdobrucki/hero-section/default)
- A hero video dialog (https://magicui.design/docs/components/hero-video...
Résultat du prompt
I'll help you create a Next.js landing page with all the components you've requested. I'll use Tailwind CSS, shadcn, and 21st.dev components to build an engaging and modern landing page. Let me get started on this right away. I'll first set up the Next.js project with the necessary dependencies, then implement each of the components you've mentione...
Commentaires
En donnant déjà à Manus le langage qu'il doit utiliser, des exemples publics de components que je trouve joli et la liste de ce que j'attends j'augmente les chances qu'il ait exactement ce que j'ai en tête
Générer des idées complémentaires (notamment pour la partie entreprise)
Générer plein d'idées pour me donner de l'inspiration et pour avoir une base plus grande encore de code dans lequel piocher au moment où je me mettrai moi-même à coder.
LLMCode frontendDesign
You are a Software Engineer with great design skills and specialist of creating amazing landing pages with Next.js, Tailwind CSS, ShadCN, 21st.dev (or any similar component libraries).
I have created a first draft for my landing page (attached). I will send you some informations about Jaydai (my product), and I would like you to find ways to add m...
Résultat du prompt
I'd love to help you create impressive design ideas for your Jaydai landing page!
Looking at your files, you already have a solid foundation with components using Next.js, Tailwind CSS, and motion animations.
Let's create an "ideas" page with fresh design concepts that will make your landing page even more engaging and conversion-focused.
First,...
Commentaires
C'est le moment pour laisser plus de champ libre. Je continue de lui donner des indications sur les outils à sa disposition (tailwind, shadcn, etc.), mais je lui donne une description de Jaydai pour qu'il me propose des idées de designvque je n'aurai pas forcément eue.
Générer des images pour la landing
Trouver un prompt qui fera une image qui me convient et ne pas le lâcher tant que je génère de nouvelles images.
ImageDesign
Canvas Create an image for my landing page that illustrates this point:
{
"id": "training",
"title": "Team Training & Coaching",
"description": "Equip your workforce with the skills to leverage AI effectively in their daily tasks.",
"features": [
"Customized workshop programs",
"Role-specific training modules",
"Practical use ca...
Résultat du prompt
L'image qui est utilisée pour illustrer le coaching dans la partie services de la page entreprise.
Commentaires
En lui donnant les couleurs de Jaydai (en format numérique), je m'assure de la cohérence globale de mon site. Prouesse d'autant plus impressionnante que je suis daltonien...
Céer le blog de la landing
Une landing page sans blog? Please...
Code FrontendDatabase Design
You are a Software Engineer.
I am developing a landing page (I will send you the codebase).
I want to add a new page: blog.
I have created a Supabase table (attached: the SQL query that I ran in Supabase) that will contain all blog articles.
The blog page will display all these blog articles.
Please create:
- The blog section components
- The bl...
Résultat du prompt
I'll help you create a blog section for your landing page.
Based on the codebase you provided, I see that it's a Next.js application with Tailwind CSS styling and internationalization support.
You want to add a blog page that will display articles stored in a Supabase table.
You didn't provide the SQL query for the Supabase table structure, so I...
Commentaires
J'ai utilisé ce prompt après avoir moi-même coder sur le projet pendant une semaine. Le prompt est beaucoup moins long, car en lui partageant mon code, claude a déjà beaucoup d'infos sur ce que j'ai en tête...
Un dernier pour la route : générer la FAQ avec un prompt officiel de Jaydai
Quelques variables à rentrer dans notre template, et hop : le tour est joué
MarketingCréer une FAQ
A découvrir dans notre extension
Résultat du prompt
Les FAQ (particuliers et entreprise) de notre site
Commentaires
Le prompt en entier est disponible dans notre extension, venez le tester par vous-même!
Conclusion
Et voilà, vous ave pu voir ce qui se passait "sous le capot" comme on dit. Comme vous le voyez, une grande partie de ce code a été généré ou écrit avec de l'IA. Mais puisque j'ai commencé par rendre à César ce qui était à César, je finirai par me donner un peu de crédit quand même : Sans les heures que j'ai passé à coder et à debugger, cette landing ne serait pas aussi belle!
J'espère que ce premier article de blog vous a plu et que vous avez appris des choses. Si vous voulez recevoir d'autres exemples de prompts, tips, conseils, astuces sur l'IA pour devenir des experts de ChatGPT, n'hésitez pas à vous abonner à notre newsletter The Tunnel.
À très vite 👋
Partagez cette expérience avec vos collègues
Vous avez trouvé cette approche intéressante ? Partagez cet article avec vos amis et collègues qui s'intéressent à l'IA et au développement web.