Tip: genereer geen PowerPoints, maar HTML-styled presentaties
Voor mijn Power Automate training heb ik de volledige presentatie met één prompt
gegenereerd. De output is vaak bruikbaarder dan wat je krijgt uit Copilot in PowerPoint, Claude
in PowerPoint of Gamma AI.
Waarom HTML-presentaties?
Met HTML-presentaties heb je veel meer controle over:
Layout — volledige vrijheid in positionering en structuur
Interactie — iframes, live code editors, animaties
Styling — eigen thema's, kleuren en typografie
Structuur — versiebeheer via Git, responsief op elk apparaat
AI schrijft de HTML, CSS en JavaScript. Jij hoeft alleen de prompt goed op te stellen.
Mijn workflow
Gebruik mijn PowerPoint-starterprompt en spits deze toe op je onderwerp
met AI.
Open VS Code.
Gebruik GitHub Copilot of Claude Code.
Plak de prompt en laat een HTML-presentatie genereren.
Finetune waar nodig.
Prompt Voorbeeld
Hier is een voorbeeld van een gedetailleerde prompt die je kunt gebruiken om een complete
interactieve presentatie te genereren met AI:
You are a world-class presentation designer, instructional designer, and senior front-end engineer.
Your task is to generate a COMPLETE interactive slide presentation as a SINGLE self-contained HTML file.
The result must feel similar to modern AI presentation tools like Gamma, Pitch, or Beautiful.ai.
The presentation must be visually impressive, structured for learning, and usable in a real training session.
-------------------------
TRAINING CONTEXT
-------------------------
Topic:
Power Automate – Automating Business Processes
Audience:
Business professionals, analysts and citizen developers with little or moderate technical experience.
Training goal:
Participants understand automation concepts and learn how to build practical Power Automate flows.
Training format:
Instructor-led workshop with demonstrations and hands-on exercises.
Slide count:
20–24 slides
Language:
English
-------------------------
VISUAL DESIGN SYSTEM
-------------------------
Design style must resemble modern Microsoft Fluent UI.
Color palette:
Primary blue: #0078D4
Secondary blue: #106EBE
Highlight blue: #2899F5
Deep background: #0F172A
Card background: rgba(255,255,255,0.06)
Visual characteristics:
• dark gradient background
• glassmorphism cards
• glowing blue accents
• soft shadows
• rounded corners
• modern typography
• high readability
• large headings
• elegant spacing
Layout system:
Slides should use a mixture of layouts:
• hero slides
• card grids
• comparison layouts
• process diagrams
• checklists
• exercise layouts
• architecture diagrams
-------------------------
INTERACTIVITY
-------------------------
The presentation must include:
Prev / Next navigation buttons
Keyboard navigation (arrow keys)
Slide counter (1 / N)
Progress bar at the top
Smooth transitions:
• fade transitions
• slide animations
• subtle hover effects
-------------------------
CONTENT STRUCTURE
-------------------------
Slide 1
Hero title slide
Slide 2
Agenda
Slide 3
The problem: repetitive work in organizations
Slide 4
What is automation?
Slide 5
What is Power Automate?
Slide 6
Real business use cases
Slide 7
Types of flows
• Automated
• Instant
• Scheduled
Slide 8
Core building blocks
Trigger
Action
Connector
Condition
Slide 9
Architecture overview
Create a visual process diagram explaining how Power Automate connects to Microsoft 365 services.
Use a simple flow diagram with boxes and arrows.
Slide 10
Flow example walkthrough
Scenario:
"When a file is uploaded to SharePoint → request approval → notify Teams"
Slide 11
EXERCISE 1
Title:
Build your first automation
Scenario:
When a new item is added to a SharePoint list, send an email notification.
Include:
Goal
Step-by-step instructions
Expected result
Slide 12
Connectors explained
Slide 13
Popular connectors
Outlook
SharePoint
Teams
Dataverse
Excel
Slide 14
Logic and conditions
Slide 15
EXERCISE 2
Scenario:
A support ticket system
If priority = High
Send Teams message
Else
Send email notification
Include:
Steps
Expected outcome
Slide 16
Error handling
Slide 17
Governance and naming conventions
Slide 18
Common mistakes beginners make
Slide 19
EXERCISE 3
Scenario:
Expense approval flow
Employee submits request
Manager approves or rejects
User receives confirmation
Slide 20
Automation design framework
3-step framework:
Identify
Automate
Optimize
Slide 21
Key takeaways
Slide 22
Next steps for learning Power Automate
-------------------------
DIAGRAMS
-------------------------
When explaining architecture or processes:
Create simple diagrams using HTML elements and CSS.
Do NOT use external libraries.
Examples:
Flow diagrams
Process pipelines
Architecture blocks
-------------------------
EXERCISE SLIDE FORMAT
-------------------------
Exercise slides must contain:
Title
Scenario
Step-by-step instructions
Expected outcome
Use a visual card layout.
-------------------------
TRAINER NOTES
-------------------------
Each slide must contain optional speaker notes hidden below the slide.
These notes should help the instructor explain the concept.
Notes must include:
Explanation tips
Real-world examples
Possible discussion questions
Notes must be collapsible.
-------------------------
OUTPUT RULES
-------------------------
Return ONLY the final HTML document.
The document must run offline.
Use only:
HTML
CSS
JavaScript
No external libraries.
Start with:
<!DOCTYPE html>
<html>