デザイン&モーション · op7418/guizang-ppt-skill

guizang-ppt

横スクロール型Webスライド(単一HTMLファイル)を生成します。WebGL背景、発表者ツール、聴衆用画面同期、スピーカーノート、チャプター扉ページ、ビッグデータポスター、画像グリッドなどのテンプレートを内蔵しています。2つのスタイルを提供:①「デジタルマガジン×電子インク」(セリフ体+流体背景+ウォームカラー) ②「スイス・スタイル(国際タイポグラフィ様式)」(サンセリフ体+グリッドドットマトリクス+IKB/レモンイエロー/レモングリーン/セーフティオレンジのアクセント)。勉強会・登壇・発表会向けのWebスライドを作成したい時や、「雑誌風スライド」「スイス風スライド」「Swiss Style」「horizontal swipe deck」などのキーワードが出た際に使用します。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author op7418GitHub op7418/guizang-ppt-skill ↗Stars 26343License AGPL-3.0(仓库根 LICENSE 首行为 'GNU AFFERO GENERAL PUBLIC LICENSE / Version 3, 19 November 2007';GitHub API spdx_id=AGPL-3.0。注意 AGPL 对衍生分发有传染性要求,生成物虽不属衍生作品,但二次分发本 skill 需遵守 AGPL)Commit c91369c449
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

コアとなる成果物は2つの「シードテンプレート」です:assets/template.html(マガジン風)および assets/template-swiss.html(スイス風)。CSS、WebGLシェーダー、ページ送りJS、発表者モード、聴衆画面同期はすべて事前組み込み済みで、エージェントはテンプレートをコピーして `<!-- SLIDES_HERE -->` と SPEAKER_NOTES を埋めるだけで完了します。

SKILL.md
两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。
コピー用コマンドは SKILL.md に直接記載:`cp "<SKILL_ROOT>/assets/template.html" "プロジェクト/XXX/ppt/index.html"`。テンプレート単体は 104KB / 164KB で完全にインライン化されており、単一HTMLファイルをダブルクリックするだけで即座にプレゼン可能です。

実装原理の本質は「デザイン判断を仕様ファイルとして前置すること」にあります:5種/4種のテーマカラー、10種/22種のレイアウト、フォントの使い分け、フォントサイズ・ウェイトの階層が references にハードコードされており、エージェントは選択のみ可能で勝手に作成することはできません。

SKILL.md
本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。
スイス風はさらに厳格です:本文スライドは定義済みの22種類のレイアウト S01–S22 から選択し、各ページに `data-layout` を付与する必要があり、勝手に P23/P24 を作成することは禁止されています。これが「モデルに自由にHTMLを書かせる」手法との決定的な違いです。

「クラス名は必ずテンプレートの <style> 内に定義されていること」をコード生成前の必須事前検証(Step 3.0)とし、これがあらゆる生成不具合の根本原因であると位置付けています。

SKILL.md
**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。
両テンプレートそれぞれに「見落としやすい頻出クラス」のチェックリストを提供(スタイルA:約30個、スタイルB:キャンバス/タイポグラフィ/カード/グリッド/タイムライン/チャート/装飾/レイアウト/画像の9グループ)。

Nodeスクリプトによる決定論的バリデーションを用いて、モデルの弱点である「レイアウトの良し悪しを視覚的に判断できない点」を補完:静的検証+任意のPlaywright実レンダリング計測。

SKILL.md
校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。
スクリプト内の実装は scripts/validate-swiss-deck.mjs を参照:`playwright.chromium.launch({ args: ['--use-angle=swiftshader','--enable-unsafe-swiftshader'] })`。M1(overflow / bottom whitespace / nav-safe)および M2(title gap)を用いて定量的な測定値と段階的な修正提案を出力します。

「計測してから修正する」段階的アプローチにより、審美的な問題を機械的な実行閾値へと変換し、モデルが勘に頼ってコンテンツを大幅に削除するのを防ぎます。

SKILL.md
`1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。
同じ段階的基準はスクリプト内の overflowFix(px) 関数(≤40 / ≤90 / ≤160 / それ以上)として実装されており、プロンプトとコードの基準が完全に一致しています。

実行前に上流の更新をチェックし、「自動更新を行わない」ことを明記——git fetch で差分を取得し、ユーザーの確認を得た場合のみ pull を行います。

SKILL.md
不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。
これが本スキルにおける唯一の自己更新パスであり、唯一のハードなネットワーク通信です(security.network_calls を参照)。

発表者モードは単なる飾りではありません:スクリプトが安定したページIDを強制し、ノートとスライドを(配列インデックスではなく)IDベースで紐付け、持ち時間バジェットやランタイムUIの完全性を検証します。

SKILL.md
备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。
検証の実行方法:`node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html`(`--target-minutes 30` のオプション指定が可能)。

リソース読み込みの二重保険+フォールバック:Motion はまずローカルの assets/motion.min.js を試し、失敗時はCDNを利用。両方失敗した場合は `[data-anim]` を強制表示して可読性を担保。スイス風にはRAFとアニメーションを停止するBキーの省電力モードも搭載。

assets/template.html
console.warn('[motion] local + CDN both failed, disabling animations', e1, e2);
ローカルの motion.min.js は jsDelivr のバンドル成果物(ヘッダー記述:'Bundled by jsDelivr using Rollup v2.79.2 and Terser v5.39.0. Original file: /npm/[email protected]/...')であり、難読化コードではなく検証可能です。

2コア機能

012系統のビジュアルによる単一HTMLスライド生成(マガジン風 / スイス国際タイポグラフィ)、横スクロール対応(矢印キー、ホイール、タッチ、ESCキー一覧)
02制約付きのテーマカラー体系(A:5種 / B:4種)、自由なHEXカラー指定を排除し配色の破綻を防止
03レイアウトライブラリ:マガジン風用10種のコピペ骨格、スイス風用22種の定義済みレイアウト S01–S22 + 表紙/裏表紙のアスキーアートバリエーション + S08 地図拡張
04発表者ツール:現在/次のスライドプレビュー、埋め込みグリッド選択、プロンプターメモ、セクション別タイマー、リハーサル記録、自動送り、レーザーポインター/枠線ツール、聴衆画面のブラック/ホワイトアウトおよびフリーズ、切断復帰
05レイアウト品質検証スクリプト:スイス風の定義済みレイアウト/画像枠/SVGテキスト/見出し整列の静的チェック + レンダリング後の M1/M2 計測
06スピーチ原稿検証:ページID欠落/重複、原稿のズレ、フィールド型異常、持ち時間バジェット90%超過、ランタイムUI欠落を検知してブロック
07スクリーンショット美化パイプライン:内蔵の9種類のテーマ背景WebP(style-a 5種 / style-b 4種)により、CleanShot Xライクなプログラマブル背景キャンバス適合を提供
08画像生成オーケストレーション(Codex想定):配置比率に合わせて GPT-M 2.0 向けの短いプロンプトを出力、スライド言語と一致させ、画像内へのヘッダー/フッター/ロゴの混入を禁止

3外部依存関係

KindDependency / Endpoint
cligit(Step 0 检查上游更新;pull 需用户确认)
clinode(跑三个校验脚本;校验器可选解析 Playwright)
packagePlaywright(可选;能解析到时启动 chromium 做渲染测量)
networkGoogle Fonts(模板 <head> 预连接并加载 Playfair Display / Source Serif 4 / IBM Plex Mono / Noto Serif SC / Noto Sans SC)
networkLucide 图标(unpkg,注意是 @latest 浮动版本)
networkMotion One(jsDelivr ESM,仅在本地 assets/motion.min.js 加载失败时作为兜底)
networkMapLibre GL JS + OpenStreetMap 栅格瓦片(仅瑞士风 S08 地图组件页,用户需要地图时才引入)
apiGPT-M 2.0 配图生成(Codex 场景下由宿主 agent 调用,skill 只给提示词与比例规则,无端点硬编码)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: scripts/validate-swiss-deck.mjs —— ユーザー/エージェントによる明示的呼び出し(`node .../validate-swiss-d
  • 网络端点: 外部ネットワークアクセスの宣言: Step 0 自己更新チェック:アップストリーム(github.com/op7418/guizang-ppt-skill)への git fetch、差分 >0 の場合にユーザーへ確認;
  • 本地工作目录: ファイル読み書きおよび成果物出力: 生成フローによるユーザープロジェクト配下への書き出し:`mkdir -p "プロジェクト/XXX/ppt/images"` および `cp "<SKILL_ROOT>/assets/templ
監査ノート: 。評価根拠:① スキルの本体はプロンプト仕様型であり、認証情報の読み取り(リポジトリ全体で api_key/token/secret/.env のヒットなし)、独自の外部エンドポイント、データ送信は一切ありません;② ただし2種類のネットワーク通信が存在します——Step 0 での上流リポジトリに対する git fetch と、ユーザー承認後の git pull --ff-only によるスキル自身の更新(自己更新面);生成されたスライドの実行時に Google Fonts、unpkg(Lucide は @latest 指定)、jsDelivr からスクリプトを取得する通信(サプライチェーン面)、および S08 地図スライドでの MapLibre と OSM タイル取得;③ 3本の Node 検証スクリプトは対象ファイルの読み取りのみを行い、唯一の負荷動作は Playwright が解決可能な場合にローカル Chromium を起動することだけです(スキップ可能)。注意点:オフライン環境や社内網での発表前にはフォントやアイコンへの疎通確認を行うかローカルコピーを使用すること、@latest の変動が気になる場合は生成物側でバージョンを固定するかローカルファイルに変更すること、git pull の前には差分を確認すること(SKILL.md 自体がユーザー確認を必須としています)。これら2つのネットワーク通信を除外すれば、本体の挙動は青色レベルに極めて近いです。

5二重目の独立検証

  • [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 中提示(对闭源二次分发有影响)。

6結論

  • デザイン判断を実行可能な仕様(プリセットテーマ、定義済みレイアウト、テンプレートクラス名のホワイトリスト)として固定化し、モデルの自由記述によるレイアウト崩壊を大幅に抑制
  • 決定論的バリデーションを内蔵:静的ルール + 任意の実レンダリング計測(M1 はみ出し/下部余白/ナビゲーション安全ライン、M2 タイトル間隔)および段階別の修正提案(1-40/40-90/90-160/160+px)を提供
  • 極めて高い発表シーンの実用度:安定したページIDによるノート管理、時間バジェット検証、聴衆画面同期と切断復帰、省電力キー
  • 軽量な成果物:単一HTMLファイルで即座にプレゼン可能、サーバーや専用プレゼンツールが不要
  • 再利用可能な実践知の蓄積:checklist.md にて実運用のイテレーションで得た知見を P0–P3 で整理(画像のはみ出し、見出しの改行、フォントの役割分担、最小フォントサイズ)
  • 最適な用途: 適しているケース:「一目でプロがデザインしたとわかる」Web版スライド資料を必要としている方(業界カンファレンス、デモデイ、製品発表会、年次報告);7つの事前ヒアリングを受け入れ、スタイルとカラーテーマを決めてから着手したいプロセス重視のユーザー;「美的制約を検証可能な仕様に落とし込む方法」を学びたいスキル開発者。ドキュメントが充実しており(README 日英対応、チェックリストの階層化)、導入の学習コストはインストールではなく2つのデザイン体系の理解にあります。
    不向きな用途: 適していないケース:① 複数人での共同編集が必要なスライド作成(成果物は静的HTMLであり、SKILL.md 内にも明記);② 巨大な表や高密度のグラフ重ね合わせ、研修用教材(SKILL.md の「不向きなシーン」に記載);③ 完全なオフライン環境で完全な外観再現が求められる場合(フォントやアイコンはCDNを利用);④ 独自のコーポレートカラーやレイアウトを要求するチーム(5+4種のテーマと22種の定義済みレイアウトがハードな制約);⑤ AGPLライセンスに過敏なプロプライエタリ環境での商用再配布。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload guizang-ppt.tar.gz
    sha256: 81dbd0381b0986e8…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit c91369c449.