Generate Polished HTML Slide Decks with Guizang PPT Skill

Most AI-generated slides look generic. Guizang PPT Skill produces single-file HTML decks with two deliberate visual systems — an editorial magazine style and a Swiss international style — plus AI-generated images, multi-platform covers, and a presentation runtime that works by pressing arrow keys in any browser.

Why This Skill Matters

The skill targets a narrow problem: presentations with a strong personal or brand style. Instead of a flat template, it ships a structured workflow with two layout systems:

• Style A (editorial magazine) — 10 layout skeletons for narrative decks: cover, chapter, data display, image grids, pipelines, comparisons
• Style B (Swiss international) — 22 locked layouts (S01-S22) with a 16-column grid, hairline rules, and strict type rules

Both share the same output: a single index.html you open directly in a browser. No build step, no server, no export pipeline. The agent can read, edit, and verify HTML/CSS directly, which is why the format works so well for iterative generation.

Installation

The skill is installed like any Claude Code skill, via the skills CLI:

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

Or manually:

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Verify the install — the directory should contain SKILL.md, assets/, and references/:

ls ~/.claude/skills/guizang-ppt-skill/

Claude Code discovers the skill automatically on the next session. Update it later with git pull inside the skill directory.

Real Workflow: Turn an Article into a Swiss-Style Deck

The skill runs a structured workflow, not a single prompt. Give it a source document and a style request:

Turn this article into a Swiss-style deck, about 8 pages,
with 3 images that match the template image slots.

The agent walks through the flow:

1. Choose the style — Style A magazine or Style B Swiss
2. Clarify requirements — a 7-question checklist: audience, duration, source material, image needs, theme color, hard constraints
3. Copy the template — assets/template.html (Style A) or assets/template-swiss.html (Style B)
4. Fill the content — build a rhythm outline first, then pick layouts from the skeleton reference
5. Optional images — in Codex, ask whether to generate images with GPT-Image 2.0 or GPT-M 2.0
6. Self-check — run the quality checklist (references/checklist.md); Style B also runs the layout validator
7. Preview — open the HTML in a browser
8. Iterate — refine font size, heights, and spacing inline

Style B enforces its layout system strictly. Content pages must use one of the 22 named layouts — the agent cannot invent page structures. A validator script checks for centered titles, experimental layouts, and misplaced images:

node scripts/validate-swiss-deck.mjs path/to/index.html

If Playwright is available, the validator also measures real rendered overflow, bottom whitespace, and title gaps.

Real Workflow: Generate a Cover for Multiple Platforms

The same visual system produces covers, so a deck and its social images stay consistent:

Based on this deck's core message, generate a 21:9 header
image for a WeChat article and a 1:1 share card.

Supported cover formats include WeChat 21:9 headers, 1:1 share cards, Xiaohongshu 3:4, and horizontal video covers.

Pick a Theme

Theme colors come from presets only — the skill does not allow custom hex values, to protect the aesthetic system.

Style A themes:

Style B anchor colors:

If you ask for a Swiss deck without specifying a color, the agent defaults to Klein Blue IKB.

Presentation Runtime

The deck is a single HTML file with a built-in runtime:

• Navigate with arrow keys, scroll wheel, touch swipe, or bottom dots
• Press ESC for an index view
• Press B to switch to low-power static mode — WebGL and canvas animations drop to static backgrounds, useful on weak machines or projectors

Tips

• Say which style you want. "Magazine style" and "Swiss style" produce very different decks. If you say neither, the agent will ask which style fits your content.
• Give a page count. Decks work best at 6-10 pages for a talk. Specify "about 8 pages" and the agent builds a rhythm outline first.
• Use the 7-question flow. Answer the clarification questions honestly — audience and duration change the layout choices.
• Images must match slots. In Style B, images go into reserved data-image-slot areas at 21:9 or 16:10. Ask for images at the template ratio, not arbitrary sizes.
• Run the validator for Swiss decks. validate-swiss-deck.mjs catches layout drift before you present.

When Not to Use This

Skip it for dense tables or data-heavy courseware — the layouts favor narrative and statement pages over information density. It is also a static HTML output, so it is not suited for multi-person collaborative editing; each edit goes through the agent.

Find more creative and developer-tools skills on the SkillMap leaderboard.