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

在AI工具井喷的今天，做一个PPT似乎变得前所未有的简单。但你是否也遇到过这样的困境：生成的演示文稿要么千篇一律，缺乏个性；要么过于花哨，破坏了内容的严肃性？今天要聊的这个开源项目，或许提供了一种独特的解法——它不追求“全自动”，而是致力于打造一种优雅、可控且极具风格的人机协作体验。

这就是

。一个能将你的提示词，转化为单文件HTML横向翻页PPT的Claude Code技能。它的视觉基调，可以概括为“电子杂志 × 电子墨水”，灵感源自《Monocle》、《卫报》这类印刷杂志的经典版式，以及Kindle带来的舒适阅读美学。

最终产物是一个双击即可在浏览器中打开的单文件HTML，无需任何构建工具或服务器环境，真正做到了即开即用。

guizang-ppt-skill的主要功能

这个技能的核心，在于将一套成熟的设计体系封装成了可被AI调用的模块。具体来看，它提供了以下关键能力：

• 10种页面布局
  ：从开场封面、章节幕封，到数据大字报、左文右图、图片网格，再到Pipeline流程、悬念问题、大引用、Before/After对比和图文混排。这几乎覆盖了一场专业演示所需的所有内容类型。

• 5套主题色预设
  ：并非无限自定义，而是精心调配了五套风格鲜明的配色：“墨水经典”（通用）、“靛蓝瓷”（科技/AI）、“森林墨”（自然/人文）、“牛皮纸”（怀旧/文学）和“沙丘”（艺术/创意）。选择即定调。

• 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”等关键词。

  • 需求澄清
    ：接下来，Claude会提出6个关键问题，包括受众场景、分享时长、原始素材、图片需求、主题色选择以及任何硬性约束条件。这一步至关重要，它提前对齐了预期，避免了后续大量返工。

  • 大纲对齐
    ：Claude会先输出一份详细的大纲与主题节奏表，待你确认后，才会开始生成代码。这相当于在动工前先看设计图，拦截了80%的方向性错误。

  • 填充内容
    ：从项目内的 references/layouts.md 文件中挑选合适的布局骨架，粘贴到 template.html 中，然后替换其中的文案和图片路径即可。

  • 图片管理
    ：将所有图片放入 images/ 文件夹。命名需遵循“页号补零+英文语义”的规则，例如 03-figma.png。如果想替换某页图片，只需用同名文件覆盖，即可实现无损换图。

  • 自检与预览
    ：对照 references/checklist.md 检查P0级别的问题（如连续三页布局雷同），然后在浏览器中直接打开HTML文件预览。如需微调，可以使用inline style快速修改字号或间距。

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

为了确保产出质量的一致性，项目设定了一些明确的规则和要求：

• 运行环境
  ：支持Claude Code、Claude Agent或任何具备shell权限的AI Agent。

• 产物格式
  ：最终输出为单文件HTML，双击即可用浏览器打开，无需启动本地服务器。

• 图片规范
  ：建议照片使用JPG格式，截图使用PNG格式；单张图片宽度最好不低于1600像素；文件名中的页号必须补零（如01，而不是1）。

• 主题色限制
  ：只能从预设的5套主题色中选择，不支持自定义十六进制色值。这一约束旨在强制保护整体的美学一致性。

• 网格纪律
  ：正文排版严格遵循7:5或6:6的网格系统；同时，连续3页以上使用相同的布局主题被视为P0级错误，以避免视觉疲劳。

• 导出PDF
  ：可通过浏览器的打印功能，选择“每张纸打印一页”来导出为PDF，适配A4纸。

guizang-ppt-skill的核心优势

那么，在众多AI演示工具中，它的独特价值究竟在哪里？

• 设计经验沉淀
  ：作者将十年的UI设计与AI特效经验浓缩于此。每一个曾踩过的“坑”，都被写进了 checklist.md，确保使用者能避开常见的设计陷阱。

• 人 × AI 协作接口
  ：其核心并非全自动生成，而是通过“6问清单”建立了一个高效的协作接口。让人负责决策和审美，让AI负责执行和填充，各司其职。

• 约束即美学
  ：整个视觉系统仅由6个CSS变量控制，且禁止自定义颜色。这种“不自由”恰恰是风格稳健的基石，避免了因随意调整导致的视觉灾难。

• 印刷级排版
  ：底色并非刺眼的纯白，而是柔和的“纸白”；文字也非纯黑，而是更接近真实墨水的“墨色”。这套色彩标准参考了印刷行业与Kindle电子纸，极大提升了长时间阅读的舒适度。

• 零部署成本
  ：单文件HTML的特性，使其具备了无与伦比的便携性和兼容性。分享演示文稿，就是分享一个文件，彻底摆脱了环境依赖。

guizang-ppt-skill的项目地址

• GitHub仓库
  ：所有的代码、文档和示例均开源于此：https://github.com/op7418/guizang-ppt-skill

guizang-ppt-skill的同类竞品对比

为了更清晰地定位，我们可以将其与市场上流行的AI演示工具（如Tome）进行简要对比：

对比维度	guizang-ppt-skill	Tome
产品形态	Claude Code / Agent 开源 Skill	SaaS 网页端应用
核心定位	单文件 HTML 杂志风演示生成器	AI 叙事驱动型演示工具
视觉风格	电子杂志 × 电子墨水，印刷级衬线排版，克制留白	电影感沉浸式布局，全出血大图，未来感视觉流
生成方式	对话式 6 步澄清 → 大纲对齐 → HTML 骨架填充	单提示词一键生成完整叙事流，AI 自动构建故事结构
输出格式	单文件 HTML（零构建、零依赖）	Web-native 分享链接，有限支持 PDF 导出
翻页交互	横向左右滑动，键盘/滚轮/触屏/圆点/ESC 缩略图索引	异步纵向/横向滚动叙事流，支持嵌入 3D 模型与活网页
主题控制	5 套预设主题， 禁止自定义 hex	AI 动态生成布局，主题自由度较高，但缺乏严格色彩纪律
图片处理	本地 images/ 文件夹管理，同名覆盖无损换图	内置 DALL-E 集成 + Unsplash 图库，AI 自动生成配图
协作功能	无（静态单文件，靠文件传递）	实时协作、评论、观众浏览数据分析
价格模式	完全免费开源（MIT 协议）	免费版有限额度，Pro $16/月，企业版定制
离线使用	完全支持，双击浏览器即可打开	不支持，必须联网访问
设计哲学	约束即美学：10 年设计经验沉淀为不可改动的排版规则	创意即自由：AI 辅助叙事，视觉冲击力优先

可以看出，两者代表了不同的设计哲学和适用场景。

guizang-ppt-skill的应用场景

基于其独特的风格和特性，它在以下场景中尤其能发挥优势：

• 线下分享与私享会
  ：适合15–30分钟的行业内部讲话或闭门交流。其杂志风的排版与质感，能显著强化演讲者的个人风格与专业形象，让内容显得更为深思熟虑。

• AI产品发布与demo day
  ：在科技、研究类发布场景中，推荐使用“靛蓝瓷”主题。WebGL流体封面与数据大字报布局，能完美契合技术产品所需的先锋与专业调性。

• 创意提案与画廊展示
  ：对于艺术、设计类演讲，“沙丘”或“牛皮纸”主题是绝佳选择。印刷杂志般的留白与精致的衬线标题，能营造出独立出版物独有的审美氛围，让创意本身成为焦点。

• 人文与非虚构叙事
  ：讲述自然、可持续、文化类内容时，“森林墨”主题能提供接近Kindle电子纸的沉浸阅读体验。纸白底色与墨色文字的组合，让观众能更专注于故事本身。

总而言之，

更像是一位严谨的“设计协作者”，而非全能的“内容生成者”。它用一套成熟的规则体系，为你兜住了审美的底线，让你能在确定的风格框架内，更自由、更高效地专注于内容的构建与表达。对于那些厌倦了模板化、追求独特质感与可控性的创作者来说，这无疑提供了一条值得尝试的新路径。