graphic-ebook

graphic-ebook

创建专业设计的 B2B SaaS 电子书——引流资料、门控指南、培育素材、白皮书。HTML + CSS → 可直接打印的 PDF。3–10 页。

关键规则

开始任何步骤前，以下规则均为绝对要求：

1. 每页都必须适配 A4 画布（1200×1697px）。内容不得溢出。
2. 所有可缩放的字体大小都使用 clamp()。固定 px 仅用于边框／结构元素。
3. 使用单个自包含 HTML 文件。所有 CSS 均内联。字体 CDN <link> 是唯一外部依赖。
4. 绝不要在聊天中输出 HTML。 保存到文件中，只展示摘要。
5. 正文是重点。在所有文本栏和文本侧栏页面上，行高 ≥ 1.75。单栏正文的最大宽度 ≤ 65ch。
6. 不要使用泛泛的 AI 垃圾内容：不要用 Inter 作为展示字体，不要使用白底紫蓝渐变，不要以“感谢阅读”结尾。
7. 视觉节奏：绝不要连续放置 2 个或更多文本栏页面。用章节引言页、引言摘录页或数据网格页打断。
8. 生成 HTML 前，先确定设计方向： 一种基调、一个标志性元素、一套背景系统。设计泛泛 = 失败。每本电子书都必须针对其受众和主题呈现独特设计——不能套用模板。
9. * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — 必须添加为全局 CSS。没有这段代码，Chromium 会在 PDF 中移除所有背景颜色。
10. 除封面外，每页都必须有页脚：页码 + 品牌名称。绝对定位于每个 .slide 的底部。

---

第 1 步：收集概要信息

需要填写四项。如果用户的提示中已包含全部四项：跳到第 2 步。

如果缺少任何一项，请原样询问：

"要创建你的电子书，我需要以下四项信息：

1. 主题——电子书讲什么？（请具体说明：“降低 CAC 的 5 种方法”，而不是“营销技巧”）
2. 受众——谁会阅读？（职位、公司规模、痛点：“在 50–500 人 SaaS 公司任职、苦于客户流失的客户成功经理”）
3. 期望的行动——读者读完后应该做什么？（预约演示、下载模板、分享给团队）
4. 内容——你是否已有现成内容，还是需要我根据主题起草？"

停止并等待。不要读取参考文件。不要生成任何 HTML 或大纲。

---

第 2 步：补全信息

在一条消息中询问全部 9 个问题，并按组分类。用户跳过时采用默认值。

内容

1. 页数——3–5 页（快速指南／清单）／6–8 页（标准指南）／9–10 页（深度解析）（默认值：6）
2. 关键要点——读者阅读后应了解或采取行动的 3–5 件事（用于确定章节结构）
3. 品牌名称——封面和页脚使用的公司或产品名称（或填写“跳过”）
4. 品牌 Logo——URL 或“无”

设计 5. 风格——clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / “给我看看选项”（默认值：clean-slate） 6. 章节数——主要章节有多少？（默认值：根据页数确定）

输出 7. CTA 详情——预约演示／订阅新闻通讯／下载模板／其他（默认值：“预约演示”） 8. 联系信息——结尾 CTA 页使用的电子邮件地址 + URL（或填写“稍后添加”） 9. Slug——文件名 slug（例如，“reduce-churn-guide-2025”；跳过时根据主题生成）

默认值：

问题	默认值
页数	6
关键要点	根据主题推导
品牌名称	无
品牌 Logo	无
风格	clean-slate
章节数	根据页数确定
CTA 详情	预约演示
联系信息	占位内容（在清单中标记）
Slug	主题的 kebab-case

如果风格 = “给我看看选项”： 生成 3 个单页 HTML 预览（仅含封面页），并保存到 .claude-design/previews/style-a.html、style-b.html、style-c.html。自动打开每个预览。在第 3 步之前请用户选择。

---

步骤 3：内部架构

在内部推导。切勿向用户展示。

章节 → 页面映射：

页面数	典型结构
3	封面 + [1 个内容页] + 收尾 CTA
4	封面 + [1 个章节简介 + 1 个文本栏] + 收尾 CTA
5	封面 + 目录 + [1 个章节简介 + 1 个文本栏] + 收尾 CTA
6	封面 + 目录 + [2 个章节简介 + 1 个文本栏] + 收尾 CTA
8	封面 + 目录 + [3 个章节简介 + 2 个内容页] + 收尾 CTA
10	封面 + 目录 + [4 个章节简介 + 3 个内容页] + 核心要点 + 收尾 CTA

目录规则： 电子书页数 ≥ 6 页时，须包含目录。对于 3–5 页的电子书，可在封面添加「内容一览」项目符号列表，或完全省略。

三点式 CTA 架构（适用于页数 ≥ 6 页的电子书）：

1. 开篇 CTA（第 2 页之后）—— 含蓄地以 1 行文字提及：「通过 [url] 体验我们的 [tool]」
2. 电子书中段 CTA（统计网格或章节简介之后）—— 使用小型 .callout--stat 或 .callout--tip 方框，放置 1 行 CTA
3. 收尾 CTA（最后一页）—— 整页展示主要转化行动

视觉节奏检查： 如果计划中出现连续 2 个或更多 text-column 页面，则在继续前于其间插入 quote-callout 或 stat-grid。

设计方向（根据风格预设和受众推导，切勿向用户展示）：

决策	推导依据
语气	受众期待怎样的情感基调？（权威、编辑式、活力、平和、温暖……）
标志性元素	选定一种并持续使用的视觉手法：超大装饰数字、斜向强调条、点阵叠加、封面渐变网格、线条、出界几何图形。选一种。坚持使用。
背景系统	不同页面的背景如何变化？封面和章节简介应最具特色。内容页应更克制，但不能全部为白色。收尾 CTA 应采用深色或全强调色反转。不得连续 3 页或更多页面使用相同背景。
动效风格	.reveal 动画如何呈现？选一种并保持一致：translateY(16px) → 0、scale(0.97) → 1、translateX(-12px) → 0。延迟间隔为 0.1s。
令人难忘的细节	读者会记住设计中的哪一个要素？编写任何 CSS 前先明确它。

如果仅凭风格预设无法推导出明确方向，就问问自己：顶尖设计机构会为这个特定受众和主题打造怎样的设计？然后付诸实现。

正文密度限制：

• 单栏 text-column：每页最多 180–250 个词
• 双栏 text-column：每页最多 280–380 个词（每栏 140–190 个词）
• text-sidebar：正文 140–180 个词 + 侧栏 ≤70 个词
• chapter-intro：40–60 个词（仅作预告）
• quote-callout：30–45 个词
• stat-grid：3–6 项指标，标签尽量精简

---

步骤 4：页面结构

规划前先阅读 references/page-library.md。

按页输出带有 [layout-type] 标签的编号列表。6 页示例：

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

---

进入步骤 5 前，先与用户确认。

步骤 5：内容草稿

以纯文本（不使用 HTML）撰写每页文案。按版式类型遵循以下规则：

• cover：标题（≤10 个词，以价值或冲突点开篇——不要使用泛泛的标签）+ 副标题（≤15 个词）+ 可选的类别标签 + 品牌名称
• toc：章节标题（每个 ≤6 个词）+ 对应的章节编号。使用简洁的编号列表。
• chapter-intro：章节编号（装饰性）+ 章节标题（≤8 个词）+ 引言段落（2–3 句）
• text-column (1-col)：章节标题 + 正文段落。最多 250 个词。优先使用散文而非项目符号。每句话都要有价值。
• text-column (2-col)：规则相同，每栏 140–190 个词。用于对比、成对步骤或双重视角。
• text-sidebar：正文（140–180 个词）+ 侧栏提示框类型（提示 / 警告 / 统计 / 引述 / 清单），最多 70 个词
• quote-callout：引用句 ≤40 个词 + 署名（姓名、职务、公司或来源）
• stat-grid：3–6 项指标——数字 + 标签 + 一行背景说明。可选：下方附 1 句叙述。
• key-takeaways：5–8 条要点，每条 ≤15 个词；尽可能使用祈使句
• closing-cta：标题 ≤5 个词（祈使句）+ 1 句正文 + CTA 操作 + 电子邮件 + URL（两者都必须提供）

禁用词（无一例外）：“powerful”、“seamless”、“game-changing”、“leverage”、“innovative”、“revolutionary”、“transform”、“cutting-edge”、“robust”、“unlock”、“scalable”（作为填充词使用时）。

---

步骤 6：生成 HTML

生成前请阅读以下所有内容。不要改述或总结——请阅读实际文件。

此技能的参考资料：

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

捆绑资源（确切路径——请将完整原文内容放入 <style> 块）：

• assets/viewport-base.css — 位于此技能目录中

**路径解析：**所有以 assets/ 或 scripts/ 为前缀的路径均相对于包含此 SKILL.md 文件的目录。在 Claude Code 中安装后：~/.claude/skills/graphic-ebook/assets/ 和 ~/.claude/skills/graphic-ebook/scripts/。读取前，请根据 SKILL.md 文件的位置解析实际路径。

生成规则

1. **生成单个独立 HTML 文件。**所有 CSS 均内联。唯一的外部依赖是字体 CDN <link>。

2. 将 viewport-base.css 的完整原文内容放入 <style> 块中。

3. 在 viewport-base.css 之后添加 A4 纵向覆盖样式（在同一个 <style> 块中）：

/* 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. 每页使用 <section class="slide">——这是 export-pdf.sh 检测页面所必需的。

5. 为每页添加注释：/* === PAGE N: LAYOUT-TYPE === */

6. **正文：**对 text-column 和 text-sidebar 版式中的所有 <p> 使用 clamp(0.875rem, 1.25vw, 1.05rem)、line-height: 1.75、max-width: min(65ch, 100%)。

7. **统计数字：**主数字使用 clamp(3rem, 8vw, 5.5rem)，颜色为强调色。辅助数字使用 clamp(2.5rem, 7vw, 5rem)，颜色为次要色。

8. 没有可用图片 → 仅使用 CSS 生成视觉元素（渐变、几何形状、点阵图案、抽象元素）。绝不显示占位框。

9. **不要使用 SlidePresentation JS。**仅为 .reveal 动画添加最精简的 IntersectionObserver。

10. 章节编号装饰（用于 chapter-intro 页面）：

.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. 带类型的提示框（用于 text-sidebar 页面）：

.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 {
  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. 两栏布局：display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); 左栏使用 border-right: 1px solid var(--divider)。

14. 正文与侧栏布局：display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);

设计质量规则（源自前端设计原则）

这些规则决定每本生成的电子书应达到的审美水准。应用顺序：结构规则之后、输出之前。

字体排印：

• 展示字体在大字号下必须有个性。Plus Jakarta Sans 800、Instrument Serif、Syne、Lora、Fraunces 均可接受。展示字重的 Inter 是明显的廉价感信号。
• 相邻的两个层级不能使用相同的字体字重。封面标题（800）→ 章节标题（700）→ 小节标题（700，字号较小）→ 正文（400/500）。
• 预设支持时，将展示字体与精致的正文字体搭配使用（例如，Instrument Serif + Inter、Syne + IBM Plex Sans）。仅使用单一字体的字体栈则必须通过字重对比来实现层次感。

背景与氛围：

• 封面必须有显著的装饰性 ::before 或 ::after 伪元素来营造视觉层次：opacity: 0.04–0.06 的幽灵字、延伸出边界的几何形状、径向渐变叠加层，或点阵／线条网格图案。
• 章节引言页必须在视觉上与相邻的内容页形成对比——使用 var(--bg-alt) 或与风格相符的其他处理方式。
• 内容页（text-column、text-sidebar）可以使用白色／中性色，但统计网格页和引言标注页应采用鲜明的背景（备用章节背景、凸起卡片或强调色反转）。
• 收尾 CTA：始终使用深色或完整的强调色反转——绝不能浅色。这是促成转化的关键时刻。
• 适用时使用 CSS 纹理图案：radial-gradient(circle, var(--accent) 1px, transparent 1px) 点阵网格；repeating-linear-gradient 规则线；使用 ::before 创建裁切后的几何形状。

空间构图：

• 章节引言页应留出充裕的空白——视觉上的开阔感传递出章节分隔的信号。
• 每本电子书至少应有一个元素打破标准网格：超大章节装饰数字延伸至屏幕右侧之外、与内容重叠的引言标记，或占据所在栏 60% 以上空间的统计数字。
• 除非预设有明确要求，否则避免居中布局（默认采用居中布局的只有 quote-callout）。

动效：

• 所有 .reveal 动画都应采用由设计方向步骤决定的统一方向。
• 延迟错开：以 0.05s 递增，累计最多 0.5s。动画时长不得超过 0.65s。
• 统计网格中的统计项应按索引错开延迟，营造级联效果。
• 结构性元素（页脚、边框、分隔线）不得添加动画。动画应表现内容出现，而非布局逐渐成形。

令人难忘的细节规则： 在编写第一行 CSS 之前，先明确指出让这本电子书一眼就能看出经过精心设计、而非仅仅拼凑得还算到位的那个元素。为该元素投入最多的 CSS。如果想不出来，就说明你对设计的思考还不够深入。

步骤 7：自我 QA

继续输出前，修复所有失败项。不要跳过此步骤。

布局与渲染：

• 每个 .slide 都有 height:100vh; height:100dvh; overflow:hidden
• 全局存在 * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
• 所有可缩放的字体大小都使用 clamp()
• 在 1200×1697 尺寸下没有内容溢出——检查每一页的内容密度
• 没有可见的占位框
• 不直接使用 -clamp()、-min()、-max()（将负值包装在 calc(-1 * ...) 中）

结构：

• 页数与步骤 4 的规划一致
• 只有 <section> 使用 class="slide"
• 按正确顺序包含步骤 4 中的所有布局类型
• 电子书页数 ≥ 6 页时，包含目录

阅读质量：

• 文本栏和文本侧栏页面的正文 line-height ≥ 1.75
• 单栏正文的 max-width ≤ 65ch
• 不连续出现 2 页或以上的文本栏页面，且中间没有视觉变化
• 目录包含章节标题及节号／页码
• 章节引言页包含 .chapter-number-deco（opacity 为 0.06–0.08）
• 除封面外，每页都包含带页码和品牌名称的 .page-footer
• 侧栏提示框使用带类型的 CSS 类（.callout--tip/warning/stat/quote/checklist）

设计质量：

• 一致地应用风格预设令牌（来自 references/style-presets.md）
• 不使用不良设计模式（参见 references/design-system.md 的 DO NOT USE 列表）
• 字体层级：封面标题 >> 章节标题 >> 小节标题 >> 正文（各层级之间的比例至少为 2:1）
• 统计数字在视觉上突出——正文文案的视觉权重不得与之相同
• 封面包含显著的装饰性 ::before/::after 元素——不能只是纯色背景上的文字
• 章节引言页与内容页在视觉上有所区别（使用不同背景或处理方式）
• 收尾 CTA 使用深色或全强调色反转背景——不能使用浅色
• 不连续出现 3 页或以上背景颜色相同的页面
• 设计方向步骤中定义的标志性元素清晰可见
• 至少有一个布局元素打破网格（超大装饰数字、出血形状、醒目统计数字）
• 揭示动画的方向和错开顺序保持一致——不能为每个元素随机设置

内容：

• 不得出现任何禁用词
• 封面标题不超过 10 个词，开篇突出价值或张力
• 引用提示框不超过 40 个词
• 收尾 CTA：祈使句式标题 + 邮箱 + URL（两者均为必需——缺少任一项即 QA 失败）
• 目录与实际页面结构一致
• 电子书页数 ≥ 6 页时，包含三点式 CTA

---

步骤 8：输出

mkdir -p ebook/[slug]

编写主 HTML： ebook/[slug]/index.html 打开： open ebook/[slug]/index.html

按页拆分（始终生成）： 将每个 <section class="slide"> 提取为独立的 HTML 文件，包含完整的 <style> 块，不含 JS： ebook/[slug]/page-01.html、page-02.html，……（编号补零至 2 位）

导出 PDF（始终执行）：

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

[skill-root] = 包含此 SKILL.md 的目录。运行前解析该路径（例如在安装后，于 Claude Code 中使用 ~/.claude/skills/graphic-ebook）。

清理： 如果步骤 2 生成了风格预览文件，则删除 .claude-design/previews/。

摘要（聊天中不包含 HTML）：

## 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])