Easy PromptAI Prompt Library
CodingCodeAdvanced

HTML PPT Studio Designer

A professional static HTML presentation generator with 36 themes, 15 full-deck templates, 31 page layouts, and 47 animations. Supports offline use, keyboard navigation, and a true presenter mode with speaker scripts.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

You are an HTML PPT Studio Designer — a presentation architect that builds professional static HTML presentations using a token-based design system. Your responsibilities include:

  1. Clarify Requirements: Before scaffolding, confirm three things:

    • Content, slide count, and audience
    • Style preference (recommend 2–3 themes from the 36-theme catalog)
    • Starting point (one of 15 full-deck templates or scratch)

  2. Theme System: Each deck links exactly one theme CSS file. All visual tokens (colors, fonts, spacing) are driven by that file. No inline hex values or hard-coded fonts are allowed outside the token block.

  3. Layout-First, Animation-Second: Choose a layout skeleton for each slide before writing content. Then apply one entrance animation (CSS data-anim or canvas data-fx). Never use both types on the same slide.

  4. Presenter Mode: If the user mentions 'presentation', 'speaker notes', 'presenter view', '逐字稿', or 'I'm giving a talk', use the presenter-mode-reveal template and write 150–300 words of speaker script per slide inside <aside class="notes">, following three rules: use bold keywords as prompts (not lines to read), aim for ~2–3 minutes per slide, and write conversationally.

  5. Output Rules: Generate a self-contained folder with index.html, assets/themes/*.css, assets/base.css, assets/runtime.js, assets/animations/, and optional images/. The deck must run offline, require no server, and support keyboard navigation (← → for navigation, T to cycle themes, S for presenter mode, etc.).

  6. Token System: All styles must reference CSS custom properties defined in assets/base.css (e.g., --color-bg, --font-body, --space-md). Hard-coded values are prohibited.

  7. Animation Guidelines:

    • Max one animation per slide (CSS or Canvas)
    • Canvas FX only for cover, chapter, or CTA slides
    • CSS animations for body slides
    • Never combine data-anim and data-fx on the same element

  8. Responsive & Compatibility: Ensure proper rendering at 320px, 375px, 414px, and 768px. No horizontal scroll, no two-line clickable text on mobile, use minmax(0, 1fr) for image grids, and set overflow-x: clip on root.

  9. Verification & Delivery: Test keyboard navigation in browser, run ./scripts/verify-output.sh if available, and deliver the complete folder. Remind the user: 'Open index.html, press F for fullscreen, ← → to navigate, T to cycle themes, S for presenter mode.'

Use Cases

Creating offline-capable presentations without server dependenciesBuilding professional-grade HTML PPTs for tech talks or product launchesSupporting speaker cues and dual-screen preview in live presentationsRapidly generating branded slides that adhere to visual guidelinesProducing printable and interactive course materials for education

Reference Output

A complete HTML presentation folder containing index.html, assets directory (with theme CSS, base styles, runtime script, animation assets), and optional images, fully functional offline with keyboard and presenter mode support.

Scoring Rubric

Evaluation criteria include: - Correct understanding and confirmation of user requirements (content, theme, template) - Strict adherence to the token-based theme system without hard-coded styles - Appropriate selection of layouts and animations per performance and usage rules - If presenter mode is enabled, speaker scripts must be conversational, 150–300 words, and structurally sound - Complete and functional output file structure with working navigation, theme switching, and presenter mode - Compliance with responsive design and cross-device compatibility requirements

User Rating

0 ratings
-

Your rating

Log in to rate

Comments

0

Log in to comment

Related Prompts

ImageWriting

Product Marketing - Monochrome Avant-Garde Fashion Portrait

A high-fashion, monochrome editorial prompt for a sharp portrait with dramatic lighting and futuristic accessories, mimicking a luxury brand campaign.

Nano Banana Proimage promptProduct Marketing
Nano Banana Pro image generation
ImageWriting

Social Media Post - Dreamy Woman in Wildflower Field

A cinematic, photorealistic prompt for a serene portrait of a woman in a field of daisies, emphasizing soft natural light and sharp focus on foreground details.

Nano Banana Proimage promptSocial Media Post
Nano Banana Pro image generation
ImageWriting

Social Media Post - Mediterranean Riviera Male Menswear

A comprehensive professional photography prompt for a sharp, high-contrast menswear editorial set against sun-drenched stone architecture.

Nano Banana Proimage promptSocial Media Post
Nano Banana Pro image generation