Que fait graphic-ebook ?
Crée des livres numériques B2B SaaS professionnellement conçus — aimants à prospects, guides exclusifs, actifs de nurturing, livres blancs. HTML + CSS → PDF prêt à imprimer. 3–10 pages.
Règles critiques
Avant toute étape, ces règles sont absolues :
- Chaque page DOIT tenir dans un format A4 (1200×1697px). Pas de débordement de contenu.
- Toutes les tailles de police évolutives utilisent
clamp(). Des px fixes uniquement pour les bordures/éléments structurels. - HTML unique et autonome. Tout le CSS est en ligne. La
<link>CDN de police est la seule dépendance externe. - Ne jamais déverser le HTML dans la discussion. Enregistrer dans un fichier, afficher uniquement un résumé.
- Le texte principal est prioritaire.
line-height≥ 1.75 sur toutes les pages de type text-column et text-sidebar.max-width≤ 65ch pour le texte sur une seule colonne. - Pas de contenu générique d'IA : pas de police Inter pour les titres, pas de dégradé violet-bleu sur fond blanc, pas de message de remerciement en conclusion.
- Rythme visuel : ne jamais placer deux pages text-column consécutives. Intercaler avec une introduction de chapitre, une citation ou une grille de statistiques.
- Avant de générer le HTML, s'engager sur une direction de design : un ton, un élément signature, un système d'arrière-plan. Générique = échec. Chaque ebook doit être conçu de manière distincte pour son audience et son sujet — pas un modèle.
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }— règle CSS globale obligatoire. Chromium supprime toutes les couleurs d'arrière-plan dans le PDF sans cela.- Chaque page sauf la couverture doit avoir un pied de page : numéro de page + nom de marque. Position absolue en bas de chaque
.slide.
Étape 1 : Collecte du brief
Quatre champs obligatoires. Si les quatre sont présents dans la demande de l'utilisateur : passer à l'étape 2.
Si l'un d'eux manque, demander exactement :
« Pour créer votre ebook, j'ai besoin de quatre choses :
- Sujet — de quoi parle l'ebook ? (soyez précis : « 5 façons de réduire le CAC » pas « astuces marketing »)
- Audience — qui le lit ? (rôle, taille de l'entreprise, point de douleur : « Responsables Customer Success dans des sociétés SaaS de 50 à 500 personnes confrontés au churn »)
- Action souhaitée — que doit faire le lecteur après ? (réserver une démo, télécharger un modèle, partager avec l'équipe)
- Contenu — avez-vous du contenu existant, ou dois-je rédiger à partir du sujet ? »
S'arrêter et attendre. Ne pas lire les fichiers de référence. Ne générer ni HTML ni plan.
Étape 2 : Collecte complète
Poser les 9 questions en un seul message, regroupées. Les valeurs par défaut s'appliquent si ignorées.
Contenu
- Nombre de pages — 3–5 (guide rapide / liste de contrôle) / 6–8 (guide standard) / 9–10 (analyse approfondie) (défaut : 6)
- Points clés — 3 à 5 choses que le lecteur doit savoir ou faire après la lecture (informe la structure des chapitres)
- Nom de la marque — nom de l'entreprise ou du produit pour la couverture et le pied de page (ou « ignorer »)
- Logo de la marque — URL ou « aucun »
Design 5. Style — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / « show me options » (défaut : clean-slate) 6. Nombre de chapitres — combien de sections principales ? (défaut : dérivé du nombre de pages)
Résultat 7. Détails du CTA — réservation de démo / inscription à la newsletter / téléchargement de modèle / autre (défaut : « book a demo ») 8. Coordonnées — e-mail + URL pour la page de CTA de clôture (ou « j'ajouterai plus tard ») 9. Slug — slug du nom de fichier (par ex., « reduce-churn-guide-2025 » ; dérivé du sujet si ignoré)
Valeurs par défaut :
| Question | Défaut |
|---|---|
| Nombre de pages | 6 |
| Points clés | dérivé du sujet |
| Nom de la marque | aucun |
| Logo de la marque | aucun |
| Style | clean-slate |
| Nombre de chapitres | dérivé du nombre de pages |
| Détails du CTA | book a demo |
| Coordonnées | placeholder (signalé dans la checklist) |
| Slug | kebab-case du sujet |
Si style = « show me options » : Générer 3 aperçus HTML d'une seule page (couverture uniquement) enregistrés dans .claude-design/previews/style-a.html, style-b.html, style-c.html. Ouvrir chacun automatiquement. Demander à l'utilisateur de choisir avant l'étape 3.
Étape 3 : Architecture interne
À dériver en interne. Ne jamais montrer à l'utilisateur.
Correspondance chapitre → page :
| Pages | Structure typique |
|---|---|
| 3 | couverture + [1 page de contenu] + closing-cta |
| 4 | couverture + [1 introduction de chapitre + 1 text-column] + closing-cta |
| 5 | couverture + toc + [1 introduction de chapitre + 1 text-column] + closing-cta |
| 6 | couverture + toc + [2 introductions de chapitre + 1 text-column] + closing-cta |
| 8 | couverture + toc + [3 introductions de chapitre + 2 pages de contenu] + closing-cta |
| 10 | couverture + toc + [4 introductions de chapitre + 3 pages de contenu] + key-takeaways + closing-cta |
Règle de la table des matières : Inclure pour les ebooks ≥ 6 pages. Pour les ebooks de 3 à 5 pages, utiliser une liste à puces « Ce que contient ce guide » sur la couverture ou l'omettre complètement.
Architecture CTA en trois points (pour les ebooks ≥ 6 pages) :
- CTA d'introduction (après la page 2) — mention subtile d'une ligne en ligne : « explorez notre [outil] à [url] »
- CTA milieu d'ebook (après une grille de statistiques ou une introduction de chapitre) — petit encart
.callout--statou.callout--tipavec un CTA d'une ligne - CTA de clôture (dernière page) — pleine page, action de conversion principale
Vérification du rythme visuel : Si 2+ pages text-column consécutives apparaissent dans le plan → insérer une quote-callout ou stat-grid entre elles avant de continuer.
Direction de design (dériver du préréglage de style + audience — jamais montrée à l'utilisateur) :
| Décision | Dériver de |
|---|---|
| Ton | Quel registre émotionnel cette audience attend-elle ? (autoritaire, éditorial, énergique, calme, chaleureux…) |
| Élément signature | UN dispositif visuel utilisé de manière cohérente : grands chiffres décoratifs, barre d'accent diagonale, superposition de points, dégradé maillé sur la couverture, lignes de règles, débordement de forme géométrique. En choisir un. L'utiliser. |
| Système d'arrière-plan | Comment les arrière-plans varient-ils entre les pages ? Couverture et introductions de chapitre = les plus distinctifs. Pages de contenu plus sobres mais PAS entièrement blanches. CTA de clôture = foncé ou inversion d'accent. Pas de 3+ pages consécutives avec un arrière-plan identique. |
| Style de mouvement | Que font les animations .reveal ? En choisir un et rester cohérent : translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Décaler les délais de 0.1s. |
| Détail inoubliable | Quelle est UNE chose dont le lecteur se souviendra du design ? La nommer avant d'écrire du CSS. |
Si aucune direction forte n'est dérivable du seul préréglage de style, se demander : que produirait une agence de design de premier ordre pour cette audience et ce sujet spécifiques ? Puis exécuter cela.
Limites de densité du texte :
- text-column 1 colonne : 180–250 mots maximum par page
- text-column 2 colonnes : 280–380 mots maximum (140–190 par colonne)
- text-sidebar : 140–180 mots principaux + ≤70 mots dans la barre latérale
- chapter-intro : 40–60 mots (teaser uniquement)
- quote-callout : 30–45 mots
- stat-grid : 3–6 métriques, étiquettes minimales
Étape 4 : Structure de la page
Lire references/page-library.md avant de planifier.
Produire une liste numérotée avec les étiquettes [layout-type] par page. Exemple pour 6 pages :
Page 1 : [cover] — titre, sous-titre, marque
Page 2 : [toc] — 3 titres de chapitre + numéros de page
Page 3 : [chapter-intro] — Ouverture du chapitre 1
Page 4 : [text-column] — Corps du chapitre 1 (1 colonne)
Page 5 : [stat-grid] — 4 métriques clés
Page 6 : [closing-cta] — CTA de réservation de démo + coordonnées
Confirmer avec l'utilisateur avant l'étape 5.
Étape 5 : Rédaction du contenu
Rédiger le texte de chaque page en texte brut (pas de HTML). Règles par type de mise en page :
- cover : titre (≤10 mots, commence par la valeur ou la tension — pas une étiquette générique) + sous-titre (≤15 mots) + étiquette de catégorie facultative + nom de marque
- toc : titres de chapitre (≤6 mots chacun) + numéros de section correspondants. Liste numérotée propre.
- chapter-intro : numéro de chapitre (décoratif) + titre de chapitre (≤8 mots) + paragraphe d'accroche (2–3 phrases)
- text-column (1 colonne) : titre de section + paragraphes. Max 250 mots. Prose > listes à puces. Chaque phrase mérite sa place.
- text-column (2 colonnes) : mêmes règles, 140–190 mots par colonne. Utiliser pour les comparaisons, les paires d'étapes, les perspectives doubles.
- text-sidebar : corps principal (140–180 mots) + type d'encart dans la barre latérale (conseil / avertissement / statistique / citation / liste de contrôle) avec max 70 mots
- quote-callout : citation ≤40 mots + attribution (nom, titre, entreprise ou source)
- stat-grid : 3–6 métriques — nombre + étiquette + contexte d'une ligne. Facultatif : phrase narrative en dessous.
- key-takeaways : 5–8 points à retenir, ≤15 mots chacun, à l'impératif si possible
- closing-cta : titre ≤5 mots (impératif) + corps d'une phrase + action CTA + e-mail + URL (les deux requis)
Mots interdits (aucune exception) : « puissant », « sans couture », « révolutionnaire », « tirer parti », « innovant », « transformateur », « de pointe », « robuste », « débloquer », « évolutif » (utilisés comme remplissage).
Étape 6 : Génération HTML
Lire TOUT ce qui suit avant de générer. Ne pas paraphraser ni résumer — lire les fichiers réels.
Références de ce skill :
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
Ressource intégrée (chemin exact — inclure le contenu textuel complet dans le bloc <style>) :
assets/viewport-base.css— intégré dans le répertoire de ce skill
Résolution des chemins : Tous les chemins préfixés par
assets/ouscripts/sont relatifs au répertoire contenant ce fichier SKILL.md. Dans Claude Code après installation :~/.claude/skills/graphic-ebook/assets/et~/.claude/skills/graphic-ebook/scripts/. Résoudre le chemin réel à partir de l'emplacement du fichier SKILL.md avant de lire.
Règles de génération
-
HTML unique et autonome. Tout le CSS en ligne. La
<link>CDN de police est la seule dépendance externe. -
Inclure le contenu textuel COMPLET de
viewport-base.cssdans le bloc<style>. -
Ajouter des surcharges portrait A4 APRÈS viewport-base.css (dans le même bloc
<style>) :
/* Surcharges 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;
}
/* CRITIQUE : empêche Chromium de supprimer les arrière-plans dans le PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
- **Chaque page = `<section class=