Magazine Web PPT Generator

The Problem It Solves

When presenting personal ideas, product concepts, or technical insights, traditional tools like PowerPoint often produce slides that are visually generic and lack modern interactive experiences. Speakers desire presentations that embody unique aesthetics and professional interactivity without spending excessive time on design or relying on complex online tools.

This skill addresses the core need: how to quickly generate a single-file HTML presentation that runs directly in a browser, features professional visual styles, and offers smooth navigation. It is specifically designed for offline sharing, product launches, or internal talks where the goal is to 'build once, present everywhere' without needing separate slide-show software.

Core Capabilities & Key Steps

Essentially, this skill acts as a PPT generator, transforming content into interactive web slides using high-fidelity templates and strict style guidelines. Its workflow revolves around several key steps:

• Style-First & Requirements Clarification: Before any implementation, you must choose between two mutually exclusive visual themes:

  • Style A (Magazine × E-ink): Features WebGL fluid backgrounds, serif titles (Noto Serif SC), and sans-serif body text. Ideal for人文分享, industry observations, or any scenario requiring a 'magazine feel'.
  • Style B (Swiss Internationalism): Uses minimal WebGL grid backgrounds, sans-serif fonts (Inter, Helvetica), and high-contrast accent colors (e.g., Klein Blue). Suited for tech products, data reports, and engineering presentations.
    This choice determines which set of templates, layouts, and theme files to use.

• Template-Based & Specification-Driven Construction: The skill provides complete, runnable HTML templates (template.html or template-swiss.html) with integrated CSS, WebGL shaders, navigation JS, and font CDN links. You replace content placeholders (e.g., <!-- Slide 1 -->). All visual elements—titles, stat cards, image grids—must use specific class names defined in the template's <style> block (e.g., .h-hero, .stat-card for Style A; .kpi-hero, .grid-12 for Style B). This prevents style conflicts but requires a mandatory pre-flight check to ensure every used class exists in the current template.

• Strict Theme Color & Layout Control: To ensure aesthetic consistency, the skill forbids custom colors. You can only choose one from 5 preset themes (Style A) or 4 (Style B) and apply it to the entire document. Layouts must be selected from predefined skeletons in layouts.md (e.g., 'Opening Cover', 'Data Billboard', 'S06 KPI Tower'). Inventing new structures is prohibited.

Use Cases & Critical Notes

This skill is not a universal tool; its design has clear boundaries. Adhere to these principles:

• Appropriate Scenarios:

  • Offline presentations, private talks, or demo days requiring strong personal style or design flair.
  • AI product launches needing a clean, modern visual package.
  • Shows relying on single images or a few key data points rather than complex charts.

• Inappropriate Scenarios:

  • Data reports with extensive tables or complex chart overlays (conventional PPT is better).
  • High-information-density training materials.
  • Documents requiring real-time multi-person collaboration.

• Key Constraints:

  • Styles A and B cannot be mixed; their class names and layout rules are entirely different.
  • Every content slide must have a designated light or dark theme class to plan visual rhythm and avoid monotony.
  • Before generating the final HTML, you must run a style pre-flight check to ensure every CSS class used is defined in the current template's <style> block. Missing classes will cause layout breakdown.