Video Prompt Builder — fiche projet | labnodev

Premier projet du lab. Un générateur de prompts cinématiques pour les IA vidéo — Veo 3 (Google) et Sora (OpenAI).

Ce que c'est

Un outil web statique qui structure des prompts vidéo à partir de paramètres cinématographiques : type de plan, mouvement caméra, optique, style visuel, ambiance sonore, durée.

Deux modes :

• Rapide — 4 paramètres essentiels pour aller vite
• Expert — contrôle complet, tous les paramètres

Fonctionnalités : historique de session, aperçu en direct, partage par URL (la configuration complète se lit dans les paramètres de l'URL), inspiration aléatoire.

Stack technique

• Astro v5 — framework statique (SSG) : zéro JavaScript chargé par défaut. Le HTML est généré au moment du build, pas à la demande — directement indexable par les moteurs de recherche. L'architecture "islands" fait que seuls les composants réellement interactifs reçoivent du JavaScript.
• Tailwind CSS v4 — styles utilitaires, mobile-first. Seules les classes effectivement utilisées dans le code sont embarquées dans le build final. Choix dicté par une contrainte explicite : le trafic utilitaire est majoritairement mobile, une interface cassée sur mobile détruit l'usage.
• Vanilla JS — aucun framework frontend (pas de React, pas de Vue). La logique du builder, l'historique, le partage par URL : tout est en JavaScript natif. Léger, sans dépendance, sans surcoût de chargement.
• Cloudflare Pages — hébergement gratuit, CDN mondial, déploiement automatique à chaque git push. Le tier gratuit couvre les builds illimités et la bande passante illimitée. Contrainte du projet : maintenir le coût fixe à 0€, quel que soit le niveau de trafic.

Comment c'est construit

Le point de départ est un PRD — un document de vision produit rédigé en langage naturel : ce que l'outil doit faire, pour qui, avec quel modèle de monétisation, quelles contraintes techniques et légales. Un brief complet, pas une ligne de code.

Claude Code l'a lu comme un développeur lirait un cahier des charges. Il a proposé une architecture, généré les composants, et écrit la logique du builder.

Toutes les modifications ensuite — design, fonctionnalités, corrections — ont suivi le même principe : décrire ce qu'on veut obtenir, pas expliquer comment l'obtenir.

Pipeline de déploiement : GitHub (dépôt privé) → GitHub Actions (Node 22) → Cloudflare Pages. Build en ~45 secondes à chaque push.

Choix techniques à noter

Données JSON dans /public/ — les paramètres des IA (types de plans, mouvements caméra, optiques, etc.) sont stockés en fichiers JSON statiques. Ils sont dans /public/data/ et non /src/data/ : dans un build Astro statique, les fichiers de src/ ne sont pas servis au navigateur.

Partage par URL — la configuration complète (modèle IA, tous les paramètres sélectionnés) est encodée dans l'URL. Aucune base de données, aucun backend. L'état de l'outil vit dans le navigateur.

Ads et Core Web Vitals — 5 placements publicitaires (top banner, sidebar, in-content, footer banner, mobile sticky). Tous en chargement différé pour ne pas pénaliser les métriques de performance — condition nécessaire pour le référencement.

Architecture multi-projets — initialement, l'outil occupait la page d'accueil. Il a été déplacé sous /outils/video-prompt-builder pour que labnodev.com devienne un hub pouvant accueillir plusieurs projets indépendants.

État actuel

En ligne sur labnodev.com/outils/video-prompt-builder.

Mode Rapide + Expert opérationnels. Historique de session. Partage par URL. Support Veo 3 et Sora.

Monétisation par publicité (AdSense) — en cours d'examen Google.