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

Design Quality Rules (from frontend-design principles)

These govern the aesthetic ambition of every generated ebook. Applied after structural rules, before output.

Typography:

• Display font must have character at large sizes. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces — all acceptable. Inter at display weight = immediate slop signal.
• Never use the same font weight for two consecutive hierarchy levels. Cover title (800) → chapter heading (700) → section heading (700, smaller size) → body (400/500).
• Pair a display font with a refined body font when the preset supports it (e.g. Instrument Serif + Inter, Syne + IBM Plex Sans). Single-font stacks must use weight contrast instead.

Backgrounds and atmosphere:

• Cover MUST have a significant decorative ::before or ::after pseudo-element creating visual depth: ghost letter at opacity: 0.04–0.06, geometric shape bleed, radial gradient overlay, or dot/line grid pattern.
• Chapter-intro pages MUST visually contrast with adjacent content pages — use var(--bg-alt) or a style-appropriate alt treatment.
• Content pages (text-column, text-sidebar) can be white/neutral, but the stat-grid and quote-callout pages should carry a distinct background (alt section bg, elevated card, or accent inversion).
• Closing CTA: always dark or full-accent inversion — never light. It is the conversion moment.
• CSS texture patterns when appropriate: radial-gradient(circle, var(--accent) 1px, transparent 1px) dot grids; repeating-linear-gradient rule lines; ::before with clipped geometric shapes.

Spatial composition:

• Generous whitespace on chapter-intro pages — the visual openness signals a chapter break.
• At least one element per ebook should break the standard grid: oversized chapter deco number that bleeds off-screen right, quote mark that overlaps content, stat number that dominates 60%+ of its column.
• Avoid centered layouts unless the preset explicitly calls for it (quote-callout is the only centered-by-default layout).

Motion:

• All .reveal animations use consistent direction derived from design direction step.
• Stagger delays: 0.05s increments, max 0.5s cumulative. Nothing slower than 0.65s duration.
• Stat items in stat-grid: stagger by index for cascade effect.
• No animation on structural elements (footers, borders, rules). Animation = content appearing, not layout materializing.

The unforgettable detail rule: Before writing the first line of CSS, name the ONE element that makes this ebook unmistakably designed — not just competently assembled. That element gets the most CSS investment. If you cannot name it, you have not thought hard enough about the design.

Step 7: Self-QA

Fix every failure before proceeding to output. Do not skip this step.

Layout & rendering:

• Every .slide has height:100vh; height:100dvh; overflow:hidden
• * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } present globally
• All scalable font sizes use clamp()
• No content overflows at 1200×1697 — review each page's density
• No placeholder boxes visible
• No -clamp(), -min(), -max() directly (wrap negatives in calc(-1 * ...))

Structure:

• Page count matches Step 4 plan
• Every page uses class="slide" on <section> only
• All layout types from Step 4 present in correct order
• TOC included for ebooks ≥ 6 pages

Reading quality:

• Body text line-height ≥ 1.75 on text-column and text-sidebar pages
• Single-column body text max-width ≤ 65ch
• No 2+ consecutive text-column pages without visual break
• TOC has chapter titles + section/page numbers
• Chapter-intro pages have .chapter-number-deco (opacity 0.06–0.08)
• Every page except cover has .page-footer with page number + brand name
• Sidebar callout boxes use typed CSS class (.callout--tip/warning/stat/quote/checklist)

Design quality:

• Style preset tokens applied consistently (from references/style-presets.md)
• No slop patterns (see references/design-system.md DO NOT USE list)
• Typography hierarchy: cover title >> chapter heading >> section heading >> body (2:1 min ratio between levels)
• Stat numbers visually dominant — no body copy at same visual weight
• Cover has a significant decorative ::before/::after element — not just text on a flat color
• Chapter-intro pages visually distinct from content pages (different bg or treatment)
• Closing CTA uses dark or full-accent inversion background — never light
• No 3+ consecutive pages with identical background color
• Signature element from design direction step is present and visible
• At least one layout element breaks the grid (oversized deco number, bleed shape, dominant stat)
• Reveal animations consistent direction and stagger — not random per-element

Content:

• No forbidden words anywhere
• Cover title ≤10 words, leads with value or tension
• Quote callout ≤40 words
• Closing CTA: imperative headline + email + URL (both mandatory — QA fails without both)
• TOC matches actual page structure
• Three-point CTA present for ebooks ≥ 6 pages

Step 8: Output

mkdir -p ebook/[slug]

Write main HTML: ebook/[slug]/index.html Open: open ebook/[slug]/index.html

Per-page split (always generate): Extract each <section class="slide"> into standalone HTML files with full <style> block, no JS: ebook/[slug]/page-01.html, page-02.html, … (zero-padded 2 digits)

PDF export (always run):

bash [skill-root]/scripts/export-pdf.sh \
  ebook/[slug]/index.html \
  ebook/[slug].pdf --portrait

[skill-root] = the directory containing this SKILL.md. Resolve it before running (e.g. ~/.claude/skills/graphic-ebook in Claude Code after install).

Cleanup: Delete .claude-design/previews/ if style preview files were generated in Step 2.

Summary (no HTML in chat):

## Ebook: [title]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Brand: [brand name] | Topic: [topic]

Files
  Main:      ebook/[slug]/index.html
  Per-page:  ebook/[slug]/page-01.html → page-0N.html
  PDF:       ebook/[slug].pdf

Checklist
- [ ] Replace contact info placeholders (email + URL on closing page)
- [ ] Replace brand logo initials with real asset
- [ ] Verify TOC section numbers match actual page positions
- [ ] Proof all stat accuracy (page [N])
- [ ] Review body copy — no page should feel overflowed
- [ ] Test PDF opens correctly (page count = [N])