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

Al项目 2026-04-27 15:01:34 AI导航网

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

guizang-ppt-skill的应用场景

  • 线下分享与私享会:适合 15–30 分钟的行业内部讲话或闭门交流,杂志风排版能强化演讲者的个人风格与专业质感。
  • AI 产品发布与 demo day:科技、研究类发布场景推荐”靛蓝瓷”主题,WebGL 流体封面与数据大字报布局契合技术产品的先锋调性。
  • 创意提案与画廊展示:艺术、设计类演讲可选用”沙丘”或”牛皮纸”主题,印刷杂志般的留白与衬线标题营造独立出版物的审美氛围。
  • 人文与非虚构叙事:”森林墨”主题适配自然、可持续、文化类内容,纸白底色与墨色文字提供接近 Kindle 电子纸的沉浸阅读体验。

© 版权声明

相关文章