guizang-ppt-skillby op7418

Guizang PPT Skill Skill.

A Claude Code and Codex skill for PPT and slide decks: single-file horizontal HTML decks in a magazine or Swiss style, with speaker view and sync.

Presentations
HTML slides

Download OpenDesign View usage guide

op7418/guizang-ppt-skill · SKILL.mdSKILL.md

--- name: guizang-ppt-skill description: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。 --- ## 这个 Skill 做什么 ## 何时使用 ## 工作流 ## 资源文件导览 ## 核心设计原则（哲学） ## 参考作品

Front matter and section headings read from the upstream file on 2026-09-14 · 25,146 characters in full

01 What it does

What the guizang-ppt-skill Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Generates a horizontal-swipe webpage deck as a single self-contained HTML file, with WebGL hero backgrounds, presenter view, audience-screen sync, speaker notes, chapter dividers, big-number data pages and image grids. Two mutually exclusive visual directions: A, Electronic Magazine x E-ink (serif headings, fluid background, warm tones) and B, Swiss International Style (all sans-serif, 12-column grid, grid-dot backgrounds, one high-contrast accent from IKB, lemon yellow, lemon green or safety orange).

Style B body pages must use one of 22 registered layouts, S01-S22, tagged with data-layout. For designers and developers producing talks, launches and demo days who want the deck finished in one pass without a slide tool.

What it produces

A single-file HTML deck with horizontal page turning, delivered as one self-contained document with CSS, WebGL shader, paging JS and presenter mode already wired up.
A SPEAKER_NOTES record generated in the same order as the slides' data-slide-id values, holding purpose, talk, transition and optional staging fields.
The outline, saved as a markdown file next to the deck so later iterations have something to build on.

See the example prompt ↗

How It Works

01
Check Upstream for Updates First
The skill fetches the repo and counts how far HEAD is behind upstream, then asks the user before pulling anything.
02
Align on Seven Questions Before Writing
Style A or B comes first, then audience and setting, duration, source material, images or screenshots, theme palette and hard constraints.
03
Copy the Chosen Template
Copy assets/template.html for style A or assets/template-swiss.html for style B to the deck location and create the sibling images folder.
04
Pre-flight the Class Names
Read the template's style block before writing any slide markup and verify each class used is defined there.
05
Plan Theme Rhythm Before Picking Layouts
Write out every page's theme class (hero dark, hero light, light, dark) and align it before choosing layouts.
06
Self-check Against the Checklist
After generation, open references/checklist.md and walk through it item by item, then run the validators and the browser preview.

02 Find your fit

When to Use the guizang-ppt-skill Skill

Use the guizang-ppt-skill skill in Claude Code or Codex when the job is PPT and slide decks of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Offline sharing sessions, internal industry talks and private salons where a speaker wants a deck with presence on a big screen.
AI product launches and demo days that need a finished, immediately presentable deck.
Web slides that should be finished in one pass without a separate paging or presentation tool.
Content built from large amounts of KPI numbers, roadmaps and processes, where style B's Data Hero layout is the natural fit.

Know the Boundaries

Pages carrying large tables of data or stacked charts are sent to a conventional slide tool instead.
Training courseware, because the information density of this format is too low.
Work that several people need to edit together, since the output is static HTML.
Inventing new body structures beyond the registered 22 layouts, such as P23/P24, Swiss Image Split or Evidence Grid, unless the user explicitly asks for an experimental layout.

What to Provide

A topic, or source materialDocuments, data, an old deck or article links let the skill build on real material; with only a vague idea it helps construct the outline through the narrative-arc template.
The style choice, asked firstStyle A or B decides which template, layouts and themes file gets used, so it is the mandatory first clarification question.
Audience and settingWhether it is an internal industry talk, a commercial launch, a demo day or a private salon sets the language register and the depth of the content.
Images and screenshots, with naming and specsImages go in the images/ folder next to index.html and follow the page-number-plus-semantic naming convention so page order stays readable.
Hard constraintsAnything that must be included, such as specific data points, or must never appear, is collected up front to avoid rework.

03 Inside the skill

Rules the guizang-ppt-skill Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Never Mix the Two Styles
One deck uses one style only. The same class name renders completely differently in the two templates, so layout classes only exist in their matching template file.
Fixed Theme Palettes, No Custom Hex
Only the five hand-tuned presets are allowed, picked from themes.md, and a single deck keeps one theme throughout.
Every Page Declares Its Theme
Each section must carry one of light, dark, hero light or hero dark, and a bare hero is not enough.
Style B Pages Must Declare a Layout ID
Swiss decks run in locked mode: body pages use only the 22 registered layouts and every slide section writes data-layout="Sxx".
Icons Come from Lucide, Not hand-drawn SVG
Use the angular Lucide set via mark-up plus lucide.createIcons() rather than drawing shapes, and avoid emoji; style B additionally keeps all text labels out of SVG and inside HTML grids or captions.
Image Grids Use Fixed Viewport Heights
In style A image grids, set height:Nvh rather than aspect-ratio, which blows the layout out.
Speaker Notes Key on Stable Page IDs
Every section gets a unique, stable data-slide-id and the notes record is generated in the same order. Notes are stored by page ID, never by array index or page number.
Duration Drives Page Count
Fifteen minutes maps to about 10 pages, thirty minutes to about 20, forty-five minutes to 25-30.

04 Put it to work

Install guizang-ppt-skill in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add guizang-ppt-skill to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Generic skills CLI form for SKILL.md; the repository may document its own path.

Give the Skill a First PPT and Slide Decks Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

帮我做一份 30 分钟左右的分享 deck，受众是公司内部的产品和工程同学，风格选 B 瑞士国际主义。素材是这份 [产品发布文档] 和 [几张 dashboard 截图]，截图想保真放进 S22 的主图和 S15 的图片格。主题色用克莱因蓝 IKB，另外需要 20 页左右的页面计划和每页的讲稿备注。

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Run the Swiss deck validator before delivery; it does the static structure check and, where Playwright resolves, measures rendered visible bounds, bottom whitespace, nav safe line and title spacing.

In OpenDesign guizang-ppt-skill is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: op7418
Repository: github.com/op7418/guizang-ppt-skill Branch main
Skill file: SKILL.md Content checksum recorded at verification; commit c91369c
License: AGPL-3.0 From LICENSE.
Repository stars: 26,246 GitHub snapshot taken 2026-09-14 for the whole op7418/guizang-ppt-skill repository. Not a rating or usage count for guizang-ppt-skill.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

The Skill's Own Description

“生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。”

Front-matter description from SKILL.md. The full file is about 25,146 characters. Read the full file on GitHub.

Guizang PPT Skill

Run guizang-ppt-skill on a Real PPT and Slide Decks Task.

The guizang-ppt-skill skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

What the guizang-ppt-skill Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the guizang-ppt-skill Skill

Good Fit

Know the Boundaries

What to Provide

Rules the guizang-ppt-skill Skill Gives Claude Code and Codex

Never Mix the Two Styles

Fixed Theme Palettes, No Custom Hex

Every Page Declares Its Theme

Style B Pages Must Declare a Layout ID

Icons Come from Lucide, Not hand-drawn SVG

Image Grids Use Fixed Viewport Heights

Speaker Notes Key on Stable Page IDs

Duration Drives Page Count