Graphic Ebook

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.
8. 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.
9. * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — mandatory global CSS. Chromium strips all background colors in PDF without this.
10. 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:

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:

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):

If no strong direction is derivable from style preset alone, ask yourself: what would a top-tier design agency produce for this specific audience and topic? Then execute that.

Body copy density limits:

• text-column 1-col: 180–250 words max per page
• text-column 2-col: 280–380 words max (140–190 per column)
• text-sidebar: 140–180 words main + ≤70 words sidebar
• chapter-intro: 40–60 words (teaser only)
• quote-callout: 30–45 words
• stat-grid: 3–6 metrics, minimal labels

Step 4: Page Structure

Read references/page-library.md before planning.

Output a numbered list with [layout-type] labels per page. Example for 6-pager:

Page 1: [cover] — title, subtitle, brand
Page 2: [toc] — 3 chapter titles + page numbers
Page 3: [chapter-intro] — Chapter 1 opener
Page 4: [text-column] — Chapter 1 body (1-column)
Page 5: [stat-grid] — 4 key metrics
Page 6: [closing-cta] — demo booking CTA + contact

Confirm with user before Step 5.

Step 5: Content Draft

Write per-page copy in plain text (no HTML). Rules per layout type:

• cover: title (≤10 words, leads with value or tension — not a generic label) + subtitle (≤15 words) + optional category label + brand name
• toc: chapter titles (≤6 words each) + corresponding section numbers. Clean, numbered list.
• chapter-intro: chapter number (decorative) + chapter title (≤8 words) + teaser paragraph (2–3 sentences)
• text-column (1-col): section heading + body paragraphs. Max 250 words. Prose > bullets. Every sentence earns its place.
• text-column (2-col): same rules, 140–190 words per column. Use for comparisons, step pairs, dual perspectives.
• text-sidebar: main body (140–180 words) + sidebar callout type (tip / warning / stat / quote / checklist) with max 70 words
• quote-callout: pull quote ≤40 words + attribution (name, title, company or source)
• stat-grid: 3–6 metrics — number + label + 1-line context. Optional: 1-sentence narrative below.
• key-takeaways: 5–8 takeaways, ≤15 words each, imperative where possible
• closing-cta: headline ≤5 words (imperative) + 1-sentence body + CTA action + email + URL (both required)

Forbidden words (no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler).

Step 6: HTML Generation

Read ALL of these before generating. Do not paraphrase or summarize them — read the actual files.

This skill's references:

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

Bundled asset (exact path — include FULL verbatim contents in <style> block):

• assets/viewport-base.css — bundled inside this skill's directory

Path resolution: All paths prefixed assets/ or scripts/ are relative to the directory containing this SKILL.md file. In Claude Code after install: ~/.claude/skills/graphic-ebook/assets/ and ~/.claude/skills/graphic-ebook/scripts/. Resolve the actual path from the SKILL.md file location before reading.

Generation Rules

1. Single self-contained HTML. All CSS inline. Font CDN <link> only external dependency.

2. Include FULL verbatim contents of viewport-base.css inside the <style> block.

3. Add A4 portrait overrides AFTER viewport-base.css (in the same <style> block):

/* A4 portrait overrides */
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;
}
/* CRITICAL: prevents Chromium from stripping backgrounds in PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

4. Each page = <section class="slide"> — required for export-pdf.sh page detection.

5. Comment each page: /* === PAGE N: LAYOUT-TYPE === */

6. Body text: clamp(0.875rem, 1.25vw, 1.05rem), line-height: 1.75, max-width: min(65ch, 100%) on all <p> in text-column and text-sidebar layouts.

7. Stat numbers: hero at clamp(3rem, 8vw, 5.5rem) in accent color. Supporting at clamp(2.5rem, 7vw, 5rem) in secondary color.

8. No images available → CSS-generated visuals only (gradients, geometric shapes, dot patterns, abstract elements). Never show placeholder boxes.

9. No SlidePresentation JS. Include only minimal IntersectionObserver for .reveal animations.

10. Chapter number decoration (on chapter-intro pages):

.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;
}

11. Typed callout boxes (for text-sidebar pages):

.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; }

12. Page footer (on every page except 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>[Brand Name]</span><span>[N]</span></div>

13. 2-column layout: display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); with border-right: 1px solid var(--divider) on left column.

14. Text-sidebar layout: display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);