Graphic Case Study

Étude de Cas Graphique

Générez un PDF d'étude de cas B2B au design professionnel à partir des détails d'un récit client. Le résultat est un fichier HTML autonome (s'ouvre dans n'importe quel navigateur) ainsi qu'un PDF prêt à imprimer. Prend en charge 7 mises en page de sections et 9 préréglages de style.

---

Règles critiques — non-négociables :

1. Chaque page DOIT tenir dans le cadre A4 (1200×1697px). Aucun débordement de contenu.
2. TOUTES les tailles de police évolutives utilisent clamp(). Les px fixes ne sont autorisés que pour les bordures/lignes structurelles.
3. HTML autonome unique : tout le CSS en ligne. Zéro dépendance externe, à l'exception du lien CDN de la police.
4. Ne jamez jamais le HTML dans le chat. Enregistrez dans un fichier, affichez uniquement le résumé.
5. Les chiffres des résultats DOIVENT être visuellement dominants — au moins 3× la taille du texte du corps.
6. Pas de contenu IA générique : pas d'Inter comme police d'affichage, pas de dégradé violet sur fond blanc, pas de remerciement de clôture.

---

Étape 1 : Recueil des Informations

J'ai besoin de quatre éléments pour commencer. Si les quatre sont présents dans le message : passez à l'Étape 2.

Si un élément manque, demandez exactement :

"Pour créer votre étude de cas, j'ai besoin de quatre choses :

1. Nom du client — nom de l'entreprise (ou un descriptif pour anonymiser : "Distributeur Fortune 500")
2. Défi — quel problème avaient-ils avant d'utiliser votre produit ? (2-5 phrases)
3. Solution — qu'a fait votre produit pour le résoudre ? (fonctionnalités, approche)
4. Résultats — résultats mesurables : idéalement 3 statistiques (%, temps gagné, impact sur le chiffre d'affaires, etc.)"

Attendez les quatre éléments avant de continuer.

---

Étape 2 : Recueil Complet

Posez toutes les questions en un seul message, regroupées par catégorie. L'utilisateur peut ignorer certaines — des valeurs par défaut s'appliquent.

"Quelques questions avant de commencer :

Contenu

1. Contexte client — secteur d'activité, taille de l'entreprise, emplacement ? (facultatif, utilisé pour la page d'aperçu)
2. Témoignage — citation client (40 mots max) + nom de l'intervenant + titre ? (ou "J'ajouterai plus tard")
3. Nombre de pages — 1 page (fiche récapitulative) / 2 pages (standard, par défaut) / 4 pages (détaillé)
4. Logo client — URL ou "aucun"

Design 5. Nom de votre entreprise — nom du fournisseur pour la page d'appel à l'action (+ URL du logo si disponible) 6. Style — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "montre-moi les options" 7. Orientation — portrait A4 (par défaut, 1200×1697) / paysage 4:3 (1200×900)

Sortie 8. Anonymiser ? — Conserver le nom de l'entreprise / Remplacer par un descripteur du secteur 9. Slug — nom du fichier slug (ex. "acme-corp-2025") ; je le déduirai du nom du client si ignoré"

Valeurs par défaut en cas d'omission :

Question	Défaut
Contexte client	aucun
Témoignage	aucun
Nombre de pages	2
Logo client	aucun
Nom de votre entreprise	dérivé du contexte
Style	clean-slate
Orientation	portrait A4
Anonymiser	conserver le nom
Slug	kebab-case du nom du client

Si style = "montre-moi les options" : Générez 3 aperçus HTML d'une seule page (page de couverture uniquement). Enregistrez dans .claude-design/previews/style-a.html, style-b.html, style-c.html. Ouvrez chacun : open .claude-design/previews/style-a.html etc. Choisissez 3 préréglages de style correspondant au contexte de l'étude de cas. Demandez à l'utilisateur de choisir avant l'Étape 3.

---

Étape 2.5 : Architecture Interne des Pages (non montrée à l'utilisateur)

Dérivé en interne avant l'Étape 3. Ne jamais demander à l'utilisateur.

Identification de la métrique vedette : Parcourez les résultats pour trouver le chiffre le plus impressionnant (pourcentage le plus élevé, $ le plus grand, multiplicateur le plus important). Cette métrique reçoit un traitement de couleur d'accentuation et un poids visuel maximal sur la page des résultats.

Nombre de pages -> modèle de structure :

Nombre	Séquence de pages
1 page	1 page : [couverture-compacte] — tout le contenu condensé en une seule page
2 pages	Page 1 : [couverture] + [défi-solution] empilés · Page 2 : [résultats] + [témoignage-cta] empilés
4 pages	Page 1 : [couverture] · Page 2 : [aperçu] + [défi] · Page 3 : [solution] + [résultats] · Page 4 : [témoignage] + [clôture-cta]

Caractère visuel dérivé du choix de style :

• clean-slate → autorité professionnelle, espaces blancs généreux, sûr pour l'entreprise
• midnight-editorial → premium foncé, poids éditorial, entreprises tech/IA
• matt-gray → neutre de confiance, opérationnel, sûr pour le conseil d'administration
• warm-earth → chaleur accessible, conseil/agence/services
• brutalist → audacieux et marquant, orienté design, attire l'attention
• Si non spécifié : défaut sur clean-slate pour le B2B SaaS, midnight-editorial pour les entreprises techniques.

---

Étape 3 : Structure de la Page

Consultez references/page-library.md avant de planifier.

Planifiez la séquence complète des pages. Attribuez des types de sections parmi les 7 de references/page-library.md à chaque section de page. Plusieurs sections peuvent s'empiler sur une même page.

Sortie sous forme de liste numérotée avec des étiquettes [type-section] par page. Exemple pour 2 pages :

Structure proposée (2 pages, style clean-slate) :

Page 1 :
  [couverture] -- Acme Corp a réduit le temps de reporting de 80 %
  [défi-solution] -- processus manuel / automatisation DataPulse

Page 2 :
  [résultats] -- 80 % de temps gagné, 95 % de réduction d'erreurs, 200 000 $ économisés
  [clôture-cta] -- Contactez-nous : [email protected]

Cette structure vous convient-elle, ou dois-je ajuster quelque chose ?

Attendez la confirmation avant l'Étape 4.

---

Étape 4 : Brouillon du Contenu

Rédigez le texte par section de page. Texte brut uniquement — pas encore de HTML.

Règles de rédaction par section :

• couverture : nom de l'entreprise + résultat principal (12 mots max, DOIT commencer par le nombre : "Acme a réduit le temps de reporting de 80 %") + étiquette de catégorie facultative ("Témoignage Client")
• aperçu : 4 faits uniquement — Secteur / Taille de l'entreprise / Emplacement / Cas d'utilisation — chaque valeur 4 mots max
• défi : paragraphe de contexte (2-3 phrases) + 3 points de douleur (1 phrase chacun, sans remplissage avec des puces)
• solution : 2-3 appels de fonctionnalités — nom de la fonctionnalité (3 mots max) + description du résultat en 1 phrase chacun
• résultats : 3 métriques (nombre + courte étiquette + contexte en 1 ligne). Facultatif : récit de 2 phrases. ZÉRO texte de corps au même poids que les nombres.
• témoignage : citation exacte (40 mots max) + nom de l'intervenant + titre + entreprise
• clôture-cta : titre (5 mots max) + texte d'action CTA (3 mots) + e-mail + URL (les deux obligatoires)

Mots interdits (aucune exception) : "puissant", "sans couture", "révolutionnaire", "exploiter", "innovant", "révolutionnaire", "transformer", "de pointe", "robuste", "débloquer", "évolutif" (comme adjectif de remplissage).

Philosophie de rédaction : Les nombres battent les adjectifs. Commencez chaque section par le résultat, pas par la fonctionnalité. Les fragments sont acceptables.

---

Étape 5 : Génération HTML

Lisez TOUT avant de générer du HTML :

Références de cette compétence :

• references/design-system.md
• references/page-library.md
• references/style-presets.md

Références croisées frontend-slides (lisez ce fichier exact) :

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css — incluez le contenu COMPLET textuellement à l'intérieur du bloc <style>

Règles de génération :

1. HTML autonome unique. Tout le CSS en ligne. Le lien CDN de la police est la seule référence externe.
2. Incluez le contenu textuellement COMPLET de viewport-base.css dans le bloc <style> — ne le paraphrasez ni ne le raccourcissez.
3. Après avoir collé viewport-base.css, ajoutez les remplacements pour le portrait A4 :

   /* Remplacements portrait A4 */
   html { scroll-snap-type: none; scroll-behavior: auto; }
   .slide {
     width: 100vw;
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     scroll-snap-align: none;
   }
   

4. Chaque section de page = <section class="slide"> — obligatoire pour la détection par export-pdf.sh.
5. Commentez chaque page : /* === PAGE N : TYPES-SECTIONS === */
6. Nombres de statistiques des résultats : clamp(2.5rem, 7vw, 5rem) minimum. Métrique vedette en couleur d'accentuation. Autres métriques en couleur de texte secondaire.
7. Pas d'images fournies -> visuels générés par CSS (formes géométriques, arrière-plans dégradés, constructions CSS de type icône). N'affichez jamais de zones réservées de type placeholder visibles.
8. Pas de JS SlidePresentation. Incluez uniquement un IntersectionObserver minimal pour les animations d'entrée .reveal (expérience du spectateur ; l'export PDF rend l'état final automatiquement).
9. Pour le paysage 4:3 (si demandé) : utilisez les valeurs clamp() des proportions graphic-slide-deck — paysage 1200×900 signifie 1vw=12px, similaire au portrait.

Discipline typographique (tout en clamp, ajusté pour le portrait A4 1200px) :

• Titre de couverture : clamp(2rem, 5vw, 3.5rem)
• Titre de section : clamp(1.25rem, 2.5vw, 2rem)
• Corps : clamp(0.875rem, 1.25vw, 1.1rem)
• Nombre de statistiques (vedette) : clamp(3rem, 8vw, 5.5rem) en couleur d'accentuation
• Nombre de statistiques (secondaire) : clamp(2.5rem, 7vw, 5rem) en couleur secondaire
• Citation : clamp(1.1rem, 2vw, 1.5rem) en italique
• Étiquette/légende : clamp(0.65rem, 0.9vw, 0.8rem) en majuscules

---

Étape 6 : Auto-QCM

Vérifiez chaque élément. Corrigez chaque échec — ne sautez aucun.

Disposition et rendu :

• Chaque .slide a height:100vh; height:100dvh; overflow:hidden
• TOUTES les tailles de police évolutives utilisent clamp()
• Aucun contenu ne déborde à la fenêtre 1200×1697 — vérifiez la densité de chaque page par rapport aux limites de references/page-library.md
• Des visuels générés par CSS sont présents pour tous les espaces réservés d'image
• Pas de -clamp(), -min(), -max() en CSS — enveloppez les négatifs dans calc(-1 * ...)

Structure :

• Le nombre de pages correspond au plan de l'Étape 3
• Chaque page utilise class="slide"
• Toutes les sections de contenu de l'Étape 3 sont présentes
• class="slide" uniquement sur les éléments <section>, pas sur les divs internes

Qualité du design :

• La métrique vedette est visuellement dominante sur la section des résultats — couleur d'accentuation, plus grande taille, aucun élément concurrent au même poids
• Les jetons du préréglage de style sont appliqués de manière cohérente (couleurs, polices de references/style-presets.md)
• Pas de modèles de contenu IA générique (consultez la liste À NE PAS UTILISER dans references/style-presets.md)
• Hiérarchie typographique claire : titre de couverture >> titre de section >> corps (rapport d'au moins 2:1)

Contenu :

• Aucun mot interdit dans aucun texte
• Le titre de couverture commence par un nombre ou un résultat mesurable
• La citation du témoignage fait 40 mots ou moins
• Le CTA de clôture a un titre + une action + un e-mail + une URL (tous les quatre)
• Toutes les statistiques de la section des résultats ont des étiquettes (pas de nombres nus)

---

Étape 7 : Sortie

Enregistrez le HTML principal :

mkdir -p case-study/[slug]

Écrivez dans : case-study/[slug]/index.html

Ouvrez-le : open case-study/[slug]/index.html

Fichiers HTML par page (générez-les toujours) :

Extrayez chaque <section class="slide"> du HTML principal. Pour chacun, créez un fichier autonome avec :

• Le bloc <style> complet du HTML principal (copié textuellement)
• La <section class="slide"> individuelle enveloppée dans une coque HTML minimale
• Pas de JS (visualisation statique par page)

Écrivez dans : case-study/[slug]/page-01.html, page-02.html, etc.

Export PDF (faites-le toujours pour le portrait A4) :

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  case-study/[slug]/index.html \
  case-study/[slug].pdf --portrait

Si le paysage 4:3 a été demandé, omettez --portrait et utilisez --compact à la place (1280×720).

Remarque : la première exécution installe Playwright automatiquement (~30-60 secondes). Informez l'utilisateur.

Nettoyage : Supprimez .claude-design/previews/ si des fichiers d'aperçu de style ont été générés à l'Étape 2.

---

Étape 8 : Résumé (pas de HTML dans le chat)

Présentez dans le chat :

## Étude de Cas : [nom du client]
Date : [aujourd'hui] | Style : [style] | Pages : [N] | Format : portrait A4
Fournisseur : [votre entreprise] | Client : [nom du client]

---

### Fichiers
Principal :      case-study/[slug]/index.html
Par page :  case-study/[slug]/page-01.html -> page-0N.html
PDF :       case-study/[slug].pdf

---

### Liste de Vérification de l'Étude de Cas
- [ ] Remplacer le placeholder [IMAGE: logo] par le fichier de logo réel
- [ ] Vérifier que toutes les statistiques sont exactes (page [numéro de la page des résultats])
- [ ] Confirmer que le client a approuvé l'utilisation de la citation
- [ ] Vérifier l'orthographe du nom de l'entreprise, l'exactitude du titre de l'intervenant
- [ ] Tester le nombre de pages du PDF = [N] et aucun contenu coupé
- [ ] Partager le PDF à case-study/[slug].pdf

N'imprimez pas de HTML dans le chat.

---

Référence des Sections

Section	Objectif
couverture	Page d'ouverture — nom du client, titre du résultat, logos
aperçu	Profil en un coup d'œil — secteur, taille, cas d'utilisation
défi	Le problème — contexte + points de douleur
solution	Comment votre produit l'a résolu — appels de fonctionnalités
résultats	Métriques clés + récit de soutien
témoignage	Citation en pleine largeur du client
clôture-cta	Logo du fournisseur + coordonnées + prochaine étape