# Prompt — Générateur de Mini-App HTML interactive

> **Usage** : copier-coller ce prompt dans n'importe quel LLM gratuit (Claude, ChatGPT, Gemini, Mistral Le Chat, DeepSeek) pour générer une mini-application HTML autonome qui guide un utilisateur à travers une démarche méthodologique et produit des prompts personnalisés à chaque étape.
>
> **Livrable attendu** : un fichier `.html` autonome (CSS + JS inline, zéro dépendance).

---

## 🧭 Comment l'utiliser

1. **Adapte les 4 zones en haut du prompt** (domaine, public, objectif, playbooks) à ton besoin.
2. **Choisis ton LLM** — Claude et ChatGPT donnent les meilleurs résultats sur ce type de livrable long.
3. **Si la sortie est tronquée** (fréquent en gratuit) : tape `continue` ou `reprends où tu t'es arrêté, ne reviens pas en arrière`.
4. **Deuxième passe recommandée** : après la première génération, demande une amélioration design (voir variantes en bas).

---

## 📋 Le prompt à copier

````
Tu vas générer une MINI-APPLICATION HTML interactive autonome (un seul fichier .html),
qui guide un utilisateur à travers une démarche méthodologique structurée et lui fournit
à chaque étape un prompt personnalisé à copier-coller dans un LLM externe.

═══════════════════════════════════════════════════════════════════
CONTEXTE MÉTIER (à adapter selon ton besoin)
═══════════════════════════════════════════════════════════════════
Domaine : [EX: Supply Chain / RH / Finance / Marketing / IT]
Public cible : [EX: managers opérationnels non-techniques]
Objectif de l'app : [EX: permettre à chacun de résoudre un problème métier
en s'appuyant sur un LLM, via une méthode cadrée reproductible]

═══════════════════════════════════════════════════════════════════
PLAYBOOKS À IMPLÉMENTER (1 ou plusieurs, au choix)
═══════════════════════════════════════════════════════════════════
Pour chaque playbook, fournis :
- Un titre + sous-titre
- 5 phases. Chaque phase contient :
  · Un nom court (verbe d'action : Define, Analyse, Decide, Act…)
  · Un titre explicite
  · Une méthode ou un repère (ex: "5 Pourquoi", "Ishikawa", "PDCA")
  · Un objectif en 1-2 phrases
  · 1 à 3 champs de formulaire (label, type input/textarea, placeholder, hint)
  · Un PROMPT LLM qui utilise les valeurs des champs via interpolation.
    Le prompt doit être métier, structuré, actionnable — pas générique.

EXEMPLE de playbook à générer (tu peux le remplacer par le tien) :
→ "Le Résolveur de problèmes [DOMAINE]"
  Phase 1 — Define (5 Pourquoi) : cadrer le problème
  Phase 2 — Analyse (Ishikawa) : cartographier les causes
  Phase 3 — Generate : produire 5 options de natures différentes
  Phase 4 — Decide (matrice Impact/Facilité) : trancher
  Phase 5 — Act (PDCA 30 jours) : plan d'action livrable

═══════════════════════════════════════════════════════════════════
ARCHITECTURE TECHNIQUE — CONTRAINTES STRICTES
═══════════════════════════════════════════════════════════════════
• UN SEUL fichier HTML autonome (CSS inline <style>, JS inline <script>)
• AUCUNE dépendance externe (pas de CDN, pas de framework, pas d'API)
• Vanilla JavaScript uniquement
• Compatible tous navigateurs modernes, responsive mobile
• Persistance via localStorage (sauvegarde auto à chaque saisie)
• Fonctionne 100% offline — aucune donnée ne quitte le navigateur

═══════════════════════════════════════════════════════════════════
UX / ÉCRANS (3 écrans, même fichier)
═══════════════════════════════════════════════════════════════════

ÉCRAN 1 — ACCUEIL
  · Hero avec titre + pitch
  · Bandeau "100% local, aucune donnée envoyée" (argument de confiance)
  · Cartes cliquables : une par playbook avec titre, description, méta-infos
    (temps estimé, LLM recommandés, cas d'usage)
  · Bouton "Démarrer" par carte

ÉCRAN 2 — WIZARD (phase par phase)
  · Header : titre playbook + "Phase X / Y"
  · Barre de progression animée
  · Carte de phase avec :
      - Numéro + nom + titre + méthode (badge)
      - Objectif encadré (fond clair, bordure colorée)
      - Section "Votre contexte" : le formulaire
      - Section "Prompt personnalisé" : bloc noir façon terminal,
        le prompt se met à jour EN LIVE pendant que l'utilisateur tape.
        Bouton "📋 COPIER" qui passe à "✓ COPIÉ" pendant 2s.
      - Rappel des LLM compatibles (puces)
      - Section "Collez la réponse du LLM" : textarea (optionnel mais recommandé)
  · Barre de navigation bas : [Précédent] [Phase suivante →]
  · À la dernière phase, le bouton devient "Terminer & voir la synthèse →"

ÉCRAN 3 — SYNTHÈSE
  · Hero vert "Démarche complétée"
  · Boutons d'export : Markdown (téléchargement .md),
    Imprimer/PDF (window.print), Copier tout (presse-papier),
    Nouvelle démarche (reset)
  · Pour chaque phase : récap contexte + réponse LLM stockée

═══════════════════════════════════════════════════════════════════
STRUCTURE DE DONNÉES (JavaScript)
═══════════════════════════════════════════════════════════════════
```js
const PLAYBOOKS = {
  key1: {
    title: "…",
    sub: "…",
    phases: [
      {
        name: "Define",
        title: "…",
        method: "5 Pourquoi",
        goal: "…",
        fields: [
          { id: "xxx", label: "…", type: "textarea",
            placeholder: "…", hint: "…" }
        ],
        prompt: (v) => `Prompt structuré avec ${v.xxx || "[à compléter]"}`
      },
      // … 4 autres phases
    ]
  }
};

let state = { playbook: null, phase: 0, data: {} };
// data[phaseIndex] = { fieldId: value, _response: "…" }
```

═══════════════════════════════════════════════════════════════════
FONCTIONS JS ATTENDUES (minimum)
═══════════════════════════════════════════════════════════════════
• showScreen(id)            — switch entre home/wizard/summary
• startPlaybook(key)        — initialise et entre dans le wizard
• renderWizard()            — affiche la phase courante
• updateField(id, value)    — sauvegarde + régénère le prompt en live
• prevPhase() / nextPhase() — navigation
• copyPrompt()              — copie presse-papier avec feedback visuel
• renderSummary()           — affiche la synthèse finale
• exportMarkdown()          — télécharge un .md
• copyFullSummary()         — copie synthèse complète
• saveState() / loadState() — localStorage
• resetState()              — confirmation + effacement

═══════════════════════════════════════════════════════════════════
DESIGN (charte graphique à respecter)
═══════════════════════════════════════════════════════════════════
Palette :
  · Fond page : #f5f6f8
  · Texte principal : #1a1a2e
  · Cards blanches, border-radius 14-16px, ombre douce
  · Accent primaire : #0ea5e9 (bleu ciel)
  · Accent secondaire : #7c3aed (violet) pour méthodes
  · Succès : #10b981, Alerte : #ef4444, Warning : #fbbf24
  · Prompt en mode terminal : fond #0f172a, texte #e2e8f0

Typographie :
  · System font stack (-apple-system, Segoe UI, …)
  · Hiérarchie claire : h1 ~32px, h2 ~22px, labels 11-13px uppercase letter-spacing

Composants clés :
  · Hero avec dégradé sombre (#1a1a2e → #16213e) et accent radial
  · Boutons : padding 12px 22px, border-radius 10px
  · Prompt-box : monospace (SF Mono / Monaco), padding 22-26px
  · Toast en bas centré pour confirmations
  · Print-friendly : @media print masque les boutons de navigation

═══════════════════════════════════════════════════════════════════
LIVRABLE
═══════════════════════════════════════════════════════════════════
Génère le fichier HTML complet, prêt à ouvrir dans un navigateur.
Aucune troncature, aucun placeholder "// à compléter".
Tous les playbooks doivent être fonctionnels de bout en bout.
````

---

## 🎨 Variantes de style (à ajouter à la fin du prompt)

| Variante | Phrase à ajouter |
|----------|------------------|
| **Plus sobre** | *"Design minimaliste type Notion / Linear, pas de dégradés"* |
| **Plus fun** | *"Design type Duolingo, couleurs vives, animations joyeuses"* |
| **Dark mode** | *"Version sombre uniquement, fond #0f172a"* |
| **Multi-langues** | *"Ajoute un toggle FR/EN en haut à droite"* |
| **Avec analytics** | *"Ajoute un compteur local d'utilisations dans localStorage, affiché en pied de page"* |
| **Branding custom** | *"Intègre le logo [URL] dans le header et adapte la palette aux couleurs [HEX1, HEX2]"* |

---

## 📊 Comparaison des LLM gratuits pour ce type de livrable

| LLM | Qualité code | Qualité design | Taille output | Note |
|-----|--------------|----------------|---------------|------|
| **Claude (claude.ai)** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Longue | Le meilleur pour ce cas, mais quota gratuit limité |
| **ChatGPT (GPT-4o/GPT-5)** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Longue | Excellent équilibre, gratuit avec compte |
| **Gemini** | ⭐⭐⭐⭐ | ⭐⭐⭐ | Très longue | Bon pour les longs outputs sans troncature |
| **Mistral Le Chat** | ⭐⭐⭐ | ⭐⭐⭐ | Moyenne | Gratuit et français, résultat correct |
| **DeepSeek** | ⭐⭐⭐⭐ | ⭐⭐⭐ | Longue | Étonnant rapport qualité/gratuit |

---

## 💡 Exemples d'adaptation à d'autres domaines

### RH — « Le Résolveur de conflits d'équipe »
- Phase 1 Define : situation + parties prenantes
- Phase 2 Analyse : grille DESC (Describe, Express, Specify, Consequences)
- Phase 3 Generate : 5 scénarios de médiation
- Phase 4 Decide : impact relationnel / urgence
- Phase 5 Act : plan de conversation 1:1

### Finance — « Le Cadreur d'investissement »
- Phase 1 Define : décision d'investissement
- Phase 2 Analyse : 4 piliers (marché, équipe, tech, finance)
- Phase 3 Generate : 3 scénarios (upside/base/downside)
- Phase 4 Decide : matrice IRR / risque
- Phase 5 Act : memo 1 page comité

### IT — « Le Résolveur d'incident production »
- Phase 1 Define : symptômes + timeline
- Phase 2 Analyse : 5 Pourquoi infra
- Phase 3 Generate : 5 hypothèses racine
- Phase 4 Decide : probabilité × coût de test
- Phase 5 Act : post-mortem + plan de remédiation

---

*Produit pour l'atelier « Découverte de l'IA en Supply Chain par la Pratique » · Annecy · 23 avril 2026*
*Alpes Supply Chain × AXION*