Magazine Web PPT Generator

The Problem It Solves

Traditional presentation tools like PowerPoint generate .pptx files that require specific software, making them difficult to embed or share directly on the web. This is especially problematic when a platform-agnostic, plugin-free solution is needed. Additionally, many online tools lack highly customizable visual styles for creating magazine-style or information-driven slides quickly.

How the Skill Works

The html-ppt生成 skill addresses these issues by generating a single-file HTML that integrates CSS, WebGL shaders, page-flipping JavaScript, and CDN fonts/icons, running without external dependencies. Core capabilities include:

• Two Preset Visual Styles:
• Style A · Electronic Magazine: Uses WebGL fluid backgrounds, serif fonts (e.g., Noto Serif SC), and monospaced metadata, ideal for humanities sharing.
• Style B · Swiss International: Features WebGL grid backgrounds, sans-serif fonts (e.g., Inter), and high-contrast accent colors, suitable for tech data reporting.
• Key Workflow:
  1. Requirement Clarification: Aligns style, audience, and assets through 7 questions.
  2. Template Copy & Pre-flight Check: Selects the corresponding template (template.html or template-swiss.html) and verifies that class names (e.g., h-hero, kpi-hero) are defined in the template.
  3. Content Population: Chooses layout skeletons from layouts.md or layouts-swiss.md (e.g., data banners, image-text splits) and modifies copy.
  4. Theme Color Setup: Selects one of 5 preset themes (e.g., Ink Classic, Indigo Porcelain) and replaces :root variables in the template.
• Additional Capabilities: Supports Lucide icons, Motion One entrance animations, and optional GPT-M 2.0 image generation (Codex environment only).

Applicable Boundaries and Notes

Suitable Scenarios:
- Offline sharing, AI product launches, or strongly personalized talks.
- When an editable .pptx file or web-based slides are needed.

Unsuitable Scenarios:
- Large tables or complex chart overlays (regular PPT recommended).
- Training materials (insufficient information density).
- Multi-user collaborative editing (this is static HTML).

Key Notes:
- No Style Mixing: A deck must choose only Style A or B, not both.
- Class Name Pre-flight: Before populating content, ensure used classes (e.g., .grid-2-7-5, .kpi-hero) are defined in the template's <style> block to avoid fallback styles.
- Layout Constraints: Style B must use the original 22 layouts (e.g., S01–S22); no ad-hoc structures allowed.
- Image Ratio Standards: Images must follow standard ratios (e.g., 21:9, 16:10) and avoid overlapping with page-flipping components.
- Theme Rhythm Planning: Each page must specify a theme class (e.g., hero dark), avoiding consecutive same-theme pages to prevent visual fatigue.