Vibe coding : du prompt au site en production

Le vibe coding, c’est développer en décrivant l’intention à un agent IA (Cursor, Copilot…) plutôt qu’en écrivant chaque ligne à la main. Le site ai-automate.fr en est la démonstration concrète.

Principes

Spec before code — décrire la page, le composant, le comportement attendu.
Itérations courtes — un diff focalisé, vérifier, enchaîner.
Conventions du repo — l’agent doit lire le code existant et s’y conformer.
Humain dans la boucle — revue, test, déploiement.

Stack du site public

Astro — statique, SEO, content collections (veille, guides, glossaire).
TypeScript — données typées (cv.ts, glossary.ts, ressources.ts).
CSS — variables globales, composants .astro cohérents.
Deploy — build SITE_URL=… npm run build + rsync nginx.

Workflow type

Idée (ex. « enrichir page Ressources »)
  → Agent lit fichiers existants
  → Proposition de diff minimal
  → Build local ou sur VPS
  → Vérification dev.ai-automate.fr
  → Commit / deploy

Ce qui fonctionne bien en vibe coding

Pages marketing, layouts, composants UI.
Refactors mécaniques (accents, liens, SEO meta).
Scripts de déploiement et import de données (glossaire Horizons).
Documentation et contenu éditorial structuré.

Ce qui demande vigilance

Logique métier critique (auth, paiement) — tests explicites.
Secrets — jamais dans le chat ; .env ignorés par git.
Régressions silencieuses — toujours lancer npm run build.

Conseils Cursor

Ouvrir les fichiers pertinents (@fichier) avant de demander un changement.
« Minimal diff », « match existing style » dans les instructions.
Une tâche = un objectif (éviter les mega-prompts fourre-tout).

Lien avec l’écosystème agentique

Le site n’est pas isolé : Hermes produit le contenu, n8n rebuild, LightRAG alimente le glossaire. Le vibe coding accélère la couche présentation ; les agents autonomes gèrent la couche contenu et ops.

Voir aussi : Déployer une stack agentique sur VPS.