graphic-ebook
创建专业设计的B2B SaaS电子书——铅磁铁、门控指南、培育资产、白皮书。HTML + CSS → 可打印的PDF。3–10页。
关键规则
在任何步骤之前，这些规则是绝对的：
- 每一页必须适合A4画布（1200×1697px）。不允许内容溢出。
- 所有可缩放字体大小使用
clamp()。仅边框/结构元素使用固定px。 - 单一自包含的HTML。所有CSS内联。仅字体CDN
<link>作为外部依赖。 - **切勿在聊天中转储HTML。**保存到文件，仅显示摘要。
- 正文是首要的。在所有text-column和text-sidebar页面上，行高 ≥ 1.75。单列正文的最大宽度 ≤ 65ch。
- 无通用AI垃圾：显示字体不使用Inter，白色上无紫到蓝渐变，无“谢谢”结尾。
- 视觉节奏：切勿将2个或更多text-column页面连续放置。用chapter-intro、quote-callout或stat-grid打断。
- **在生成HTML之前，确定一个设计方向：**一种基调，一个标志性元素，一种背景系统。通用 = 失败。每本电子书必须为其受众和主题进行独特设计——而非模板。
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }——必选的全局CSS。没有这个，Chromium会在PDF中剥离所有背景颜色。- 除封面外，每一页必须有一个页脚：页码 + 品牌名称。在每个
.slide底部绝对定位。
步骤 1：需求收集
四个必填字段。如果用户的提示中存在全部四个字段：跳转到步骤 2。
如果缺少任何一项，请准确询问：
“要创建您的电子书，我需要四件事：
- 主题——电子书是关于什么的？（具体说明：“5种降低CAC的方法”而不是“营销技巧”）
- 受众——谁会读它？（角色、公司规模、痛点：“在50–500人规模的SaaS公司中，应对客户流失的客户成功经理”）
- 期望行动——读者之后应该做什么？（预约演示、下载模板、与团队分享）
- 内容——您有现有内容，还是我应该根据主题起草？”
停止并等待。不要阅读参考文件。不要生成任何HTML或大纲。
步骤 2：完整信息收集
在一个消息中询问所有9个问题，并分组。如果跳过，则应用默认值。
内容
- 页数——3–5（快速指南/核对清单）/ 6–8（标准指南）/ 9–10（深度探讨）（默认：6）
- 关键要点——读者阅读后应该知道或做的3–5件事（告知章节结构）
- 品牌名称——封面和页脚的公司或产品名称（或“跳过”）
- 品牌标志——网址或“无”
设计 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页面的电子邮件 + 网址（或“稍后添加”） 9. 缩略名——文件名缩略名（例如，“reduce-churn-guide-2025”；如果跳过，则从主题派生）
默认值：
| 问题 | 默认值 |
|---|---|
| 页数 | 6 |
| 关键要点 | 从主题派生 |
| 品牌名称 | 无 |
| 品牌标志 | 无 |
| 样式 | clean-slate |
| 章节数量 | 从页数派生 |
| CTA详情 | 预约演示 |
| 联系信息 | 占位符（在核对清单中标出） |
| 缩略名 | 主题的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页的电子书）：
- 介绍CTA（第2页之后）——微妙的1行内联提及：“在[网址]探索我们的[工具]”
- 电子书中部CTA（在stat-grid或chapter-intro之后）——带有1行CTA的小型
.callout--stat或.callout--tip框 - 结束CTA（最后一页）——全页，主要转化行动
视觉节奏检查： 如果计划中出现2个或更多连续的text-column页面 → 在继续之前，在它们之间插入quote-callout或stat-grid。
设计方向（从样式预设+受众派生——绝不向用户展示）：
| 决策 | 派生来源 |
|---|---|
| 基调 | 这个受众期望什么情感基调？（权威、编辑、充满活力、平静、温暖……） |
| 标志性元素 | 一致使用的一个视觉设备：超大的装饰性数字、对角强调条、点网格叠加、封面上的渐变网格、规则线、几何形状出血。选择一个。使用它。 |
| 背景系统 | 不同页面的背景如何变化？封面和章节介绍 = 最独特。内容页面较安静，但不是全白。结束CTA = 深色或全强调色反转。没有3个或更多连续页面具有相同的背景。 |
| 动态样式 | .reveal动画做什么？选择一个并保持一致：translateY(16px) → 0、scale(0.97) → 1、translateX(-12px) → 0。错开延迟0.1秒。 |
| 难忘的细节 | 读者会记住设计的哪一件事？在编写任何CSS之前命名它。 |
如果仅从样式预设无法推导出强方向，请问自己：顶级设计公司会为这个特定受众和主题产出什么？然后执行它。
正文密度限制：
- text-column 1-col：每页最多180–250字
- text-column 2-col：最多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。
输出一个编号列表，每页带有[布局类型]标签。例如，6页版本：
第1页：[封面] — 标题、副标题、品牌
第2页：[目录] — 3个章节标题 + 页码
第3页：[章节介绍] — 第1章开场
第4页：[文本列] — 第1章正文（1列）
第5页：[统计网格] — 4个关键指标
第6页：[结束CTA] — 预约演示CTA + 联系信息
在步骤5之前与用户确认。
步骤 5：内容起草
以纯文本形式编写每页文案（无HTML）。每种布局类型的规则：
- 封面：标题（≤10字，以价值或紧张感开头——而非通用标签）+ 副标题（≤15字）+ 可选类别标签 + 品牌名称
- 目录：章节标题（每个≤6字）+ 相应的章节编号。清晰、编号的列表。
- 章节介绍：章节编号（装饰性）+ 章节标题（≤8字）+ 预告段落（2–3句）
- 文本列（1列）：小节标题 + 正文段落。最多250字。散文 > 项目符号。每个句子都值得存在。
- 文本列（2列）：相同规则，每列140–190字。用于比较、步骤对、双重视角。
- 文本侧边栏：主正文（140–180字）+ 侧边栏标注类型（提示/警告/统计/引用/核对清单），最多70字
- 引用标注：拉引 ≤40字 + 归属（姓名、职称、公司或来源）
- 统计网格：3–6个指标——数字 + 标签 + 1行背景。可选：下面的1句叙述。
- 关键要点：5–8个要点，每个≤15字，尽可能使用祈使句
- 结束CTA：标题≤5字（祈使句）+ 1句正文 + CTA行动 + 电子邮件 + 网址（两者都需要）
禁止词汇（无例外）： "powerful"、"seamless"、"game-changing"、"leverage"、"innovative"、"revolutionary"、"transform"、"cutting-edge"、"robust"、"unlock"、"scalable"（作为填充词）。
步骤 6：HTML生成
在生成之前阅读所有这些。不要概括或总结它们——阅读实际文件。
此技能的参考：
references/design-system.mdreferences/page-library.mdreferences/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文件位置解析实际路径。
生成规则
-
单一自包含的HTML。 所有CSS内联。仅字体CDN
<link>作为外部依赖。 -
在
<style>块中包含viewport-base.css的完整逐字内容。 -
在viewport-base.css之后添加A4纵向覆盖（在同一个
<style>块中）：
/* A4纵向覆盖 */
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;
}
/* 关键：防止Chromium在PDF中剥离背景 */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
-
每个页面 =
<section class="slide">——为export-pdf.sh页面检测所必需。 -
注释每个页面：
/* === 页面 N: 布局类型 === */ -
正文文本：
clamp(0.875rem, 1.25vw, 1.05rem)、line-height: 1.75、max-width: min(65ch, 100%)应用于text-column和text-sidebar布局中的所有<p>。 -
统计数字： 主角为
clamp(3rem, 8vw, 5.5rem)，使用强调色。次要数字为clamp(2.5rem, 7vw, 5rem)，使用次要颜色。 -
无可用图像 → 仅使用CSS生成的视觉元素（渐变、几何形状、圆点图案、抽象元素）。切勿显示占位框。
-
无SlidePresentation JS。 仅包含最小的IntersectionObserver用于
.reveal动画。 -
章节编号装饰（在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;
}
- 类型化标注框（用于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; }
- 页脚（除封面外的每一页）：
.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>[品牌名称]</span><span>[N]</span></div>
-
2列布局：
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem);，左列带有border-right: 1px solid var(--divider)。 -
文本侧边栏布局：
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伪元素，创建视觉深度：透明度为0.04–0.06的幽灵字母、几何形状出血、径向渐变叠加、或点/线网格图案。 - 章节介绍页面必须在视觉上与相邻的内容页面形成对比——使用
var(--bg-alt)或样式合适的替代处理。 - 内容页面（text-column、text-sidebar）可以是白色/中性，但……