图形案例研究 (Graphic Case Study)
根据客户故事详情生成专业设计的B2B案例研究PDF。输出为一个自包含的HTML文件（可在任何浏览器中打开）以及一个打印就绪的PDF。支持7种页面布局和9种样式预设。
关键规则——不可协商：
- 每一页必须适合A4画布（1200×1697像素）。不允许内容溢出。
- 所有可缩放字体大小使用
clamp()。仅结构边框/线条使用固定px。 - 单个自包含HTML：所有CSS内联。除了字体CDN链接外，无外部依赖。
- 绝不在聊天中输出HTML。保存到文件，仅显示摘要。
- 结果数据统计数字必须在视觉上占主导地位——至少是正文文本大小的3倍。
- 无通用AI垃圾：不要使用Inter作为显示字体，不要在白色上使用紫色渐变，不要使用“感谢您”的结尾。
步骤 1：简要信息收集
需要四项信息才能开始。如果消息中已包含全部四项：跳至步骤2。
如果缺少任何一项，请准确询问：
“要创建您的案例研究，我需要四项信息：
- 客户名称 —— 公司名称（或用于匿名的描述符：“财富500强零售商”）
- 挑战 —— 他们在使用您的产品之前遇到了什么问题？（2-5句话）
- 解决方案 —— 您的产品如何解决这个问题？（功能、方法）
- 结果 —— 可衡量的成果：理想情况下是3个统计数据（百分比、节省的时间、收入影响等）”
在继续之前等待所有四项信息。
步骤 2：完整信息收集
在一次消息中按类别分组询问所有问题。用户可以跳过任何问题——将使用默认值。
“在开始之前，有几个问题：
内容
- 客户背景 —— 行业、公司规模、地点？（可选，用于概述页面）
- 客户评价 —— 客户引述（最多40字）+ 发言人姓名 + 职务？（或“我稍后添加”）
- 页数 —— 1页（摘要卡片）/ 2页（标准，默认）/ 4页（详细）
- 客户Logo —— URL 或“无”
设计 5. 您的公司名称 —— 用于CTA页面的供应商名称（如有Logo 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 |
| 客户Logo | 无 |
| 您的公司名称 | 从上下文派生 |
| 风格 | 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页：[结果] + [评价-行动号召] 堆叠 |
| 4页 | 第1页：[封面] · 第2页：[概述] + [挑战] · 第3页：[解决方案] + [结果] · 第4页：[评价] + [结束行动号召] |
视觉特征 根据选择的风格派生：
- 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页的情况：
建议结构（2页，clean-slate风格）：
第1页：
[封面] —— Acme Corp将报告时间缩短80%
[挑战-解决方案] —— 手动流程 / DataPulse自动化
第2页：
[结果] —— 节省80%时间，减少95%错误，节省20万美元
[结束行动号召] —— 联系我们：[email protected]
这个结构可以吗，还是需要调整什么？
在步骤4之前等待确认。
步骤 4：内容草稿
为每个页面部分撰写文本。纯文本——还没有HTML。
每个部分的文案规则：
封面：公司名称 + 结果标题（最多12字，必须以数字开头：“Acme将报告时间缩短80%”）+ 可选的类别标签（“客户成功故事”）概述：仅4个事实——行业 / 公司规模 / 地点 / 用例——每个值最多4个字挑战：背景段落（2-3句话）+ 3个痛点（每个1句话，无列表填充）解决方案：2-3个功能亮点——功能名称（最多3个字）+ 每个功能的1句话结果描述结果：3个指标（数字 + 简短标签 + 1行背景）。可选：2句话叙述。与数字相同权重的正文为零。评价：精确引述（最多40字）+ 发言人姓名 + 职务 + 公司结束行动号召：标题（最多5个字）+ CTA行动文本（3个字）+ 电子邮件 + URL（全部必需）
禁用语（无例外）：“强大的”、“无缝的”、“变革性的”、“利用”、“创新的”、“革命性的”、“转型”、“前沿的”、“健壮的”、“解锁”、“可扩展的”（作为填充形容词）。
文案哲学： 数字胜过形容词。每个部分以结果开头，而不是功能。片段式写法也可以接受。
步骤 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>是唯一的外部引用。 - 在
<style>块中包含viewport-base.css的完整逐字内容——不要复述或缩短它。 - 粘贴 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; } - 每个页面部分 =
<section class="slide">—— 这是 export-pdf.sh 检测所必需的。 - 为每个页面添加注释：
/* === PAGE N: SECTION-TYPES === */ - 结果统计数字：最小
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字
- 结束行动号召包含标题 + 动作 + 电子邮件 + 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）
在聊天中呈现：
## 案例研究：[客户名称]
日期：[今天] | 风格：[风格] | 页数：[N] | 格式：A4纵向
供应商：[您的公司] | 客户：[客户名称]
---
### 文件
主文件： case-study/[slug]/index.html
逐页文件： case-study/[slug]/page-01.html -> page-0N.html
PDF： case-study/[slug].pdf
---
### 案例研究清单
- [ ] 用实际的Logo文件替换 [IMAGE: logo] 占位符
- [ ] 验证所有统计数据是否准确（第[结果页页码]页）
- [ ] 确认客户已批准引述使用
- [ ] 核实公司名称拼写、发言人职务准确性
- [ ] 测试PDF页数是否为 [N] 且没有内容被裁剪
- [ ] 在 case-study/[slug].pdf 处分享PDF
不要在聊天中打印HTML。
部分参考
| 部分 | 用途 |
|---|---|
| 封面 | 开场页——客户名称、标题结果、Logo |
| 概述 | 概览简介——行业、规模、用例 |
| 挑战 | 问题——背景 + 痛点 |
| 解决方案 | 您的产品如何解决——功能亮点 |
| 结果 | 关键指标 + 支持性叙述 |
| 评价 | 来自客户的全宽拉取引述 |
| 结束行动号召 | 供应商Logo + 联系信息 + 下一步 |