guizang-ppt-skill - Open-Source Web PPT Generation Skill, Outputs HTML

What is guizang-ppt-skill

guizang-ppt-skill is an open-source Claude Code / Claude Agent Skill that turns prompts into single-file HTML horizontal page-turning PPT. The visual tone of guizang-ppt-skill is "digital magazine × e-ink," inspired by the print magazine layouts of *Monocle*, *The Guardian*, etc., and Kindle reading aesthetics, blending a WebGL fluid background, large serif headlines, and a strict grid system. The output is a single-file HTML that opens on double-click, with no build tools or server required.

Main Features of guizang-ppt-skill

10 Page Layouts: Provides opening cover, section curtain cover, big data poster, text left image right, image grid, Pipeline flow, suspenseful question, big quote, Before/After comparison, and text-image mixed layout.
5 Theme Color Presets: Provides Ink Classic (general), Indigo Porcelain (tech/AI), Forest Ink (nature/humanities), Kraft Paper (nostalgia/literature), and Dune (art/creativity).
WebGL Dynamic Background: The cover hero page has a faintly visible fluid/dispersion effect, while content pages stay restrained with white space.
Magazine-Grade Page-Turning Interaction: Supports keyboard left/right arrows, mouse wheel, touch swipe, bottom dot navigation, and ESC thumbnail index.
Three-Level Font Division of Labor: Serif large headlines (opinion) + sans-serif body (information) + monospace metadata (page numbers/section numbers).
Single-File HTML Output: Zero build, zero dependencies, opens directly in the browser, and fonts/animations won't break when copied to others.
AI Image Generation: Calls Codex built-in GPT-Image-2 models to automatically generate high-quality images matching the content for PPT pages.

How to Use guizang-ppt-skill

Installation Methods
- Method 1 (Recommended): Send the following instruction to an AI Agent such as Claude Code / Cursor:
  
  Help me install guizang-ppt-skill, run git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt, and verify that the directory contains SKILL.md、assets/、references/ these three items.
- Method 2 (Manual): Run the above git clone command in the command line.
Usage Workflow
- Trigger the Skill: Say to Claude "help me make a magazine-style PPT" or keywords such as "horizontal swipe deck."
- Requirement Clarification: Answer the 6 questions Claude asks—audience scenario, presentation duration, raw materials, image requirements, theme color selection, and hard constraints.
- Outline Alignment: Claude first outputs an outline and theme rhythm table, and only generates code after confirmation, intercepting 80% of rework.
- Fill In Content: Pick layout skeletons from references/layouts.md and paste them into template.html, replacing the copy and image paths.
- Image Management: Put images in the images/ folder, with the naming rule "zero-padded page number + English semantics" (e.g., 03-figma.png); overwriting with the same name allows lossless image replacement.
- Self-Check and Preview: Compare against references/checklist.md Check for P0-level issues, open the preview directly in the browser, and fine-tune font size/spacing with inline style.

Key information and usage requirements of guizang-ppt-skill

Runtime environment: Supports Claude Code / Claude Agent / any AI Agent with shell permissions.
Output format: Provides a single-file HTML, opened by double-clicking in the browser, no local server required.
Image specifications: Use JPG for photos and PNG for screenshots; a single image width ≥1600px; naming must be zero-padded (01 rather than 1).
Theme color restrictions: Only selection from 5 presets is allowed; custom hex values are not supported, protecting aesthetic consistency.
Grid discipline: The body uses a strict 7:5 / 6:6 grid; 3 or more consecutive pages with the same theme is a P0-level error.
Export PDF: Browser print function, one A4 page per page.

Core advantages of guizang-ppt-skill

Accumulated design experience: The author compressed 10 years of UI design and AI special effects experience into the Skill, writing every pitfall encountered into checklist.md。
Human × AI collaboration interface: Align requirements upfront through a 6-question checklist to avoid the wrong direction after AI directly generates.
Constraints as aesthetics: Only 6 CSS variables control the theme, custom colors are prohibited; the stricter the constraints, the more stable the style.
Print-grade typography: Paper-white background + ink-colored text, not pure white or pure black, referencing the printing industry and Kindle e-paper standards.
Zero deployment cost: Supports cross-platform compatibility of a single-file HTML; sending it to others only requires copying one file.

Project address of guizang-ppt-skill

GitHub repository：https://github.com/op7418/guizang-ppt-skill

Comparison of guizang-ppt-skill with similar competitors

Comparison dimension	guizang-ppt-skill	Tome
Product form	Claude Code / Agent open-source Skill	SaaS web application
Core positioning	Single-file HTML magazine-style presentation generator	AI narrative-driven presentation tool
Visual style	E-magazine × e-ink, print-grade serif typography, restrained whitespace	Cinematic immersive layout, full-bleed large images, futuristic visual flow
Generation method	Conversational 6-step clarification → outline alignment → HTML skeleton filling	One-click generation of a complete narrative flow with a single prompt, AI automatically builds the story structure
Output format	Single-file HTML (zero build, zero dependencies)	Web-native sharing link, limited support for PDF export
Page-turning interaction	Horizontal left-right sliding, keyboard/wheel/touch/dots/ESC thumbnail index	Asynchronous vertical/horizontal scrolling narrative flow, supports embedding 3D models and live web pages
Theme control	5 preset themes (Ink/Indigo/Forest/Kraft/Dune),custom hex prohibited	AI dynamically generates layouts, higher degree of theme freedom, but lacks strict color discipline
Image processing	Local `images/` folder management, lossless image replacement by overwriting with the same name, ≥1600px width	Built-in DALL-E integration + Unsplash gallery, AI automatically generates accompanying images
Collaboration features	None (static single file, relies on file transfer)	Real-time collaboration, comments, audience browsing data analytics
Pricing model	Completely free and open source (MIT license)	Free version has limited quota, Pro $16/month, enterprise version customized
Offline use	Fully supported, just double-click in a browser to open	Not supported, must be online to access
Design philosophy	Constraint as aesthetics: 10 years of design experience distilled into immutable typographic rules	Creativity as freedom: AI-assisted storytelling, visual impact takes priority

Application scenarios of guizang-ppt-skill

Offline sharing and private gatherings: Suitable for 15–30 minute internal industry talks or closed-door exchanges; the magazine-style layout can reinforce the speaker's personal style and professional polish.
AI product launches and demo day: For tech and research launch scenarios, the “Indigo Porcelain” theme is recommended; the WebGL fluid cover and data poster layout fit the pioneering tone of technical products.
Creative proposals and gallery displays: For art and design talks, the “Dune” or “Kraft Paper” themes can be chosen; the print-magazine-like whitespace and serif titles create an aesthetic atmosphere of an independent publication.
Humanities and nonfiction storytelling: The “Forest Ink” theme suits nature, sustainability, and cultural content; the paper-white background and ink-colored text provide an immersive reading experience close to a Kindle e-paper display.