Concevoir un site web avec des Agents de design et de programmation
Introduction du chapitre
Ce chapitre montrera comment le design et le développement peuvent parfaitement collaborer grâce à l'IA. Vous jouerez le rôle de chef de produit, dirigeant un « Agent de design » pour créer le Logo, le schéma de couleurs et la mise en page, puis coordonnant un « Agent de programmation » pour transformer les maquettes visuelles en code exécutable. De l'idée créative à la mise en ligne du site, vous vivrez le flux de développement complet propulsé par l'IA, et deviendrez une équipe à vous seul.
1. Guide de démarrage
1. Présentation du tutoriel
Construisons un site web complet à partir de zéro en utilisant un Agent de design AI et un Agent de codage.
- Agent de design : responsable de la création du logo, de la mise en page des pages, du schéma de couleurs et d'autres éléments visuels
- Agent de codage : écrit le code réel (HTML/CSS/JS etc.) en fonction des besoins et de la mise en page que vous spécifiez dans vos prompts, pour construire un site web fonctionnel
2. Agent de design et Agent de codage
- Agent de design : une IA qui génère des images, des maquettes ou des styles de design en fonction des prompts que vous fournissez.
- Mastergo
- Lovart
- Figma MCP
- Agent de codage : une IA qui écrit du code réel (HTML/CSS/JS etc.) en fonction des fonctionnalités et de la mise en page que vous demandez dans vos prompts.
- Z.AI
- Trae
- Cursor
- Lovable
2. Créer un Logo avec l'Agent de design
1. Éléments clés à considérer pour le design du Logo
Le Logo est l'un des éléments clés qui déterminent la première impression de votre site web. Pour obtenir des résultats satisfaisants de l'Agent de design AI, vous devez décrire clairement dans votre prompt le type de Logo que vous souhaitez.
- Nom de marque / Texte
- Le texte qui doit apparaître dans le Logo (par exemple : titre du site, nom de marque, etc.).
- Style (humeur / atmosphère)
- Le sentiment ou l'ambiance globale que le Logo doit transmettre.
- Exemples : minimaliste, mignon, épuré, moderne, vintage, futuriste, etc.
- Schéma de couleurs (optionnel)
- Il est préférable que les couleurs du Logo correspondent au ton général du site web.
- Vous pouvez spécifier des codes hexadécimaux précis ou des tons généraux (froids, chauds, etc.).
- Exemples :
#171721(noir),#FF7130(orange).
- Forme (structure / composition)
- Précisez si le Logo nécessite une forme ou une composition spécifique.
- Exemples : texte à l'intérieur d'un cercle, combinaison icône + texte, Logo principalement basé sur une icône, etc.
- Éléments d'icône / symbole (optionnel)
- Les graphiques ou symboles que vous souhaitez voir apparaître dans le Logo.
- Exemples : icône de livre, symbole d'éclair, graphique lié à l'IA, forme géométrique abstraite, etc.
2. Rédiger le prompt de design du Logo
Exemple de prompt
"Merci de concevoir un Logo au style minimaliste, le nom de marque est 'My First Website'.
Utilise le noir (#171721) et l'orange (#FF7130), et place le texte à l'intérieur d'un cercle.""Merci de concevoir un Logo avec 'AIID' comme nom de marque.
Le style global doit être futuriste, propre et épuré, avec le bleu et le blanc comme couleurs principales.
Combine un graphique abstrait symbolisant l'IA avec le texte, et exporte en PNG avec fond transparent."3. Demander le design à l'Agent
- Saisissez le prompt ci-dessus -> comparez les plusieurs propositions de design générées par l'Agent.
4. Finaliser le Logo
- Choisissez la version que vous préférez parmi les brouillons et téléchargez-la.
3. Planifier la structure de votre site web
1. Comprendre les sections de base
Avant de vraiment commencer à construire le site web, il est important de planifier les menus (sections) à inclure. Le design des menus dépend de ce que vous voulez que les visiteurs voient et des actions que vous attendez d'eux. En général, un site web se compose généralement de sections de base comme Home / About / Contact.
2. Dessinez d'abord un croquis de structure (optionnel)
Vous pouvez d'abord écrire une structure de menu simple en fonction des objectifs du site.
Menu de base
- Home
- La page principale que les visiteurs voient en premier en arrivant sur le site
- Comprend généralement le Logo, une zone visuelle principale et un slogan ou une brève présentation
- About
- Présente qui vous êtes, ou le but du projet / service
- Portfolio personnel : présentation + bref CV
- Site de services : vision, objectifs et fonctionnalités clés
- Contact
- Coordonnées, comme email, numéro de téléphone, liens vers les réseaux sociaux, etc.
- Vous pouvez aussi ajouter un simple formulaire de contact
Menus optionnels
Services / Projects
- Présente les services que vous offrez, ou vos projets / portfolio
- Généralement affiché sous forme de liste ou de cartes
Gallery
- Pour afficher des images, photos ou créations graphiques
Blog / News
- Pour publier des articles, des actualités ou un journal
FAQ
- Compile les questions fréquemment posées par les visiteurs et leurs réponses
3. Choisir un schéma de couleurs (optionnel)
Si vous avez déjà un Logo, ou si vous voulez utiliser une combinaison de couleurs spécifique pour le site, vous pouvez directement inclure les codes couleur dans votre prompt.
Exemple : #171721, #872B97, #FF7130, #FF3C68
Même si vous n'avez pas encore de schéma de couleurs en tête, vous pouvez trouver de l'inspiration sur des sites spécialisés ou en cherchant par mots-clés.
- Sites de référence pour les couleurs
- Recherche de couleurs par mots-clés sur Google
4. Rédiger le prompt de design du site web
Exemple de prompt
"Merci de concevoir un site web monopage composé des sections Home, About et Contact.
Utilise les couleurs #171721, #FF7130 et #FF3C68.
Le style global doit être moderne et épuré."4. Concevoir le site web avec l'Agent de design
1. Saisir le prompt -> générer la maquette
- Écrivez dans le prompt la structure planifiée et les couleurs choisies.
Exemple de prompt Mastergo
2. Réviser la maquette et faire des retours
Vous pouvez faire des retours à l'Agent en fonction de vos besoins, par exemple :
- « C'est trop chargé, rends le style global plus épuré. »
- « Change la police. »
- « Ajuste la combinaison de couleurs. »
- « Supprime cette section ici. »
3. Finaliser le design
Une fois que vous êtes satisfait de la maquette après plusieurs itérations, vous pouvez transformer ce design en code, pour que l'Agent de codage puisse le comprendre et continuer le travail.
La méthode pour convertir le design en code varie selon les plateformes, mais se fait généralement en installant et utilisant certains plugins dans la plateforme de design.
Exemple Mastergo
- Ouvrez le site des plugins Mastergo, cherchez seal.
- Retournez à la page de design, cliquez sur l'icône carrée (plugin).
- Sélectionnez la zone de design que vous voulez convertir en code, cliquez sur le bouton Generate pour générer le code.
5. Construire le site web avec l'Agent de codage
1. Comprendre les concepts de base de HTML/CSS/JS
Un site web est essentiellement composé de trois langages :
- HTML (HyperText Markup Language) -> Structure (squelette)
- CSS (Cascading Style Sheets) -> Style (apparence)
- JavaScript (JS) -> Fonctionnalité (interaction)
Ces trois éléments travaillent ensemble pour former la page web complète que nous voyons.
- 🏗️ HTML (structure)
- Définit « ce qui est affiché » dans la page
- Utilisé pour placer du texte, des images, des boutons, des liens et autres éléments
- Analogie : les murs et la charpente d'un bâtiment
Exemple
<h1>Hello!</h1>
<p>This is my first website.</p>
<a href="contact.html">Contact</a>- 🎨 CSS (style)
- Détermine « comment le contenu est affiché »
- Contrôle la taille du texte, les couleurs, les espaces, les arrière-plans, la forme des boutons, etc.
- Donne à HTML ses « vêtements » et son style visuel
Exemple
h1 {
color: #FF7130; /* Text color */
font-size: 36px; /* Font size */
text-align: center; /* Center alignment */
}
body {
background-color: #171721; /* Background color */
color: white; /* Default text color */
}- ⚙️ JavaScript (JS) (fonctionnalité)
- Permet à la page web d'interagir avec l'utilisateur
- Peut implémenter des clics de bouton, des menus déroulants, des carrousels d'images, des soumissions de formulaire et autres effets dynamiques
- Si HTML/CSS sont le squelette et l'apparence statiques, alors JS est le cerveau qui donne vie à la page web
Exemple
function showAlert() {
alert("The button has been clicked!");
}<button onclick="showAlert()">Click me</button>2. Laisser l'Agent de codage générer le code
Exemple de prompt
"Merci d'écrire le HTML et CSS pour un site web monopage contenant les sections Home, About et Contact.
Utilise les couleurs #171721, #FF7130, #FF3C68.
Fond noir, texte blanc."
3. Lancer le site web
Une fois le code brouillon généré, l'Agent démarre généralement le projet automatiquement et affiche la page web générée.
Si vous avez redémarré l'Agent, ou si la page web ne s'affiche pas, vous pouvez entrer un prompt comme :
"Please activate the project"Pour que l'Agent redémarre le projet et ouvre la page de prévisualisation, afin que vous puissiez voir le résultat actuel.
4. Faire des modifications simples
Vous pouvez continuer à affiner le brouillon via le langage naturel, par exemple :
- « Rends le bouton plus grand. »
- « La police plus grasse. »
5. Modifier le contenu textuel du site
Le site web généré en première version par l'Agent contient généralement du texte de remplissage automatique. Pour le rendre plus adapté à votre cas réel, vous pouvez préparer le contenu réel à l'avance, puis demander à l'Agent de le remplacer.
Exemple d'application : mise à jour de la page About du site AIID
- Écrivez d'abord le contenu que vous souhaitez afficher sur la page About. Pour faciliter la compréhension par l'Agent, vous pouvez enregistrer le contenu au format Markdown.
- Ensuite, dites à l'Agent dans la conversation d'appliquer le contenu de ce fichier à la page spécifiée.
- Consultez la version mise à jour après application du contenu.
6. Insérer des images
Si vous souhaitez ajouter des images spécifiques (par exemple Logo, image de fond, etc.), vous pouvez d'abord uploader les images dans le dossier du projet, puis indiquer dans votre prompt où les utiliser dans la page.
- Exemple :
- Résultat :
6. Intégrer le design et le code
1. Intégrer les fichiers de design avec le code du site web (optionnel)
Une fois que vous avez téléchargé les fichiers de code depuis l'Agent de design, vous pouvez les déplacer dans le répertoire du projet actuel, puis demander à l'Agent de codage de fusionner le code de design avec le projet existant.
- Exemple :
- Résultat :
