graphic-ebook
建立專業設計的 B2B SaaS 電子書 — 引導磁鐵、閘控指南、培育資產、白皮書。HTML + CSS → 適合印刷的 PDF。3–10 頁。
關鍵規則
在任何步驟之前，這些規則是絕對的：
- 每一頁都必須適合 A4 畫布（1200×1697px）。不行有內容溢出。
- 所有可縮放字型大小使用
clamp()。僅邊框或結構元素可使用固定像素。 - 單一自包含的 HTML。所有 CSS 內嵌。僅字型 CDN
<link>為外部依賴。 - 切勿在聊天中傾倒 HTML。 儲存到檔案後，只顯示摘要。
- 正文文字為主要。在文字欄和側邊欄頁面上，行高 ≥ 1.75。單欄正文最大寬度 ≤ 65ch。
- 不允許通用 AI 模板：顯示字型不可用 Inter，背景不可用紫到藍漸層搭配白色，結尾不可用「感謝您」。
- 視覺節奏：絕不連續放置 2 頁以上的文字欄頁面。必須用章節介紹、引言框或統計圖表來間隔。
- 在產生 HTML 之前，必須決定設計方向： 一個調性、一個標誌性元素、一個背景系統。使用通用模板 = 失敗。每本電子書必須根據其目標受眾和主題進行獨特設計，而不是套用範本。
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }— 強制性全域 CSS。沒有這條，Chromium 在 PDF 中會移除所有背景顏色。- 除封面外，每一頁都必須有頁尾：頁碼 + 品牌名稱。絕對定位在每個
.slide的底部。
步驟 1：簡要需求收集
四個必要欄位。如果使用者的提示中已包含全部四項：跳至步驟 2。
如果有任何缺失，請精確地詢問：
「為了建立您的電子書，我需要四項資訊：
- 主題 — 電子書的內容是什麼？（請具體說明：「降低 CAC 的五種方法」而非「行銷技巧」）
- 目標受眾 — 讀者是誰？（職位、公司規模、痛點：「在 50–500 人規模 SaaS 公司、正在與客戶流失奮戰的客戶成功經理」）
- 期望行動 — 您希望讀者在閱讀後做什麼？（預約示範、下載範本、分享給團隊）
- 內容 — 您是否有現有內容，或者我應該根據主題來草擬？」
停下來等待。不要讀取參考檔案。不要產生任何 HTML 或大綱。
步驟 2：完整需求收集
將所有 9 個問題放在同一則訊息中詢問，並進行分組。如果跳過則套用預設值。
內容
- 頁數 — 3–5（快速指南 / 核對表）/ 6–8（標準指南）/ 9–10（深入探討）（預設：6）
- 關鍵重點 — 讀者在閱讀後應知道或做到的 3–5 件事（影響章節結構）
- 品牌名稱 — 封面和頁尾要顯示的公司或產品名稱（或「略過」）
- 品牌標誌 — 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 |
| 關鍵重點 | 從主題推導 |
| 品牌名稱 | 無 |
| 品牌標誌 | 無 |
| 風格 | 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 頁以上的電子書）：
- 開場 CTA（第 2 頁之後）— 微妙的一行內嵌提及：「在 [網址] 探索我們的 [工具]」
- 書中 CTA（在統計圖表或章節介紹之後）— 小型
.callout--stat或.callout--tip盒子，含一行 CTA - 結尾 CTA（最後一頁）— 全頁，主要轉換行動
視覺節奏檢查： 如果計畫中出現 2 頁以上連續的 text-column 頁面 → 在繼續前在它們之間插入 quote-callout 或 stat-grid。
設計方向（從風格預設 + 目標受眾推導 — 絕不向使用者顯示）：
| 決策 | 推導來源 |
|---|---|
| 調性 | 目標受眾期望什麼情感基調？（權威、編輯風格、充滿活力、冷靜、溫暖⋯） |
| 標誌性元素 | 一個一致使用的視覺手法：超大裝飾數字、對角線條、點狀網格覆蓋、封面漸層網格、規則線條、幾何形狀出血。選擇一個。使用它。 |
| 背景系統 | 各頁背景如何變化？封面和章節介紹最獨特。內容頁較平實但不能全白。結尾 CTA 為深色或全強調色反轉。不能有連續 3 頁以上背景完全相同。 |
| 動畫風格 | .reveal 動畫做什麼？選擇一個並保持一致：translateY(16px) → 0、scale(0.97) → 1、translateX(-12px) → 0。交錯延遲間隔 0.1 秒。 |
| 難忘細節 | 讀者會記得設計中的哪一件事？在撰寫任何 CSS 之前先命名它。 |
如果僅從風格預設無法推導出明確方向，請問自己：對於這個特定目標受眾和主題，頂級設計機構會產出什麼？然後執行那個方案。
正文密度限制：
- 文字欄 1 欄：每頁最多 180–250 字
- 文字欄 2 欄：最多 280–380 字（每欄 140–190）
- 側邊欄：主要部分 140–180 字 + 側邊欄最多 70 字
- 章節介紹：40–60 字（僅預告）
- 引言框：30–45 字
- 統計圖表：3–6 個指標，最少標籤
步驟 4：頁面結構
在規劃前先讀取 references/page-library.md。
輸出一個帶有每頁 [佈局類型] 標籤的編號清單。以 6 頁為例：
Page 1: [cover] — 標題、副標題、品牌
Page 2: [toc] — 3 個章節標題 + 頁碼
Page 3: [chapter-intro] — 第 1 章開場
Page 4: [text-column] — 第 1 章正文（1 欄）
Page 5: [stat-grid] — 4 個關鍵指標
Page 6: [closing-cta] — 預約示範 CTA + 聯絡資訊
在步驟 5 之前與使用者確認。
步驟 5：內容草稿
以純文字（無 HTML）撰寫每頁文案。各佈局類型的規則：
- cover：標題（≤10 個字，以價值或張力為開端 — 不是通用標籤）+ 副標題（≤15 個字）+ 可選的分類標籤 + 品牌名稱
- toc：章節標題（每個 ≤6 個字）+ 對應的章節編號。乾淨的編號清單。
- chapter-intro：章節編號（裝飾性）+ 章節標題（≤8 個字）+ 預告段落（2–3 句）
- text-column (1欄)：區段標題 + 正文段落。最多 250 字。散文優先於項目符號。每一句話都值得存在。
- text-column (2欄)：相同規則，每欄 140–190 字。用於比較、步驟配對、雙重視角。
- text-sidebar：主要正文（140–180 字）+ 側邊欄提示類型（提示 / 警告 / 統計 / 引言 / 核對表），最多 70 字
- quote-callout：精選引言 ≤40 字 + 出處（姓名、職位、公司或來源）
- stat-grid：3–6 個指標 — 數字 + 標籤 + 一行背景說明。可選：下方加一句敘述。
- key-takeaways：5–8 個重點，每個 ≤15 字，盡可能使用祈使句
- closing-cta：標題 ≤5 字（祈使句）+ 一句正文 + CTA 行動 + 電子郵件 + URL（兩者皆必填）
禁用詞（無例外）：「強大」、「無縫」、「改變遊戲規則」、「利用」、「創新」、「革命性」、「轉型」、「尖端」、「穩健」、「解鎖」、「可擴展」（作為填充詞）。
步驟 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>為外部依賴。 -
包含
viewport-base.css的完整逐字內容 在<style>區塊中。 -
在 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=