graphic-case-study

图文案例研究

根据客户故事详情，生成设计专业的 B2B 案例研究 PDF。输出为一个可在任何浏览器中打开的独立 HTML 文件，以及一份适合打印的 PDF。支持 7 种页面版式和 9 种样式预设。

---

关键规则——不可妥协：

1. 每一页都必须适合 A4 画布（1200×1697px）。内容不得溢出。
2. 所有可缩放的字体大小都必须使用 clamp()。固定 px 仅可用于结构性边框／线条。
3. HTML 文件必须独立自包含：所有 CSS 均内联。除字体 CDN 链接外，不得有任何外部依赖。
4. 绝不在聊天中输出 HTML。保存为文件，仅显示摘要。
5. 成果数据必须在视觉上占据主导地位——字号至少是正文的 3 倍。
6. 不要使用千篇一律的 AI 风格：展示字体不得使用 Inter，不要在白色背景上使用紫色渐变，结尾不得使用“Thank You”。

---

步骤 1：收集简介信息

开始前需要四项信息。如果消息中已包含全部四项，则跳到步骤 2。

如果缺少任何一项，请准确询问：

“要创建案例研究，我需要四项信息：

1. 客户名称——公司名称（或用于匿名处理的描述，例如“财富 500 强零售商”）
2. 挑战——使用你的产品前，他们遇到了什么问题？（2-5 句）
3. 解决方案——你的产品如何解决问题？（功能、方法）
4. 成果——可衡量的成效：最好提供 3 项数据（百分比、节省的时间、收入影响等）”

等用户提供全部四项信息后再继续。

---

步骤 2：补充收集信息

在一条消息中按类别询问所有问题。用户可以跳过任何问题——将使用默认值。

“开始前，我还有几个问题：

内容

1. 客户背景——行业、公司规模、所在地？（可选，用于概览页）
2. 客户评价——客户引言（最多 40 个单词）+ 发言人姓名 + 职务？（或回答“稍后添加”）
3. 页数——1 页（摘要卡片）／2 页（标准，默认）／4 页（详细）
4. 客户徽标——URL 或“无”

设计 5. 你的公司名称——用于 CTA 页的供应商名称（如有，请附上徽标 URL） 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. Slug——文件名 slug（例如“acme-corp-2025”）；如果跳过，我会根据客户名称生成”

跳过问题时使用的默认值：

问题	默认值
客户背景	无
客户评价	无
页数	2
客户徽标	无
你的公司名称	根据上下文推断
样式	clean-slate
方向	A4 纵向
匿名处理	保留名称
Slug	客户名称的 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 种区块类型。一个页面中可以堆叠多个区块。

按编号列表输出，并为每页标注 [section-type]。2 页示例如下：

Proposed structure (2 pages, clean-slate style):

Page 1:
  [cover] -- Acme Corp cut reporting time by 80%
  [challenge-solution] -- manual process / DataPulse automation

Page 2:
  [results] -- 80% time saved, 95% error reduction, $200K saved
  [closing-cta] -- Get in touch: [email protected]

Does this structure work, or should I adjust anything?

等待确认后再进行第 4 步。

---

第 4 步：内容草稿

按页面区块撰写文案。仅使用纯文本 -- 暂不编写 HTML。

各区块的文案规则：

• cover：公司名称 + 成果标题（最多 12 个词，必须以数字开头：“Acme 将报告处理时间缩短了 80%”）+ 可选类别标签（“客户成功案例”）
• overview：仅限 4 项信息 -- 行业 / 公司规模 / 地点 / 用例 -- 每项最多 4 个词
• challenge：背景段落（2-3 句话）+ 3 个痛点（每项 1 句话，不要填充项目符号内容）
• solution：2-3 个功能亮点 -- 功能名称（最多 3 个词）+ 每项配 1 句结果描述
• results：3 项指标（数字 + 简短标签 + 1 行说明）。可选：2 句叙述。正文文案的视觉权重绝不能与数字相同。
• testimonial：原文引述（最多 40 个词）+ 发言者姓名 + 职务 + 公司
• closing-cta：标题（最多 5 个词）+ CTA 行动文案（3 个词）+ 电子邮箱 + URL（两者均为必填）

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

**文案原则：**数字胜过形容词。每个区块都以结果而非功能开头。可以使用不完整句。

第 5 步：HTML 生成

生成任何 HTML 之前，请先阅读所有内容：

本技能的参考文件：

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

frontend-slides 交叉引用（请阅读此确切文件）：

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css —— 在 <style> 块中逐字完整包含其内容

生成规则：

1. 使用单个独立 HTML 文件。所有 CSS 均内联。字体 CDN <link> 是唯一的外部引用。
2. 在 <style> 块中逐字完整包含 viewport-base.css 的内容——不得改述或缩短。
3. 粘贴 viewport-base.css 后，添加纵向 A4 覆盖样式：

   /* 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;
   }
   

4. 每个页面区块都必须是 <section class="slide">，这是 export-pdf.sh 检测所必需的。
5. 为每页添加注释：/* === PAGE N: SECTION-TYPES === */
6. 结果部分的统计数字：最小值为 clamp(2.5rem, 7vw, 5rem)。主指标使用强调色。其他指标使用次要文本颜色。
7. 未提供图片时，使用 CSS 生成视觉元素（几何形状、渐变背景、类似图标的 CSS 构造）。绝不输出可见的占位框。
8. 不要使用 SlidePresentation JS。仅为 .reveal 入场动画添加最简 IntersectionObserver（用于查看体验；PDF 导出会自动渲染为最终状态）。
9. 如果需要横向 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 包含标题、行动号召、电子邮件和 URL（四项齐全）
• 结果部分的所有统计数据都有标签（不得出现无说明的数字）

第 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）

在聊天中提供：

## Case Study: [customer name]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Vendor: [your company] | Customer: [customer name]

---

### Files
Main:      case-study/[slug]/index.html
Per-page:  case-study/[slug]/page-01.html -> page-0N.html
PDF:       case-study/[slug].pdf

---

### Case Study Checklist
- [ ] Replace [IMAGE: logo] placeholder with real logo file
- [ ] Verify all stats are accurate (page [results page number])
- [ ] Confirm customer has approved quote usage
- [ ] Proof company name spelling, speaker title accuracy
- [ ] Test PDF page count = [N] and no content clips
- [ ] Share PDF at case-study/[slug].pdf

不要在聊天中输出 HTML。

---

区块参考

区块	用途
cover	开场页——客户名称、核心成果、Logo
overview	概览信息——行业、规模、使用场景
challenge	问题——背景和痛点
solution	产品如何解决问题——功能说明
results	关键指标及配套说明
testimonial	客户的全宽引述
closing-cta	供应商 Logo、联系信息和后续步骤