Guide de formation Vibe Coding
pour OsmiumWPC

Métier : Agence digitale TPE/PME (conception web, outils métier et assistant IA par Vibe Coding)

Ville / zone : zone de chalandise OsmiumWPC (à préciser selon implantation réelle)

Prestation 1 : Pack 1 — site vitrine cadré par IA, 1 550 € HT

Prestation 2 : Cockpit CRM/ERP sur-mesure — à partir de 2 500 € HT

Prestation 3 : Assistant IA installé sur le site client — à partir de 1 200 € HT

CTA principal : « Demander un diagnostic digital gratuit »

Moyen de contact préféré : formulaire + rendez-vous calendrier

Le fait que ce remplissage soit facile et rapide confirme le constat du diagnostic : ce bloc est acquis, pas besoin d'y consacrer plus de temps.

Commandes à exécuter dans le dossier du projet :

# Initialisation
git init
git add V1-cockpit.html
git commit -m "V1 - Cockpit CRM/ERP initial"

# Ajout de la version suivante
git add V2-cockpit.html
git commit -m "V2 - Production par étapes, planning, RGPD"

# Consulter l'historique
git log --oneline

# Revenir au contenu de V1 sans supprimer l'historique de V2
git checkout <hash-du-commit-V1> -- V1-cockpit.html

Le point clé : git checkout restaure un fichier à un état antérieur sans effacer les commits suivants — contrairement à un renommage manuel de fichier, l'historique complet reste consultable et rien n'est perdu si tu changes d'avis une seconde fois.

Dans Bolt.new, prompt de départ : « Crée une page d'accueil one-page pour un artisan, avec un hero (titre + sous-titre + CTA), une section 3 prestations en cartes, et un formulaire de contact simple (nom, téléphone, message). Palette : bleu nuit #0F2233, vert teal #169B8E, orange #F07F1C. »

Dans Cursor, une fois le projet importé, prompt de suite : « Ajoute une validation côté client sur le formulaire de contact : téléphone au format français, message obligatoire de 10 caractères minimum, message d'erreur affiché sous chaque champ sans rechargement de page. »

Point de vigilance à noter : Bolt/Lovable optimisent la vitesse d'un premier rendu visuel, Cursor est plus à l'aise pour une logique précise et incrémentale (comme une règle de validation) — c'est exactement la complémentarité que l'examen RS7554 évalue en mise en situation.

create table clients (
  id uuid default gen_random_uuid() primary key,
  nom text not null,
  ville text,
  statut text default 'Prospect',
  email text,
  created_at timestamp default now()
);

insert into clients (nom, ville, statut, email) values
  ('Rénov''Éclat', 'Lyon', 'Prospect', 'contact@renoveclat.fr'),
  ('Terra Verte Paysage', 'Bordeaux', 'Client actif', 'contact@terraverte.fr'),
  ('ElecPro Services', 'Toulouse', 'Prospect', 'contact@elecpro.fr');

select * from clients where statut = 'Prospect';

Les trois noms utilisés reprennent volontairement les cas fictifs déjà construits dans les prompts Pack 1 — pas besoin d'inventer de nouvelles données de test, celles-ci existent déjà dans le dossier de production.

1. Créer un compte Vercel ou Netlify, glisser le dossier du cockpit sur l'interface — un lien de prévisualisation est généré immédiatement.

2. Dans les paramètres du domaine, ajouter cockpit.osmiumwpc.fr et suivre l'instruction d'ajout d'un enregistrement DNS de type CNAME chez l'hébergeur du domaine osmiumwpc.fr.

3. Une fois le DNS propagé (quelques minutes à quelques heures), vérifier le cadenas HTTPS dans la barre d'adresse du navigateur — Vercel/Netlify le génèrent automatiquement, aucune action supplémentaire n'est nécessaire.

Checklist sécurité à cocher avant de partager le lien : aucune clé API en dur dans le code source, balise <meta name="robots" content="noindex,nofollow"> présente, page non liée dans le menu public du site.

Problème (25 s) : « Une TPE/PME sur deux gère encore ses clients, devis et factures sur un cahier ou un tableur — chaque information est dispersée, rien n'est relié, et le suivi repose sur la mémoire d'une seule personne. »

Démo (60 s) : « Voici le cockpit : un prospect entre en base, devient client dès la signature du contrat, un projet se lance avec ses étapes de production, la facture se règle en plusieurs fois si besoin — et tout ça reste visible sur un seul tableau de bord, à jour en temps réel. »

Impact (20 s) : « Construit avec le Vibe Coding, ce cockpit a été prototypé en quelques sessions de travail assisté par IA — là où un développement sur-mesure classique demande généralement plusieurs semaines. »

Appel à l'action (15 s) : « On peut l'adapter à votre activité en quelques jours — voulez-vous qu'on regarde ensemble ce qu'il faudrait personnaliser pour vous ? »

Rythme indicatif : environ 260-280 mots pour tenir les 2 minutes à un débit naturel — à ajuster au chronomètre lors de l'entraînement, pas à réciter tel quel.