Graphic Case Study
根據客戶故事細節生成專業設計的B2B案例研究PDF。輸出為單一自包含HTML檔案（可在任何瀏覽器中開啟）以及可直接列印的PDF。支援7種頁面區段版面與9種風格預設。
關鍵規則——不可協商：
- 每個頁面必須符合A4畫布大小（1200×1697px）。不得有內容溢出。
- 所有可縮放字型大小皆使用
clamp()。僅結構性邊框/線條可使用固定px值。 - 單一自包含HTML：所有CSS內嵌。零外部依賴，字型CDN連結除外。
- 絕不直接在對話中傾倒HTML。儲存為檔案，僅顯示摘要。
- 成果統計數字必須在視覺上佔主導地位——至少為正文大小的3倍。
- 不得使用通用AI內容：不得使用Inter作為顯示字型，不得在白色背景上使用紫色漸層，不得使用「感謝」結尾。
步驟 1：簡略輸入
需要四項資訊才能開始。如果訊息中已包含全部四項：直接跳到步驟2。
如果缺少任一項，請準確詢問：
「要建立您的案例研究，我需要四項資訊：
- 客戶名稱 —— 公司名稱（或匿名化描述，例如：「Fortune 500 零售商」）
- 挑戰 —— 他們在使用您的產品前面臨什麼問題？（2-5句話）
- 解決方案 —— 您的產品如何解決這個問題？（功能、方法）
- 成果 —— 可量化的結果：最好有3個統計數據（百分比、節省時間、收入影響等）」
在收到全部四項資訊後再繼續。
步驟 2：完整輸入
在一個訊息中詢問所有問題，按類別分組。使用者可以跳過任何問題——將使用預設值。
「開始前有幾個問題：
內容
- 客戶背景 —— 產業、公司規模、所在地？（選填，用於概述頁面）
- 見證 —— 客戶引言（40字以內）+ 發言者姓名 + 職稱？（或「我稍後再新增」）
- 頁數 —— 1頁（摘要卡）/ 2頁（標準，預設）/ 4頁（詳細）
- 客戶標誌 —— 網址或「無」
設計 5. 貴公司名稱 —— 用於CTA頁面的廠商名稱（如有標誌網址也請提供） 6. 風格 —— clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / 「顯示選項」 7. 方向 —— A4直向（預設，1200×1697）/ 橫向4:3（1200×900）
輸出 8. 匿名化？ —— 保留公司名稱 / 替換為產業描述 9. 別名 —— 檔案名稱別名（例如：「acme-corp-2025」）；如果跳過，我將從客戶名稱推導」
跳過時的預設值：
| 問題 | 預設值 |
|---|---|
| 客戶背景 | 無 |
| 見證 | 無 |
| 頁數 | 2 |
| 客戶標誌 | 無 |
| 貴公司名稱 | 從上下文推導 |
| 風格 | clean-slate |
| 方向 | A4直向 |
| 匿名化 | 保留名稱 |
| 別名 | 客戶名稱的kebab-case格式 |
如果風格 = 「顯示選項」：
生成3個單頁HTML預覽（僅封面頁）。儲存至 .claude-design/previews/style-a.html、style-b.html、style-c.html。開啟每個檔案：open .claude-design/previews/style-a.html 等。選擇3個符合案例研究背景的風格預設。在步驟3之前詢問使用者選擇。
步驟 2.5：內部頁面架構（不向使用者顯示）
在步驟3之前內部推導。切勿詢問使用者。
主要指標識別： 掃描成果，找出單一最令人印象深刻的數字（最大百分比、最大金額、最大倍數）。此指標將獲得強調色處理，並在成果頁面上擁有最大視覺權重。
頁數 -> 結構範本：
| 頁數 | 頁面順序 |
|---|---|
| 1頁 | 1頁：[精簡封面] —— 所有內容濃縮至一頁 |
| 2頁 | 第1頁：[封面] + [挑戰-解決方案] 上下堆疊 · 第2頁：[成果] + [見證-CTA] 上下堆疊 |
| 4頁 | 第1頁：[封面] · 第2頁：[概述] + [挑戰] · 第3頁：[解決方案] + [成果] · 第4頁：[見證] + [結尾CTA] |
根據風格選擇推導視覺特徵：
- clean-slate → 專業權威，大量留白，企業級安全
- midnight-editorial → 高級深色，編輯風格，適合科技/AI公司
- matt-gray → 值得信賴的中性，營運感，董事會級安全
- warm-earth → 平易近人的溫暖，適合顧問/代理商/服務業
- brutalist → 大膽突出，設計前衛，引人注目
- 若未指定：B2B SaaS預設為clean-slate，科技公司預設為midnight-editorial
步驟 3：頁面結構
在規劃前閱讀 references/page-library.md。
規劃完整的頁面順序。將 references/page-library.md 中的7種區段類型分配給每個頁面區段。一個頁面內可以堆疊多個區段。
輸出為帶有 [區段類型] 標籤的編號列表。2頁範例：
建議結構（2頁，clean-slate風格）：
第1頁：
[封面] —— Acme Corp 將報告時間縮短 80%
[挑戰-解決方案] —— 手動流程 / DataPulse 自動化
第2頁：
[成果] —— 節省 80% 時間、減少 95% 錯誤、節省 $200K
[結尾CTA] —— 聯絡我們：[email protected]
這個結構可以嗎？或者需要調整任何部分？
在確認後再進行步驟4。
步驟 4：內容草稿
逐頁區段撰寫文案。僅純文字——尚無HTML。
各區段的文案規則：
封面：公司名稱 + 標題結果（12字以內，必須以數字開頭：「Acme 將報告時間縮短 80%」）+ 可選類別標籤（「客戶成功案例」）概述：僅4項事實——產業 / 公司規模 / 所在地 / 使用案例——每項值最多4個字挑戰：背景段落（2-3句話）+ 3個痛點（每項1句話，無項目符號填充）解決方案：2-3個功能說明——功能名稱（最多3個字）+ 每項1句話的成果描述成果：3個指標（數字 + 簡短標籤 + 1行背景說明）。可選：2句話的敘述。零正文與數字使用相同字重。見證：確切引言（40字以內）+ 發言者姓名 + 職稱 + 公司結尾CTA：標題（5個字以內）+ CTA行動文字（3個字）+ 電子郵件 + 網址（全部四項皆必需）
禁用詞（無例外）：「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「revolutionary」、「transform」、「cutting-edge」、「robust」、「unlock」、「scalable」（作為填充形容詞）。
**文案理念：**數字勝過形容詞。每個區段以成果開頭，而非功能。使用片段句亦可。
步驟 5：HTML 生成
在生成任何HTML之前，請閱讀所有內容：
此技能的參考資料：
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
frontend-slides 交叉參考（請閱讀此確切檔案）：
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css—— 將完整內容逐字包含在<style>區塊內
生成規則：
- 單一自包含HTML。所有CSS內嵌。字型CDN
<link>是唯一的外部參考。 - 將
viewport-base.css的完整逐字內容包含在<style>區塊內——不要改寫或縮短。 - 貼上 viewport-base.css 後，加入A4直向覆寫設定：
/* 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; } - 每個頁面區段 =
<section class="slide">—— 為export-pdf.sh偵測所需。 - 為每個頁面加上註解：
/* === 頁面 N: 區段類型 === */ - 成果統計數字：最小使用
clamp(2.5rem, 7vw, 5rem)。主要指標使用強調色。其他指標使用次要文字色。 - 無圖像提供 -> 使用CSS生成視覺元素（幾何形狀、漸層背景、類似圖示的CSS結構）。切勿輸出可見的佔位方塊。
- 不包含SlidePresentation JS。僅包含一個用於
.reveal入場動畫的最小IntersectionObserver（供檢視體驗；PDF匯出將自動呈現最終狀態）。 - 若要求橫向4:3：使用根據graphic-slide-deck比例調整的
clamp()值——橫向1200×900表示1vw=12px，與直向類似。
字體排版規範（全部基於clamp，針對1200px A4直向調整）：
- 封面標題：
clamp(2rem, 5vw, 3.5rem) - 區段標題：
clamp(1.25rem, 2.5vw, 2rem) - 正文：
clamp(0.875rem, 1.25vw, 1.1rem) - 統計數字（主要）：
clamp(3rem, 8vw, 5.5rem)使用強調色 - 統計數字（次要）：
clamp(2.5rem, 7vw, 5rem)使用次要色 - 引言：
clamp(1.1rem, 2vw, 1.5rem)斜體 - 標籤/說明：
clamp(0.65rem, 0.9vw, 0.8rem)大寫
步驟 6：自我品質檢查
檢查每個項目。修正所有失敗——不要跳過。
版面與渲染：
- 每個
.slide有height:100vh; height:100dvh; overflow:hidden - 所有可縮放字型大小皆使用
clamp() - 在1200×1697視埠中無內容溢出——根據
references/page-library.md的限制檢查每個頁面的密度 - 所有圖像佔位處皆有CSS生成視覺元素
- CSS中無
-clamp()、-min()、-max()—— 使用calc(-1 * ...)包裝負值
結構：
- 頁數符合步驟3的計劃
- 每個頁面使用
class="slide" - 步驟3中的所有內容區段都已存在
-
class="slide"僅用於<section>元素，而非內部div
設計品質：
- 主要指標在成果區段中視覺上佔主導地位 —— 使用強調色、最大尺寸、無相同權重的競爭元素
- 風格預設標記一致應用（來自
references/style-presets.md的顏色、字型） - 無通用模式（檢查
references/style-presets.md中的「請勿使用」列表） - 字體層級清晰：封面標題 >> 區段標題 >> 正文（至少2:1比例）
內容：
- 所有文案中無禁用詞
- 封面標題以數字或可量化結果開頭
- 見證引言在40字以內
- 結尾CTA有標題 + 行動文字 + 電子郵件 + 網址（全部四項）
- 成果區段中的所有統計數字都有標籤（無裸數字）
步驟 7：輸出
儲存主要HTML：
mkdir -p case-study/[slug]
寫入：case-study/[slug]/index.html
開啟：open case-study/[slug]/index.html
逐頁HTML檔案（務必生成）：
從主要HTML中提取每個 <section class="slide">。為每個區段建立獨立檔案，包含：
- 主要HTML的完整
<style>區塊（逐字複製） - 以最小HTML外殼包裝的個別
<section class="slide"> - 無JS（靜態逐頁檢視）
寫入：case-study/[slug]/page-01.html、page-02.html 等。
PDF匯出（A4直向時務必執行）：
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
case-study/[slug]/index.html \
case-study/[slug].pdf --portrait
若要求橫向4:3，則省略 --portrait，改用 --compact（1280×720）。
注意：首次執行會自動安裝Playwright（約30-60秒）。請告知使用者。
清理： 若在步驟2中生成了風格預覽檔案，請刪除 .claude-design/previews/ 目錄。
步驟 8：摘要（對話中不含HTML）
在對話中呈現：
## 案例研究：[客戶名稱]
日期：[今天] | 風格：[風格] | 頁數：[N] | 格式：A4直向
廠商：[貴公司] | 客戶：[客戶名稱]
---
### 檔案
主要： case-study/[slug]/index.html
逐頁： case-study/[slug]/page-01.html -> page-0N.html
PDF： case-study/[slug].pdf
---
### 案例研究檢查清單
- [ ] 將 [IMAGE: logo] 佔位符替換為實際標誌檔案
- [ ] 驗證所有統計數據準確無誤（第 [成果頁碼] 頁）
- [ ] 確認客戶已批准引言使用
- [ ] 校對公司名稱拼寫、發言者職稱準確性
- [ ] 測試PDF頁數是否為 [N] 且無內容裁剪
- [ ] 在 case-study/[slug].pdf 分享PDF
請勿在對話中輸出HTML。
區段參考
| 區段 | 用途 |
|---|---|
| cover | 首頁 —— 客戶名稱、標題結果、標誌 |
| overview | 一覽資料 —— 產業、規模、使用案例 |
| challenge | 問題 —— 背景 + 痛點 |
| solution | 您的產品如何解決 —— 功能說明 |
| results | 關鍵指標 + 支援敘述 |
| testimonial | 全幅客戶引言 |
| closing-cta | 廠商標誌 + 聯絡資訊 + 下一步 |