Last week, I was invited by Teacher Li Jigang to do a private sharing session interview about AI and organizations.
After the session, I found that the most frequently asked question was: "What was that PPT made with? Can you open-source it?"
I didn't expect the byproduct to become the main product.
So I decided to open-source it, calling it guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skill).
Today's article will talk about what this Skill looks like and why, as someone who has been a designer for ten years, I think it looks good.
What It Looks Like
When you open a PPT generated by the Skill, the first impression is likely: this doesn't look like it was made by AI.
A few intuitive features:
- Cover: Ink-colored background + serif main title, with a faint WebGL fluid flowing slowly behind it.
- Body: The background color switches back to paper white with ink-colored text pressed on top, like an open printed magazine.
- Page Turning: Horizontal left-right sliding, supporting keyboard, scroll wheel, and touch gestures—not the standard PowerPoint "next slide."
- Metadata: Each page has small monospaced text in the four corners, reading things like "Act II · 15 / 25," similar to newspaper page numbers.
I gave this visual tone a name: "Electronic Magazine × E-Ink."
The inspiration comes from the layout traditions of printed magazines like Monocle, The Guardian, and NYT, overlaid with the reading aesthetics of Kindle electronic paper, all tied together with contemporary Web interaction syntax.
What It Can Do
The Skill currently provides 10 page layouts, 5 theme color presets, and a complete set of page-turning interactions.
10 Layouts cover almost all page types used in a 15-30 page sharing session:
Opening cover, chapter breaks, data posters, text-left-image-right, image grids, pipeline processes, suspense questions, large quotes, Before/After comparisons, and mixed text-image layouts.
Each is a piece of HTML skeleton that can be pasted directly; just change the text and images to use it.
5 Themes correspond to different scenarios:
- Ink Classic — Business releases, general default
- Indigo Porcelain — Technology, research, AI conferences
- Forest Ink — Nature, sustainability, humanities
- Kraft Paper — Nostalgia, literature, independent magazines
- Dune — Art, design, creativity
Each theme is just a different set of values for 6 CSS variables. Switching themes only requires replacing those 6 lines of code in the :root.
Users are not allowed to customize hex codes; I'll explain why later.
Page-turning interactions support keyboard left/right arrows, mouse wheel, touch sliding, bottom dot jumps, and the ESC key to open a thumbnail index.
It aims to be as close as possible to the experience of flipping through a real magazine in a browser.
The output is a single-file HTML. Double-click to view in a browser. Sending it to others is just one file, so you don't have to worry about fonts or animations breaking on someone else's computer.
How to Use It
Actually, the true value of this Skill isn't in the template itself, but in the fact that it defines an interface for Human × AI collaboration on PPTs.
Here are three things I think are most worth telling others after using it for a week myself.
Clarify these 6 things with the AI first
Once the Skill is installed, you just need to say "Help me make a magazine-style PPT," and Claude will proactively ask you 6 questions:
- Who is the audience and what is the scenario? (Internal industry / Business release / Private sharing)
- How long is the sharing? (15 mins ≈ 10 pages, 30 mins ≈ 20 pages)
- Is there original material? (Documents, data, old PPTs, article links)
- Are there images, and where are they located?
- Which theme color do you want? (Choose from 5 presets)
- Are there hard constraints? (Must include XX data / Cannot show YY)
You don't have to say it all at once; it will ask one by one. After answering, it will first give you an outline and a theme rhythm table. Align first, then start writing code—this step prevents 80% of my rework.
The biggest pain point of using AI for PPTs before was that it would start writing immediately, and you'd only realize the direction was wrong by page 10. This clarification process moves "alignment" to the very beginning.
How to insert images
Images are placed in an images/ folder at the same level as index.html, with specific naming rules:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- Zero-padded page numbers + English semantics—01 instead of 1, cover instead of fengmian. This makes sorting easy and AI referencing clear.
- Use JPG for photos, PNG for screenshots—Screenshots contain text; PNG keeps them sharp.
- Single image width ≥ 1600px—So it's not blurry on large screen projections.
You just need to tell Claude "Page 3 is a Figma interface screenshot," and it will automatically write it as images/03-figma.png. You just drop the file with the same name into the folder.
The secret to lossless image replacement: Overwrite with the same name
This is the biggest pitfall I've encountered—wanting to change an image after the copy is done, then having to search and replace paths globally, which often breaks the HTML.
The correct way is just one sentence: Overwrite the old image with the new one using the same name, and don't change a single character in the HTML.
Why It Looks Like This
After talking about how to use it, let's talk about why it is the way it is.
Good design isn't mystery; it's a set of decomposable decisions. What I've done is essentially move the layout language accumulated by the magazine industry over a hundred years into HTML.
Three-level division of typography
- Serif → "Opinions". Use serifs for main titles; readers immediately feel "this is a sentence that should be taken seriously."
- Sans-serif → "Information". High density for the body text, easy to read.
- Monospace → "Metadata". Chapter numbers, dates, and page numbers in headers and footers, like magazine footers or code in a terminal.
Readers don't have to think hard; their eyes automatically know whether a sentence is the main text or a footnote.
Color Discipline
Paper white, ink color, plus one accent color is enough.
Pure white is glaring, and pure black is aggressive; the printing industry never does that, and neither does Kindle.
In the Skill's 5 themes, none of the background colors are #FFFFFF, and none of the text colors are #000000.
Each set only exposes 6 CSS variables, and the SKILL.md explicitly states: Users are not allowed to customize hex codes; they must choose one of the five.
The stricter the constraints, the more stable the style. Protecting aesthetics is more important than giving users freedom.
Grid and Rhythm
Fixed grids like 7:5, 6:6, and 8:4 ensure order on a single page.
Hero pages and non-hero pages must alternate to ensure the rhythm of the entire deck.
One page dense, one page sparse—that's the sense of "breathing" you get when flipping through a magazine.
A hard rule is written into the Skill: more than three consecutive pages with the same theme is considered a P0 error.
A PPT without rhythm is just a stack of slides piled into a PDF.
Final Words
None of the rules above were invented by me.
I've been a designer for ten years, doing UI, interaction, and AI effects; these are actually industry common sense.
I just wrote them one by one into SKILL.md and checklist.md so that the AI can execute them for me.
In other words, this Skill is a compressed package of my ten years of aesthetics.
Previously, to make a decent PPT, I had to spend two days manually adjusting grids, choosing font sizes, and picking color values.
Now, I just throw the materials to the AI, it assembles them according to these rules, and I just need to check it.
Because of this, I dare to open-source it.
The rules weren't my exclusive property; Monocle designers used them decades before me. I just copied them into 2026 HTML.
The Skill is already on GitHub: github.com/op7418/guizang-ppt-skill
The README contains an "installation prompt for AI." Copy and paste it to your Claude Code or other AI Agent, and it will complete the installation automatically. Once installed, say "Help me make a magazine-style PPT" to trigger it.
You can also use it within the Bloome Agent, which is currently free:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
If you find this content helpful, please give me a like or share it with friends who need it.
You can also share the PPTs you've made with this Skill in the comments section.
