guizang-ppt-skill - an open-source web page PPT generation skill that outputs HTML. - AiBoss

What is guizang-ppt-skill?

guizang-ppt-skill is an open-source Claude Code/Claude Agent Skill that converts prompts into single-file HTML slideshows with horizontal page turning. The visual style of guizang-ppt-skill is "electronic magazine × e-ink," inspired by the layout of print magazines such as *Monocle* and *The Guardian*, as well as Kindle reading aesthetics. It integrates WebGL fluid backgrounds, serif headlines, and a strict grid system, producing a single-file HTML document that can be opened with a double-click, requiring no build tools or server.

The main functions of guizang-ppt-skill

10 Page LayoutsOffers opening cover, chapter cover, data posters, text-on-left-image layout, image grid, pipeline flow, suspenseful questions, large quotes, Before/After comparison, and mixed text and image layout.
5 preset theme colorsOffers inks in the following categories: Classic (General), Indigo Porcelain (Technology/AI), Forest Ink (Nature/Humanities), Kraft Paper (Nostalgia/Literature), and Dune (Art/Creativity).
WebGL Dynamic BackgroundsThe cover hero page features a subtle fluid/dispersion effect, while the body text pages use restrained white space.
Magazine-level page-turning interactionSupports keyboard left and right arrow keys, mouse wheel, touch screen swipe, bottom dot navigation, and ESC thumbnail index.
Three-level font division of laborSerif headings (viewpoints) + sans-serif body text (information) + monospaced metadata (page numbers/chapter numbers).
Single-file HTML outputZero build, zero dependencies, opens directly in the browser, and the font animation remains intact when copied to others.

How to use guizang-ppt-skill

Installation method
- Method 1 (Recommended)Send the following commands to AI agents such as Claude Code/Cursor:
  
  Please install it for me. guizang-ppt-skill,implement git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-pptThe verification directory contains SKILL.md,assets/,references/ Three items.
- Method 2 (Manual)Execute the above git clone command in the command line.
Usage process
- Trigger SkillUse keywords like "make me a magazine-style PPT" or "horizontal swipe deck" to tell Claude.
- Demand ClarificationAnswer the six questions raised by Claude: audience context, sharing duration, original materials, image requirements, theme color selection, and hard constraints.
- Outline alignmentClaude first outputs the outline and theme rhythm table, and only generates the code after confirmation, thus preventing 80% of rework.
- Fill content:from references/layouts.md Select the layout skeleton and paste it to template.htmlReplace the text and image paths.
- Image ManagementImage upload images/ Folders should be named according to the following rule: "page number padded with zeros + English semantic meaning" (e.g., ...). 03-figma.pngYou can replace the image without loss by overwriting the one with the same name.
- Self-check and preview: Comparison references/checklist.md To check for P0 level issues, open the preview directly in your browser and fine-tune the font size and spacing using inline style.

Key information and usage requirements of guizang-ppt-skill

Operating environmentSupports Claude Code / Claude Agent / any AI Agent with shell privileges.
Product formatProvides a single-file HTML file that can be opened in the browser by double-clicking, without requiring a local server.
Image GuidelinesPhotos should be in JPG format, screenshots should be in PNG format; each image should be at least 1600px wide; names must be padded with zeros (01 instead of 1).
Theme color restrictionsOnly 5 presets can be selected, and custom hex values are not supported to protect aesthetic consistency.
Grid DisciplineThe main text uses a strict 7:5/6:6 grid; more than 3 consecutive pages with the same topic are considered P0 level errors.
Export PDFBrowser printing function, one A4 sheet per page.

The core advantages of guizang-ppt-skill

Design experience accumulationThe author has poured 10 years of UI design and AI effects experience into Skill, detailing every pitfall encountered. checklist.md.
Human × AI Collaboration InterfaceBy aligning requirements in advance through a 6-question checklist, we can avoid incorrect direction after AI generates the checklist directly.
Constraint is AestheticsThe theme is controlled by only 6 CSS variables, and custom colors are prohibited. The stricter the constraints, the more stable the style.
Print-quality typographyWhite background with black text, not pure white or pure black, referencing the printing industry and Kindle e-paper standards.
Zero deployment costSupports single-file HTML cross-platform compatibility; sending it to others only requires copying one file.

Project address for guizang-ppt-skill

GitHub repositoryhttps://github.com/op7418/guizang-ppt-skill

Comparison of similar products to guizang-ppt-skill

Comparison Dimensions	guizang-ppt-skill	Tome
Product Form	Claude Code / Agent Open Source Skill	SaaS web application
Core positioning	Single-file HTML magazine-style demo generator	AI-driven narrative presentation tool
Visual style	Electronic magazine × electronic ink, print-grade serif typography, restrained use of white space	A cinematic, immersive layout with full-page images and a futuristic visual flow.
Generation method	6-Step Conversational Clarification → Outline Alignment → HTML Skeleton Filling	A single prompt word can generate a complete narrative flow with a single click, and AI automatically constructs the story structure.
Output format	Single-file HTML (zero build, zero dependencies)	Web-native sharing link, with limited support for PDF export.
Page turning interaction	Swipe horizontally or left/right to access the keyboard/scroll wheel/touchscreen/dot/ESC thumbnail index.	Asynchronous vertical/horizontal scrolling narrative flow, supporting embedded 3D models and live web pages.
Topic Control	5 preset themes (Ink/Indigo/Forest/Kraft Paper/Sand Dune).Custom hex is not allowed	AI dynamically generates layouts, offering a high degree of freedom in theme selection, but lacks strict color discipline.
Image processing	local `images/` Folder management, lossless image replacement with the same name, ≥1600px width	Built-in DALL-E integration + Unsplash gallery, AI automatically generates images.
Collaboration features	None (static single file, transferred via file)	Real-time collaboration, comments, and audience browsing data analysis
pricing model	Completely free and open source (MIT license)	The free version has limited availability; Pro is $16/month; and the enterprise version is customized.
Offline use	Fully supported, simply double-click the browser to open.	Not supported; internet access required.
Design Philosophy	Constraints are Aesthetics: 10 Years of Design Experience Distilled into Unalterable Typography Rules	Creativity is freedom: AI-assisted storytelling, with visual impact as a priority.

Application scenarios of guizang-ppt-skill

Offline sharing and private sessionsSuitable for 15–30 minute industry-specific speeches or closed-door exchanges, the magazine-style layout enhances the speaker's personal style and professionalism.
AI Product Launch and Demo DayFor technology and research-related releases, the "Indigo Porcelain" theme is recommended. The WebGL fluid cover and data-themed layout perfectly match the pioneering tone of the technology products.
Creative proposals and gallery displaysFor art and design presentations, themes such as "sand dunes" or "kraft paper" can be used, with white space and serif headings reminiscent of printed magazines to create an aesthetic atmosphere suitable for independent publications.
Humanistic and non-fictional narrativesThe "Forest Ink" theme is suitable for nature, sustainability, and cultural content. The white background and ink-colored text provide an immersive reading experience similar to Kindle e-paper.