AI Landing Builder

Le moteur AI de Trackily génère une landing complète (HTML + copy + images) en un appel. Deux moteurs co-existent : v1 (20 templates HTML hardcodés) et v2 (Design DNA + 35 primitives CRO-testées). 6 providers LLM, 7 providers d'images, 12 archetypes, 8 frameworks copywriting.

Concept

Le AI Builder fait en un appel :

1. Inférer le vertical (antivirus, vpn, diet, crypto, dating…) depuis ta description (si tu ne l'as pas fourni).
2. Choisir un archetype (v2) ou un template_id (v1) — sauf si tu forces.
3. Bâtir un prompt système avec le framework copywriting (PAS, AIDA, BAB…) + la traffic temperature (cold / warm / hot).
4. Appeler le LLM pour qu'il produise le copy (et le design DNA si v2).
5. Générer les images (hero + benefit + product) via l'image provider.
6. Assembler le HTML final et l'insérer dans landing_pages avec type='ai'.
7. Stocker tout le contexte dans meta pour permettre rerender_landing_from_meta à coût zéro.

Toute la magie est dans ai-landing.js (2300 lignes) + ai-landing-dna.js + ai-landing-primitives.js + ai-landing-renderer-v2.js.

Engine v1 vs v2

v1 — Templates hardcodés (defaut historique)

5 templates originaux + 15 Phase-1 = 20 templates disponibles. Le LLM ne touche QUE le copy ; le HTML est un mustache statique.

Si template_id est omis, Trackily auto-pick selon le vertical (cf. ai-landing-templates.js:2839 — pickTemplate(vertical)).

Coût : ~$0.02-0.05 selon le provider LLM. Plus rapide que v2 (~30 % moins de tokens). Prédictible.

v2 — Design DNA + Primitives

Le LLM ne renvoie PAS juste du copy — il renvoie aussi un Design DNA : palette OKLCH, typo, layout, ornaments, motion, selection de primitives. Le renderer assemble la page à partir de 35 primitives CRO-testées (voir primitives).

12 archetypes (voir archetypes) servent d'ancres : le LLM pick un archetype, tweake 2-3 fields (palette hue, fonts), le renderer génère un HTML 100 % unique.

Différences avec v1 :

Quand v1 : tu veux un template connu-converting (av_security, sweepstakes, classic_hero). Tu veux minimum de coût. Quand v2 : tu veux une landing visuellement unique (luxe, éditorial, brand-forward). Tu fais de l'A/B archetype.

Le tool MCP generate_ai_landing

Signature complète (voir autopilot-content-tools.js:1448) :

{
  "name": "generate_ai_landing",
  "arguments": {
    // Requis
    "description": "string, 5+ chars",

    // Stratégie copy
    "framework": "aida | pas | bab | 4ps | pastor | storybrand | quest | star-story-solution",
    "traffic_temperature": "cold | warm | hot",
    "vertical": "antivirus | vpn | diet | crypto | dating | ...",
    "audience": "string (qui)",
    "angle": "string (l'angle copywriting)",
    "brand": "string (nom de marque)",
    "offer_name": "string",
    "cta_url": "string",
    "language": "en | fr | es | de | it | pt | ...",

    // Moteur
    "engine": "v1 | v2",                  // defaut v1
    "template_id": "...",                 // v1 only
    "force_archetype": "linear_minimal | brutalist | editorial | dark_tech | wellness | tabloid | luxury | indie | scientific | y2k | retro | glassmorphism", // v2 only

    // Providers
    "llm_provider": "anthropic | openai | google | mistral | grok | groq",
    "llm_model": "claude-3-5-sonnet | gpt-4o | ...",
    "image_provider": "pollinations | nano_banana | openai_gpt_image | openai_dalle | flux_fal | replicate | ideogram",

    // Tier-2
    "confirm_token": "string"
  }
}

Le flow preview → confirm

generate_ai_landing est Tier-2 (LLM cost $0.02-$0.15). Donc :

Étape 1 — Preview

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "MemoMind cognitive supplement for 45+",
    "vertical": "memory",
    "engine": "v2",
    "force_archetype": "wellness"
  }
}

Réponse :

{
  "status": "preview",
  "summary": "Generate AI landing for vertical=memory, archetype=wellness, framework=pas (defaulted), traffic=cold (defaulted). Estimated cost: ~$0.05-0.12.",
  "preview": { "...": "..." },
  "confirm_token": "ctok_xxx"
}

Étape 2 — Confirm

Mêmes args + confirm_token. Trackily appelle le LLM, génère les images, render le HTML, insère le row, et te retourne :

{
  "status": "ok",
  "landing": { "id": 50, "slug": "memomind-...", "html_size_bytes": 142000, "url": "/lp/memomind-..." },
  "meta": { "engine": "v2", "archetype": "wellness", "framework": "pas", "image_provider": "pollinations" },
  "cost_estimate_usd": 0.08,
  "next_steps": [
    { "tool": "link_landing_to_campaign", "arguments": { "ai_landing_id": 50, "campaign_id": "<id>" } }
  ]
}

Frameworks copywriting

Les 8 frameworks supportés (autopilot-content-tools.js:1461) :

• AIDA — Attention, Intérêt, Désir, Action. Classique direct-response.
• PAS — Problem, Agitate, Solution. Defaut. Le plus efficace en cold traffic.
• BAB — Before-After-Bridge. Idéal pour transformation/résultats.
• 4Ps — Picture, Promise, Prove, Push. Funnel narratif.
• PASTOR — Problem, Amplify, Story, Transformation, Offer, Response. Long-form advertorial.
• StoryBrand — Hero (lecteur), Guide (toi), Plan, Call. Donald Miller.
• QUEST — Qualify, Understand, Educate, Stimulate, Transition. Lead-gen.
• Star-Story-Solution — Personnage, histoire, solution. Magnétique.

Aliases auto-mappés : advertorial → pastor, story-brand → storybrand, before-after → bab. Unknown values → fallback PAS avec warning dans le preview.

Cost estimates par provider LLM

Plus le coût image (voir image-providers).

Exemples concrets

v1 — Sweepstakes tabloid

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "Win a $1000 Amazon gift card — sweepstakes for US residents",
    "vertical": "sweepstakes",
    "engine": "v1",
    "template_id": "tabloid_news",
    "framework": "aida",
    "traffic_temperature": "cold",
    "language": "en",
    "offer_name": "Amazon Sweepstakes",
    "cta_url": "https://offer.sweep.io/amazon"
  }
}

v2 — MemoMind wellness archetype

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "MemoMind — daily cognitive supplement for adults 45+ struggling with memory fog",
    "vertical": "memory",
    "audience": "adults 45-65 worried about cognitive decline",
    "angle": "Stop second-guessing yourself — science-backed daily memory support",
    "brand": "MemoMind",
    "offer_name": "MemoMind 30-day pack",
    "engine": "v2",
    "framework": "pastor",
    "traffic_temperature": "cold",
    "force_archetype": "wellness",
    "image_provider": "openai_gpt_image",
    "llm_provider": "anthropic",
    "llm_model": "claude-3-5-sonnet-latest",
    "cta_url": "https://memomind.shop/checkout"
  }
}

v2 — Luxury watches editorial

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "Limited-edition Swiss automatic watch, hand-assembled, 250 pieces worldwide",
    "vertical": "luxury",
    "engine": "v2",
    "framework": "storybrand",
    "traffic_temperature": "warm",
    "force_archetype": "luxury",
    "image_provider": "ideogram",
    "language": "en"
  }
}

v2 — Crypto trading dark_tech

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "AI-powered crypto trading signals for retail traders",
    "vertical": "crypto",
    "engine": "v2",
    "framework": "pas",
    "traffic_temperature": "warm",
    "force_archetype": "dark_tech",
    "image_provider": "flux_fal",
    "llm_provider": "openai",
    "llm_model": "gpt-4o"
  }
}

v1 — Health quick test, image Pollinations gratuit

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "Keto diet plan for women 35+",
    "vertical": "diet",
    "engine": "v1",
    "framework": "bab",
    "traffic_temperature": "cold",
    "image_provider": "pollinations",
    "language": "fr"
  }
}

Wrappers haut-niveau

Trois wrappers autour de generate_ai_landing :

generate_landing_for_offer

Lit l'offer, infère le vertical depuis le nom, et appelle generate_ai_landing avec les bons defaults.

{
  "name": "generate_landing_for_offer",
  "arguments": { "offer_id": 12, "framework": "PAS", "traffic_temperature": "cold" }
}

generate_landing_variants

Crée N (1-8) variantes d'une landing existante EN PARALLÈLE (Promise.all). Toutes partagent le variant_group_id.

{
  "name": "generate_landing_variants",
  "arguments": { "ai_landing_id": 50, "count": 4 }
}

translate_landing

Traduit la landing en N langues. Crée 1 landing par langue, même variant_group_id.

{
  "name": "translate_landing",
  "arguments": { "ai_landing_id": 50, "languages": ["fr", "es", "de"] }
}

Re-render zéro coût

Après upgrade du renderer (nouveaux primitives, fix CSS), tu peux re-générer le HTML sans rappeler le LLM :

{
  "name": "rerender_landing_from_meta",
  "arguments": { "landing_id": 50 }
}

Trackily relit meta.copy + meta.design_dna + meta.engine et re-render avec le code actuel. meta.last_rerendered_at est stampé.

Erreurs courantes

• description trop court : minimum 5 chars mais < 30 = LLM hallucine. Donne 1-3 phrases précises.
• Pas de clé API LLM : Trackily répond No API key configured for <provider>. Settings → AI → coller la clé.
• image_provider sans clé : fallback silent sur Pollinations (gratuit). Pas d'erreur, mais ce n'est pas ce que tu voulais.
• force_archetype sur engine v1 : ignoré silencieusement. v1 utilise template_id.
• template_id sur engine v2 : ignoré silencieusement. v2 utilise l'archetype.
• DALL-E URLs expirées : les URLs DALL-E meurent en 1h. Toujours préférer openai_gpt_image (base64, persistent) ou nano_banana.
• Confirm_token expiré : 5 min TTL. Relance l'étape preview.
• Cost qui explose : image_provider: openai_gpt_image + quality: high = $0.167 par image. Pour un test rapide, garde Pollinations.

Voir aussi

• Archetypes — les 12 archetypes v2 détaillés
• Primitives — les 35 primitives v2
• Image providers — les 7 providers d'image
• Types — type='ai' explained
• A/B price testing — price_overrides
• MCP — tools reference — schéma JSON complet