{"id":7423,"date":"2026-10-22T06:38:32","date_gmt":"2026-10-22T06:38:32","guid":{"rendered":"https:\/\/portaileduc.net\/website\/?p=7423"},"modified":"2026-11-02T16:12:43","modified_gmt":"2026-11-02T16:12:43","slug":"vibe-coding-un-guide-pratique-pour-creer-des-sites-web-avec-lintelligence-artificielle","status":"publish","type":"post","link":"https:\/\/portaileduc.net\/website\/vibe-coding-un-guide-pratique-pour-creer-des-sites-web-avec-lintelligence-artificielle\/","title":{"rendered":"Vibe coding : cr\u00e9er un site web avec l\u2019IA"},"content":{"rendered":"\n

Yann Houry propose un guide interactif consacr\u00e9 au vibe coding<\/strong>, une approche du d\u00e9veloppement informatique qui consiste \u00e0 utiliser l’intelligence artificielle pour cr\u00e9er des sites web et des applications \u00e0 partir d’instructions formul\u00e9es en langage naturel. Accessible aux personnes qui ne ma\u00eetrisent pas n\u00e9cessairement la programmation, cette ressource rassemble des conseils, des exemples et des instructions pr\u00eates \u00e0 l’emploi pour accompagner les diff\u00e9rentes \u00e9tapes d’un projet de d\u00e9veloppement web.<\/p>\n\n\n\n

Des conseils pour se lancer et am\u00e9liorer ses cr\u00e9ations<\/h3>\n\n\n\n

Le guide est organis\u00e9 en plusieurs rubriques permettant de progresser dans la conception d’un projet :<\/p>\n\n\n\n

    \n
  1. D\u00e9marrer<\/strong> : choisir un assistant d’intelligence artificielle, d\u00e9crire son projet et produire une premi\u00e8re version ;<\/li>\n\n\n\n
  2. Am\u00e9liorer son site<\/strong> : enrichir les fonctionnalit\u00e9s, adapter l’affichage aux appareils mobiles et travailler l’accessibilit\u00e9 ;<\/li>\n\n\n\n
  3. Optimiser et s\u00e9curiser<\/strong> : am\u00e9liorer la structure du code, identifier les erreurs et examiner les \u00e9ventuelles failles de s\u00e9curit\u00e9 ;<\/li>\n\n\n\n
  4. Personnaliser ses cr\u00e9ations<\/strong> : utiliser des biblioth\u00e8ques d’ic\u00f4nes, des polices, des palettes de couleurs et des ressources graphiques ;<\/li>\n\n\n\n
  5. R\u00e9soudre les probl\u00e8mes<\/strong> : apprendre \u00e0 utiliser les outils du navigateur et \u00e0 transmettre les erreurs rencontr\u00e9es \u00e0 l’IA.<\/li>\n<\/ol>\n\n\n\n

    La ressource pr\u00e9sente \u00e9galement diff\u00e9rents assistants, notamment ChatGPT, Gemini, Claude, Codex et Claude Code.<\/p>\n\n\n\n

    \n
    \n

    Des prompts pr\u00eats \u00e0 utiliser<\/h3>\n\n\n\n

    Une rubrique propose des mod\u00e8les de prompts personnalisables<\/strong> pour accompagner la cr\u00e9ation et l’am\u00e9lioration d’un site web. Les utilisateur\u00b7rices peuvent notamment pr\u00e9parer des instructions pour cr\u00e9er un premier site, examiner son accessibilit\u00e9 ou r\u00e9aliser une analyse de s\u00e9curit\u00e9. Un g\u00e9n\u00e9rateur de prompt permet \u00e9galement de personnaliser le sujet d’un site et sa palette de couleurs avant de r\u00e9cup\u00e9rer les instructions \u00e0 transmettre \u00e0 l’IA.<\/p>\n<\/div>\n\n\n\n

    \n

    Ajouter des fonctionnalit\u00e9s plus avanc\u00e9es<\/h3>\n\n\n\n

    Le guide pr\u00e9sente plusieurs outils et biblioth\u00e8ques permettant d’enrichir un projet avec l’aide de l’intelligence artificielle :<\/p>\n\n\n\n

      \n
    • Remotion<\/strong> pour cr\u00e9er des vid\u00e9os et des animations ;<\/li>\n\n\n\n
    • Qwen3-TTS<\/strong> pour transformer des textes en contenus audio ;<\/li>\n\n\n\n
    • Leaflet<\/strong> pour int\u00e9grer des cartes interactives ;<\/li>\n\n\n\n
    • Three.js<\/strong> pour cr\u00e9er des visualisations en trois dimensions.<\/li>\n<\/ul>\n\n\n\n

      Chaque proposition est accompagn\u00e9e d’explications, d’un prompt \u00e0 adapter et d’un exemple illustrant le r\u00e9sultat attendu.<\/p>\n<\/div>\n<\/div>\n\n\n\n

      Un guide qui met en pratique ses propres conseils<\/h3>\n\n\n\n

      L’une des particularit\u00e9s de cette ressource est son caract\u00e8re interactif. La page int\u00e8gre directement plusieurs d\u00e9monstrations : personnalisation de couleurs, exemples de contenus multim\u00e9dias, cartes, repr\u00e9sentations 3D ou encore simulations d’outils de d\u00e9veloppement. Des tutoriels compl\u00e9mentaires expliquent \u00e9galement comment utiliser Git pour conserver les diff\u00e9rentes versions d’un projet, exploiter l’inspecteur du navigateur pour identifier des erreurs ou cr\u00e9er un fichier AGENTS.md<\/code> pour conserver les consignes destin\u00e9es \u00e0 l’assistant IA.<\/p>\n\n\n\n

      Ce guide peut notamment int\u00e9resser les enseignant\u00b7es et formateur\u00b7rices qui souhaitent concevoir leurs propres outils p\u00e9dagogiques interactifs<\/strong>, r\u00e9aliser des simulations, d\u00e9velopper de petites applications ou cr\u00e9er des ressources num\u00e9riques adapt\u00e9es \u00e0 leurs besoins. Une ressource pour d\u00e9couvrir progressivement le d\u00e9veloppement assist\u00e9 par intelligence artificielle, tout en gardant \u00e0 l’esprit la n\u00e9cessit\u00e9 de tester et de v\u00e9rifier les productions g\u00e9n\u00e9r\u00e9es.<\/p>\n\n\n\n

      Consulter le guide \u00ab Conseils pour le Vibe Coding \u00bb :<\/strong><\/p>\n\n\n\n

      \nhttps:\/\/www.ralentirtravaux.com\/apps\/vibe-coding\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"

      Le guide interactif de Yann Houry pour d\u00e9couvrir le vibe coding : cr\u00e9er un site web ou une application avec l’IA \u00e0 partir d’instructions en langage naturel, sans savoir programmer.<\/p>\n","protected":false},"author":2,"featured_media":7424,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_post_was_ever_published":false},"categories":[196,236],"tags":[275,277,291,292,310],"class_list":["post-7423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-outils-tice","category-ia","tag-creation-de-contenus","tag-tutoriel","tag-guide-et-dossier-pedagogique","tag-informatique-numerique","tag-en-programmation-algorithmes-et-automation"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6aRPV-1VJ","jetpack-related-posts":[{"id":5411,"url":"https:\/\/portaileduc.net\/website\/guide-dactivites-technocreatives-pour-les-enfants-du-21e-siecle\/","url_meta":{"origin":7423,"position":0},"title":"Guide d\u2019activit\u00e9s technocr\u00e9atives pour les enfants du 21e si\u00e8cle","author":"Maxime Duquesnoy","date":"7 d\u00e9cembre 2021","format":false,"excerpt":"A la recherche d'id\u00e9es pour int\u00e9grer diff\u00e9rents usages cr\u00e9atifs des technologies pour l\u2019apprentissage dans plusieurs domaines, en plus de pistes d\u2019\u00e9valuation concr\u00e8tes pour les comp\u00e9tences du 21e si\u00e8cle. D\u00e9couvrez donc le \u00ab Guide d\u2019activit\u00e9s technocr\u00e9atives pour enfants du 21e si\u00e8cle \u00bb avec ses 15 activit\u00e9s. Le guide\u00a0\u00a0a \u00e9t\u00e9 r\u00e9alis\u00e9 dans\u2026","rel":"","context":"Dans "Comp\u00e9tences num\u00e9riques"","block_context":{"text":"Comp\u00e9tences num\u00e9riques","link":"https:\/\/portaileduc.net\/website\/category\/competences-numeriques\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2021\/12\/guide-300x196-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7352,"url":"https:\/\/portaileduc.net\/website\/gemini-creer-des-competences-personnalisees-pour-automatiser-ses-taches-avec-lia\/","url_meta":{"origin":7423,"position":1},"title":"Gemini : cr\u00e9er ses comp\u00e9tences personnalis\u00e9es","author":"Maxime Duquesnoy","date":"22 octobre 2026","format":false,"excerpt":"Les \u00ab Comp\u00e9tences \u00bb de Google Gemini enregistrent des instructions personnalis\u00e9es pour les t\u00e2ches r\u00e9currentes : plus besoin de reformuler les m\u00eames consignes \u00e0 chaque utilisation.","rel":"","context":"Dans "Intelligence artificielle"","block_context":{"text":"Intelligence artificielle","link":"https:\/\/portaileduc.net\/website\/category\/ia\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2480,"url":"https:\/\/portaileduc.net\/website\/jeu-des-7-familles-de-linformatique\/","url_meta":{"origin":7423,"position":2},"title":"Jeu des 7 familles de l’informatique : cartes \u00e0 imprimer","author":"Maxime Duquesnoy","date":"24 novembre 2019","format":false,"excerpt":"Un jeu de 7 familles gratuit \u00e0 imprimer pour d\u00e9couvrir 42 personnalit\u00e9s de l'informatique et 7 grands domaines : algorithmes, s\u00e9curit\u00e9, r\u00e9seaux, intelligence artificielle...","rel":"","context":"Dans "L'Atelier de Ludo"","block_context":{"text":"L'Atelier de Ludo","link":"https:\/\/portaileduc.net\/website\/category\/latelier-de-ludo\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2019\/11\/cartes-7-familles.png?fit=350%2C495&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5873,"url":"https:\/\/portaileduc.net\/website\/vittascience\/","url_meta":{"origin":7423,"position":3},"title":"Vittascience","author":"Maxime Duquesnoy","date":"23 octobre 2026","format":false,"excerpt":"Vittascience, une plateforme \u00e9ducative en ligne pour apprendre la programmation, exp\u00e9rimenter avec des objets connect\u00e9s et comprendre le fonctionnement de l'intelligence artificielle.","rel":"","context":"Dans "Intelligence artificielle"","block_context":{"text":"Intelligence artificielle","link":"https:\/\/portaileduc.net\/website\/category\/ia\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/12\/basic.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/12\/basic.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/12\/basic.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/12\/basic.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/12\/basic.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3050,"url":"https:\/\/portaileduc.net\/website\/tutoriels-pour-le-travail-a-distance\/","url_meta":{"origin":7423,"position":4},"title":"Tutoriels pour le travail \u00e0 distance","author":"Maxime Duquesnoy","date":"11 avril 2020","format":false,"excerpt":"L\u2019\u00e9quipe du Livrescolaire.fr a r\u00e9uni une s\u00e9lection d'outils, des conseils et des bonnes pratiques pour la mise en \u0153uvre du travail \u00e0 distance avec vos \u00e9l\u00e8ves dans plusieurs guides t\u00e9l\u00e9chargeables en PDF. \u00a0 Guide n\u00b01 : Cr\u00e9er un espace de travail partag\u00e9 avec vos \u00e9l\u00e8ves Ouvrir le PDF dans un\u2026","rel":"","context":"Dans "Outils p\u00e9dagogiques"","block_context":{"text":"Outils p\u00e9dagogiques","link":"https:\/\/portaileduc.net\/website\/category\/outils-pedagogiques\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/04\/unnamed.png?fit=1177%2C778&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/04\/unnamed.png?fit=1177%2C778&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/04\/unnamed.png?fit=1177%2C778&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/04\/unnamed.png?fit=1177%2C778&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/04\/unnamed.png?fit=1177%2C778&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4537,"url":"https:\/\/portaileduc.net\/website\/des-activites-debranchees-pour-sinitier-sans-materiel-numerique\/","url_meta":{"origin":7423,"position":5},"title":"Activit\u00e9s d\u00e9branch\u00e9es : 7 s\u00e9ances et 4 jeux pour programmer sans \u00e9cran","author":"Maxime Duquesnoy","date":"24 novembre 2020","format":false,"excerpt":"Un guide gratuit de l'\u00e9quipe Num\u00e9rique 87 pour initier les \u00e9l\u00e8ves du primaire \u00e0 la programmation sans ordinateur : 7 s\u00e9ances avec des robots en papier et 4 jeux de soci\u00e9t\u00e9.","rel":"","context":"Dans "Education au num\u00e9rique"","block_context":{"text":"Education au num\u00e9rique","link":"https:\/\/portaileduc.net\/website\/category\/education-au-numerique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/11\/Capture-decran-2020-11-24-155836.png?fit=952%2C556&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/11\/Capture-decran-2020-11-24-155836.png?fit=952%2C556&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/11\/Capture-decran-2020-11-24-155836.png?fit=952%2C556&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2020\/11\/Capture-decran-2020-11-24-155836.png?fit=952%2C556&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/1792088866504.jpeg?fit=800%2C584&ssl=1","_links":{"self":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/comments?post=7423"}],"version-history":[{"count":4,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423\/revisions"}],"predecessor-version":[{"id":9166,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423\/revisions\/9166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/media\/7424"}],"wp:attachment":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/media?parent=7423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/categories?post=7423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/tags?post=7423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}