4. Définir votre cahier des charges graphique & technique

Objectif : lister les fonctionnalités techniques et l'allure graphique de votre projet, sous une forme qu'un agent IA peut exécuter sans ambiguïté.

Avec WordPress, le cahier des charges servait à choisir un thème. Ici, c'est lui qui construit le site : l'agent appliquera ce qui est écrit, et rien d'autre. Tout ce que vous laissez flou, l'IA le comblera à sa manière, généralement par la solution la plus banale.

L'allure du site / partie graphique

Voici les questions que vous devez vous poser à ce stade :

Allez-vous utiliser un logo ? Si oui, il faudra en créer un ou en trouver un prêt à l'emploi, au format SVG ou PNG. Sinon, une belle typo suffit pour donner du poids au nom de votre site.

Quelles couleurs et typographies ? Après vos recherches aux étapes 1 et 2, c'est le moment de faire des choix et de vous fixer ! En général, une palette de 5 ou 6 couleurs suffit, avec 2 typos maximum.

Nouveau : pour l'agent, une couleur se donne en code hexadécimal (ex. #1F3A5F) avec son rôle : fond, texte, titres, liens, boutons, survol… « Un bleu dynamique » ne veut rien dire pour une IA. Même chose pour les typos : leur nom exact dans Google Fonts, et à quoi sert chacune (titres, texte courant).

Quelles images utiliser ? Photos libres de droits sur Pixabay, illustrations gratuites sur unDraw (le petit plus : vous choisissez la couleur des illustrations !) ou Flexiple.

Lecture recommandée : les palettes de couleurs pour site web (99designs).

Les fonctionnalités

Quelles fonctionnalités votre site doit-il proposer en plus de pages et d'articles ? Listez-les. Restez simples, il ne s'agit que d'un site personnel !

Exemples : formulaire de contact, boutons de partage, mesure d'audience, galerie photo, téléchargement du CV en PDF…

NB : pour le projet, vous devrez au minimum mettre en place un formulaire de contact, une mesure d'audience (Google Analytics) et des mentions légales.

Vous remarquerez qu'on ne parle plus de plugin de sécurité. Votre site sera « statique » : de simples pages HTML, sans interface d'administration, sans base de données, sans PHP. Il n'y a donc pratiquement rien à pirater, et rien à mettre à jour. C'est l'un des grands avantages de cette approche.

N'hésitez pas à venir me poser des questions si vous avez des besoins particuliers : j'aurai certainement une solution à vous proposer ! (ou je peux aussi vous dire que votre idée n'est pas réalisable…)

Rédiger le cahier des charges

Rassemblez tout ce travail dans un seul document, en suivant le modèle ci-dessous. Rédigez-le dans une IA conversationnelle (Gemini, etc.), pas dans Antigravity : vous économiserez votre quota d'agent pour la construction.

# Cahier des charges – [Nom du site]

## 1. Contexte et objectif
Qui je suis, ce que le site doit accomplir, en 3 à 5 phrases.

## 2. Cible
Mon persona principal : qui il est, ce qu'il cherche sur mon site.

## 3. Ton
Le ton choisi + 2 ou 3 phrases d'exemple écrites « à la manière du site ».

## 4. Arborescence
Chaque page avec son adresse : /, /a-propos, /actualites, /actualites/[categorie]…
Les catégories de la rubrique actualités.

## 5. Modèles de pages
Pour chaque maquette (accueil, article, liste d'articles) :
les zones dans l'ordre, de haut en bas, et ce que contient chacune.
(Les maquettes sont jointes en image.)

## 6. Charte graphique
Couleurs : code hexa + rôle de chacune.
Typos : nom Google Fonts + usage.
Style général : coins arrondis ou non, ombres ou non, aéré ou dense…
Sites de référence : liens ou captures + ce que je veux en reprendre.

## 7. Fonctionnalités
La liste, avec pour chacune ce qu'elle doit faire concrètement.

## 8. SEO
Pour chaque page : le titre (balise title) et la meta description.

## 9. Ce que je ne veux pas
Ce qu'il faut éviter (animations, carrousels, couleurs, formulations…).

Conseil : une fois votre cahier des charges terminé, demandez à l'IA conversationnelle : « Relis ce cahier des charges comme si tu devais construire le site. Liste toutes les questions que tu te poserais et tous les points ambigus. » Corrigez, puis recommencez jusqu'à ce qu'elle n'ait plus de question sérieuse. Gardez chaque version : elles feront partie de votre compte-rendu.

Le fichier de règles de l'agent

Le projet de départ que je vous fournis (le « starter », cf. étape 5) contient un fichier de règles que l'agent lit automatiquement avant chaque tâche. Il fixe le cadre technique : la technologie utilisée, l'organisation des fichiers, les interdits. C'est un peu l'équivalent du thème enfant de WordPress : il encadre tout ce que fait l'agent.

Vous n'y touchez pas, sauf à une section, « Identité du projet », que vous compléterez avec un résumé de votre cahier des charges : nom du site, cible, ton, couleurs, typos. L'agent aura ainsi ces informations sous les yeux à chaque demande, sans que vous ayez à les répéter.

La création d'un prototype visuel

Une fois tout ce travail effectué, préparez un prototype visuel de votre page d'accueil. Deux méthodes :

  • Soit utiliser Figma, en suivant ce cours en ligne pour le prendre en main.
  • Soit demander à Gemini (fonction Canvas) de générer une page d'accueil en HTML à partir de votre cahier des charges et de votre maquette. Vous obtiendrez un aperçu en quelques minutes, que vous pourrez faire évoluer par la discussion. Attention : ce prototype sert à valider l'allure générale, pas à construire le site.

← 3. Maquettage · 5. Installer votre environnement et prendre en main l’agent →