Communitygithub.com

kabde/dp-createur

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.

dp-createur とは？

dp-createur is a Cursor agent skill that 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.

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/kabde/dp-createur/tree/HEAD/skills/dp-landing-page
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

プレビュー

スキル README より

dp-createur preview

ドキュメント

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

CommandeDescription
/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)

#QuestionPourquoi
Q1Quel produit ou service veux-tu vendre sur cette page ? Nom + description courte.Cadre le contenu
Q2Quel est le prix ? (ou "gratuit" si lead magnet)Hero + CTA
Q3Quelle 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)

#QuestionPourquoi
Q4Quelle est ta couleur primaire ? (hex, ex: #059669, ou nom comme "vert émeraude")CSS --primary
Q5Quelle est ta couleur d'accent ? (hex, ex: #10b981, ou nom comme "vert clair")CSS --accent
Q6Quel 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

#QuestionPourquoi
Q7Tu as des images du produit ? (URLs ou fichiers locaux — 1 à 3 max)Hero et sections détails
Q8Quels sont les 3-4 bénéfices principaux de ton produit ?Section Promises
Q9Tu 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

#QuestionPourquoi
Q10Quelle langue pour la page ? fr (français) ou en (anglais)Texte des modales légales, labels, footer
Q11Pour 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

#QuestionPourquoi
Q12Quelles sont les 3-5 questions que tes clients posent le plus ?Section FAQ
Q13Tu 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 {
  /* Couleurs de marque — issues du context intake */
  --primary: [primary_color from Q4];
  --accent: [accent_color from Q5];

  /* Couleurs dérivées automatiquement */
  --primary-light: [primary + transparence 10%];
  --primary-dark: [primary assombri 20%];
  --accent-light: [accent + transparence 10%];

  /* Couleurs système */
  --text: #1a1a1a;
  --muted: #666666;
  --bg: #ffffff;
  --surface: #f9fafb;
  --border: #e5e7eb;

  /* Layout */
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --max-width: 720px;
}

Styles par ambiance visuelle

StyleModifications CSS
minimaliste--bg: #ffffff, --surface: #fafafa, ombres très légères, beaucoup d'espace blanc, --radius: 8px
boldContrastes 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">
  <!-- Image(s) produit si fournies -->
  <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>
  <!-- 3-5 badges -->
</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>
    <!-- 2-4 cartes -->
  </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>
  <!-- Alterner image gauche/droite -->
</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>
  <!-- Types : green (positif), red (négatif), blue (info), amber (attention) -->
</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">&copy; [year] [brand_name]. All rights reserved.</p>
    <nav class="legal-links">
      <!-- FR -->
      <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>
      <!-- EN -->
      <!-- <a href="#" onclick="document.getElementById('modal-privacy').showModal(); return false;">Privacy Policy</a> -->
      <!-- <span class="separator">|</span> -->
      <!-- <a href="#" onclick="document.getElementById('modal-cgv').showModal(); return false;">Terms & Conditions</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> :

<!-- === MODAL : PRIVACY POLICY === -->
<dialog id="modal-privacy" class="legal-modal">
  <div class="modal-content">
    <button class="modal-close" onclick="this.closest('dialog').close()">&times;</button>
    <!-- FR -->
    <h2>Politique de confidentialité</h2>
    <!-- EN: <h2>Privacy Policy</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>

<!-- === MODAL : CONDITIONS GÉNÉRALES DE VENTE === -->
<dialog id="modal-cgv" class="legal-modal">
  <div class="modal-content">
    <button class="modal-close" onclick="this.closest('dialog').close()">&times;</button>
    <!-- FR -->
    <h2>Conditions générales de vente</h2>
    <!-- EN: <h2>Terms & Conditions</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>)

/* === Modales légales (Privacy + CGV) === */
.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 links */
.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); }

/* Si style premium (dark), adapter les modales */
@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émentFranç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 PrivacyCollecte, Utilisation, Cookies, Droits, ContactCollection, Usage, Cookies, Your Rights, Contact
Sections CGVObjet, Produit, Prix, Livraison, Rétractation, PI, Responsabilité, ContactPurpose, Product, Price, Delivery, Refund Policy, IP, Liability, Contact
RétractationRéférence Code de la consommation FRReference 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

# Générer un hash aléatoire de 12 caractères
HASH=$(openssl rand -hex 6)
# Résultat : ty-a3f7b2c91e04.html
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>
  <!-- EN: <title>Thank You — [product_name]</title> -->
  <style>
    /* MÊME CSS que la landing page (copier intégralement) */
  </style>
</head>
<body>
  <main class="thank-you">

    <!-- Section 1 : Confirmation -->
    <section class="hero thank-you-hero">
      <div class="checkmark">✓</div>
      <!-- FR -->
      <h1>Merci pour ton achat !</h1>
      <p class="subtitle">Ton accès à « [product_name] » est confirmé.</p>
      <!-- EN -->
      <!-- <h1>Thank you for your purchase!</h1> -->
      <!-- <p class="subtitle">Your access to "[product_name]" is confirmed.</p> -->
    </section>

    <!-- Section 2 : Téléchargement (si lien fourni) -->
    <!-- CONDITIONNEL : afficher seulement si Q11 a un lien de téléchargement -->
    <section class="download-section">
      <!-- FR -->
      <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>
      <!-- EN -->
      <!-- <h2>Download your [ebook/playbook/guide]</h2> -->
      <!-- <p>Click the button below to download your file. You'll also receive a confirmation email with the link.</p> -->
      <!-- <a href="[download_url]" class="cta-button download-button">Download Now</a> -->
    </section>

    <!-- Section 3 : Prochaines étapes -->
    <section class="next-steps">
      <!-- FR -->
      <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>
      <!-- EN : adapter les textes -->
    </section>

    <!-- Section 4 : Social proof / partage (optionnel) -->
    <section class="share-section">
      <!-- FR -->
      <p>Tu connais quelqu'un qui en a besoin ? Partage :</p>
      <!-- EN: <p>Know someone who needs this? Share:</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 identique à la landing page -->
  <footer class="footer footer--dark">
    <p class="copyright">&copy; [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>

  <!-- Mêmes modales légales que la landing page -->
  <!-- COPIER les <dialog> modal-privacy et modal-cgv de la landing page -->

</body>
</html>

CSS spécifique Thank You Page (ajouter au style existant)

/* Thank You Page */
.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.

<!-- Landing Page <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>

<!-- Thank You Page <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

IDGateSévérité
QG-01Aucun placeholder [TODO], [INSERT], Lorem ipsumCritical
QG-02CSS embarqué — aucun fichier externe (sauf Google Fonts)Critical
QG-03Tous les boutons CTA pointent vers la MÊME destination_urlCritical
QG-04Toutes les couleurs utilisent var(--primary), var(--accent) — jamais de hex hardcodéCritical
QG-05Page responsive et professionnelle sur mobileCritical
QG-06Pas de texte placeholder — si contenu manquant, le générer depuis le contexteCritical
QG-07Balises SEO complètes (title, description, OG tags)High
QG-08HTML valide (tags fermés, structure correcte)Critical
QG-09Privacy Policy ET CGV présentes en modales <dialog> dans le footerCritical
QG-10Les modales légales sont dans la MÊME langue que la page (pas de mix FR/EN)Critical
QG-11Thank You Page générée avec slug unique (ty-[hash].html) et noindexCritical
QG-12Thank You Page utilise le même design system (couleurs, typo, style)High
QG-13Attribut lang correct sur <html> (landing ET thank you)High
QG-14Le style visuel choisi (minimaliste/bold/premium/warm) correctement appliqué aux 2 pagesHigh
QG-15Le slug de la thank you page est non devinable (hash aléatoire, pas le nom du produit)High
QG-16Les modales se ferment avec le bouton ✕ et avec un clic en dehors (backdrop)Medium

Error Handling

ScénarioAction
Pas de nom de produitDemander : "Quel produit veux-tu vendre ?" — ne pas continuer sans
Pas d'URL de destinationDemander : "Où le bouton CTA doit-il rediriger ?" — ne pas continuer sans
Pas de couleurs fourniesProposer 3 palettes adaptées à la niche, demander de choisir
Pas d'imagesUtiliser un hero gradient (var(--primary) → var(--accent)), pas de placeholder image
Pas de FAQGénérer 5 FAQ pertinentes depuis le contexte produit
Pas de trust badgesGé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 absentContinuer avec les réponses du context intake uniquement
Contenu trop courtComplé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éeDétecter depuis business-profile.md ou demander. Par défaut : FR
Pas de lien de téléchargement pour la thank you pageAfficher la confirmation sans bouton de téléchargement
L'utilisateur veut une thank you page pour une landing existanteLire 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 navigateurAjouter un polyfill CSS minimal : dialog[open] { display: block; } pour les vieux navigateurs

Cross-Skill Integration

Avant landing-pageSkill précédentQuand
Produit créé/dp-playbook-createSi on vend un ebook / playbook
Funnel conçu/dp-sales-funnelPour connaître le rôle de la page dans le funnel
Profil businessbusiness-profile.mdPour les couleurs et infos de marque
Après landing-pageSkill suivantQuand
Publicité Meta/dp-ad-angles-metaPour générer les pubs qui pointent vers la page
Publicité Google/dp-ad-angles-googlePour les campagnes Search + Display
Séquence email/dp-email-sequencePour envoyer du traffic email vers la page
Contenu social/dp-social-caption /dp-mediaplanPour la promotion organique
Lead magnet/lead-magnet-createSi la page est un lead magnet, créer le contenu

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community