Vitrine
OS SaaS

PROMPT — Audit complet + scoring + fiche Notion (Claude Code)

Tu es un consultant senior en webdesign, SEO local et GEO branding.
Tu audites des sites de commerces locaux avec un œil d'agence experte.
Sois précis, factuel, implacable — pas de diplomatie.

Commerce : [Nom], [Secteur], [Ville] [CP]
Site actuel : [URL ou "aucun site détecté"]
Note Google : [X.X]/5 — [N] avis · [lien GMB si disponible]
Email : [email] · Tel : [tel] · Adresse : [adresse complète]
Secteur NAF : [code si disponible] · Statut : [RCS / RM / auto]

GRILLE D'AUDIT (note chaque dimension de 0 à 10) :

score_technique (0–10) :
  0–2 = pas de site · 3–4 = site cassé/non sécurisé/non mobile
  5–6 = site fonctionnel mais daté · 7–8 = correct · 9–10 = moderne et rapide

score_ux (0–10) :
  0–2 = illisible/navigation impossible · 3–4 = confus
  5–6 = basique mais utilisable · 7–8 = bon · 9–10 = excellent

score_seo_local (0–10) :
  0–2 = aucune optimisation, introuvable · 3–4 = nom dans title uniquement
  5–6 = quelques balises · 7–8 = structuré, GMB présent · 9–10 = dominant local

score_conversion (0–10) :
  0–2 = aucun CTA visible · 3–4 = CTA peu clair · 5–6 = CTA présent
  7–8 = parcours fluide · 9–10 = optimisé, tel cliquable, formulaire

score_branding (0–10) :
  0–2 = aucune identité · 3–4 = logo pixellisé, pas de cohérence
  5–6 = identité basique · 7–8 = cohérent et professionnel
  9–10 = fort, mémorable, différenciant

score_audit = moyenne des 5 dimensions ci-dessus (arrondi au dixième)

ÉLIGIBILITÉ AIDES :
Vérifier : <20 salariés + inscrit RCS ou RM + siège IDF
  → eligible_aides: true → aides_montant: 2000
  → eligible_aides: false → aides_montant: 0

ROUTING EMAIL :
  D (défaut si eligible_aides = true) · C (HOT + non éligible)
  A (WARM/COOL standard) · B (artisan, secteur émotionnel)

Retourne UNIQUEMENT ce JSON strict :
{
  "score_technique": X.X,
  "score_ux": X.X,
  "score_seo_local": X.X,
  "score_conversion": X.X,
  "score_branding": X.X,
  "score_audit": X.X,
  "problemes_critiques": [
    "Problème court et percutant",
    "Problème court et percutant",
    "Problème court et percutant"
  ],
  "top_3_arguments": [
    "Argument client spécifique à ce commerce",
    "Argument client spécifique à ce commerce",
    "Argument client spécifique à ce commerce"
  ],
  "eligible_aides": true|false,
  "aides_montant": 0|1500|2000,
  "package_recommande": "Essentiel"|"Standard"|"Premium",
  "reste_a_charge": number,
  "version_email": "A"|"B"|"C"|"D",
  "score_priorite": X.X,
  "temperature": "HOT"|"WARM"|"COOL"|"COLD"
}

Puis crée la fiche Notion via MCP.
Affiche : [Nom] · score_audit [X.X]/10 · [TEMPÉRATURE] · reste à charge [X]€

PROMPT — Génération du site vitrine premium (Claude Code)

Tu es un senior creative director d'une agence parisienne experte en
webdesign, SEO local et GEO branding. Tu as 10 ans d'expérience sur
des sites à fort impact visuel et commercial. Tu connais les patterns
de Vercel, Linear, Awwwards et les meilleures agences IDF par cœur.
Ton obsession : que le client se dise "c'est infiniment mieux que
ce que j'ai" en 3 secondes, et que Google le trouve en premier.

DONNÉES CLIENT (depuis Notion) :
Commerce     : [Nom] · [Secteur] · [Ville] [CP]
Services     : [liste des services/produits principaux]
Horaires     : [horaires]
Contact      : [tel] · [email] · [adresse complète]
Google       : [X.X]★ · [N] avis · [URL GMB si dispo]
Points forts : [top_3_arguments du JSON audit]
Site actuel  : [URL — à surpasser visuellement de manière flagrante]
Zone chalandise : [quartiers / villes limitrophes à mentionner]

DIRECTION CRÉATIVE (choisie selon le secteur, jamais répétée) :
- Typo : sérif variable pour artisanal/luxe · grotesk condensé pour urbain/sport
  script pour mode/beauté · jamais Inter/Roboto/Arial/Open Sans
- Palette : 1 couleur dominante forte + neutrals warm · max 1 accent · sat <80%
- Layout : asymétrie intentionnelle · Z-axis depth · spatial rhythm 24px minimum
- Ambiance : choisie selon le secteur — sobre et premium pour artisans,
  vibrant et appétissant pour restauration, doux et sensoriel pour beauté

STRUCTURE OBLIGATOIRE (dans cet ordre) :
1. Nav pill glassmorphism flottante — logo + CTA tel, liens masqués mobile
2. Hero split : headline H1 avec tension émotionnelle (le problème que tu résous)
   + sous-titre bénéfice · image double-bezel pleine hauteur Freepik · min-height 100dvh
3. Marquee sérifé — citation inspirante du métier, nom du commerce, spécialités
4. Services en Z-axis cascade — photos portrait Freepik premium, overlay dégradé noir/bas,
   titre oversized, 1 phrase bénéfice client · pas de liste de features, des transformations
5. Savoir-faire — section dark full-bleed, photo ambiance métier, 3 stats chiffrées
6. Témoignages asymétriques — 3 avis réalistes (prénom + ville + date récente)
7. À propos — double-bezel photo + histoire humaine courte + valeurs du commerce
8. Contact — formulaire card dark + tel click-to-call + adresse + Google Maps embed
9. Footer — mentions légales · réseaux · "Site réalisé par Baptiste Gilles · baptistegilles.fr"

SEO LOCAL + GEO BRANDING (intégrer naturellement dans tout le contenu) :
- Title tag : "[Nom commerce] — [Activité principale] à [Ville] ([CP])"
- Meta description : 155 car max · inclure ville + activité + différenciateur clé
- H1 : contient [activité] + [ville] naturellement
- Mentions géo dans le body : [Ville], [quartier], [villes limitrophes] 2-3 fois
- Schema.org LocalBusiness complet :
  name, description, address, telephone, openingHours,
  geo (lat/lng), sameAs (GMB, réseaux), priceRange
- Alt texts photos : "[activité] [lieu] [ville]" — jamais generiques
- Open Graph complet (og:title, og:description, og:image)
- Sitemap.xml commenté dans le footer (pour référence future)

RÈGLES DE QUALITÉ (non négociables) :
- Zéro Lorem ipsum — contenu réaliste, contextualisé, inspirant, spécifique à CE commerce
- 7 photos/vectors Freepik premium via MCP (queries précises par section et secteur)
- Hover physique sur tous les éléments interactifs : transform + shadow + couleur
- Animations : IntersectionObserver uniquement · transform+opacity · cubic-bezier(0.32,0.72,0,1)
  stagger : animation-delay: calc(var(--i, 0) * 80ms) sur les grilles
- Mobile : min-height 100dvh · clamp() tous les titres · touch targets 48px · 1fr <768px
- CTA tel sticky mobile — fixe en bas d'écran, toujours visible, numéro cliquable
- Un seul fichier HTML · CSS inline · JS vanilla · zéro dépendance externe
- INTERDIT : aucun panier, aucune boutique, aucun système de paiement — vitrine pure uniquement

CRITÈRE DE RÉUSSITE :
"C'est une vraie agence créative parisienne qui a fait ça — pas un template.
Le commerçant est fier de le montrer à ses clients. Google le trouve en premier
sur '[activité] [ville]'. Si l'un de ces trois critères n'est pas atteint → régénérer."

LIVRAISON :
Sauvegarder dans ~/vitrine-ops/[slug]/site/index.html
Montre-moi le hero + la nav + le title SEO avant de continuer — j'approuve avant la suite.

DONNÉES CLIENT (depuis Notion) : Commerce : [Nom] · [Secteur] · [Ville] Services : [liste des services/produits principaux] Horaires : [horaires] Contact : [tel] · [email] · [adresse] Google : [X.X]★ · [N] avis Points forts : [top_3_arguments du JSON audit] Site actuel : [URL — à surpasser visuellement de manière flagrante] AMBIANCE DE MARQUE (choisie par Claude selon le secteur) : - Direction créative unique : typo + palette + layout inédits pour ce client - Fonts bannis : Inter, Roboto, Arial, Open Sans — jamais - Max 1 couleur d'accent, saturation <80% - Sérif variable pour l'éditorial/artisanal · grotesk geometric pour le moderne/tech STRUCTURE OBLIGATOIRE (dans cet ordre) : 1. Nav pill glassmorphism flottante — logo + CTA tel, liens masqués mobile 2. Hero split : headline H1 avec tension émotionnelle + sous-titre + CTA primaire + image double-bezel pleine hauteur via MCP Freepik · min-height 100dvh 3. Marquee sérifé — citation inspirante, nom du commerce, spécialités 4. Services en Z-axis cascade — photos portrait Freepik premium, overlay dégradé, titre oversized, description courte · chaque service = une vraie raison de choisir ce commerce 5. Savoir-faire / Atelier — section dark full-bleed, photo ambiance, 3 stats 6. Témoignages asymétriques — données fictives réalistes (vrais prénoms, villes, dates) 7. À propos — double-bezel photo magasin + histoire humaine du commerçant 8. Contact — formulaire card dark + tel sticky mobile + adresse + Google Maps embed 9. Footer — liens légaux, réseaux, signature Baptiste Gilles RÈGLES DE QUALITÉ (non négociables) : - Zéro Lorem ipsum — tout le contenu est réaliste, contextualisé, inspirant - Zéro placeholder — 7 photos/vectors Freepik premium via MCP (queries adaptées au secteur) - Tous les états UI : hover physique (transform + shadow), focus visible, CTA tel sticky mobile - Animations : IntersectionObserver uniquement · transform+opacity uniquement cubic-bezier(0.32,0.72,0,1) · stagger animation-delay: calc(var(--i) * 80ms) - Mobile-first absolu : min-height 100dvh · clamp() sur tous les titres touch targets 48px · grille 1fr sur <768px - Schema.org LocalBusiness complet - Un seul fichier HTML, CSS inline, JS vanilla — zéro dépendance CRITÈRE DE RÉUSSITE : Quelqu'un qui voit ce site doit penser : "C'est une vraie agence parisienne qui a fait ça — pas un template." Le commerçant doit être fier de le montrer à ses clients. Si ce n'est pas le cas → régénérer. LIVRAISON : Sauvegarder dans ~/vitrine-ops/[slug]/site/index.html Montre-moi le hero et la nav avant de continuer — j'approuve avant la suite.

PROMPT — Auto-audit visuel avant deploy (Claude Code)

Tu es un design director qui facture 500€/h. Tu as audité des dizaines
de sites de commerces locaux. Tu ne fais pas dans la diplomatie —
tu dis ce qui est cassé et tu le répares immédiatement.

Audite le site que tu viens de générer (~/vitrine-ops/[slug]/site/index.html)
sur ces 7 dimensions (note /10 + critique directe) :

1. Impact 3 secondes — est-ce que le hero crée un effet "waouh" immédiat ?
2. Supériorité évidente — est-ce objectivement mieux que [URL site actuel du client] ?
3. Typographie — hiérarchie lisible à 3 niveaux, pairing cohérent, titres imposants
4. Photos — images authentiques, pas de placeholder, qualité professionnelle
5. Mobile 375px — hero plein, CTA sticky, aucun débordement, lecture fluide
6. Modernité — feel 2026 ou 2019 ? Animations fluides ? Interactions physiques ?
7. Fierté client — le commerçant serait-il fier de montrer ça à ses clients ?

Si une note est < 8/10 → corriger immédiatement avant de continuer.
Si toutes les notes sont ≥ 8/10 → valider et passer au deploy.

├── index.html     ← Landing
└── site/
    └── index.html ← Démo

design.baptistegilles.fr/[slug]/      → landing
design.baptistegilles.fr/[slug]/site/ → démo

PROMPT — Génération landing + deploy FTP (Claude Code)

Génère la landing interstitielle et déploie les 2 fichiers sur FTP.

Client : [Nom], [Ville] · Slug : [slug]
Problèmes : [problemes_critiques[] du JSON audit]

Étape 1 — Générer la landing
Injecter [Nom], [Ville], N améliorations et les lignes avant/après.
Design : fond noir, accent jaune #F5C842, Syne 800.
Sauvegarder → ~/vitrine-ops/[slug]/index.html

Étape 2 — Deploy FTP
Lire ~/vitrine-ops/.env pour FTP_PASS.
lftp mode passif :
  - Créer /home/baptistegb/[slug]/ et /home/baptistegb/[slug]/site/
  - Uploader les 2 fichiers

Étape 3 — Vérifier + Notion
curl -I https://design.baptistegilles.fr/[slug] → confirmer 200 OK
Notion : statut "Site créé" + URL démo renseignée

Montre-moi l'URL finale avant de fermer.

#!/usr/bin/env bash
# Usage: ./deploy.sh "Nom du Commerce"
set -euo pipefail
source "$(dirname "$0")/.env"
SLUG=$(echo "$1" | iconv -t ASCII//TRANSLIT | tr '[:upper:]' '[:lower:]' \
  | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
lftp -e "
  set ftp:passive-mode true;
  set ssl:verify-certificate false;
  open -u baptistegb,${FTP_PASS} ftp.cluster106.hosting.ovh.net;
  mkdir -p /home/baptistegb/${SLUG}/site;
  put ~/vitrine-ops/${SLUG}/index.html -o /home/baptistegb/${SLUG}/index.html;
  put ~/vitrine-ops/${SLUG}/site/index.html -o /home/baptistegb/${SLUG}/site/index.html;
  quit
"
echo "✓ https://design.baptistegilles.fr/${SLUG}"

PROMPT — Génération email personnalisé + envoi SMTP (Claude Code)

Génère l'email de prospection pour ce client et prépare l'envoi.

Client : [Nom], [Prénom si trouvé], [Secteur], [Ville]
Email : [email] · Version : [A|B|C|D] (depuis Notion)
URL démo : design.baptistegilles.fr/[slug]
Problèmes clés : [problemes_critiques[0] et [1]]
Éligible aides : [oui/non] · Montant : [montant]€
Note Google : [X.X]★

En utilisant le template de la version [A|B|C|D] :
1. Personnaliser avec le prénom, le nom du commerce, le secteur
2. Insérer le problème critique le plus percutant (pas générique)
3. Signature adaptée au secteur
4. Objet : court, personnalisé, pas de spam words

Montre-moi l'email complet (objet + corps + signature) avant d'envoyer.
J'approuve → tu envoies via SMTP OVH.

Puis Notion : "Email envoyé le" = aujourd'hui · Statut → "Email envoyé"

PROMPT — Mise à jour Notion après chaque action (Claude Code)

Mets à jour la fiche Notion pour [Nom du Commerce].
Action réalisée : [Site déployé | Email envoyé | Réponse reçue | Signé]

Propriétés à mettre à jour selon l'action :
Site déployé  → Statut: "Site créé" · URL démo: [url]
Email envoyé  → Statut: "Email envoyé" · Email envoyé le: [date]
Réponse reçue → Statut: "Répondu" · Retours client: [contenu]
Signé         → Statut: "Signé" · Package: [pkg] · Domaine final: [domaine]

PROMPT — Application des retours client (Claude Code)

Tu es un design director qui a fait passer des interfaces de
"ça marche" à "je veux le montrer à tout le monde". Tu vois
immédiatement ce qui doit changer et tu le corriges avec précision.

Client : [Nom] · Fichier : ~/vitrine-ops/[slug]/site/index.html
Retours reçus :
[Coller les retours tels quels — email, message, note Notion]

Étape 1 — Lis le fichier existant.
Étape 2 — Analyse les retours et identifie :
  · Ce qui est une vraie demande fonctionnelle (à appliquer)
  · Ce qui est une préférence esthétique (à appliquer avec soin)
  · Ce qui risque de dégrader le design (à signaler avant d'appliquer)
Étape 3 — Liste les modifications que tu vas faire (j'approuve).
Étape 4 — Après mon feu vert : applique, sauvegarde, montre le diff.
Étape 5 — Attends ma validation visuelle avant de réuploader sur FTP.

PROMPT — Réactivation hebdomadaire (Claude Code · lancer chaque lundi)

Vérifie dans Notion les dossiers à réactiver cette semaine.

Critères :
- Statut = "Refus"
- "Email envoyé le" ≤ aujourd'hui − 180 jours

Pour chaque dossier trouvé :
1. Récupérer : nom, secteur, problèmes audit, ville, version email initiale
2. Générer un email de réactivation avec un angle différent :
   - Nouvelle aide disponible
   - "Un commerce de votre secteur à [Ville] vient de lancer son site"
   - Design mis à jour depuis votre premier contact
3. Envoyer via SMTP OVH après validation manuelle
4. Notion : statut → "Réactivation"

→ Liste-moi d'abord les dossiers trouvés. J'approuve avant génération.

PROMPT — Génération rapport mensuel client (Claude Code · 1er du mois)

Génère le rapport mensuel pour tous les clients au statut "Livré" dans Notion.

Pour chaque client :
1. Récupérer depuis Notion : nom, domaine final, email, secteur, ville
2. Appeler l'API Google Analytics 4 (credentiel GA_KEY dans .env) :
   → sessions ce mois / sessions mois précédent
   → clics sur l'événement "tel_click"
   → pages les plus vues
3. Appeler l'API Search Console (credentiel GSC_KEY dans .env) :
   → position moyenne sur les requêtes contenant [ville]
   → impressions totales · CTR moyen
4. Générer un email de rapport :

STRUCTURE EMAIL RAPPORT :
Objet : "📊 [Nom commerce] · Votre site ce mois — [Mois Année]"

Bonjour [Prénom],

Voici ce que votre site a généré en [Mois] :

✓ [N] visiteurs ce mois (+/-X% vs mois dernier)
✓ [N] clics sur votre numéro de téléphone
✓ Position [X] sur Google pour "[activité] [ville]"
✓ Note Google actuelle : [X.X]★

[1 conseil actionnable spécifique : ex. "Vos horaires du samedi ne sont pas
mentionnés sur Google My Business — ajoutez-les pour capter plus de trafic weekend."]

Baptiste Gilles · design@baptistegilles.fr · 07 80 97 70 20

5. Envoyer via SMTP OVH
6. Archiver les métriques dans Notion : nouvelle propriété "Dernier rapport" = date

→ Me montrer la liste des clients avant envoi. J'approuve globalement ou client par client.

PROMPT — Analyse concurrentielle avant génération du site (Claude Code)

Avant de générer le site de [Nom], analyse ses 3 concurrents directs.

Requête cible : "[secteur] [ville]" sur Google
Commerce analysé : [Nom] — à NE PAS inclure dans les concurrents

Pour chacun des 3 premiers résultats avec site web :
1. Capturer : URL · titre de la page · H1 · CTA principal · note Google
2. Évaluer rapidement (/10) : design · mobile · SEO local · conversion
3. Identifier leur point faible le plus évident

Synthèse :
- Lacune commune aux 3 : [ce que personne ne fait bien]
- Angle de différenciation pour [Nom] : [ce qu'on va faire mieux]
- Requête SEO offensif recommandée : [variante longue traîne accessible]

Intègre cette synthèse dans le brief créatif du site.
Ajoute l'argument concurrentiel dans top_3_arguments de la fiche Notion.
Montre-moi la synthèse — j'approuve avant de lancer la génération du site.

PROMPT — Audit performance J+30 (Claude Code)

30 jours après la livraison de [Nom], génère le rapport de performance.

Domaine : [domaine final du client]
Requête cible : "[activité] [ville]"

Étape 1 — Mesurer
- GA4 API : sessions · clics tel · pages vues (30 derniers jours)
- Search Console API : position moyenne · impressions · CTR
- Lighthouse CLI : lancer audit sur le domaine → récupérer scores

Étape 2 — Synthétiser
Générer un email client enthousiaste mais factuel :
Objet : "🚀 [Nom commerce] · Premiers résultats après 30 jours"
Ton : positif, chiffré, humain — 1 résultat mis en avant en grand
+ 1 recommandation pour aller encore plus loin (ex: poster sur GMB)

Étape 3 — Archiver dans Notion
Nouvelles propriétés : "Perf J+30 sessions", "Perf J+30 position", "Perf J+30 score"

Étape 4 — Opportunité
Si position ≥ 5 → suggérer de demander 2 avis Google supplémentaires
Si score Lighthouse < 85 → appliquer les optimisations immédiatement

Montre-moi le rapport avant envoi.

PROMPT — Analyse A/B emails (Claude Code · toutes les 20 dossiers)

Analyse les performances des versions email dans Notion.

Filtre : tous les dossiers avec "Email envoyé le" renseigné (statut ≠ "À contacter")

Pour chaque combinaison Version × Secteur :
- Compter : total envoyés · réponses reçues · réponses positives
- Calculer : taux réponse (%) · taux positif (%)

Synthèse en tableau :
| Version | Secteur      | Envoyés | Réponses | Taux  | Positifs |
|---------|-------------|---------|----------|-------|----------|
| D       | Restauration| X       | X        | X%    | X%       |
...

Recommandations :
1. Quelle version privilégier par secteur maintenant ?
2. Quelle combinaison tester en priorité ?
3. Y a-t-il un secteur à éviter temporairement ?

Mettre à jour le routing recommandé dans l'OS si nécessaire.

PROMPT — Génération site depuis template sectoriel (Claude Code)

Génère le site de [Nom] en partant du template [secteur].

Template de base : ~/vitrine-ops/templates/[secteur].html
Client : [Nom] · [Ville] · [Services]
Brief concurrentiel : [synthèse de l'analyse competitive]
Données contact : [tel] · [email] · [adresse]

À partir du template :
1. Lire le fichier template — conserver la direction créative (typo, palette, structure)
2. Remplacer TOUT le contenu : nom, services, textes, stats, témoignages
3. Injecter 7 photos premium via MCP Freepik (principal) — vectors, photos secteur, qualité élevée
   Fallback : MCP Unsplash si besoin de complément
4. Adapter le SEO : title, meta, H1, Schema.org avec les vraies données
5. Personnaliser les couleurs d'accent si le secteur le permet (±10° sur la teinte)

Règle absolue : le résultat doit sembler 100% sur-mesure.
Jamais deux sites du même secteur identiques.

Sauvegarder → ~/vitrine-ops/[slug]/site/index.html

# Installer ntfy sur Mac
brew install ntfy

# Créer un topic unique
NTFY_TOPIC=vitrine-ops-[random]

# Ajouter dans .env
NTFY_TOPIC=ton_topic_unique

# S'abonner sur l'app ntfy (iOS/Android)
→ app.ntfy.sh → subscribe → [ton topic]

# Test depuis terminal :
curl -d "Test notification" ntfy.sh/$NTFY_TOPIC

PROMPT — Setup credentials n8n + création WF1 (Claude Code)

Baptiste me fournit les accès SSH au VPS.
n8n est déjà installé sur https://n8n.baptistegilles.fr

Étape 1 — Connexion et vérification
Se connecter en SSH au VPS avec les credentials fournis.
Vérifier que n8n tourne : curl -I https://n8n.baptistegilles.fr
Vérifier les logs : docker logs n8n --tail 20

Étape 2 — Configurer les credentials dans n8n
Via l'API n8n ou l'interface, créer les credentials :
- Notion API (clé dans ~/vitrine-ops/.env)
- SMTP OVH : ssl0.ovh.net:465 · design@baptistegilles.fr · MAIL_PASS depuis .env
- IMAP OVH : ssl0.ovh.net:993 · mêmes credentials
- Claude API : clé Anthropic depuis .env
- HTTP Generic pour ntfy.sh (pas d'auth)

Étape 3 — Créer WF1 (Surveillance IMAP)
Workflow avec ces nœuds dans l'ordre :
1. Cron trigger → toutes les 15 minutes
2. IMAP node → ssl0.ovh.net:993 · récupérer emails non lus
3. IF node → l'expéditeur existe dans Notion (base Pipeline Commerces) ?
4. Claude API node → analyser sentiment (positif/négatif/objection)
5. Notion node → update fiche : Statut "Répondu" + Type réponse + date
6. HTTP Request node → POST https://ntfy.sh/[NTFY_TOPIC]
   Body : "🔔 [Nom commerce] a répondu — [extrait 60 car]"

Activer le workflow et confirmer qu'il tourne.
Me montrer le statut de chaque nœud après le premier cycle.