Design & Motion · op7418/guizang-ppt-skill
guizang-ppt
Generates horizontal swipe web-based presentation decks (single HTML file), featuring WebGL backgrounds, presenter view, audience screen synchronization, speaker notes, section dividers, big-stat callouts, and image grid templates. Offers two design styles: ① "Digital Magazine × E-ink" (serif + fluid background + warm tones) ② "Swiss International Style" (sans-serif + grid dot-matrix + IKB/lemon yellow/lemon green/safety orange accents). Use when users need to create web decks for sharing, talks, or product launches, or mention "magazine-style PPT", "Swiss style PPT", "Swiss Style", or "horizontal swipe deck".
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The core deliverables are two "seed templates": assets/template.html (magazine style) and assets/template-swiss.html (Swiss style). CSS, WebGL shaders, transition JS, presenter mode, and audience screen sync are fully pre-integrated; the agent only needs to copy the template and populate `<!-- SLIDES_HERE -->` and SPEAKER_NOTES.
SKILL.md
两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。
Copy commands are directly specified in SKILL.md: `cp "<SKILL_ROOT>/assets/template.html" "Project/XXX/ppt/index.html"`. Templates are 104KB / 164KB, fully inlined, allowing the single-file HTML to be presented immediately by double-clicking.
The implementation principle fundamentally shifts design decisions upfront into specifications: 5/4 curated color themes, 10/22 layout types, typography assignments, and type scale/weight ladders are hardcoded in references—the agent can only select, not invent.
SKILL.md
本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。
The Swiss style is even stricter: content slides must strictly use the original 22 layouts S01–S22 with `data-layout` specified per slide, forbidding improvised P23/P24. This is the key constraint distinguishing it from uncontrolled model-generated HTML.
Enforces a mandatory pre-check before coding (Step 3.0) verifying that 'class names must be defined in the template <style>', identifying this as the root cause of generation bugs.
SKILL.md
**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。
Provides corresponding lists of 'frequently missed classes' for both templates (approx. 30 classes for Style A; 9 categorized groups for Style B: canvas, typography, cards, grids, timelines, charts, decorations, layouts, images).
Employs Node scripts for deterministic validation to compensate for the model's inability to visually perceive layout quality: static checks + optional real Playwright rendering measurements.
SKILL.md
校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。
Script implementation in scripts/validate-swiss-deck.mjs: `playwright.chromium.launch({ args: ['--use-angle=swiftshader','--enable-unsafe-swiftshader'] })`, outputting quantified metrics and tiered fix suggestions via M1 (overflow / bottom whitespace / nav-safe) and M2 (title gap).
The 'measure first, then adjust' tiered correction turns aesthetic issues into actionable thresholds, preventing models from blindly gutting content based on intuition.
SKILL.md
`1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。
The identical tier system is implemented in the script via the overflowFix(px) function (≤40 / ≤90 / ≤160 / more), maintaining parity between prompts and code.
Checks for upstream updates before running and explicitly avoids auto-updating—requires git fetch to check differences and only pulls after user confirmation.
SKILL.md
不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。
This is the skill's sole self-update path and its only hard network action (see also security.network_calls).
Presenter mode is not cosmetic: scripts enforce stable slide IDs, align notes with slides by ID (rather than array indices), and validate time budgets along with runtime control completeness.
SKILL.md
备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。
Validation entrypoint: `node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html` (supports `--target-minutes 30`).
Dual-fallback asset loading: Motion attempts local assets/motion.min.js first before falling back to CDN; if both fail, it forces `[data-anim]` visible to ensure readability; Swiss style also provides a B-key low-power mode to halt RAF and animations.
assets/template.html
console.warn('[motion] local + CDN both failed, disabling animations', e1, e2);
Local motion.min.js is a jsDelivr bundle output (header: 'Bundled by jsDelivr using Rollup v2.79.2 and Terser v5.39.0. Original file: /npm/motion@11.11.17/...'), unminified/unobfuscated, readable, and verifiable.
2Core Capabilities
01Generates single-file HTML slide decks across two visual systems (Magazine / Swiss International), with horizontal swiping (arrow keys, scroll wheel, touch, ESC overview)
02Constrained theme color palette (5 for A / 4 for B), rejecting arbitrary hex values to prevent visual degradation
03Layout library: 10 copy-paste skeletons for Magazine style; 22 registered layouts S01–S22 + cover/outro ASCII variants + S08 map extension for Swiss style
04Presenter mode: current/next slide preview, embedded grid slide picker, speaker cue cards, section timers, rehearsal logs, auto-advance, laser pointer/spotlight, audience black/whiteout & freeze, reconnect recovery
05Layout quality validation scripts: Swiss registered layout/image slot/SVG text/title alignment static checks + post-render M1/M2 measurements
06Speaker notes validation: catches missing/duplicate page IDs, misaligned notes, invalid field types, time budget exceeding 90%, and missing runtime controls
07Screenshot beautification pipeline: 9 built-in theme background WebP images (5 for style-a / 4 for style-b) with CleanShot X-style programmatic background canvas fitting
08Image generation orchestration (Codex scenarios): outputs concise prompts for GPT-M 2.0 based on placement aspect ratio, matching deck language, excluding slide headers/footers/logos from images
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | git（Step 0 检查上游更新；pull 需用户确认） |
| cli | node（跑三个校验脚本；校验器可选解析 Playwright） |
| package | Playwright（可选；能解析到时启动 chromium 做渲染测量） |
| network | Google Fonts（模板 <head> 预连接并加载 Playfair Display / Source Serif 4 / IBM Plex Mono / Noto Serif SC / Noto Sans SC） |
| network | Lucide 图标（unpkg，注意是 @latest 浮动版本） |
| network | Motion One（jsDelivr ESM，仅在本地 assets/motion.min.js 加载失败时作为兜底） |
| network | MapLibre GL JS + OpenStreetMap 栅格瓦片（仅瑞士风 S08 地图组件页，用户需要地图时才引入） |
| api | GPT-M 2.0 配图生成（Codex 场景下由宿主 agent 调用，skill 只给提示词与比例规则，无端点硬编码） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Executes local scripts or commands: scripts/validate-swiss-deck.mjs — explicitly called by user/agent (`node .../validate-swiss-d
- 网络端点: Declares external network access: Step 0 self-update check: git fetch upstream (github.com/op7418/guizang-ppt-skill), prompts user if diff > 0;
- 本地工作目录: File I/O and artifact output: Generation workflow writes to user project directory: `mkdir -p "Project/XXX/ppt/images"` and `cp "<SKILL_ROOT>/assets/templ
Audit Notes: . Rating rationale: ① The core is a prompt-specification skill with no credential reading (zero occurrences of api_key/token/secret/.env across the repository), no custom backend endpoints, and no telemetry data collection; ② However, two distinct network behaviors exist—Step 0 runs git fetch against the upstream repo and rewrites the skill via git pull --ff-only after user approval (self-updating surface); the generated slide deck dynamically fetches scripts at runtime from Google Fonts, unpkg (Lucide floating on @latest), and jsDelivr (supply chain surface), and the S08 map slide loads MapLibre and OSM tiles; ③ The three Node validation scripts only perform read operations on target files, with the only heavy-resource action being launching local chromium when Playwright is resolvable (skippable). Key reminders: pre-verify font/icon reachability or use local bundles prior to offline/intranet presentations; pin versions or replace with local files if concerned about @latest floating versions; inspect diffs before executing git pull (SKILL.md explicitly requires asking the user). Excluding these two network surfaces, skill behavior aligns with the blue tier.
5Second-Pass Verification
- [ok] skill.path 定位（任务表标『待定位』） — 仓库根即有 SKILL.md（git ls-tree 根层含 SKILL.md），assets/references/scripts 均位于根下同级，故 path="."；全仓 SKILL.md 计数为 1，不存在第二份。
- [ok] 三个校验脚本『只读』结论的反例搜索 — 全仓 grep 未发现 writeFileSync/createWriteStream/fs.write；validate-swiss-deck.mjs 顶部为 readFileSync + createRequire + pathToFileURL，Playwright 段为 launch/newContext/close；check-presenter-runtime-sync.mjs 为 readFileSync + 字符串比对。脚本输出走 console 与 process.exit(2)。
- [ok] 『无凭证读取』是否漏网 — api_key/API_KEY/token/secret/.env/os.environ/process.env/keychain 全仓扫描零命中。配图走 GPT-M 2.0（宿主能力）、更新走 git（用户既有凭证），skill 文本未要求读取任何密钥；MapLibre OSM 瓦片为公开无 key 服务。
- [ok] Step 0 自更新：是否会自动 pull — SKILL.md 原文 '有更新时先问用户是否要更新,用户确认后再执行更新' + '不要自动更新。用户拒绝时继续使用当前版本'，且网络不可用/无 upstream/非 git 仓库时明确跳过继续流程。属用户确认型动作，非静默自更新。
- [discrepancy] CDN 依赖是否被低估（@latest 浮动版本） — 第一遍只记『字体/图标 CDN』；第二遍逐个 grep 模板发现 Lucide 走的是 `unpkg.com/lucide@latest`（浮动主版本，未 pin），而 Motion 是 pin 到 11.11.17 且有本地副本。已在 external_deps 与 security.reason 中显式点名该浮动风险（供应链面），并保留其余 CDN 条目。
- [ok] 『离线可用』宣称是否成立 — Motion 有本地 assets/motion.min.js 且失败时强制 reveal `[data-anim]`（template.html 内可见 console.warn 兜底分支）；瑞士风有 body.low-power 静态模式（CSS 里 display:none 掉 canvas.bg/ascii-bg、animation/transition: none）。但字体与 Lucide 图标仍走外网——离线时字体退回系统栈/图标缺失，属『内容可读但外观退化』，SKILL.md 未把完全离线列为承诺，故不算夸大。
- [ok] 『S01–S22 版式锁定』是否真有约束力 — SKILL.md 要求每个 <section> 写 data-layout="Sxx" 并明示无 data-layout 视为未登记版式；validate-swiss-deck.mjs 以 --allow-experimental 开关区分实验版式；22 个 S 编号在 SKILL.md 表格中完整列出（S01 Index Cover … S22 Image Hero），与 layouts-swiss.md 骨架对应。
- [ok] license 档位核对 — 第一遍未写许可；第二遍读 LICENSE 首行确认为 GNU AGPL-3.0 文本，与 gh api 的 spdx_id=AGPL-3.0 一致，已在 meta.license 与 traits 中提示（对闭源二次分发有影响）。
6Verdict & Scenarios
Best for: Best for: Users who need web-based presentation materials that look instantly professional (tech talks, demo days, product launches, annual reviews); workflow-oriented users willing to complete 7 clarification questions and finalize style/themes before generation; and skill authors looking to learn how to translate aesthetic constraints into verifiable specifications. Complete documentation provided (bilingual README, tiered checklist); learning curve lies in understanding the two visual paradigms rather than installation.
Not for: Not suitable for: ① Multi-user collaborative slide editing scenarios (output is static HTML, as stated in SKILL.md); ② Heavy tabular data, dense chart overlays, or training courseware (noted under 'Unsuitable Scenarios' in SKILL.md); ③ Scenarios requiring fully offline fidelity—fonts and icons rely on CDNs; ④ Teams requiring custom brand palettes/layouts—the 5+4 themes and 22 registered layouts are strict constraints; ⑤ Closed-source commercial redistribution sensitive to the AGPL license.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload guizang-ppt.tar.gz
sha256:
Option B · Copy Guide for Agent81dbd0381b0986e8…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit c91369c449.