Primitives v2

Les 35 primitives sont les briques HTML/CSS du moteur v2. Chaque primitive est un fragment self-contained (HTML + <style> scopé) que le renderer assemble selon le primitive_selection de la DNA. Le smart picker (F1) override les defaults selon traffic temperature et structure du copy.

Concept

Chaque primitive vit dans ai-landing-primitives.js. Signature universelle : (dna, copy) => string qui rend un fragment HTML autonome. Les CSS classes sont préfixées .p-<group>-<variant>-* pour éviter les collisions.

Le renderer (ai-landing-renderer-v2.js) :

1. Lit dna.primitive_selection.
2. Pour chaque slot (hero, social_proof, urgency…), pick la variant choisie par la DNA.
3. Appelle la fonction primitive avec (dna, copy).
4. Concatène les fragments selon l'ARCHETYPE_SECTION_ORDERS de l'archetype.

Les primitives sont CRO-tested : on ne touche pas à la structure CRO (CTA placement, ordre des sections), seule l'aesthetic varie.

Catalogue par groupe

Groupe hero — 5 variants

L'above-the-fold. Le seul slot qui a 5 variants distincts.

split_image

• Look : grid 2 colonnes (1.4fr texte / 1fr image), image à droite avec aspect 4:3, trust badges sous le CTA.
• Quand le picker la choisit : linear_minimal, scientific, retro defaults.
• Code : ai-landing-primitives.js:53.

centered_text

• Look : tout centré, max-width 760px, pré-headline en small caps souligné, image optionnelle sous le hero.
• Quand : brutalist, editorial, dark_tech, wellness, tabloid, luxury, indie, y2k, glassmorphism (la plupart des archetypes).
• Code : ai-landing-primitives.js:86.

testimonial_above_fold

• Look : un témoignage cinq étoiles en hero, photo de l'auteur, sub-headline du produit dessous.
• Quand : trigger par le smart picker quand testimonials.length >= 7 ET traffic_temperature = cold (sauf wellness/luxury). Trust-first.
• Code : ai-landing-primitives.js:118.

comparison_above_fold

• Look : table comparative "Brand X vs us" directement en hero, avec WINNER badge.
• Quand : smart picker quand comparison_items.length >= 4 ET archetype ≠ {luxury, wellness, y2k, editorial}.
• Code : ai-landing-primitives.js:155.

video_placeholder

• Look : zone vidéo 16:9 avec play button SVG, headline + sub à côté ou dessous.
• Quand : rarement choisi par les archetypes default. Override via JSON DNA si tu veux un VSL (Video Sales Letter).
• Code : ai-landing-primitives.js:188.

Groupe problem — 1 variant (always-on)

default

• Look : section avec un headline "Le problème" + 3-4 bullet points en cards.
• Quand : présent par défaut sauf pour luxury et y2k (qui retirent la section problem de l'ordre).
• Code : ai-landing-primitives.js:226.

Groupe solution — 1 variant (always-on)

default

• Look : section avec headline + 3-4 features en cards avec icônes, alignement variable selon DNA.
• Quand : présent dans TOUS les archetypes (c'est le pitch).
• Code : ai-landing-primitives.js:253.

Groupe social_proof — 5 variants

star_grid

• Look : grid 3-4 columns avec photos clients + 5-star rating + témoignage court.
• Quand : tabloid, y2k defaults. Trigger par smart picker dès testimonials.length >= 5 (sauf editorial/indie/luxury locked).
• Code : ai-landing-primitives.js:298.

logo_strip

• Look : bande horizontale de logos clients en grayscale.
• Quand : linear_minimal default. Triggéré quand l'audience reconnaît les marques (B2B SaaS). En cold traffic le picker la remplace par metric_blocks.
• Code : ai-landing-primitives.js:329.

quote_cards

• Look : 2-3 grands témoignages en cards avec quote marks décoratives, photo de l'auteur, titre + entreprise.
• Quand : editorial, wellness, luxury, indie, retro, glassmorphism defaults. La voix premium.
• Code : ai-landing-primitives.js:350.

metric_blocks

• Look : 3-4 chiffres énormes ("4.8/5", "12 000+", "97 %") + label en dessous.
• Quand : brutalist, dark_tech, scientific defaults. Trigger par smart picker en cold traffic si default = logo_strip ou mixed.
• Code : ai-landing-primitives.js:384.

mixed

• Look : combo — un metric_block géant + une rangée de mini-quotes.
• Quand : rare. Choisi explicitement via override DNA quand tu veux le best of both worlds.
• Code : ai-landing-primitives.js:424.

Groupe objections — 3 variants

faq_accordion

• Look : 4-6 questions avec accordéon CSS-only (<details>/<summary>), accent sur l'open.
• Quand : linear_minimal, editorial, wellness, luxury, scientific, retro, glassmorphism defaults. La voix corporate / informative.
• Code : ai-landing-primitives.js:460.

mythbusters

• Look : grid de cards "❌ Mythe → ✅ Réalité" en deux colonnes par item.
• Quand : indie, y2k defaults. La voix conversationnelle.
• Code : ai-landing-primitives.js:488.

side_by_side

• Look : 2 colonnes "Avant ❌ / Après ✅" alignées, comparaison de slogans courts.
• Quand : brutalist, dark_tech, tabloid defaults. Voix punch.
• Code : ai-landing-primitives.js:519.

Groupe urgency — 5 variants

countdown

• Look : compte à rebours JS (jours:heures:minutes:secondes), background coloré, sous-titre.
• Quand : tabloid default. Smart picker n'override pas (locked).
• Code : ai-landing-primitives.js:554.

scarcity_count

• Look : message "Plus que X places / X pièces" avec animation pulse.
• Quand : dark_tech default. Trigger par smart picker en cold traffic si default = none ou embedded_inline (sauf wellness/luxury/editorial/indie/tabloid/y2k locked).
• Code : ai-landing-primitives.js:590.

banner

• Look : bande pleine largeur en haut de page, message court, CTA inline.
• Quand : brutalist, tabloid (sur urgency_top), y2k defaults.
• Code : ai-landing-primitives.js:610.

embedded_inline

• Look : petit badge inline ("Offre limitée jusqu'à dimanche") posé entre 2 sections.
• Quand : editorial, wellness, dark_tech (sur urgency_inline), scientific, retro, glassmorphism defaults. La pression douce.
• Code : ai-landing-primitives.js:620.

none

• Look : rien (la section est skip).
• Quand : linear_minimal, luxury, indie defaults — les voix anti-pressure.
• Code : ai-landing-primitives.js:none → returns ''.

Groupe guarantee — 4 variants

badge

• Look : badge circulaire avec icône bouclier et texte "Garantie X jours".
• Quand : linear_minimal, dark_tech, scientific, y2k, glassmorphism defaults.
• Code : ai-landing-primitives.js:640.

seal

• Look : seal officiel avec ornements gold/ruban, plus formel que badge.
• Quand : wellness, luxury, retro defaults. Voix premium.
• Code : ai-landing-primitives.js:659.

testimonial_quote

• Look : grand pull-quote d'un client qui mentionne la garantie, photo de l'auteur.
• Quand : editorial, indie defaults. La preuve par le pair.
• Code : ai-landing-primitives.js:691.

bold_text

• Look : statement géant en uppercase, "Si ça ne marche pas, on rembourse." pas de fioriture.
• Quand : brutalist, tabloid defaults. Voix punch.
• Code : ai-landing-primitives.js:713.

Groupe pricing — 4 variants

anchored_strikethrough

• Look : prix barré ($199) → prix actuel ($49), badge "-75 %".
• Quand : brutalist, tabloid defaults. Trigger en hot traffic si default = single_box (sauf luxury locked).
• Code : ai-landing-primitives.js:735.

tiered_cards

• Look : 3 cards (Starter / Pro / Enterprise) avec popular badge sur la card du milieu.
• Quand : dark_tech, y2k, glassmorphism defaults. SaaS-style.
• Code : ai-landing-primitives.js:766.

single_box

• Look : une seule card prix avec features bullet + CTA, simple et direct.
• Quand : linear_minimal, editorial, wellness, indie, scientific, retro defaults.
• Code : ai-landing-primitives.js:815.

hidden_until_cta

• Look : pas de prix affiché. Le CTA dit "Demander un prix" ou "Réserver".
• Quand : luxury default uniquement. Locked par smart picker.
• Code : ai-landing-primitives.js:832.

Groupe comparison — 1 variant (conditional)

default

• Look : table 3-4 colonnes (Brand X / Brand Y / Us), checkmarks + crosses, WINNER badge.
• Quand : présent SEULEMENT si copy.comparison_items.length > 0. Sinon la section est skip.
• Code : ai-landing-primitives.js:855.

Groupe faq — 1 variant (always-on quand archetype l'inclut)

default

• Look : accordéon FAQ classique (différent de objections.faq_accordion qui est plus court et tactique).
• Quand : présent dans linear_minimal, editorial, wellness, scientific, retro, indie.
• Code : ai-landing-primitives.js:895.

Groupe final_cta — 1 variant (always-on)

default

• Look : section pleine largeur avec headline accrocheur, sub, gros CTA centré, optionnel trust badges en bas.
• Quand : présent dans TOUS les archetypes — c'est la dernière demande.
• Code : ai-landing-primitives.js:929.

Groupe footer — 4 variants

minimal_legal

• Look : 1-2 lignes (copyright, links Privacy/Terms), texte petit en gris.
• Quand : linear_minimal, editorial, wellness, dark_tech, glassmorphism defaults.
• Code : ai-landing-primitives.js:957.

full_sitemap

• Look : footer 4-5 colonnes (Product, Company, Resources, Legal, Social), links en grid.
• Quand : scientific default. Voix corporate.
• Code : ai-landing-primitives.js:984.

brand_repeat

• Look : logo de la marque en grand, slogan, copyright. Pas de links.
• Quand : brutalist, luxury, indie, tabloid, y2k, retro defaults. Signature visuelle.
• Code : ai-landing-primitives.js:1032.

none

• Look : rien. Pas même un copyright (techniquement non-recommandé légalement, à éviter).
• Quand : jamais default. Override DNA explicite si tu veux.

Smart Picker (F1) — recap

Source : ai-landing-dna.js:702 (smartPickPrimitives).

Inputs:  traffic_temperature ∈ {cold, warm, hot}
         copy.testimonials.length
         copy.comparison_items.length
         dna.aesthetic_archetype

Pour chaque archetype, certains slots sont LOCKED → jamais override.

Cold:
  - si urgency ∈ {none, embedded_inline} → set scarcity_count (UNLESS locked)
  - si social_proof ∈ {logo_strip, mixed} → set metric_blocks (UNLESS locked)

Hot:
  - si hero == split_image → set centered_text (UNLESS locked)
  - si pricing == single_box → set anchored_strikethrough (UNLESS locked)

Warm: (rien)

Copy shape:
  - testimonials.length >= 5 → set social_proof = star_grid (UNLESS locked)
  - testimonials.length >= 7 ET cold ET arch != {wellness, luxury} → set hero = testimonial_above_fold
  - comparison_items.length >= 4 ET arch != {luxury, wellness, y2k, editorial} → set hero = comparison_above_fold

Voir la matrice des locks dans archetypes — tableau récapitulatif des LOCKS.

Quelle primitive par archetype (matrice)

Comment override manuellement

Tu peux émettre une DNA custom en passant directement le payload via les params du LLM, mais la pratique standard est :

1. Génère avec generate_ai_landing.
2. Inspecte meta.design_dna.primitive_selection.
3. Update via update_landing en patchant le meta directement (le moteur respecte les overrides via rerender_landing_from_meta).

⚠️ Une override qui ignore le lock peut produire un résultat hors-brand. Réfléchis avant.

Erreurs courantes

• Primitive inconnue dans DNA : le renderer fallback sur la default (centered_text pour hero, quote_cards pour social, etc.). Pas d'erreur, mais pas non plus le résultat espéré.
• copy.testimonials manquant ou vide : star_grid renvoie une chaîne vide. Pas d'erreur, juste pas de social proof.
• Comparison sans comparison_items : la section comparison est skip silencieusement. Si tu veux la voir, fournir un array comparison_items dans le copy.
• Confusion objections.faq_accordion vs faq.default : deux sections différentes ! L'objections est plus court et tactique (3-5 Qs ciblées). La FAQ est plus longue (5-10 Qs informatives).
• Override pricing: tiered_cards sur luxury : le smart picker locked, mais si tu force via DNA explicite, ça override. Casse l'identité brand.

Voir aussi

• Archetypes — qui pick quelle primitive par défaut
• AI Builder — comment ces primitives sont assemblées
• Code source : ai-landing-primitives.js (35 fonctions), ai-landing-renderer-v2.js (assembly)