HTML slide prompt

Product introduction prompt

Explain the problem, show how your product works, and make the next step clear.

By SlideBeaverAI chat or coding agentUpdated October 6, 2026

Build your brief

Use this when the audience needs to understand your product before it can evaluate it. Lead with a specific job and the friction around it, then show the workflow and a next step. A mock interface should illustrate the product idea; it should not be mistaken for evidence of features your product already ships.

Product demosLaunch introductionsCustomer walkthroughs

What to provide

[PRODUCT]: Product name and a plain-language descriptionExample: Fieldnotes, a fictional meeting-to-action tool
[AUDIENCE]: The customer and the task they need to finishExample: Small teams turning meetings into assigned actions
[FACTS]: Existing capabilities and permitted screenshotsExample: Capture notes, identify actions, assign owners
[NEXT_STEP]: One action for the audienceExample: Try it with your next team meeting
[LANGUAGE]: Language for the presentationExample: English

Output: A five-slide HTML product introduction, ready to save as one file.

Ready-to-copy prompt

Create a five-slide product introduction for [PRODUCT], aimed at [AUDIENCE].
Use only these product facts and assets:
[FACTS]
Desired next step: [NEXT_STEP].

Slide 1: state the customer's job and the product's promise in one sentence.
Slide 2: explain one concrete problem with the current workflow.
Slide 3: show how the product works in three steps.
Slide 4: connect up to three verified capabilities to customer benefits. Use a supplied screenshot if available; otherwise label any interface illustration as a concept.
Slide 5: recap the value and ask for the specified next step.
Choose warm cream, a restrained rust accent, clear typography, and simple interface-like cards. Avoid unsupported comparisons, invented testimonials, and sales metrics. Keep product names and calls to action consistent.

Deliver one complete HTML file with inline CSS and no external fonts, stylesheets, scripts, or required network requests. Use semantic text and CSS shapes; do not rasterize ordinary text. Use system fonts.
Each slide must be a top-level <section class="slide" data-slide="true"> with a fixed 1920px by 1080px canvas, border-box sizing, and readable content. Keep every slide visible in the document. Do not depend on JavaScript, a custom element, an animation, or an active class to reveal content.
Use a consistent type scale, generous margins, and strong contrast. Keep one main idea per slide. If text does not fit, shorten it or split the slide rather than hiding it. Check all slide boundaries and spelling.
Use only the facts supplied in my brief. Label missing figures [NEEDS DATA]; do not invent customer quotes, results, sources, or product capabilities. Write in [LANGUAGE]. Return the complete HTML, ready to save as presentation.html.

Replace the bracketed fields with your own brief and source material.

From prompt to presentation

01Prepare the brief
Replace every bracketed field. Paste your actual notes, facts, and desired slide count; include sources for any numbers you want to show.
02Generate outside SlideBeaver
Paste the prompt into an AI chat or a coding agent. Ask for the complete HTML file, then open it locally and check every slide.
03Save and polish
Save the returned code as an .html file. On a desktop, open SlideBeaver, upload it, and adjust text, images, or slide order.
04Check the deliverable
Export HTML or a static PPTX. Reopen the file and inspect line breaks, fonts, and any visual that must remain editable.

Example: Meet Fieldnotes

A five-slide introduction for a fictional product. The interface illustration is a concept, not an existing app screenshot. Use it to inspect the structure; your AI output may differ.

Download example HTML

Example preview

Fieldnotes product introduction slide showing a meeting note and three assigned action items

See the example brief

Product: Fieldnotes, a fictional tool for turning meeting notes into owned actions. Audience: small teams. Facts for this example: capture notes, group actions, assign owners. Next step: start with the next team meeting. English; cream and rust.

Before you import into SlideBeaver

The supplied example uses visible slide sections, inline CSS, and system fonts. AI-generated variations still need their own import check.
SlideBeaver exports a static PPTX. Supported text and shapes can stay editable; complex visuals may become images, and animations are not carried over.
For missing or clipped content, ask the AI to remove runtime-dependent visibility and split dense slides before uploading again.