Crée un site web avec de l'IA

À la une : Avec o3, OpenAI se rapproche de l'AGI

Author

Jean-Charles FABRE
January 02, 2025

Au menu d’aujourd’hui :

  • 🎊 Bilan 2024 de la newsletter.

  • 👨‍💻 Crée un site web avec de l’IA.

  • 🗞️ À la une : Avec o3, OpenAI se rapproche de l’AGI.

  • 💎 4 autres news et découvertes.

🎊 Bilan de l’année 2024

Pour A Kind of Magic, l’année a été courte puisqu’elle a commencé le 7 novembre 2024.

Tu peux retrouver toutes les précédentes éditions 👉 ici

Quelques faits marquants de cette année express:

Ce n’est qu’un début, on to 2025 🔥

🎓 Le tutoriel du jour

À la fin du tutoriel tu sauras générer des maquettes d'un site avec de l'IA et utiliser un agent IA de développement web pour le créer et le déployer.

D’ici 5 minutes tu sauras créer et déployer un site similaire avec de l’IA.

Objectif du tutoriel

On se met à la place du fondateur d’une entreprise spécialisée dans la construction de villas de luxe à Bali.

On voudrait créer une landing page de présentation des services de l’entreprise.

C’est quand déjà qu’il fait jour après 16h ?

Cas d'usage

  • 🎨 Design : Prototyper un site vitrine en quelques heures pour tester une idée auprès de prospects.

  • 📣 Marketing : Lancer rapidement un mini-site pour une campagne publicitaire spécifique.

  • ⚒️ Produit : Prototyper une interface SaaS pour valider un concept avec les utilisateurs.

  • 🤗 RH : Créer un portail carrière attractif pour valoriser la marque employeur.

  • 📞 Sales : Développer des mini sites personnalisés pour les prospects importants.

Outils utilisés

Étape 1 : Génère les maquettes du site

Rends-toi sur relume.io et crée un compte.

Relume.io te permet de générer des sitemaps et des maquettes à partir d'un prompt et ensuite les modifier, soit manuellement, soit avec de l'IA.

💡 À noter : Une sitemap c’est le plan d’un site, ses pages et les sections qui les composent.

Essayons pour voir ce que ça donne. On va lui demander de générer une landing page pour notre entreprise.

On voit qu'il nous a généré une sitemap avec une description pour chaque section qui correspond à l’activité de notre entreprise.

Et les maquettes associées.

Sur relume.io les sitemaps sont synchronisées avec les maquettes.

Pour l'exemple, on va se dire qu'on veut que notre site contienne les sections suivantes :

  • Une section Hero de présentation avec des images de villas.

  • Une section expliquant notre mode de fonctionnement.

  • Une section présentant deux projets récents.

  • Une section présentant les deux cofondateurs du site.

  • Une section avec un formulaire de contact.

On va modifier la sitemap pour refléter ces choix et ajuster les descriptions des sections correspondantes.

J’ai supprimé les sections en trop et j’ai ajusté les descriptions de chaque section.

Quand on se rend dans l'onglet wireframe, on a la possibilité de rafraîchir les maquettes pour refléter les changements effectués sur l'onglet sitemap.

On a aussi la possibilité de choisir parmi d'autres composants similaires pour chaque section.

Par exemple pour la section servant à illustrer 2 projets récents on choisit une vue galerie avec 2 images.

💡 À noter : On peut modifier le texte de chaque section manuellement ou avec de l'IA.

Une fois qu'on est satisfait, on peut exporter le fichier.

Étape 2 : Ajoute ton propre style

Importe le fichier sur Figma.

Ajoute ton propre style (les couleurs, les images) pour qu'il corresponde à ce que tu as en tête.

Ceci est le symptôme d’une carence en vitamine D.

💡 À noter : relume.io a lancé une fonctionnalité permettant de générer des styles directement sur leur interface, et elle est en beta.

On a nos maquettes définitives. On va pouvoir utiliser un agent IA de développement web pour le créer et le déployer.

💡 À noter : Pour ce genre de cas, il serait probablement plus simple d'utiliser un outil de création de sites nocode, type Webflow, qui a une intégration native avec relume.io et Figma, mais on va utiliser Lovable pour découvrir l’outil.

Étape 3 : Crée le site et déploie-le

Rends-toi sur Lovable et crée un compte.

💡 À noter : Lovable c’est un agent IA vertical spécialisé dans le développement web.

Télécharge le fichier Figma au format JPEG, téléverse-le sur Lovable et demande lui de reproduire l’image.

Lovable te décrit son processus de décision et ce qu'il est en train de faire.

💡 À noter : Le plan gratuit permet de faire 5 à 6 demandes de modifications.

Après une demi-douzaine d’aller-retours, voilà ce que ça donne pour notre site. Il y a évidemment pas mal de choses qu'on aimerait encore changer, mais on arrive à la limite du plan gratuit de Lovable.

Voici le lien du site créé dans ce tutoriel si tu veux regarder de plus près.

Une fois que tu es satisfait, tu peux cliquer sur "Publish" et ajouter ton propre nom de domaine.

FAQ

  • Combien ça coûte ? —> Le plan gratuit de Relume permet de générer une page. Le premier plan payant commence à partir de $26 par mois et permet de générer plus de pages et d’avoir accès à la bibliothèque complète de composants. Le premier plan payant de Lovable commence à partir de $20 par mois et permet de demander environ 100 modifications avec l'IA par mois.

🕺One prize, one goal ?

Partage la newsletter pour obtenir l’accès aux agents IA qui me font gagner le plus de temps au quotidien.

Plus que 3 parrainages pour débloquer ton prochain agent IA : Agent IA "E-mail".

Ou tu peux directement partager ton lien : https://www.akindofmagic.ai/subscribe?ref=PLACEHOLDER

PS : Voici 6 templates à copier-coller, testées et approuvées, pour booster tes parrainages en moins de 5 min et sans avoir l’air spammy.

🗞️ À la une

🧞‍♂️ Avec o3, OpenAI se rapproche de l’AGI

1

  • OpenAI a terminé son calendrier de l’Avent par l’annonce du lancement des modèles o3 et o3-mini. Ces modèles marquent une avancée significative dans la gestion de tâches de raisonnement complexes, et ont établi de nouveaux records des benchmarks techniques. Cf perfs du modèle o3 :

    • Code : classement ELO de 2727 sur la plateforme Codeforces, soit près de 800 points de plus que le modèle o1, qui s’établit à 1891.

    • Mathématiques : 96,7% à l’AIME (contre 83,3% pour o1) et 25,2% au difficile benchmark Frontier Math d’EpochAI, alors que la plupart des modèles ne dépassent pas 2%.

    • Raisonnement scientifique : 87,7% sur GPQA Diamond, dépassant la performance typique d’un PhD, estimée à 70%.

    • Benchmark ARC-AGI : 87,5%, dépassant les 85% de performance humaine.

  • o3-mini offre une alternative légère, réduisant les coûts de calcul tout en restant performant, grâce à des réglages adaptables en fonction des tâches.

  • Actuellement, seuls quelques chercheurs y ont accès pour des tests de sécurité. o3-mini devrait être rendu public d’ici janvier 2025, et le modèle o3 devrait suivre.

💎 Autres news & découvertes

  • La startup chinoise DeepSeek dévoile DeepSeek-V3, un modèle open-source qui écrase tous les benchmarks.

  • Anthropic a partagé un guide complet pour concevoir des agents IA efficaces.

  • Dans l’Arizona, une école a divisé le temps d’apprentissage par 2 en dispensant une partie des cours avec une IA qui s’adapte au niveau de chaque élève.

  • Elon Musk lève une série C de 6 milliards de dollars pour xAI.

🎤 À toi le micro

Voilà, c’est la fin de cette 9ème édition de A Kind of Magic, j’espère qu’elle t’a été utile.

N’hésite pas à la partager si c’était le cas.

Dispo pour échanger en réponse à cet e-mail ou sur Linkedin.

À jeudi !

Jean-Charles