← → 翻页 · ESC 索引
Skill Profile · 2026.04
Vol.01
GitHub · op7418

杂志风 PPT

guizang-ppt-skill 的说明书

一个给 Claude Code / Codex 这类 Agent 用的网页演示 Skill: 用单文件 HTML 做出电子杂志与电子墨水混合的横向翻页 deck。

HTML Deck·Editorial System·Agent Workflow
Source · github.com/op7418/guizang-ppt-skill
Cover
Definition · What It Is
02 / 10
一句话定义

不是普通 PPT

它生成的是一个浏览器直接打开的横向翻页演示文件: CSS、WebGL、字体、翻页、动效都封在一个 HTML 里。

Format
1 file
单文件 HTML,不需要构建,也不需要服务器。
Navigation
4 ways
键盘、滚轮、触屏、底部圆点都能翻页。
Aesthetic
M x Ink
电子杂志版式加电子墨水式背景。
README · Single-file HTML horizontal deck
Definition
Visual Language · Magazine System
03 / 10
视觉基调
像一本杂志, 贴上了代码。

大标题用衬线,正文用非衬线,元数据用等宽; WebGL 背景只在 hero 页显露,正文页保持克制。

Serif Title·Sans Body·Mono Metadata
Design Principle · Structure over decoration
Visual
Feature Map · Capabilities
04 / 10
它已经内置了什么

六个成品能力

Typography
3
衬线、非衬线、等宽三层字体系统。
Shader
2
深色与浅色 WebGL 背景平滑切换。
Themes
5
墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘。
Layouts
10
封面、幕封、数据、图文、网格、流程、对比等。
Motion
5
cascade、hero、quote、directional、pipeline。
QA
P0
把真实踩坑沉淀成质量检查清单。
README · Effects and directory structure
Capabilities
Act I · Fit
05 / 10
先判断场景

适合谁?

它适合需要风格、节奏和叙事的分享; 不适合表格密集、多人协作编辑、培训课件式内容。

Fit Check · Use before making the deck
Act I
Use Case · Good vs Bad
06 / 10
边界比功能更重要

该用 / 不该用

Good Fit

分享、发布、私享会

  • 线下演讲或行业内部讲话
  • AI 新产品发布或 demo day
  • 需要强烈个人风格的观点表达
  • 想一次生成、浏览器直接演示
Poor Fit

表格、课件、协作稿

  • 大段表格和复杂图表堆叠
  • 培训课件,需要高信息密度
  • 多人实时协作编辑
  • 必须交付原生 .pptx 的场景
README · Suitable and unsuitable scenarios
Fit Boundary
Workflow · How Agent Uses It
07 / 10
从问题到成片

七步工作流

Production Pipeline
01
Clarify
受众、时长、素材、图片、主题色、硬约束。
02
Template
复制 template.html,替换标题和主题变量。
03
Preflight
确认类名、主题节奏、布局骨架都可用。
04
Compose
从 10 种 layout 中挑选、填文案、排节奏。
Validation Pipeline
05
Image
可选配图,按落位比例生成或替换素材。
06
Checklist
按 P0/P1/P2/P3 清单检查文字、图片、动效。
07
Preview
浏览器打开 index.html,按翻页节奏迭代。
SKILL.md · Workflow
Pipeline
File System · Skill Anatomy
08 / 10
目录就是操作系统

四个核心文件夹

这个 Skill 的价值不在一句 prompt,而在模板、布局、主题和检查清单共同形成的生产系统。

"把踩过的每一个坑,都写进 checklist。"
— Repository README
SKILL.md
工作流、原则、常见错误。
assets/template.html
完整可运行的种子 HTML。
references/layouts.md
10 种页面布局骨架,可直接粘贴。
references/checklist.md
排版、图片、动效、主题节奏的质量门槛。
README · Directory structure
Anatomy
Rules · Quality Gates
09 / 10
它为什么不容易翻车

美学靠规则保护

No Free Hex
5
只允许 5 套主题色,不让随意混搭。
No Random Class
API
类名必须来自 template.html,避免样式丢失。
No Bad Crop
Top
图片只裁底部,顶部和左右不能切掉。
No Flat Rhythm
Mix
hero、light、dark 必须交错,不能全亮页。
checklist.md · P0 and P1 rules
Quality
Closing · The Real Product
10 / 10
最后的判断
它卖的不是模板, 是审美决策。

当 Agent 负责生产页面时,真正稀缺的是边界、节奏、规则和自检; 这个 Skill 把这些东西打包成了一套可复用的演示系统。

Use Skill·Make Deck·Preview in Browser
Guizang PPT Skill · Magazine Web PPT
End