/graphic-ebook

name: graphic-ebook
description: Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says "create an ebook", "design a lead magnet", "make a PDF guide", "build a gated content piece", "write a B2B ebook", "design a white paper", "create a nurture asset", or "make a PDF report".
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.0.0

graphic-ebook

Creates professionally designed B2B SaaS e-books — lead magnets, gated guides, nurture assets, white papers. HTML + CSS → print-ready PDF. 3–10 pages.

Critical Rules

Before any step, these rules are absolute:

1. Every page MUST fit within A4 canvas (1200×1697px). No content overflow. 2. All scalable font sizes use `clamp()`. Fixed px only for borders/structural elements. 3. Single self-contained HTML. All CSS inline. Font CDN `<link>` only external dependency. 4. **Never dump HTML in chat.** Save to file, show summary only. 5. Body copy is primary. Line-height ≥ 1.75 on all text-column and text-sidebar pages. Max-width ≤ 65ch for single-column body. 6. No generic AI slop: no Inter as display font, no purple-to-blue gradient on white, no "Thank You" closing. 7. Visual rhythm: never place 2+ text-column pages back-to-back. Break with chapter-intro, quote-callout, or stat-grid. 10. **Before generating HTML, commit to a design direction:** one tone, one signature element, one background system. Generic = failure. Each ebook must be distinctly designed for its audience and subject — not a template. 8. `* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }` — mandatory global CSS. Chromium strips all background colors in PDF without this. 9. Every page except cover must have a page footer: page number + brand name. Absolute position at bottom of each `.slide`.

---

Step 1: Brief Intake

Four required fields. If all four are present in the user's prompt: **skip to Step 2.**

If any are missing, ask **exactly**:

> "To create your ebook, I need four things: > 1. **Topic** — what is the ebook about? (be specific: "5 ways to reduce CAC" not "marketing tips") > 2. **Audience** — who reads it? (role, company size, pain point: "Customer Success Managers at 50–500 person SaaS companies struggling with churn") > 3. **Desired action** — what should the reader do after? (book a demo, download a template, share with team) > 4. **Content** — do you have existing content, or should I draft from the topic?"

Stop and wait. Do not read reference files. Do not generate any HTML or outline.

---

Step 2: Complete Intake

Ask all 9 questions in one message, grouped. Defaults apply if skipped.

**Content** 1. **Page count** — 3–5 (quick guide / checklist) / 6–8 (standard guide) / 9–10 (deep dive) (default: 6) 2. **Key takeaways** — 3–5 things the reader should know or do after reading (informs chapter structure) 3. **Brand name** — company or product name for cover and footer (or "skip") 4. **Brand logo** — URL or "none"

**Design** 5. **Style** — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / "show me options" (default: clean-slate) 6. **Chapter count** — how many main sections? (default: derived from page count)

**Output** 7. **CTA details** — demo booking / newsletter signup / template download / other (default: "book a demo") 8. **Contact info** — email + URL for closing CTA page (or "I'll add later") 9. **Slug** — filename slug (e.g., "reduce-churn-guide-2025"; derived from topic if skipped)

**Defaults:**

| Question | Default | |---|---| | Page count | 6 | | Key takeaways | derive from topic | | Brand name | none | | Brand logo | none | | Style | clean-slate | | Chapter count | derived from page count | | CTA details | book a demo | | Contact info | placeholder (flagged in checklist) | | Slug | kebab-case of topic |

**If style = "show me options":** Generate 3 single-page HTML previews (cover page only) saved to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each automatically. Ask user to pick before Step 3.

---

Step 3: Internal Architecture

Derive internally. Never show this to the user.

**Chapter → page mapping:**

| Pages | Typical structure | |---|---| | 3 | cover + [1 content page] + closing-cta | | 4 | cover + [1 chapter-intro + 1 text-column] + closing-cta | | 5 | cover + toc + [1 chapter-intro + 1 text-column] + closing-cta | | 6 | cover + toc + [2 chapter-intros + 1 text-column] + closing-cta | | 8 | cover + toc + [3 chapter-intros + 2 content pages] + closing-cta | | 10 | cover + toc + [4 chapter-intros + 3 content pages] + key-takeaways + closing-cta |

**TOC rule:** Include for ebooks ≥ 6 pages. For 3–5 page ebooks, use a "What's inside" bullet list on the cover page or skip entirely.

**Three-point CTA architecture** (for ebooks ≥ 6 pages): 1. **Intro CTA** (after page 2) — subtle 1-line inline mention: "explore our [tool] at [url]" 2. **Mid-ebook CTA** (after a stat-grid or chapter-intro) — small `.callout--stat` or `.callout--tip` box with 1-line CTA 3. **Closing CTA** (final page) — full-page, primary conversion action

**Visual rhythm check:** If 2+ consecutive `text-column` pages appear in the plan → insert `quote-callout` or `stat-grid` between them before proceeding.

**Design direction** (derive from style preset + audience — never shown to user):

| Decision | Derive from | |---|---| | **Tone** | What emotional register does this audience expect? (authoritative, editorial, energetic, calm, warm…) | | **Signature element** | ONE visual device used consistently: oversized decorative numerals, diagonal accent bar, dot-grid overlay, gradient mesh on cover, rule lines, geometric shape bleed. Pick one. Use it. | | **Background system** | How do backgrounds vary across pages? Cover and chapter-intros = most disti