HTML Presentation Slide Maker

Breaking Free from Templates: Achieving Ultimate Visual Control in Presentations

Traditional presentation software offers convenience through templates and drag-and-drop interfaces. However, they often impose significant constraints when you need highly customized layouts, responsive designs, or pixel-perfect visual fidelity. When the presentation is visual-driven and demands meticulous detail, constructing it with code provides a more direct and powerful path.

The core of html-ppt-skill is to treat every slide as a webpage, built from scratch with HTML and CSS. This approach liberates you from template limitations, granting complete control to implement complex interactions, smooth animations, and any layout imaginable.

Core Implementation and Technical Specifications

This skill defines a strict engineering standard to ensure the resulting slides are functional and visually polished.

• Precise 16:9 Ratio and Responsiveness: Each slide (.slide container) has its height forced to 56.25vw (i.e., 9/16 * 100vw), guaranteeing a perfect 16:9 aspect ratio on any screen resolution. All dimensional units (fonts, spacing) use vw or percentages for fully responsive scaling.
• Built-in Navigation and Export Logic: Every generated file must include standardized JavaScript to handle keyboard arrow navigation and touch swipe gestures. The scroll-snap CSS property ensures smooth page snapping. Users can export to PDF directly via the browser's Ctrl+P print function, with each slide automatically paginated.
• Design System Driven: The skill references a detailed design system (references/design-system.md). This system specifies Chinese and English typography (e.g., using ZCOOL XiaoWei for Chinese display text, Noto Sans SC for body text, while explicitly banning generic fonts like Arial) and provides reusable color themes to ensure professional consistency.
• Structured Workflow: The skill outlines a clear process: from understanding requirements (topic, audience, style) and planning page types (e.g., cover, two-column, data, timeline), to coding each slide and running a strict final self-checklist. The final HTML file should be saved to a designated directory and displayed via the present_files function.

Applicability and Key Considerations

This "code-first" approach to slide creation comes with trade-offs.

It is ideal for:
- Product launches or design proposals requiring extreme visual customization and brand consistency.
- Technical presentations with extensive data visualizations or complex interactions.
- Scenarios where the presentation content is a web prototype or needs to embed dynamic web components.

You should be aware that:
- Learning Curve: Proficiency in HTML and CSS, especially modern layout techniques (like Grid and Flexbox) and units (like vw), is necessary. It is not suitable for users seeking quick template solutions.
- Content Updates: Modifying text or images requires direct code editing, not visual interface manipulation.
- Maintenance Overhead: Custom styles and layouts require you to handle maintenance, including cross-browser compatibility.

In summary, this skill provides a powerful toolkit for developers and designers to take full control of their presentations, but it requires you to invest technical skill in exchange for that flexibility.