I’ve also been researching PPT recently. After watching Jie’s video on using Codex + Image2 to create PPTs, I decided to grab a few popular PPT Skills with high star counts and try them out to see which one works best for me.

1. https://github.com/op7418/guizang-ppt-skill… 14.1K
2. https://github.com/GordenSun/GordenPPTSkill… 1.4K
3. https://github.com/lewislulu/html-ppt-skill… 5.3K
4. https://github.com/hugohe3/ppt-master… 23.2K
5. https://github.com/zarazhangrui/frontend-slides… 19.9K
6. https://github.com/zarazhangrui/beautiful-html-templates… 2.3K

Finally, if you know any other great PPT Skills, please leave a comment – thanks a lot!

op7418/guizang-ppt-skill

Source: https://github.com/op7418/guizang-ppt-skill

Guizang PPT Skill · Web PPT / Visuals / Covers

GitHub stars License Skill HTML Deck Claude Code Codex

Sponsored by ZhenFund Token Grant (https://zhenfund.feishu.cn/share/base/form/shrcn1lAANF659o7EpWnxlR1VOh?sessionid=)

Gold sponsor: 360 Security Lobster

🌏 English version: README.en.md

A web PPT skill designed for Agent environments like Claude Code / Codex, used to generate single-file HTML horizontal flip PPTs, PPT visuals, and multi-platform covers.

Built-in two visual systems:

• Style A: Digital Magazine × Electronic Ink. Like Monocle with code overlaid – suitable for storytelling, opinions, sharing, and personal expression.
• Style B: Swiss International Style. Grid-first, single high-saturation anchor color, right angles, hairline rules, extreme contrast in font sizes – suitable for facts, products, analysis, and methodology.

Developed by Guizang (https://x.com/op7418) through offline talks such as “One-Person Company: Organizations Folded by AI” and “A New Way of Working”. Every pitfall encountered is documented in checklist.md. Sponsorship and support details in SPONSORS.md.

Old Theme · Style A Digital Magazine

Style A Digital Magazine look

New Theme · Style B Swiss International Style

Style B Swiss International Style look

30 seconds to start

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

You can also send this directly to an AI Agent with shell access:

Please install guizang-ppt-skill. Clone https://github.com/op7418/guizang-ppt-skill to ~/.claude/skills/guizang-ppt-skill. After installation, verify that SKILL.md, assets/, and references/ exist.

To update if already installed:

Please update guizang-ppt-skill. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, and tell me the latest commit.

After installation, just tell the Agent:

Create a Swiss-style PPT based on this article, about 7 slides, with 2-3 visuals.

You can also try these requests:

Turn this Markdown into a magazine-style presentation PPT.
Based on the core ideas of this PPT, generate a 21:9 header image for WeChat public account.
Redesign this product screenshot into a 16:10 visual suitable for a PPT.

Sponsorship & Support

The ongoing development of Guizang PPT Skill is supported by 360 Security Lobster as a gold sponsor and by ZhenFund Token Grant (https://zhenfund.feishu.cn/share/base/form/shrcn1lAANF659o7EpWnxlR1VOh?sessionid=). More details in SPONSORS.md.

Features

• 🖋 Dual visual systems: Digital Magazine for storytelling, Swiss for fact delivery
• 📐 Horizontal flip: keyboard ← → / scroll wheel / touch swipe / bottom dots / ESC index
• 🧩 Style A 10 layouts: Cover, Section, Data Billboard, Image+Text, Image Grid, Pipeline, Comparison, etc.
• 🧱 Style B 22 locked page layouts: Cover, Statement, KPI Tower, Loop Diagram, Duo Compare, Image Hero, Closing Manifesto, etc.
• 🎨 Theme presets: 5 e-ink themes for Style A, 4 Swiss high-saturation anchor colors for Style B
• 🖼 Optional Codex image workflow: Use GPT-Image 2.0 / GPT-M 2.0 to generate documentary photos, infographics, flowcharts, system diagrams, UI scenarios, inserted at template ratios
• 📰 Multi-platform covers: Generate covers for WeChat public account 21:9, WeChat share card 1:1, Xiaohongshu 3:4, video channel horizontal, all using the same visual rules
• 📴 Low-performance static mode: Press B to disable WebGL / canvas animations, reverting dynamic content to static backgrounds
• 📄 Single-file HTML: No build step, no server – open directly in a browser

Suitable / Not Suitable

✅ Suitable: Offline talks / internal industry speeches / private salons / AI product launches / demo days / strongly personal-style presentations

❌ Not suitable: Large tables of data / training slides (information density too low) / multi-user collaborative editing (static HTML)

Common Use Cases

Why HTML PPT

• Easier for Agent generation and modification: HTML/CSS is text – Agents can read, modify, and verify directly.
• More expressive than Markdown: Allows fine typography, spatial positioning, animation, interaction, and responsive covers.
• Lighter delivery: Single-file HTML can be opened, presented, sent, and screenshot directly.
• Easier quality control: Swiss style can be validated with scripts for layout, image slots, title alignment, and dangerous SVGs.
• Better for visual content pipelines: Same theme covers PPT, visuals, covers, and screenshot redesign.

Platform Support

Installation

Method 1: One-line command (recommended)

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

Method 2: Send this block directly to AI

Please install the guizang-ppt-skill Claude Code skill. Follow these steps:

1. Ensure ~/.claude/skills/ directory exists (create if not)
2. Run git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Verify: ls ~/.claude/skills/guizang-ppt-skill/ should show SKILL.md, assets/, references/
4. Confirm installation. Then saying “Make a magazine-style PPT” will trigger this skill

Copy and paste this into Claude Code / Cursor / any AI Agent with shell access – it will complete installation automatically.

Method 3: Manual command line

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

Triggering

Once installed, Claude Code will automatically detect and invoke this skill in conversations. Trigger phrases:

• “Make a magazine-style PPT for me”
• “Make a Swiss-style PPT for me”
• “Generate a horizontal swipe deck”
• “Editorial magazine style presentation”
• “Electronic ink style presentation slides”
• “Based on this article, make a WeChat public account 21:9 cover”
• “Based on this PPT, generate a 1:1 share card”

Workflow

The Skill provides a structured workflow that the Agent will guide step by step:

1. Choose style — Style A Digital Magazine or Style B Swiss International Style
2. Clarify requirements — 7-question checklist: style, audience, duration, materials, image/screenshot needs, theme color, hard constraints
3. Copy template — Use assets/template.html for Style A, assets/template-swiss.html for Style B
4. Fill content — First create a theme-rhythm table, then pick, paste, and edit copy from the corresponding layout skeletons
5. Optional visuals — In Codex, ask if user wants to generate visuals with GPT-Image 2.0 / GPT-M 2.0, then insert at page aspect ratio
6. Self-check — Refer to references/checklist.md, must pass all P0 items; for Swiss style, also run layout validator
7. Preview — Open directly in a browser
8. Iterate — Tweak font size/height/spacing via inline style

See SKILL.md for details.

Style B Swiss Style

Swiss style is the new structured theme. It’s not just “a different set of CSS” – it’s a stricter layout system.

• 22 named layouts: Content pages can only use layouts from S01 to S22; no ad-hoc page structures.
• 4 anchor colors: International Klein Blue IKB, Lemon Yellow, Lime Green, Safety Orange
• Grid lock: 16-column grid, right-angled blocks, 1px hairline rules, no shadows, no gradients, no rounded corners
• Chinese font size reduction: All-Chinese titles need one step down to avoid occupying body text and image space
• Image-text bottom alignment: Left-text-right-image / left-image-right-text scenarios should align body block with image bottom, avoiding footer pagination components
• Image slot binding: Images must go into template-reserved data-image-slot; hero images typically generated at 21:9 or 16:10
• Strong validation: Script prevents centered titles, experimental layouts, text inside SVGs, images outside their slots, etc.

Swiss validation command:

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

Codex Image Capabilities

In the Codex environment, after completing the deck draft, you can proactively ask the user if they need generated images. Once confirmed, ask about image type or style. Common types include:

• Documentary photos: Fuji / Leica-style real scenes, adding human expression
• Infographics / Flowcharts / Comparison diagrams / System relationship diagrams: To explain concepts that can’t be captured by real photos
• Screenshot beautification / redesign: Raw screenshots first use built-in background assets with CleanShot X-style canvas adaptation; generate UI scenario images only when reconstruction is needed
• Data billboards / data charts: Turn key numbers into visual assets directly insertable into PPT
• Multi-image collage: For extra-wide image slots, avoid forcing three 16:9 images into three columns

Four key rules when generating images:

• Images are embedded PPT assets – no footer, page number, title, badge, or decorative borders
• Image language follows deck language: Chinese deck infographics use Chinese labels, English deck uses English labels
• Image aspect ratio must match the slot: Swiss hero images commonly 21:9, general hero images commonly 16:9 / 16:10, screenshot redesign commonly 16:10, multi-image grids have uniform height
• When user screenshots need fidelity, first read references/screenshot-framing.md, use assets/screenshot-backgrounds/ built-in backgrounds + programmatic scaling/margin/alignment, don’t redraw screenshot content by default

See references/image-prompts.md for image prompt examples, and references/screenshot-framing.md for screenshot adaptation.

Cover Generation

This Skill can also generate platform covers based on an article or PPT core ideas. Typical formats:

• WeChat public account header: 21:9, main title priority, visual anchor on the right or edge
• WeChat share card: 1:1, shares theme color, keywords, and visual elements with the header
• Xiaohongshu cover / carousel: 3:4, large title priority, uniform font size and visual rhythm across multiple images
• Video channel / horizontal cover: 16:9, suited for title + subtitle + single visual focus

Cover principles are the same as PPT: use only a few keywords, visual weight on the main title, don’t fill with body text.

Example Requests

Copy any of the following to the Agent, along with your article, Markdown, or material file:

Based on this article, generate an 8-slide Swiss-style PPT with 3 images matching the template slot ratios.

Turn this product analysis document into a digital magazine-style PPT, emphasizing opinions and narrative pace.

Based on this PPT's theme, create two covers: a WeChat public account 21:9 header and a 1:1 share card, keeping the same visual style.

Redesign these product screenshots into uniform 16:10 PPT visuals, preserving key information, no footers or titles added.

Directory Structure

guizang-ppt-skill/
├── SKILL.md              ← Main Skill file: workflow, principles, common mistakes
├── README.md             ← This file
├── assets/
│   ├── template.html               ← Style A Digital Magazine template
│   ├── template-swiss.html         ← Style B Swiss International Style template
│   └── screenshot-backgrounds/     ← Built-in backgrounds for screenshot beautification (WebP): style-a 5 sets / style-b 4 sets
├── scripts/
│   └── validate-swiss-deck.mjs     ← Swiss style layout validator
└── references/
    ├── components.md               ← Component manual (fonts, colors, grids, icons, callouts, stats, pipelines)
    ├── layouts.md                  ← 10 page layout skeletons (directly pasteable)
    ├── layouts-swiss.md            ← 22 Swiss-style locked layouts
    ├── swiss-layout-lock.md        ← Swiss fidelity and layout hard constraints
    ├── themes.md                   ← 5 theme presets (must choose, cannot customize)
    ├── themes-swiss.md             ← 4 Swiss-style anchor colors
    ├── image-prompts.md            ← GPT-Image 2.0 / GPT-M 2.0 image types, ratios, and base prompts
    ├── screenshot-framing.md       ← CleanShot X-style screenshot adaptation semantics
    └── checklist.md                ← Quality check list (P0 / P1 / P2 / P3 levels)

Theme Presets

Pick a theme from references/themes.md – custom hex values are not allowed. Protecting aesthetics is more important than giving freedom.

Style A Digital Magazine Themes

To switch themes, replace the 6 variables in the :root{} block at the top of template.html – all other CSS uses var(--...).

Style B Swiss Themes

Pick a theme from references/themes-swiss.md, also no custom hex values.

If the user says “Swiss-style PPT” without specifying a color, default to International Klein Blue IKB.

Core Design Principles

1. Restraint over flashiness – WebGL backgrounds only show on hero pages.
2. Structure over decoration – Information is conveyed through font size + typeface contrast + grid whitespace, not shadows or floating cards.
3. Image as first-class citizen – Images align with body content area, aspect ratio fixed, crop only from bottom, keep top and sides intact.
4. Images are raw materials – Generated images keep only core photo/chart/UI – no PPT footers, titles, or badges drawn into the image.
5. Rhythm comes from hero pages – Alternating hero/non-hero prevents eye fatigue.
6. Low-performance fallback – Press B to switch to static mode; dynamic effects must never be a reading burden.
7. Terminology consistency – “Skills” stays as “Skills”, no mixed Chinese-English translation.
8. Swiss style must follow layouts – Style B prioritizes fidelity to the original 22-page layouts; don’t invent non-existent pages for “variety”.

Visual References

• Monocle (https://monocle.com) magazine layout
• YC Garry Tan “Thin Harness, Fat Skills”
• Massimo Vignelli / Helvetica Forever / Swiss International Style grid system
• Guizang offline presentation PPT series

Roadmap

• Add more real-world examples and openable HTML deck demos
• Expand cover formats to cover more content platforms
• Add more Swiss layout validation rules
• Optimize screenshot redesign and infographic generation workflows
• Prepare curated versions for WorkBuddy and other platforms
• Add more theme packs, but continue restricting custom colors

FAQ

Can I export to PPTX?

The core deliverable is HTML. You can present in browser, take screenshots, or screen record. If you need PPTX, we suggest converting HTML pages as visual drafts, but this is not the current main workflow.

Why no custom colors?

The Skill’s focus is stable output. Free color choice easily breaks the overall style, so only preset themes are allowed.

Can I add my own layouts?

Yes. For Style A, you can extend in references/layouts.md. For Style B, it’s stricter – you need to update template-swiss.html, layouts-swiss.md, swiss-layout-lock.md, and the validator.

Are Codex-generated images required?

No. PPT can be generated without images. The image workflow is only used when photos, infographics, UI scenarios, or covers are needed.

How to update to the latest version?

Re-run the installation command, or execute git pull in the local skill directory.

Contribution

Bugs, layout issues, new layout requests – feel free to open an Issue or PR. When making changes, please:

• Add classes in template.html – layouts.md should not use undefined classes.
• When adding classes to template-swiss.html, update layouts-swiss.md and swiss-layout-lock.md at the same time.
• When adding new Swiss rules, update scripts/validate-swiss-deck.mjs as well.
• Document pitfalls in checklist.md under the appropriate P0/P1/P2/P3 level.
• New theme colors go into themes.md with suitable scenarios.

License

AGPL-3.0 © 2026 op7418 (https://github.com/op7418)