| name | dp-landing-page |
| description | Générateur de landing pages professionnelles avec Thank You page, Privacy Policy et CGV intégrées en modales. Responsive, HTML standalone, CSS custom properties. Génère 2 fichiers : la landing page + la thank you page (slug unique non devinable). Pages légales en popup sans quitter la page. Bilingue FR/EN. Triggers : landing page, page de vente, sales page, page produit, créer une page, squeeze page, thank you page. |
| user-invokable | true |
| argument-hint | [produit] [url_destination] [langue: fr|en] |
| allowed-tools | Read Write Bash Glob |
| metadata | {"author":"DP Créateur","version":"2.2.0","category":"marketing","updated":"2026-04-18T00:00:00.000Z"} |
Landing Page — Sales Page Generator
Expert en conversion et web design pour DP Créateur. Génère 2 fichiers HTML : la landing page de vente + la thank you page post-achat. Les pages légales (Privacy Policy, CGV) s'ouvrent en popup sans quitter la page. Tout est bilingue (FR ou EN selon le projet).
Quick Reference
| Commande | Description |
|---|
/dp-landing-page [produit] | Créer landing page + thank you page (guidé) |
/dp-landing-page express [produit] | Mode rapide — 5 questions puis génération |
/dp-landing-page lead-magnet [produit] | Version capture d'emails (pas de prix) |
/dp-landing-page from [fichier] | Générer depuis un contenu ou playbook existant |
/dp-landing-page thank-you [landing.html] | Créer une thank you page pour une landing existante |
Output Format
LIVRABLES (2 fichiers) :
│
├── 1. Landing Page : landing-pages/[product-slug].html
│ ├── CSS embarqué avec custom properties
│ ├── Design responsive (mobile-first)
│ ├── SEO meta tags + Open Graph
│ ├── Sections : Hero → Trust → Promises → Details → FAQ → CTA → Footer
│ ├── Footer : Privacy Policy + CGV en modales popup (sans quitter la page)
│ ├── Tous les CTA pointent vers la même URL de destination
│ └── Zéro dépendance JS (sauf modales légères)
│
├── 2. Thank You Page : landing-pages/ty-[hash-unique].html
│ ├── Même design system (couleurs, typo, style)
│ ├── Message de remerciement + confirmation
│ ├── Lien de téléchargement (optionnel)
│ ├── Slug unique non devinable (hash aléatoire)
│ └── Pas indexable (meta robots noindex)
│
└── Bilingue : contenu FR ou EN selon la langue du projet
Process
1. Context intake → Collecter produit, brand identity, contenu (OBLIGATOIRE)
2. Read references → Charger business-profile.md si dispo
Read references/copy-templates.md → pour des exemples de copy par tier de prix
3. Build page card → Synthèse validée par l'utilisateur
4. Generate HTML → Page complète avec CSS custom properties
5. Quality check → Responsive, compliance, SEO, performance
6. Deliver → Fichier HTML + résumé + prochaines étapes
Step 1 — Context Intake (Required: Always Do This First)
1a. Charger le profil business (silencieux)
SI business-profile.md existe à la racine du projet :
→ Lire et extraire : nom, niche, produit(s), audience, ton, couleurs, logo
→ Ne PAS reposer les questions déjà couvertes par le profil
SINON :
→ Continuer sans. Les questions de l'intake couvriront le minimum.
1b. Poser les questions par blocs
Règle absolue : Ne JAMAIS poser toutes les questions d'un coup. Grouper par 2-3, attendre les réponses, puis continuer.
Bloc 1 — Le produit (poser en premier)
| # | Question | Pourquoi |
|---|
| Q1 | Quel produit ou service veux-tu vendre sur cette page ? Nom + description courte. | Cadre le contenu |
| Q2 | Quel est le prix ? (ou "gratuit" si lead magnet) | Hero + CTA |
| Q3 | Quelle est l'URL de destination du bouton CTA ? (Stripe, Gumroad, Calendly, autre lien) | Tous les boutons CTA pointent là |
Après les réponses : Reformuler. "Page de vente pour [X] à [prix], CTA vers [URL]. Correct ?"
Hard gate : Ne PAS continuer sans au minimum le nom du produit et l'URL de destination.
Bloc 2 — L'identité visuelle (OBLIGATOIRE)
| # | Question | Pourquoi |
|---|
| Q4 | Quelle est ta couleur primaire ? (hex, ex: #059669, ou nom comme "vert émeraude") | CSS --primary |
| Q5 | Quelle est ta couleur d'accent ? (hex, ex: #10b981, ou nom comme "vert clair") | CSS --accent |
| Q6 | Quel style visuel ? minimaliste (épuré, beaucoup de blanc) / bold (contrastes forts, couleurs vives) / premium (sobre, tons sombres, élégant) / warm (tons chauds, accueillant) | Ambiance CSS globale |
Si l'utilisateur n'a pas de couleurs : Proposer 3 palettes adaptées à sa niche :
- Chaque palette = couleur primaire + couleur accent
- Montrer un aperçu : "Palette 1 : Bleu profond (#1e3a5f) + Or (#d4a853) — style premium/confiance"
- Demander de choisir ou combiner
Après les réponses : Noter les choix visuels. Ils seront appliqués aux CSS custom properties.
Bloc 3 — Le contenu
| # | Question | Pourquoi |
|---|
| Q7 | Tu as des images du produit ? (URLs ou fichiers locaux — 1 à 3 max) | Hero et sections détails |
| Q8 | Quels sont les 3-4 bénéfices principaux de ton produit ? | Section Promises |
| Q9 | Tu as des témoignages, résultats, ou chiffres de crédibilité ? | Trust bar + social proof |
Après les réponses : Synthèse contenu.
Bloc 4 — Langue et Thank You Page
| # | Question | Pourquoi |
|---|
| Q10 | Quelle langue pour la page ? fr (français) ou en (anglais) | Texte des modales légales, labels, footer |
| Q11 | Pour la Thank You Page : tu veux ajouter un lien de téléchargement ? Si oui, donne l'URL du fichier (PDF, ZIP…). Si non, la page affichera juste la confirmation. | Page post-achat |
Après les réponses : Noter la langue et les options thank you page.
Bloc 5 — La FAQ et le SEO
| # | Question | Pourquoi |
|---|
| Q12 | Quelles sont les 3-5 questions que tes clients posent le plus ? | Section FAQ |
| Q13 | Tu as un titre SEO en tête ? Et une meta description ? (sinon je les génère) | Balises meta |
Après les réponses : Passer à la génération.
Step 2 — Design System (CSS Custom Properties)
Variables CSS obligatoires
Toutes les couleurs et styles passent par des CSS custom properties. JAMAIS de couleurs hardcodées dans les composants.
:root {
--primary: [primary_color from Q4];
--accent: [accent_color from Q5];
--primary-light: [primary + transparence 10%];
--primary-dark: [primary assombri 20%];
--accent-light: [accent + transparence 10%];
--text: #1a1a1a;
--muted: #666666;
--bg: #ffffff;
--surface: #f9fafb;
--border: #e5e7eb;
--radius: 12px;
--shadow: 0 1px 3px rgba(0,0,0,0.1);
--max-width: 720px;
}
Styles par ambiance visuelle
| Style | Modifications CSS |
|---|
minimaliste | --bg: #ffffff, --surface: #fafafa, ombres très légères, beaucoup d'espace blanc, --radius: 8px |
bold | Contrastes forts, --bg: #ffffff, boutons plus gros, titres plus grands, --radius: 16px, ombres marquées |
premium | --bg: #0a0a0a, --text: #f5f5f5, --surface: #1a1a1a, --muted: #999, fond sombre, typographie élégante |
warm | --bg: #fffbf5, --surface: #fff5eb, --border: #f0d9b5, tons chauds, --radius: 16px, ombres douces |
Typographie
- Font :
'Inter', system-ui, -apple-system, sans-serif (Google Fonts import pour Inter)
- Body : 16px, line-height 1.6
- H1 : 2.5rem (mobile: 1.75rem)
- H2 : 1.75rem (mobile: 1.35rem)
- H3 : 1.2rem
Responsive Breakpoints
- Mobile : < 640px (1 colonne, touch targets larges)
- Tablet : 640-1024px (2 colonnes si applicable)
- Desktop : > 1024px (layout complet)
Step 3 — Page Structure (ordre obligatoire)
1. Hero / Header
<section class="hero">
<h1>[product_name]</h1>
<p class="subtitle">[product_description]</p>
<div class="price">[product_price]</div>
<a href="[destination_url]" class="cta-button">[cta_button_text]</a>
</section>
Design :
- Full-width, padding généreux
- Titre large et bold
- Prix affiché avec
var(--primary)
- CTA :
background: var(--primary), texte blanc, arrondi, animation hover
- Sans images : gradient dérivé de
var(--primary) + var(--accent)
2. Trust Bar
<section class="trust-bar">
<div class="badge"><span class="icon">[icon]</span><span>[text]</span></div>
</section>
Design : Bande horizontale, fond léger, flex + wrap mobile, icons + texte court
3. Promises
<section class="promises">
<h2>Ce que tu obtiens</h2>
<div class="promise-grid">
<div class="promise-card">
<span class="promise-icon">[emoji]</span>
<h3>[title]</h3>
<p>[description]</p>
</div>
</div>
</section>
Design : Grille 2 cols desktop / 1 col mobile, cartes blanches avec ombre subtile, var(--accent) pour les icônes
4. Details & Caractéristiques
<section class="details">
<div class="detail-block">
<img src="[image_url]" alt="[title]">
<div class="detail-content">
<h3>[title]</h3>
<ul><li>[point]</li></ul>
</div>
</div>
</section>
Design : Layout alterné, stacked sur mobile, parser **bold** en <strong>, sans images = blocs texte full-width
5. Info Cards (optionnel)
<section class="info-cards">
<div class="info-card info-card--green"><h4>[title]</h4><p>[text]</p></div>
</section>
6. FAQ
<section class="faq">
<h2>Questions fréquentes</h2>
<div class="faq-list">
<details class="faq-item"><summary>[question]</summary><p>[answer]</p></details>
</div>
</section>
Design : Accordion natif <details>/<summary>, pas de JS, animation CSS
7. Call to Action (mid-page)
<section class="cta-section">
<h2>[cta_title]</h2>
<p>[cta_subtitle]</p>
<a href="[destination_url]" class="cta-button">[cta_button_text]</a>
</section>
Mode Lead Magnet (page de capture email)
Si le mode lead-magnet est choisi, adapter la page :
- Hero : Accroche + promesse du lead magnet gratuit (pas de prix)
- CTA : "Télécharge gratuitement" / "Reçois le guide" au lieu de "Acheter"
- Formulaire : Champ email + bouton (lien vers ConvertKit, Mailchimp, etc.)
- Pas de section prix — remplacer par les bénéfices du lead magnet
- Social proof : "Déjà [N] téléchargements" plutôt que "Déjà [N] clients"
- Footer CTA : Rappel que c'est gratuit + urgence douce ("places limitées" ou "édition limitée")
8. Footer (avec liens légaux en modales)
<footer class="footer footer--dark">
<h2>[footer_title]</h2>
<p>[footer_subtitle]</p>
<a href="[destination_url]" class="cta-button">[cta_button_text]</a>
<div class="footer-legal">
<p class="copyright">© [year] [brand_name]. All rights reserved.</p>
<nav class="legal-links">
<a href="#" onclick="document.getElementById('modal-privacy').showModal(); return false;">Politique de confidentialité</a>
<span class="separator">|</span>
<a href="#" onclick="document.getElementById('modal-cgv').showModal(); return false;">Conditions générales de vente</a>
</nav>
</div>
</footer>
Règles :
- Utiliser les labels FR si
lang="fr", EN si lang="en"
- Les liens ouvrent des modales
<dialog>, PAS de nouvelles pages
- Le visiteur ne quitte JAMAIS la landing page
8b. Modales — Pages Légales (Privacy Policy + CGV)
Insérer les modales AVANT la fermeture de </body> :
<dialog id="modal-privacy" class="legal-modal">
<div class="modal-content">
<button class="modal-close" onclick="this.closest('dialog').close()">×</button>
<h2>Politique de confidentialité</h2>
<p><strong>Dernière mise à jour :</strong> [date]</p>
<h3>1. Collecte des données</h3>
<p>[brand_name] collecte les données personnelles suivantes lors de l'achat : nom, adresse email, données de paiement (traitées par [Stripe/Gumroad/LemonSqueezy — jamais stockées sur nos serveurs]). Ces données sont nécessaires à l'exécution de la commande et à la livraison du produit digital.</p>
<h3>2. Utilisation des données</h3>
<p>Vos données sont utilisées pour : la livraison du produit acheté, l'envoi d'emails relatifs à votre achat, l'amélioration de nos services. Nous ne vendons ni ne partageons vos données avec des tiers, sauf obligation légale.</p>
<h3>3. Cookies</h3>
<p>Ce site utilise des cookies de mesure d'audience (Google Analytics / Meta Pixel) et des cookies fonctionnels. Vous pouvez désactiver les cookies dans les paramètres de votre navigateur.</p>
<h3>4. Vos droits</h3>
<p>Conformément au RGPD, vous disposez d'un droit d'accès, de rectification, d'effacement et de portabilité de vos données. Pour exercer ces droits : [email de contact].</p>
<h3>5. Contact</h3>
<p>Pour toute question : [email] — [brand_name], [adresse si applicable].</p>
</div>
</dialog>
<dialog id="modal-cgv" class="legal-modal">
<div class="modal-content">
<button class="modal-close" onclick="this.closest('dialog').close()">×</button>
<h2>Conditions générales de vente</h2>
<p><strong>Dernière mise à jour :</strong> [date]</p>
<h3>1. Objet</h3>
<p>Les présentes conditions régissent la vente du produit digital « [product_name] » par [brand_name].</p>
<h3>2. Produit</h3>
<p>Le produit « [product_name] » est un [ebook/playbook/guide] au format [PDF/HTML]. Il est livré par téléchargement immédiat après paiement. Le contenu est fourni en l'état et ne constitue pas un conseil [professionnel/médical/financier — adapter selon la niche].</p>
<h3>3. Prix et paiement</h3>
<p>Le prix est de [prix] TTC. Le paiement est sécurisé et traité par [Stripe/Gumroad/LemonSqueezy]. [brand_name] ne stocke aucune donnée bancaire.</p>
<h3>4. Livraison</h3>
<p>Le produit est livré immédiatement par email et/ou page de téléchargement après confirmation du paiement. En cas de problème de livraison, contacter [email].</p>
<h3>5. Droit de rétractation</h3>
<p>Conformément à l'article L221-28 du Code de la consommation, le droit de rétractation ne s'applique pas aux contenus numériques fournis sur un support immatériel dont l'exécution a commencé avec l'accord du consommateur. Toutefois, [brand_name] offre une garantie satisfait ou remboursé de [14/30] jours. Pour toute demande : [email].</p>
<h3>6. Propriété intellectuelle</h3>
<p>Le contenu du produit est protégé par le droit d'auteur. L'achat confère un droit d'utilisation personnel et non transférable. Toute reproduction, revente ou distribution est interdite.</p>
<h3>7. Responsabilité</h3>
<p>[brand_name] ne garantit pas de résultats spécifiques. Les résultats dépendent de l'application individuelle du contenu. Les témoignages présentés ne sont pas représentatifs de tous les utilisateurs.</p>
<h3>8. Contact</h3>
<p>[brand_name] — [email] — [adresse si applicable].</p>
</div>
</dialog>
CSS des modales (à ajouter dans le <style>)
.legal-modal {
border: none;
border-radius: var(--radius);
max-width: 680px;
width: 90%;
max-height: 80vh;
padding: 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.legal-modal::backdrop {
background: rgba(0,0,0,0.6);
}
.modal-content {
padding: 2rem 2.5rem;
overflow-y: auto;
max-height: 80vh;
}
.modal-content h2 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--primary);
}
.modal-content h3 {
font-size: 1rem;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--text);
}
.modal-content p {
font-size: 0.9rem;
line-height: 1.7;
color: var(--muted);
margin-bottom: 0.75rem;
}
.modal-close {
position: sticky;
top: 0;
float: right;
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
color: var(--muted);
padding: 0.5rem;
line-height: 1;
z-index: 10;
}
.modal-close:hover { color: var(--text); }
.footer-legal { margin-top: 1.5rem; }
.legal-links { font-size: 0.8rem; margin-top: 0.5rem; }
.legal-links a { color: rgba(255,255,255,0.6); text-decoration: none; }
.legal-links a:hover { color: #fff; text-decoration: underline; }
.legal-links .separator { margin: 0 0.5rem; color: rgba(255,255,255,0.3); }
@media (prefers-color-scheme: dark) {
.legal-modal { background: var(--surface, #1a1a1a); }
.modal-content h2 { color: var(--accent); }
.modal-content p { color: #ccc; }
}
Adaptation bilingue des modales
| Élément | Français (lang="fr") | English (lang="en") |
|---|
| Lien footer 1 | "Politique de confidentialité" | "Privacy Policy" |
| Lien footer 2 | "Conditions générales de vente" | "Terms & Conditions" |
| Titre modal 1 | "Politique de confidentialité" | "Privacy Policy" |
| Titre modal 2 | "Conditions générales de vente" | "Terms & Conditions" |
| Sections Privacy | Collecte, Utilisation, Cookies, Droits, Contact | Collection, Usage, Cookies, Your Rights, Contact |
| Sections CGV | Objet, Produit, Prix, Livraison, Rétractation, PI, Responsabilité, Contact | Purpose, Product, Price, Delivery, Refund Policy, IP, Liability, Contact |
| Rétractation | Référence Code de la consommation FR | Reference consumer protection law (local) |
| Fermer | × (universel) | × (universel) |
Règle : Utiliser la langue définie dans Q10 (ou détectée depuis <html lang="...">). Ne JAMAIS mixer les langues dans une même modale.
9. Thank You Page (générée automatiquement)
La thank you page est un fichier HTML séparé avec :
- Le même design system (couleurs, typo, style)
- Un slug unique non devinable (hash aléatoire)
- Un meta
noindex (pas indexable par Google)
Génération du slug unique
HASH=$(openssl rand -hex 6)
FILENAME="ty-${HASH}.html"
Le fichier est sauvegardé dans landing-pages/ty-[hash].html.
Structure de la Thank You Page
<!DOCTYPE html>
<html lang="[fr/en]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Merci — [product_name]</title>
<style>
</style>
</head>
<body>
<main class="thank-you">
<section class="hero thank-you-hero">
<div class="checkmark">✓</div>
<h1>Merci pour ton achat !</h1>
<p class="subtitle">Ton accès à « [product_name] » est confirmé.</p>
</section>
<section class="download-section">
<h2>Télécharge ton [ebook/playbook/guide]</h2>
<p>Clique sur le bouton ci-dessous pour télécharger ton fichier. Tu recevras aussi un email de confirmation avec le lien.</p>
<a href="[download_url]" class="cta-button download-button">Télécharger maintenant</a>
</section>
<section class="next-steps">
<h2>Et maintenant ?</h2>
<div class="steps-list">
<div class="step">
<span class="step-number">1</span>
<div>
<h3>Ouvre ton [ebook/playbook]</h3>
<p>Lis la section "Lis ça d'abord" pour savoir par où commencer.</p>
</div>
</div>
<div class="step">
<span class="step-number">2</span>
<div>
<h3>Applique dès aujourd'hui</h3>
<p>Commence par la première action de la Section 1. Pas demain — maintenant.</p>
</div>
</div>
<div class="step">
<span class="step-number">3</span>
<div>
<h3>Besoin d'aide ?</h3>
<p>Réponds à l'email de confirmation. On lit tout.</p>
</div>
</div>
</div>
</section>
<section class="share-section">
<p>Tu connais quelqu'un qui en a besoin ? Partage :</p>
<div class="share-buttons">
<a href="https://twitter.com/intent/tweet?text=[encoded_text]&url=[landing_page_url]" target="_blank" class="share-btn">Twitter</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=[landing_page_url]" target="_blank" class="share-btn">LinkedIn</a>
</div>
</section>
</main>
<footer class="footer footer--dark">
<p class="copyright">© [year] [brand_name]</p>
<nav class="legal-links">
<a href="#" onclick="document.getElementById('modal-privacy').showModal(); return false;">[Privacy Policy / Politique de confidentialité]</a>
<span class="separator">|</span>
<a href="#" onclick="document.getElementById('modal-cgv').showModal(); return false;">[Terms / CGV]</a>
</nav>
</footer>
</body>
</html>
CSS spécifique Thank You Page (ajouter au style existant)
.thank-you-hero { text-align: center; padding: 4rem 2rem; }
.checkmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px; height: 80px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.download-section {
text-align: center;
padding: 2rem;
background: var(--surface);
border-radius: var(--radius);
margin: 2rem auto;
max-width: 500px;
}
.download-button { margin-top: 1rem; }
.next-steps { max-width: 600px; margin: 3rem auto; }
.step {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
align-items: flex-start;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.share-section { text-align: center; padding: 2rem; }
.share-buttons { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.share-btn {
padding: 0.5rem 1.25rem;
border: 1px solid var(--border);
border-radius: 50px;
text-decoration: none;
color: var(--text);
font-size: 0.85rem;
transition: background 0.2s;
}
.share-btn:hover { background: var(--surface); }
10. SEO (dans <head>)
Règle : Seule la landing page est indexable. La thank you page a noindex.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[seo_title]</title>
<meta name="description" content="[seo_description]">
<meta property="og:title" content="[seo_title]">
<meta property="og:description" content="[seo_description]">
<meta property="og:type" content="product">
<meta property="og:image" content="[first product_image or empty]">
<meta name="twitter:card" content="summary_large_image">
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Merci — [product_name]</title>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[seo_title]</title>
<meta name="description" content="[seo_description]">
<meta property="og:title" content="[seo_title]">
<meta property="og:description" content="[seo_description]">
<meta property="og:type" content="product">
<meta property="og:image" content="[first product_image or empty]">
<meta name="twitter:card" content="summary_large_image">
</head>
CTA Button Style (obligatoire)
.cta-button {
display: inline-block;
background: var(--primary);
color: #fff;
padding: 1rem 2.5rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
background: var(--primary-dark);
}
Quality Gates
| ID | Gate | Sévérité |
|---|
| QG-01 | Aucun placeholder [TODO], [INSERT], Lorem ipsum | Critical |
| QG-02 | CSS embarqué — aucun fichier externe (sauf Google Fonts) | Critical |
| QG-03 | Tous les boutons CTA pointent vers la MÊME destination_url | Critical |
| QG-04 | Toutes les couleurs utilisent var(--primary), var(--accent) — jamais de hex hardcodé | Critical |
| QG-05 | Page responsive et professionnelle sur mobile | Critical |
| QG-06 | Pas de texte placeholder — si contenu manquant, le générer depuis le contexte | Critical |
| QG-07 | Balises SEO complètes (title, description, OG tags) | High |
| QG-08 | HTML valide (tags fermés, structure correcte) | Critical |
| QG-09 | Privacy Policy ET CGV présentes en modales <dialog> dans le footer | Critical |
| QG-10 | Les modales légales sont dans la MÊME langue que la page (pas de mix FR/EN) | Critical |
| QG-11 | Thank You Page générée avec slug unique (ty-[hash].html) et noindex | Critical |
| QG-12 | Thank You Page utilise le même design system (couleurs, typo, style) | High |
| QG-13 | Attribut lang correct sur <html> (landing ET thank you) | High |
| QG-14 | Le style visuel choisi (minimaliste/bold/premium/warm) correctement appliqué aux 2 pages | High |
| QG-15 | Le slug de la thank you page est non devinable (hash aléatoire, pas le nom du produit) | High |
| QG-16 | Les modales se ferment avec le bouton ✕ et avec un clic en dehors (backdrop) | Medium |
Error Handling
| Scénario | Action |
|---|
| Pas de nom de produit | Demander : "Quel produit veux-tu vendre ?" — ne pas continuer sans |
| Pas d'URL de destination | Demander : "Où le bouton CTA doit-il rediriger ?" — ne pas continuer sans |
| Pas de couleurs fournies | Proposer 3 palettes adaptées à la niche, demander de choisir |
| Pas d'images | Utiliser un hero gradient (var(--primary) → var(--accent)), pas de placeholder image |
| Pas de FAQ | Générer 5 FAQ pertinentes depuis le contexte produit |
| Pas de trust badges | Générer 3 badges génériques (ex: "Accès immédiat", "Satisfait ou remboursé", "Support email") |
| Produit gratuit (lead magnet) | Adapter : pas de prix affiché, CTA = "Télécharger gratuitement", ajouter un champ email si possible |
| business-profile.md absent | Continuer avec les réponses du context intake uniquement |
| Contenu trop court | Compléter avec du contenu généré depuis la description produit |
| Style "premium" demandé | Basculer tout le design en dark mode via les CSS custom properties |
| Langue non précisée | Détecter depuis business-profile.md ou demander. Par défaut : FR |
| Pas de lien de téléchargement pour la thank you page | Afficher la confirmation sans bouton de téléchargement |
| L'utilisateur veut une thank you page pour une landing existante | Lire la landing page HTML existante, extraire les couleurs et le contenu, générer la thank you page cohérente |
Modales <dialog> non supportées par le navigateur | Ajouter un polyfill CSS minimal : dialog[open] { display: block; } pour les vieux navigateurs |
Cross-Skill Integration
| Avant landing-page | Skill précédent | Quand |
|---|
| Produit créé | /dp-playbook-create | Si on vend un ebook / playbook |
| Funnel conçu | /dp-sales-funnel | Pour connaître le rôle de la page dans le funnel |
| Profil business | business-profile.md | Pour les couleurs et infos de marque |
| Après landing-page | Skill suivant | Quand |
|---|
| Publicité Meta | /dp-ad-angles-meta | Pour générer les pubs qui pointent vers la page |
| Publicité Google | /dp-ad-angles-google | Pour les campagnes Search + Display |
| Séquence email | /dp-email-sequence | Pour envoyer du traffic email vers la page |
| Contenu social | /dp-social-caption /dp-mediaplan | Pour la promotion organique |
| Lead magnet | /lead-magnet-create | Si la page est un lead magnet, créer le contenu |
