L'IA dans le développement web : 4 prompts à tester

L'intelligence artificielle générative allège une partie du travail des développeurs, des responsables UX et des responsables SEO. Les spécialistes posent une question ou donnent des instructions, ils obtiennent en retour une réponse ou une ressource exploitable. Utiliser l'IA dans le développement web permet par exemple de connaître les dernières tendances en UX design, ou d'obtenir un morceau de code pour programmer une application.

Pour exploiter l'IA en développement web, il faut en connaître les capacités, et savoir comment formuler les requêtes. Ces prompts donnent des idées de requêtes et des exemples de formulation.

Comment l'IA peut aider les développeurs web ?

L'IA est un assistant virtuel très performant, qui aide les développeurs web de trois manières :

• L'IA avance le travail des développeurs web. L'IA génère des portions de code, par exemple, pour accélérer l'écriture ; le développeur revoit ensuite le code pour vérifier que le résultat correspond à ses attentes, puis il l'intègre dans son fichier. À cet égard, l'IA ChatGPT affirme être capable de générer du code HTML/CSS, JavaScript, Python, Java, C++, PHP ou encore TypeScript.
• L'IA effectue des tâches non stratégiques pour le compte des développeurs web. C'est le cas par exemple quand l'IA est utilisée pour déboguer du code source, à l'instar d'un IDE doté d'une fonctionnalité de débogage. Autre exemple : l'IA peut indiquer quelle regex utiliser et comment.
• L'IA est un outil efficace pour se documenter. Tendances en UX design, bonnes pratiques de cybersécurité ou encore techniques pour optimiser un site web : le développeur peut utiliser l'IA pour obtenir des informations. Il faut toutefois être attentif à la pertinence des informations : d'une part car l'IA n'est pas infaillible, d'autre part car les informations ne sont pas nécessairement à jour. ChatGPT, par exemple, explique qu'elle n'a pas la capacité d'accéder à des bases de données en temps réel. La dernière mise à jour de la version payante date d'avril 2023, les données parues postérieurement ne sont pas intégrées à ses réponses.

1 - Générer des lignes de code

L'IA, à l'instar des outils low-code, est utile pour accélérer le travail des développeurs web. D'après l'éditeur de GitHub Copilot, outil d'IA au service du développement, le gain de temps est de 55 %.

Grâce à l'IA, le développeur web obtient des morceaux de code prêts à l'emploi. Le niveau de précision du prompt est déterminant : mieux la requête est formulée, plus le résultat est conforme aux exigences.

Le prompt « Génère du code pour créer un formulaire de contact », par exemple, permet d'obtenir le code HTML de base pour créer un formulaire de contact. Voici le résultat.

See the Pen prompt-ia-generer-formulaire-contact_ia-developpement-web by HubSpot France (@HubSpot-France) on CodePen.

C'est une bonne base de travail, générée instantanément. Il faut ensuite personnaliser le code, en fonction des champs à afficher. Il faut en outre appliquer un style avec CSS, pour rendre le formulaire de contact esthétique. Il faut aussi gérer la partie côté serveur, pour traiter les données du formulaire.

Le prompt peut être plus précis. Sur la base d'un cahier des charges détaillé, le développeur web fournit des instructions enrichies, afin d'obtenir immédiatement le code qui correspond au résultat souhaité. Le prompt « J'ai besoin du code html et css pour créer un formulaire de contact qui oblige à mentionner le nom, le prénom, la date de naissance, le numéro de téléphone et l'e-mail, avec un fond en couleur bleue, et les champs sur 3 colonnes », par exemple, fournit un résultat affiné.

See the Pen prompt-ia-detaille-formulaire-contact_ia-developpement-web by HubSpot France (@HubSpot-France) on CodePen.

La manière de formuler le prompt est importante. Il faut être précis et objectif, pour permettre à l'IA de comprendre ce que le développeur web attend précisément. Les prompts pour générer des lignes de code sont utiles pour programmer des éléments isolés d'une application ou d'un site web.

2 - Optimiser les performances SEO

Les performances SEO d'une application ou d'un site web peuvent régulièrement être améliorées . Le développeur web, le responsable UX et le responsable SEO peuvent solliciter l'IA pour obtenir une analyse et des recommandations. Les prompts doivent être précis. Exemples de prompts pour optimiser les performances SEO d'une application ou d'un site web :

• « J'écris un blog pour fournir des conseils aux utilisateurs des produits de ma marque. Quels sont les recommandations à suivre pour attirer du trafic sur le blog ? » Une IA générative répond à ce prompt par une liste de bonnes pratiques, notamment : Comprendre Votre Public Cible, Contenu de qualité, Optimisation des Mots Clés, Partage sur les Réseaux Sociaux ou encore Newsletter. Chaque bonne pratique est expliquée brièvement.
• « Mon site est lent, comment faire pour l'accélérer ? » Sans plus de détails, l'IA, en réponse à ce prompt, fournit les recommandations d'usage et explique que « Ces recommandations sont générales et peuvent nécessiter des ajustements en fonction des détails spécifiques de votre site et du framework que vous utilisez ». Le développeur web peut alors poursuivre la conversation, en fournissant une indication à propos du framework. La réponse gagne en précision : « Utilisez le code splitting pour diviser votre application React en chunks plus petits. Cela signifie que le navigateur n'a besoin de télécharger que le code nécessaire à la vue actuelle de l'utilisateur. »

3 - Trouver de l'inspiration

Polices d'écriture web, animations web, associations de couleurs ou encore interface utilisateur : interroger l'IA sur les usages aide le responsable UX à trouver de l'inspiration. Exemples de prompts pour inspirer le design de l'interface d'une application ou d'un site web :

• « Quelles sont les polices d'écriture tendances sur le web ? » Attention à consulter la date de mise à jour des données de l'IA. Pour connaître des tendances, en effet, il faut utiliser une IA à jour au moment de formuler le prompt.
• « Quelles animations utiliser sur mon site web pour mettre en valeur un bouton CTA ? ». Changement de couleur au survol, rebond au survol ou encore effet de soulignement ou de surbrillance : l'IA fournit une liste d'idées pour inspirer l'UI designer.
• « Montre-moi des maquettes d'interface utilisateur pour un site de e-commerce. » Ce prompt aide à visualiser le site web, et permet de n'oublier aucun élément. L'IA générative ChatGPT n'est pas capable d'afficher des visuels, mais décrit la structure du site de manière détaillée, page après page.

4 - Rendre un site responsive

L'IA est capable d'aider les développeurs web à rendre un site responsive, de deux manières.

• Le développeur web peut fournir un morceau de code à l'IA, et lui demander de corriger le code de manière à rendre le site web responsive. Cet usage permet d'obtenir des indications très spécifiques, pour aller plus vite.
• Le développeur web peut formuler un prompt de type « Quelles sont les pratiques à appliquer pour que mon site soit responsive ? ». L'IA répond alors de manière générale, en indiquant les principes de base de création d'un site responsive.

Le développeur web, à partir de ce type de prompt, peut poursuivre son travail avec l'aide de l'IA. Quand l'outil suggère d'utiliser les mises en page Flexbox ou Grid CSS, par exemple, le développeur peut demander « Comment utiliser Flexbox ou Grid pour créer des mises en page responsive ? ». Étape par étape, l'IA explique alors comment rédiger le code CSS. Il suffit de copier-coller ce code, et de le personnaliser.

Est-ce que l'IA peut remplacer les développeurs ?

Il n'est pas question de remplacer les développeurs, mais de leur fournir un outil supplémentaire pour alléger leur travail. Quoi qu'il en soit, l'IA a besoin d'instructions pour fonctionner. Or ces prompts doivent être formulés par des spécialistes métiers. Les développeurs web, à cet égard, jouent un rôle indispensable :

• Les développeurs web maîtrisent la technicité de leur métier, ils sont capables de fournir à l'IA des instructions suffisamment précises pour obtenir un résultat exploitable.
• L'IA n'est pas infaillible. Les développeurs web vérifient les réponses et les ressources, pour fournir un travail irréprochable.
• L'IA n'est pas créative. Pour développer des applications et des sites web, il faut faire preuve de créativité : cette compétence est le propre de l'humain.

Comme d'autres nombreux outils, dont les outils no-code, l'IA vulgarise le développement web. Créer des applications et des sites web devient plus accessible, mais la valeur ajoutée des spécialistes métier reste incontestable.

Pour aller plus loin, découvrez les opportunités d'affaires liées aux évolutions du web en téléchargeant le guide et la checklist du web 3.0, ou découvrez le logiciel marketing de HubSpot.