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".
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
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:
Every page MUST fit within A4 canvas (1200×1697px). No content overflow.
All scalable font sizes use clamp(). Fixed px only for borders/structural elements.
Single self-contained HTML. All CSS inline. Font CDN <link> only external dependency.
Never dump HTML in chat. Save to file, show summary only.
Body copy is primary. Line-height ≥ 1.75 on all text-column and text-sidebar pages. Max-width ≤ 65ch for single-column body.
No generic AI slop: no Inter as display font, no purple-to-blue gradient on white, no "Thank You" closing.
Visual rhythm: never place 2+ text-column pages back-to-back. Break with chapter-intro, quote-callout, or stat-grid.
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.
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — mandatory global CSS. Chromium strips all background colors in PDF without this.
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:
Topic — what is the ebook about? (be specific: "5 ways to reduce CAC" not "marketing tips")
Audience — who reads it? (role, company size, pain point: "Customer Success Managers at 50–500 person SaaS companies struggling with churn")
Desired action — what should the reader do after? (book a demo, download a template, share with team)
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.
Key takeaways — 3–5 things the reader should know or do after reading (informs chapter structure)
Brand name — company or product name for cover and footer (or "skip")
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.
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 distinctive. Content pages quieter but NOT all-white. Closing CTA = dark or full-accent inversion. No 3+ consecutive pages with identical background.
Motion style
What do .reveal animations do? Pick one and stay consistent: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Stagger delays 0.1s apart.
Unforgettable detail
What is the ONE thing a reader will remember about the design? Name it before writing any CSS.
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:
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
Single self-contained HTML. All CSS inline. Font CDN <link> only external dependency.
Include FULL verbatim contents of viewport-base.css inside the <style> block.
Add A4 portrait overrides AFTER viewport-base.css (in the same <style> block):
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
Write main HTML:ebook/[slug]/index.htmlOpen: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)
