Magazine Web PPT · 电子杂志风网页 PPT Skill

Magazine Web PPT（项目名：guizang-ppt-skill）是一款专为 Claude Code 和 Claude Agent 设计的技能（Skill）。它能生成单文件 HTML 横向翻页演示文稿，视觉风格融合了“电子杂志”的精致排版与“电子墨水”的克制美学，宛如 Monocle 杂志被赋予了代码的灵魂。

该 Skill 摒弃了传统 PPT 的模板化设计，通过严格的字体分工、WebGL 流体背景及网格布局，打造出具有强烈个人品牌感的高端演示体验。

视觉与设计哲学

1. 三级字体分工

• 衬线体 (Serif)：用于大标题，营造权威感与杂志质感。
• 非衬线体 (Sans-serif)：用于正文，确保阅读清晰度。
• 等宽字体 (Monospace)：用于元数据、页码及装饰性元素，注入极客气息。

2. 克制的动态背景

• WebGL 流体/色散：仅在 Hero 页（封面/章节页）显著展示，正文页保持极简，避免视觉干扰。
• 横向交互：支持键盘左右键、滚轮、触屏滑动、底部导航点及 ESC 索引视图。

3. 五大主题预设

为了维护美学一致性，Skill 禁止自定义 Hex 值，仅提供五套精心调校的配色：

4. 十种页面布局骨架

• 开场封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline 流程图、悬念问题、大引用、Before/After 对比、图文混排。

安装与触发

方式一：一键安装（推荐）

在终端运行：

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

方式二：手动克隆

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

触发关键词

安装后，在 Claude Code 对话中自然提及以下需求即可自动触发：

• “帮我做一份杂志风 PPT”
• “生成一个 horizontal swipe deck”
• “editorial magazine style presentation”
• “electronic ink 风格演讲 slides”

使用工作流

Skill 内置了结构化的 6 步执行流程，Claude 将引导你完成：

1. 需求澄清：通过 6 问清单明确受众、时长、素材、图片偏好、主题色及硬约束。
2. 拷贝模板：从 assets/template.html 复制基础文件，修改 <title> 并选定主题色变量。
3. 填充内容：从 10 种布局骨架中选择，粘贴文案。关键步骤：先进行类名预检与主题节奏规划（Hero 页与非 Hero 页交替）。
4. 自检：对照 references/checklist.md 检查 P0 级问题（如图片裁剪、字体层级、对比度）。
5. 预览：直接在浏览器打开生成的单文件 HTML。
6. 迭代：通过 inline style 微调字号、行高或间距，直至完美。

核心设计原则

• 克制优于炫技：WebGL 背景仅作为点缀，不喧宾夺主。
• 结构优于装饰：依靠字号对比、字体切换和网格留白构建层级，拒绝滥用阴影和浮动卡片。
• 图片是第一公民：图片采用“底部裁剪”策略，保留顶部与左右完整性，确保视觉呼吸感。
• 节奏感：通过 Hero 页（高视觉冲击）与 Content 页（高信息密度）的交替，防止观众视觉疲劳。

✅ 适用与不适用场景