guizang-ppt-skill

guizang-ppt-skill – 开源网页 PPT生成 Skill，输出 HTML

guizang-ppt-skill：将提示词化为杂志风单页 HTML 演示文稿

guizang-ppt-skill 是一款创新的开源 Claude Code / Claude Agent Skill，它能够将简单的文字提示转化为精美的、单文件 HTML 格式的横向翻页演示文稿。这款工具将“电子杂志”的视觉美感与“电子墨水”的阅读体验巧妙融合，汲取了《Monocle》、《卫报》等印刷杂志的版式设计以及 Kindle 阅读器的极简美学。通过运用 WebGL 流体背景、醒目的衬线大标题以及严谨的网格系统，guizang-ppt-skill 最终生成的是一个无需任何构建工具或服务器即可直接在浏览器中打开的 HTML 文件。

核心功能亮点

丰富的页面布局选择：提供多达10种精心设计的页面布局，涵盖开场封面、章节分隔、数据可视化、图文并茂、流程展示、悬念设置、名言引用、前后对比等多种场景。
五套预设主题色彩：内置五种风格迥异的主题色彩方案，包括适用于通用场景的“墨水经典”、科技前沿的“靛蓝瓷”、自然人文的“森林墨”、复古怀旧的“牛皮纸”以及创意艺术的“沙丘”，满足不同内容需求。
动感的 WebGL 背景：封面页采用若隐若现的流体或色散效果，为演示文稿增添科技感与视觉吸引力；正文页面则保持克制的留白，突出内容本身。
杂志级翻页体验：支持多种交互方式，包括键盘左右箭头、鼠标滚轮、触屏滑动、底部导航圆点跳转，以及通过 ESC 键快速预览和跳转到缩略图索引。
层次分明的字体体系：采用字体划分，衬线体用于强调观点的大标题，无衬线体用于呈现信息清晰的正文，等宽字体则用于显示页码或章节号等元数据。
便捷的单文件 HTML 输出：生成的演示文稿为单一 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”等关键词来触发该 Skill。
- 需求细化：积极回答 Claude 提出的六个关键问题，包括目标受众、分享时长、原始素材、图片需求、主题色偏好以及任何特殊限制条件。
- 确认大纲与节奏：Claude 会首先生成演示文稿的大纲和主题节奏表，用户确认无误后再进行代码生成，从而大大减少后期修改的几率。
- 填充内容与布局：从 references/layouts.md 文件中选择合适的页面布局骨架，将其粘贴到 template.html 文件中，然后替换其中的文案和图片路径。
- 图片管理规范：所有图片应放置在 images/ 文件夹内，并遵循“页码补零+英文描述”的命名规则（例如：03-figma.png），同一文件名的图片可直接覆盖进行更新。
- 自我检查与预览：对照 references/checklist.md 文件检查关键问题，然后在浏览器中打开生成的 HTML 文件进行预览。必要时，可使用内联样式微调字号或间距。

guizang-ppt-skill 的关键信息与使用要求

运行环境要求：兼容 Claude Code、Claude Agent 或任何支持 shell 操作的 AI Agent。
输出文件格式：生成单文件 HTML，可直接在浏览器中打开，无需本地服务器环境。
图片素材规范：照片格式推荐 JPG，截图格式推荐 PNG；单张图片宽度需大于等于 1600px；文件名必须使用补零格式（如 01 而非 1）。
主题色限制：仅支持预设的五套主题色，不支持自定义十六进制颜色值，以确保整体视觉风格的一致性。
网格系统约束：正文内容遵循严格的 7:5 或 6:6 网格布局；连续超过三页使用相同主题属于 P0 级错误。
PDF 导出方式：可通过浏览器内置的打印功能导出为 PDF，每页一张 A4 尺寸。

guizang-ppt-skill 的核心优势剖析

设计经验的深度沉淀：作者将长达十年的 UI 设计与 AI 应用经验融入 Skill 中，并将实践中遇到的各种问题整理成 checklist.md，为用户提供宝贵的参考。
人性化的人机协作接口：通过预先的六问清单，确保在 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 产品发布与技术展示：在科技或研究领域的发布会上，选用“靛蓝瓷”主题，配合 WebGL 流体封面和数据布局，能够精准传达技术产品的先锋气质。
创意提案与艺术展览：面向艺术或设计领域的演讲，可选择“沙丘”或“牛皮纸”主题，其借鉴印刷杂志的留白和衬线标题设计，能营造出出版物的独特审美韵味。
人文叙事与深度报道：对于自然、可持续发展或文化类内容，“森林墨”主题提供了接近 Kindle 电子纸的沉浸式阅读体验，纸白底色与墨色文字的搭配，让内容更加引人入胜。

阅读原文