guizang-ppt
生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editorial magazine"、"e-ink presentation"时使用。
Best for Personal-style presentationsWorks with GitHubLow risk
⌘source
- author
@nexu-io- language
- TypeScript
★3.7kstars
455forks
Apr 29, 2026
✦overview.md
Key Features
- ·Single HTML file output
- ·Horizontal swipe navigation
- ·WebGL fluid background
- ·Serif titles + sans-serif body
- ·Lucide icons (no emoji)
- ·Theme interpolation on hero pages
Use Cases
- →Creating a magazine-style web PPT for a product launch
- →Making a horizontal swipe deck for a private sharing session
- →Building a presentation with WebGL fluid backgrounds for a talk
- →Producing a single-file HTML slideshow for a demo day
Best for
- ✓Personal-style presentations
- ✓Industry talks
- ✓AI product launches
Not ideal for
- !Heavy data tables
- !Training materials
- !Collaborative editing
FAQs
name
magazine-web-ppt
description
生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT（单 HTML 文件），含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"horizontal swipe deck"、"editorial magazine"、"e-ink presentation"时使用。
triggers:["ppt","deck","slides","presentation","magazine","杂志","杂志风 PPT","horizontal swipe","horizontal swipe deck","editorial magazine","e-ink presentation","网页 PPT","发布会","分享 PPT"]
od:{"mode":"deck","scenario":"marketing","featured":9,"default_for":"deck","upstream":"https://github.com/op7418/guizang-ppt-skill","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false},"example_prompt":"帮我做一份杂志风的 PPT —— 关于'一人公司 · 被 AI 折叠的组织'，25 分钟分享会，目标受众是设计师 + 创业者。先推荐一个方向（Monocle / WIRED / Kinfolk / Domus / Lab）让我选。"}
Magazine Web Ppt
这个 Skill 做什么
生成一份单文件 HTML的横向翻页 PPT，视觉基调是：
- 电子杂志 + 电子墨水混血风格
- WebGL 流体 / 等高线 / 色散背景（hero 页可见）
- 衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文（Noto Sans SC + Inter）+ 等宽元数据（IBM Plex Mono）
- Lucide 线性图标（不用 emoji）
- 横向左右翻页（键盘 ← →、滚轮、触屏滑动、底部圆点、ESC 索引）
- 主题平滑插值：翻到 hero 页时颜色和 shader 柔顺过渡
这个 skill 的美学不是"商务 PPT"，也不是"消费互联网 UI"——它像 Monocle 杂志贴上了代码后的样子。
何时使用
合适的场景：
- 线下分享 / 行业内部讲话 / 私享会
- AI 新产品发布 / demo day
- 带有强烈个人风格的演讲
- 需要"一次做完，不用翻页工具"的网页版 slides
不合适的场景：
- 大段表格数据、图表叠加（用常规 PPT）
- 培训课件（信息密度不够）
- 需要多人协作编辑（这是静态 HTML）
工作流
Step 0 · 选方向(Direction · 必做的第一步)
在问 6 个澄清问题之前,先让用户在 5 个 magazine 方向里挑一个。每个方向都把"主题色 / 推荐 layout / chrome 风格 / 推荐 slide 数"打包好,挑了方向就回答掉一半澄清问题。
打开 references/styles.md,整段拷过来给用户看 5 个方向的 1-line summary,然后让他选:
1. Monocle Editorial · 国际杂志风 ✦ 默认
2. WIRED Tech · 数据 + 工程
3. Kinfolk Slow · 慢生活 / 人文
4. Domus Architectural · 建筑 / 空间感
5. Lab / Reference · 学术 + 工艺手册
如果用户说"不知道,你推荐"——默认推 Monocle Editorial,因为它失败概率最低。如果用户提到"AI / benchmark / 技术发布"——推 WIRED;"读书 / 私享 / 朋友圈"——推 Kinfolk;"设计 / 建筑 / portfolio"——推 Domus;"研究 / 学术 / 方法论"——推 Lab。
$install
1-click copynpx skills add nexu-io/open-design --skill guizang-pptSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.