Comment ce site a été conçu avec l'IA
Du prototype Vercel V0 à une architecture composants prête pour 2025
Nous avons utilisé les dernières briques IA pour imaginer, enrichir puis industrialiser ce site. Chaque étape - génération du squelette, recherche de contenu, design systémique - a été orchestrée avec des outils collaboratifs et des assistants comme Codex ou Claude.
1. Vercel V0 pour poser la structure
Prototype IA + itérations manuelles
Nous avons démarré avec Vercel V0 pour générer l'ossature du site : navigation, layout, premières sections et palettes. L'IA nous a proposé plusieurs variations rapides que nous avons affinées pour arriver à un socle cohérent.
Cette phase est reliée à nos travaux sur Code IA : même logique d'assistance à la génération de composants React, mais appliquée au branding et à l'expérience utilisateur dès la première journée.
Livrables V0
- • Structure de pages Next.js
- • Composants UI de base (header, footer, cards)
- • Squelette Tailwind responsive
- • Premiers prompts d'idéation de contenu
Ce que nous avons ajusté
- • Personnalisation de la navigation et des ancres
- • Hiérarchie typographique adaptée à notre charte
- • Mise en place d'un design token indigo
- • Nettoyage du code pour faciliter la suite
Chaque page thématique a été lancée avec l'outil Deep Research. L'assistant a exploré articles, études et benchmarks pour proposer des angles pertinents que nous avons ensuite relus et adaptés.
Nous avons conservé les éléments factuels (statistiques, sources, cas concrets), ajouté notre connaissance terrain et écarté les suggestions redondantes pour garder un ton clair et opérationnel.
PageLayout, HeroSection, SectionRenderer pour une structure standardiséeIllustrations IA intégrées
Page d'accueil
- Hero principal (capture
main.png) - Badges illustrant les thématiques du site
- Textures légères respectant la charte indigo
Page Agents IA
- Illustration
agents.pngpour la hero section - Ambiance collaborative IA + humains
- Style vectoriel cohérent avec les autres visuels
Grâce aux composants réutilisables, nous pouvons modifier chaque page avec ChatGPT Codex ou Claude sans écrire de code complexe. Les assistants manipulent les fichiers `data.ts` et les layouts plutôt que d'éditer manuellement des centaines de lignes.
Les évolutions passent par GitHub : branches dédiées, revue humaine des nouvelles fonctionnalités et déploiement continu vers Vercel. Cela garantit un cycle de mise à jour rapide tout en gardant la qualité éditoriale.
5. Workflow collaboratif avec Yot (agent Clawdbot)
Un agent IA autonome qui pilote le développement depuis Slack
Ce site est maintenu via Yot, un agent IA basé sur Clawdbot qui intervient directement depuis un canal Slack dédié (#site-ia-gen). L'équipe peut demander des modifications en langage naturel : ajout de sections, corrections, génération de PDFs, mise à jour de contenu, ou même refonte complète de composants.
Yot a accès à l'ensemble du dépôt Git, peut lire et modifier les fichiers data.ts, les composants React, les styles Tailwind, et même lancer des builds ou des tests. Il utilise des skills spécialisées pour exposer le site via Cloudflare, générer des PDFs avec React-PDF, ou créer des sessions collaboratives SSHX pour le développement en temps réel.
Capacités techniques de Yot
- • Lecture/écriture de fichiers (data.ts, composants React, styles)
- • Exécution de commandes shell (npm, git, docker)
- • Génération automatique de PDFs avec React-PDF
- • Exposition du site en dev via Cloudflare Tunnel
- • Création de sessions SSHX pour collaboration en direct
- • Recherche web et vérification de sources
- • Gestion de la mémoire pour continuité entre sessions
Exemples de tâches réalisées
- • Génération de 14 PDFs professionnels avec couvertures personnalisées
- • Correction dynamique de la pagination et césure des mots
- • Ajout/modification de sections entières (agents, RAG, reasoning)
- • Correction de bugs de navigation et activation de boutons
- • Mise en production du site sur ia-gen.sch-catie.fr
- • Création de cette page d'auto-documentation
Workflow type :
- Demande en Slack : ex. "ajoute une section sur les risques existentiels"
- Yot identifie les fichiers concernés et propose une modification
- Validation humaine directe ou via prévisualisation
- Commit et push automatique
Pas de PR systématique : l'agent travaille directement sur la branche principale avec possibilité de rollback si besoin.
Cette approche permet une vélocité exceptionnelle : les corrections de texte, l'ajout de nouvelles pages, ou même des refontes visuelles se font en quelques minutes au lieu de plusieurs heures. L'humain reste décisionnaire mais délègue l'exécution technique, ce qui transforme profondément le rythme de développement web.