Guizang PPT Skill

# Guizang PPT Skill

Skill that makes single-file HTML slide decks, slide illustrations and platform covers in two visual styles, with a presenter mode for rehearsal. For speakers using Claude Code or Codex.

Made by op7418 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: Guizang PPT Skill teaches an AI agent such as Claude Code or Codex to build presentations as one HTML file that you flip through sideways. It also makes illustrations for slides and covers for several platforms. Rehearsal tools and a presenter mode are built in.

Two visual systems come with it. Style A mixes an electronic magazine look with e-ink and suits stories, opinions and personal talks. Style B follows Swiss international design, with a strict grid, one saturated accent color, right angles and hairlines, and suits facts, products, analysis and methods.

Who it suits: It suits speakers who want a clear personal style, mostly for live talks. The author names offline talks, internal industry speeches, private gatherings, AI product launches and demo days.

```table
Industry | Who uses it | How they use it | Example
Public speaking | Speakers at offline talks and private gatherings | Build a deck with a strong personal style | A talk on a personal view in the magazine style
Technology | Teams at AI product launches and demo days | Build a fact-led deck in the Swiss style | A product deck that states its facts in a grid
Content creation | Writers who publish on WeChat or Xiaohongshu | Make covers in several sizes from one visual style | A 21:9 header image for a WeChat official account
Analysis | People presenting a method or a study | Use the Swiss style with its locked layouts | A methodology deck built on the locked layouts
```

You can skip it if you need large data tables, training courseware or several people editing together, because a static HTML deck does not suit those.

Where to use it:

- Claude Code: the native skill workflow, good for building and revising HTML decks
- Codex: building decks, calling image generation and checking pages in a browser
- Cursor and other local agents that can read and write files and run shell commands
- Kimi work and Cola Skill, which the README lists as other places to use it
- A browser, where you open and present the finished file

```table
Use case | Who | What they get back
Turn a long article into a talk | Writers and speakers | A deck of six to ten pages built from the article's core ideas
Present a method or product analysis | Analysts and product teams | A Swiss-style deck using locked layouts and a 21:9 main image
Share a personal view | Individual speakers | A magazine-style deck with a stronger story feel
Make covers for several platforms | Content creators | 21:9 and 1:1 WeChat covers, 3:4 Xiaohongshu covers and horizontal Video Channel covers from the same content
Rehearse a live talk | Presenters | Speaker notes and planned time for each page, then presenter mode for rehearsal
```

How to set it up: You need:

- Claude Code, Codex or another local agent that can read and write files and run shell commands
- Node.js, if you use the one-line npx route
- Codex, if you want the optional image flow with GPT-Image 2.0 or GPT-M 2.0

1. Run the one-line npx skills add command from the README, naming the skill guizang-ppt-skill. The README calls this the recommended route.
2. Or clone the repository into the folder named guizang-ppt-skill inside ~/.claude/skills, creating that skills folder first if it is missing.
3. Check that SKILL.md, assets and references are in the skill folder.
4. To update later, go into that folder and run git pull.

How to use it: Ask your agent in plain words, in Chinese or English. In Claude Code the skill is found and called automatically in the conversation. Phrases asking for a magazine-style deck, a Swiss-style deck or a horizontal swipe deck set it off.

```text
帮我把这份 Markdown 做成杂志风演讲 PPT。
```

```table
Tool | What it does
Arrow keys, wheel, swipe or bottom dots | Flip pages sideways
ESC | Opens the page index
P | Enters presenter mode, from the button at the bottom right
B | Turns off WebGL and canvas animation for a static fallback
```

Example: You ask for a Swiss-style deck from an article, about seven pages with two or three illustrations. You get back one HTML file that you open in a browser and flip through with the arrow keys.

For newcomers and experts: A skill is a folder of instructions that your AI agent reads. This one teaches it to build slide decks as a single web page. For a first try, hand the agent a short Markdown file, ask for a magazine-style deck, open the HTML file, and press P to see presenter mode.

If you know the field, the choice of HTML is practical. HTML and CSS are text, so the agent can read, edit and check them, and the format is more expressive than Markdown. For the Swiss style, scripts check layouts, image slots, title alignment and unsafe SVG. Where Playwright is available, it also measures overflow, bottom whitespace, the nav safe line and title spacing. On a weak machine, animated backgrounds drop their resolution first and then freeze into a static background.

```flow
Install the skill in your agent
Ask for a deck, image or cover
The agent writes one HTML file
Open it in a browser and present
```

Good to know:

- The license is AGPL-3.0
- It is not suited to large data tables, training courseware or collaborative editing
- An ordinary chatbot without a file system and browser preview is not recommended
- The image flow is optional and runs in Codex
- The WorkBuddy version is still being adapted
- The README is in Chinese, with an English version

```chart
Title: Layouts per style
Style A: 10 layouts
Style B: 22 layouts
```

## On GitHub, 14 November 2026

- Stars: 29,757
- Forks: 2,047
- Watching: 70
- Open issues and pull requests: 52
- Language: HTML
- License: AGPL-3.0
- Topics: ai-agent, claude-code, codex, html-deck, image-generation, ppt, presentation, skill, skills, swiss-design, web-ppt

## Links

- Code: https://github.com/op7418/guizang-ppt-skill
- Releases: https://github.com/op7418/guizang-ppt-skill/releases
- Issues: https://github.com/op7418/guizang-ppt-skill/issues
- Star history: https://www.star-history.com/#op7418/guizang-ppt-skill&Date

## Get the code

```
git clone https://github.com/op7418/guizang-ppt-skill.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  6 KB