graphic-ebook
Erstellt professionell gestaltete B2B-SaaS-E-Books — Lead-Magnete, Gated Guides, Nurture-Assets, Whitepaper. HTML + CSS → druckfertiges PDF. 3–10 Seiten.
Kritische Regeln
Vor jedem Schritt gelten diese Regeln absolut:
- Jede Seite MUSS in das A4-Format (1200×1697px) passen. Kein Überlauf von Inhalten.
- Alle skalierbaren Schriftgrößen verwenden
clamp(). Feste px nur für Rahmen oder strukturelle Elemente. - Einzige, eigenständige HTML-Datei. Alle CSS inline. Font-CDN
<link>als einzige externe Abhängigkeit. - HTML niemals im Chat ausgeben. In Datei speichern, nur Zusammenfassung anzeigen.
- Fließtext steht an erster Stelle. Zeilenabstand ≥ 1,75 auf allen Textspalten- und Textsidebar-Seiten. Max-Breite ≤ 65 Zeichen für einspaltigen Text.
- Keine generischen KI-Versatzstücke: kein Inter als Auszeichnungsschrift, kein Lila-zu-Blau-Verlauf auf Weiß, kein „Vielen Dank“-Abschluss.
- Visueller Rhythmus: Nie 2+ Textspalten-Seiten hintereinander platzieren. Mit Kapitel-Einführung, Zitat-Callout oder Statistik-Raster unterbrechen.
- Vor dem Generieren von HTML eine Designrichtung festlegen: ein Ton, ein charakteristisches Element, ein Hintergrundsystem. Generisch = Fehler. Jedes E-Book muss eindeutig für seine Zielgruppe und sein Thema gestaltet sein – keine Vorlage.
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }— zwingendes globales CSS. Ohne dies entfernt Chromium alle Hintergrundfarben im PDF.- Jede Seite außer dem Cover muss eine Seitenfußzeile haben: Seitenzahl + Markenname. Absolute Position am unteren Rand jeder
.slide.
Schritt 1: Erfassung der Anforderungen
Vier Pflichtfelder. Wenn alle vier in der Benutzeraufforderung vorhanden sind: weiter zu Schritt 2.
Fehlt eines, frage genau:
„Um Ihr E-Book zu erstellen, benötige ich vier Dinge:
- Thema — worum geht es in dem E-Book? (konkret: „5 Möglichkeiten zur Reduzierung des CAC“, nicht „Marketingtipps“)
- Zielgruppe — wer liest es? (Rolle, Unternehmensgröße, Schmerzpunkt: „Customer Success Manager in SaaS-Unternehmen mit 50–500 Mitarbeitern, die mit Abwanderung kämpfen“)
- Gewünschte Aktion — was soll der Leser danach tun? (Demo buchen, Vorlage herunterladen, mit Team teilen)
- Inhalt — haben Sie vorhandene Inhalte, oder soll ich aus dem Thema einen Entwurf erstellen?“
Anhalten und warten. Keine Referenzdateien lesen. Kein HTML oder keine Gliederung generieren.
Schritt 2: Vollständige Erfassung
Stelle alle 9 Fragen in einer Nachricht, gruppiert. Standardwerte gelten, wenn sie übersprungen werden.
Inhalt
- Seitenanzahl — 3–5 (Kurzanleitung / Checkliste) / 6–8 (Standard-Leitfaden) / 9–10 (Tiefergehend) (Standard: 6)
- Wichtige Erkenntnisse — 3–5 Dinge, die der Leser nach dem Lesen wissen oder tun sollte (beeinflusst Kapitelstruktur)
- Markenname — Firmen- oder Produktname für Cover und Fußzeile (oder „überspringen“)
- Markenlogo — URL oder „keins“
Design 5. Stil — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / „Optionen anzeigen“ (Standard: clean-slate) 6. Kapitelanzahl — wie viele Hauptabschnitte? (Standard: abgeleitet von Seitenanzahl)
Ausgabe 7. CTA-Details — Demo-Buchung / Newsletter-Anmeldung / Vorlagen-Download / Sonstiges (Standard: „Demo buchen“) 8. Kontaktinfo — E-Mail + URL für die abschließende CTA-Seite (oder „füge ich später hinzu“) 9. Slug — Dateiname-Slug (z. B. „reduce-churn-guide-2025“; abgeleitet vom Thema, falls übersprungen)
Standardwerte:
| Frage | Standard |
|---|---|
| Seitenanzahl | 6 |
| Wichtige Erkenntnisse | vom Thema ableiten |
| Markenname | keines |
| Markenlogo | keines |
| Stil | clean-slate |
| Kapitelanzahl | von Seitenanzahl abgeleitet |
| CTA-Details | Demo buchen |
| Kontaktinfo | Platzhalter (in Checkliste markiert) |
| Slug | Kebab-Case des Themas |
Wenn Stil = „Optionen anzeigen“: Generiere 3 einseitige HTML-Vorschauen (nur Cover), gespeichert in .claude-design/previews/style-a.html, style-b.html, style-c.html. Öffne jede automatisch. Frage den Benutzer vor Schritt 3 zu wählen.
Schritt 3: Interne Architektur
Intern ableiten. Niemals dem Benutzer zeigen.
Kapitel → Seiten-Zuordnung:
| Seiten | Typische Struktur |
|---|---|
| 3 | Cover + [1 Inhaltsseite] + Abschluss-CTA |
| 4 | Cover + [1 Kapitel-Einführung + 1 Textspalte] + Abschluss-CTA |
| 5 | Cover + Inhaltsverzeichnis + [1 Kapitel-Einführung + 1 Textspalte] + Abschluss-CTA |
| 6 | Cover + Inhaltsverzeichnis + [2 Kapitel-Einführungen + 1 Textspalte] + Abschluss-CTA |
| 8 | Cover + Inhaltsverzeichnis + [3 Kapitel-Einführungen + 2 Inhaltsseiten] + Abschluss-CTA |
| 10 | Cover + Inhaltsverzeichnis + [4 Kapitel-Einführungen + 3 Inhaltsseiten] + wichtige Erkenntnisse + Abschluss-CTA |
Inhaltsverzeichnis-Regel: Für E-Books ≥ 6 Seiten. Bei 3–5-seitigen E-Books eine „Was drin ist“-Aufzählungsliste auf dem Cover oder ganz weglassen.
Dreipunkt-CTA-Architektur (für E-Books ≥ 6 Seiten):
- Einleitender CTA (nach Seite 2) — subtile 1-zeilige Inline-Erwähnung: „Entdecken Sie unser [Tool] unter [URL]“
- CTA in der Mitte (nach einem Statistik-Raster oder einer Kapitel-Einführung) — kleine
.callout--stat- oder.callout--tip-Box mit 1-zeiligem CTA - Abschluss-CTA (letzte Seite) — ganzseitige, primäre Conversion-Aktion
Visuelle Rhythmus-Prüfung: Wenn im Plan 2+ aufeinanderfolgende text-column-Seiten erscheinen → quote-callout oder stat-grid dazwischen einfügen, bevor fortgefahren wird.
Designrichtung (aus Stil-Vorlage + Zielgruppe ableiten — niemals dem Benutzer zeigen):
| Entscheidung | Ableiten von |
|---|---|
| Ton | Welche emotionale Erwartung hat diese Zielgruppe? (autoritär, redaktionell, energiegeladen, ruhig, warm….) |
| Charakteristisches Element | EIN visuelles Gestaltungsmittel, das durchgängig verwendet wird: übergroße dekorative Ziffern, diagonale Akzentleiste, Punktraster-Overlay, Verlaufsnetz auf dem Cover, Richtlinien, geometrische Formen auslaufend. Eins auswählen. Es verwenden. |
| Hintergrundsystem | Wie variieren die Hintergründe über die Seiten hinweg? Cover und Kapitel-Einführungen = am markantesten. Inhaltsseiten ruhiger, aber NICHT komplett weiß. Abschluss-CTA = dunkel oder vollflächige Akzentinvertierung. Keine 3+ aufeinanderfolgenden Seiten mit identischem Hintergrund. |
| Bewegungsstil | Was machen .reveal-Animationen? Eins auswählen und konsistent bleiben: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Verzögerungen um 0,1 s staffeln. |
| Unvergessliches Detail | Was ist DAS Eine, das ein Leser vom Design in Erinnerung behalten wird? Vor dem Schreiben von CSS benennen. |
Wenn keine starke Richtung allein aus der Stil-Vorlage ableitbar ist, frage dich: Was würde eine erstklassige Design-Agentur für diese spezifische Zielgruppe und dieses Thema produzieren? Dann führe das aus.
Grenzen für Textmenge:
- Textspalte 1-spaltig: max. 180–250 Wörter pro Seite
- Textspalte 2-spaltig: max. 280–380 Wörter (140–190 pro Spalte)
- Textsidebar: max. 140–180 Wörter Haupttext + ≤70 Wörter Sidebar
- Kapitel-Einführung: 40–60 Wörter (nur Teaser)
- Zitat-Callout: 30–45 Wörter
- Statistik-Raster: 3–6 Kennzahlen, minimale Beschriftungen
Schritt 4: Seitenstruktur
Lies references/page-library.md vor der Planung.
Gib eine nummerierte Liste mit [Layout-Typ]-Bezeichnungen pro Seite aus. Beispiel für 6-Seiten:
Seite 1: [cover] — Titel, Untertitel, Marke
Seite 2: [toc] — 3 Kapiteltitel + Seitenzahlen
Seite 3: [chapter-intro] — Kapitel 1 Auftakt
Seite 4: [text-column] — Kapitel 1 Text (1-spaltig)
Seite 5: [stat-grid] — 4 wichtige Kennzahlen
Seite 6: [closing-cta] — Demo-Buchungs-CTA + Kontakt
Vor Schritt 5 mit dem Benutzer bestätigen.
Schritt 5: Inhaltsentwurf
Schreibe Text pro Seite als Klartext (kein HTML). Regeln pro Layout-Typ:
- cover: Titel (≤10 Wörter, führt mit Wert oder Spannung – keine allgemeine Bezeichnung) + Untertitel (≤15 Wörter) + optionale Kategoriebezeichnung + Markenname
- toc: Kapiteltitel (≤6 Wörter pro Stück) + entsprechende Abschnittsnummern. Saubere, nummerierte Liste.
- chapter-intro: Kapitelnummer (dekorativ) + Kapiteltitel (≤8 Wörter) + Teaser-Absatz (2–3 Sätze)
- text-column (1-col): Abschnittsüberschrift + Textabsätze. Max. 250 Wörter. Prosa > Aufzählungen. Jeder Satz verdient seinen Platz.
- text-column (2-col): Gleiche Regeln, 140–190 Wörter pro Spalte. Verwenden für Vergleiche, Schrittpaare, duale Perspektiven.
- text-sidebar: Haupttext (140–180 Wörter) + Sidebar-Callout-Typ (Tipp / Warnung / Statistik / Zitat / Checkliste) mit max. 70 Wörtern
- quote-callout: Zitat ≤40 Wörter + Quellenangabe (Name, Titel, Unternehmen oder Quelle)
- stat-grid: 3–6 Kennzahlen — Zahl + Bezeichnung + 1-zeiliger Kontext. Optional: 1-sätzige Erzählung darunter.
- key-takeaways: 5–8 Erkenntnisse, ≤15 Wörter pro Stück, wo möglich im Imperativ
- closing-cta: Überschrift ≤5 Wörter (Imperativ) + 1-sätziger Text + CTA-Aktion + E-Mail + URL (beide erforderlich)
Verbotene Wörter (keine Ausnahmen): „leistungsstark“, „nahtlos“, „bahnbrechend“, „hebelwirkung“, „innovativ“, „revolutionär“, „transformieren“, „hochmodern“, „robust“, „entsperren“, „skalierbar“ (als Füllwörter).
Schritt 6: HTML-Generierung
Lies ALLE folgenden Dateien vor der Generierung. Paraphrasiere oder fasse sie nicht zusammen – lies die tatsächlichen Dateien.
Referenzen dieses Skills:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
Gebündelte Ressource (exakter Pfad — vollständigen Wortlaut in den <style>-Block einfügen):
assets/viewport-base.css— im Verzeichnis dieses Skills gebündelt
Pfadauflösung: Alle Pfade mit
assets/oderscripts/sind relativ zum Verzeichnis, das diese SKILL.md-Datei enthält. In Claude Code nach der Installation:~/.claude/skills/graphic-ebook/assets/und~/.claude/skills/graphic-ebook/scripts/. Löse den tatsächlichen Pfad aus dem Speicherort der SKILL.md-Datei auf, bevor du liest.
Generierungsregeln
- Einzige, eigenständige HTML-Datei. Alle CSS inline. Font-CDN
<link>als einzige externe Abhängigkeit. - VOLLSTÄNDIGEN Wortlaut von
viewport-base.cssin den<style>-Block einfügen. - A4-Hochformat-Überschreibungen NACH viewport-base.css hinzufügen (im selben
<style>-Block):
/* A4-Hochformat-Überschreibungen */
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;
}
/* KRITISCH: verhindert, dass Chromium Hintergründe im PDF entfernt */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
- Jede Seite =
<section class="slide">— erforderlich für die Seitenzählung des export-pdf.sh-Skripts. - Jede Seite kommentieren:
/* === SEITE N: LAYOUT-TYP === */ - Fließtext:
clamp(0.875rem, 1.25vw, 1.05rem),line-height: 1.75,max-width: min(65ch, 100%)auf allen<p>in Textspalten- und Textsidebar-Layouts. - Statistikzahlen: Hero bei
clamp(3rem, 8vw, 5.5rem)in Akzentfarbe. Unterstützend beiclamp(2.5rem, 7vw, 5rem)in Sekundärfarbe. - Keine Bilder verfügbar → CSS-generierte visuelle Elemente nur (Verläufe, geometrische Formen, Punktmuster, abstrakte Elemente). Niemals Platzhalter-Boxen anzeigen.
- Kein SlidePresentation JS. Nur minimalen IntersectionObserver für
.reveal-Animationen einfügen. - Kapitelnummer-Dekoration (auf Kapitel-Einführungsseiten):
.chapter-number-deco {
font-family: var(--font-display);
font-size: clamp(6rem, 18vw, 14rem);
font-weight: var(--display-weight);
opacity: 0.06;
position: absolute;
top: -0.1em;
right: var(--page-padding);
line-height: 1;
color: var(--accent);
pointer-events: none;
user-select: none;
}
- Getippte Callout-Boxen (für Textsidebar-Seiten):
.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }
.callout-label { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.callout--tip { background: rgba(22, 163, 74, 0.07); border-color: #16A34A; }
.callout--tip .callout-label { color: #16A34A; }
.callout--warning { background: rgba(217, 119, 6, 0.07); border-color: #D97706; }
.callout--warning .callout-label { color: #D97706; }
.callout--stat { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }
.callout--stat .callout-label { color: var(--accent); }
.callout--quote { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }
.callout--quote .callout-label { color: var(--text-muted); }
.callout--checklist { background: rgba(8, 145, 178, 0.07); border-color: #0891B2; }
.callout--checklist .callout-label { color: #0891B2; }
- Seitenfußzeile (auf jeder Seite außer Cover):
.page-footer {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--divider);
font-family: var(--font-body);
font-size: clamp(0.55rem, 0.75vw, 0.65rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
HTML: <div class="page-footer"><span>[Markenname]</span><span>[N]</span></div>
13. 2-spaltiges Layout: display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); mit border-right: 1px solid var(--divider) auf der linken Spalte.
14. Textsidebar-Layout: display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);
Designqualitätsregeln (aus Frontend-Design-Prinzipien)
Diese regeln den gestalterischen Anspruch jedes generierten E-Books. Angewendet nach strukturellen Regeln, vor der Ausgabe.
Typografie:
- Die Auszeichnungsschrift muss bei großen Größen Charakter haben. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces – alle akzeptabel. Inter bei Auszeichnungsgewicht = sofortiges Schrottsignal.
- Niemals dieselbe Schriftstärke für zwei aufeinanderfolgende Hierarchieebenen verwenden. Cover-Titel (800) → Kapitelüberschrift (700) → Abschnittsüberschrift (700, kleinere Größe) → Fließtext (400/500).
- Eine Auszeichnungsschrift mit einer verfeinerten Textschrift kombinieren, wenn die Vorlage dies unterstützt (z. B. Instrument Serif + Inter, Syne + IBM Plex Sans). Einzelschrift-Stapel müssen stattdessen Gewichtskontraste verwenden.
Hintergründe und Atmosphäre:
- Das Cover MUSS ein signifikantes dekoratives
::before- oder::after-Pseudoelement haben, das eine visuelle Tiefe erzeugt: Geisterbuchstabe mitopacity: 0.04–0.06, geometrische Form auslaufend, radialer Verlaufs-Overlay oder Punkt-/Linienraster-Muster. - Kapitel-Einführungsseiten MÜSSEN sich visuell von benachbarten Inhaltsseiten abheben –
var(--bg-alt)oder eine stilgerechte alternative Behandlung verwenden. - Inhaltsseiten (Textspalte, Textsidebar) können weiß/neutral sein, aber niemals drei aufeinanderfolgende Seiten…
(Hinweis: Die ursprüngliche SKILL.md wurde aus Platzgründen gekürzt. Die Übersetzung folgt den gleichen Prinzipien für den gesamten Inhalt.)