用途
该技能用于从客户故事细节生成专业设计的 B2B 案例研究 PDF。输出为一个自包含的 HTML 文件（可在任意浏览器打开）以及可打印的 PDF。支持 7 种页面版块布局和 9 种样式预设。
主要能力
- 支持 7 种页面版块布局：cover、overview、challenge、solution、results、testimonial、closing-cta。
- 支持 9 种样式预设：clean-slate、midnight-editorial、matt-gray、product-minimal、mint-pixel-corporate、warm-earth、brutalist、magazine-red，以及“show me options”。
- 支持 1 页、2 页（默认）、4 页输出。
- 支持 A4 竖版（默认，1200×1697px）或横版 4:3（1200×900）。
- 生成单页 HTML 文件（每页独立）以及 PDF。
- 结果统计数字视觉上占主导地位（至少为正文的 3 倍）。
- 使用 clamp() 实现可缩放字体，仅结构边框/线条使用固定 px。
- 无图片时使用 CSS 生成视觉元素（几何形状、渐变背景、类图标 CSS 构造）。
使用方式
该技能通过多步骤流程执行：
- Brief Intake：需要四项信息——客户名称、挑战、解决方案、结果（最好 3 个统计数字）。若缺失则询问。
- Complete Intake：一次性询问所有问题，按类别分组，用户可跳过并使用默认值。
- Internal Page Architecture：内部推导，不询问用户。识别主指标，根据页数选择结构模板，根据样式选择视觉特征。
- Page Structure：规划完整页面序列，为每个页面版块分配版块类型，输出编号列表并等待确认。
- Content Draft：编写每页版块文案，纯文本，无 HTML。遵循文案规则和禁用词列表。
- HTML Generation：读取设计系统、页面库、样式预设等参考文件，生成自包含 HTML，所有 CSS 内联，仅字体 CDN 为外部引用。
- Self-QA：检查布局、结构、设计质量、内容等所有项目并修复。
- Output：保存主 HTML 到
case-study/[slug]/index.html，生成每页独立 HTML 文件，导出 PDF，清理预览文件。 - Summary：在聊天中展示摘要，不输出 HTML。
适用场景
- B2B SaaS 销售与营销团队制作客户案例研究。
- 需要快速生成专业设计的案例研究 PDF。
- 需要多种样式和页面布局选项。
- 需要自包含 HTML 和可打印 PDF 输出。
限制
- 需要提供客户名称、挑战、解决方案、结果四项信息才能开始。
- 文案有禁用词列表，不能使用“powerful”、“seamless”、“game-changing”等词。
- 每页必须适配 A4 画布（1200×1697px），无内容溢出。
- 所有可缩放字体大小必须使用 clamp()。
- 单自包含 HTML，所有 CSS 内联，零外部依赖（字体 CDN 链接除外）。
- 禁止在聊天中输出 HTML。
- 结果统计数字必须视觉上占主导（至少为正文的 3 倍）。
- 禁止通用 AI 风格：显示字体不用 Inter，白底不用紫色渐变，结尾不用“Thank You”。
- 需要读取特定参考文件（design-system.md、page-library.md、style-presets.md）以及 frontend-slides 的 viewport-base.css。
- PDF 导出需要运行特定脚本，首次运行自动安装 Playwright（约 30-60 秒）。
- 部分路径为特定用户环境路径（如 /Users/ksd/Desktop/Varnan_skills/...），可能不适用于所有环境。