project
guizang-ppt-skill - 开源网页 PPT生成 Skill，输出 HTML
guizang-ppt-skill 是开源的 Claude Code / Claude Agent Skill，能将提示词转化为单文件 HTML 横向翻页PPT。
guizang-ppt-skill是什么
guizang-ppt-skill 是开源的 Claude Code / Claude Agent Skill，能将提示词转化为单文件 HTML 横向翻页PPT。guizang-ppt-skill 视觉基调为”电子杂志 × 电子墨水”，灵感源自《Monocle》《卫报》等印刷杂志版式与 Kindle 阅读美学，融合 WebGL 流体背景、衬线大标题与严格网格系统，产物为双击可打开的单文件 HTML，无需构建工具或服务器。
guizang-ppt-skill的主要功能
-
10种页面布局：提供开场封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline流程、悬念问题、大引用、Before/After对比、图文混排。
-
5套主题色预设：提供墨水经典（通用）、靛蓝瓷（科技/AI）、森林墨（自然/人文）、牛皮纸（怀旧/文学）、沙丘（艺术/创意）。
-
WebGL 动态背景：封面 hero 页带若隐若现的流体/色散效果，正文页克制留白。
-
杂志级翻页交互：支持键盘左右箭头、鼠标滚轮、触屏滑动、底部圆点跳转、ESC 缩略图索引。
-
三级字体分工：衬线大标题（观点）+ 非衬线正文（信息）+ 等宽元数据（页码/章节号）。
-
单文件 HTML 输出：零构建、零依赖，浏览器直接打开，复制给别人字体动画不乱。
如何使用guizang-ppt-skill
- 安装方式
-
方式一（推荐）：将以下指令发给 Claude Code / Cursor 等 AI Agent：帮我安装
guizang-ppt-skill，执行git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt，验证目录包含SKILL.md、assets/、references/三项。 -
方式二（手动）：命令行执行上述 git clone 指令。
-
- 使用流程
-
触发 Skill：对 Claude 说”帮我做一份杂志风 PPT”或”horizontal swipe deck”等关键词。
-
需求澄清：回答 Claude 提出的6个问题——受众场景、分享时长、原始素材、图片需求、主题色选择、硬约束条件。
-
大纲对齐：Claude 先输出大纲与主题节奏表，确认后再生成代码，拦截80%返工。
-
填充内容：从
references/layouts.md挑选布局骨架粘贴到template.html，替换文案与图片路径。 -
图片管理：图片放
images/文件夹，命名规则为”页号补零+英文语义”（如03-figma.png），同名覆盖即可无损换图。 -
自检与预览：对照
references/checklist.md检查 P0 级问题，浏览器直接打开预览，用 inline style 微调字号/间距。
-
guizang-ppt-skill的关键信息和使用要求
-
运行环境：支持Claude Code / Claude Agent / 任何有 shell 权限的 AI Agent。
-
产物格式：提供单文件 HTML，双击浏览器打开，无需本地服务器。
-
图片规范：照片用 JPG，截图用 PNG；单张宽度 ≥1600px；命名必须补零（01 而非 1）。
-
主题色限制：仅允许从5套预设中选择，不支持自定义 hex 值，保护美学一致性。
-
网格纪律：正文采用严格 7:5 / 6:6 网格；连续3页以上相同主题为 P0 级错误。
-
导出 PDF：浏览器打印功能，每页一张 A4。
guizang-ppt-skill的核心优势
-
设计经验沉淀：作者将10年 UI 设计与 AI 特效经验压入 Skill，每个踩过的坑都写进
checklist.md。 -
人 × AI 协作接口：通过6问清单前置对齐需求，避免 AI 直接生成后方向错误。
-
约束即美学：仅6个 CSS 变量控制主题，禁止自定义颜色，约束越严风格越稳。
-
印刷级排版：纸白底色+墨色文字，非纯白纯黑，参考印刷行业与 Kindle 电子纸标准。
-
零部署成本：支持单文件 HTML 跨平台兼容，发给别人只需复制一个文件。
guizang-ppt-skill的项目地址
- GitHub仓库：https://github.com/op7418/guizang-ppt-skill
guizang-ppt-skill的同类竞品对比
| 对比维度 | guizang-ppt-skill | Tome |
|---|---|---|
| 产品形态 | Claude Code / Agent 开源 Skill | SaaS 网页端应用 |
| 核心定位 | 单文件 HTML 杂志风演示生成器 | AI 叙事驱动型演示工具 |
| 视觉风格 | 电子杂志 × 电子墨水，印刷级衬线排版，克制留白 | 电影感沉浸式布局，全出血大图，未来感视觉流 |
| 生成方式 | 对话式 6 步澄清 → 大纲对齐 → HTML 骨架填充 | 单提示词一键生成完整叙事流，AI 自动构建故事结构 |
| 输出格式 | 单文件 HTML（零构建、零依赖） | Web-native 分享链接，有限支持 PDF 导出 |
| 翻页交互 | 横向左右滑动，键盘/滚轮/触屏/圆点/ESC 缩略图索引 | 异步纵向/横向滚动叙事流，支持嵌入 3D 模型与活网页 |
| 主题控制 | 5 套预设主题（墨水/靛蓝/森林/牛皮纸/沙丘），禁止自定义 hex | AI 动态生成布局，主题自由度较高，但缺乏严格色彩纪律 |
| 图片处理 | 本地 images/ 文件夹管理，同名覆盖无损换图，≥1600px 宽 |
内置 DALL-E 集成 + Unsplash 图库，AI 自动生成配图 |
| 协作功能 | 无（静态单文件，靠文件传递） | 实时协作、评论、观众浏览数据分析 |
| 价格模式 | 完全免费开源（MIT 协议） | 免费版有限额度，Pro $16/月，企业版定制 |
| 离线使用 | 完全支持，双击浏览器即可打开 | 不支持，必须联网访问 |
| 设计哲学 | 约束即美学：10 年设计经验沉淀为不可改动的排版规则 | 创意即自由：AI 辅助叙事，视觉冲击力优先 |
guizang-ppt-skill的应用场景
- 线下分享与私享会：适合 15–30 分钟的行业内部讲话或闭门交流，杂志风排版能强化演讲者的个人风格与专业质感。
- AI 产品发布与 demo day：科技、研究类发布场景推荐”靛蓝瓷”主题，WebGL 流体封面与数据大字报布局契合技术产品的先锋调性。
- 创意提案与画廊展示：艺术、设计类演讲可选用”沙丘”或”牛皮纸”主题，印刷杂志般的留白与衬线标题营造独立出版物的审美氛围。
- 人文与非虚构叙事：”森林墨”主题适配自然、可持续、文化类内容，纸白底色与墨色文字提供接近 Kindle 电子纸的沉浸阅读体验。