This guide outlines a workflow for creating unique, animated, and high-quality presentation slides using AI and code, specifically bypassing traditional tools like PowerPoint or Google Slides. By leveraging the coding capabilities of AI, users can generate dynamic HTML presentations that offer greater visual impact and customization.
The Core Argument: Why Use Code?
The central premise is that code is currently AI’s strongest capability. By using code (HTML/CSS/JS) instead of standard slide software, creators can utilize animated visualizations, interactive diagrams, and pixel-perfect design constraints that are impossible in traditional tools. You do not need to know how to code; the AI handles the technical execution.
Step-by-Step Workflow
1. Draft the Script
The AI requires a foundation to build visuals. Create a script that acts as the source material. This can be a word-for-word speech or a structured outline with bullet points. The clearer the structure, the better the output.
2. Set Up a Claude Project
To ensure consistency and reuse, create a "Project" within Claude AI.
- Model Selection: Use Claude 3.5 Opus (extended thinking) or the highest-end model available, as it currently outperforms others for this specific task.
- System Prompt: Use a robust system prompt (optimized via the Anthropic Console’s prompt improver). Key constraints in the prompt should include generating a single HTML file, prioritizing minimal text per slide, and enforcing high-contrast, modern design aesthetics.
3. Generate and Iterate
Paste the script into the chat to generate the initial HTML file.
- Limit Chat Iterations: Perform only one or two rounds of edits within the Claude chat interface. Overloading the context window can degrade the model’s intelligence.
- Batch Edits: Use voice dictation or a separate notepad to compile a list of changes, then submit them in a single prompt to keep the conversation clean.
4. Refine Locally with Cursor
Once the baseline is established, download the HTML file to your computer for final polishing. The recommended tool is Cursor (an AI code editor).
- Setup: Open the folder containing your HTML file in Cursor.
- Browser Preview: Use Cursor’s internal browser to render the slides. If errors occur, take a screenshot and paste it into the chat so the AI can fix the rendering issues.
- Targeted Edits: Use the "Select Element" tool in Cursor to click specific parts of the slide (e.g., a text box or image container). This focuses the AI’s attention on that specific code block for precise editing.
- Images: Ensure any images you wish to embed are located in the same local folder as the HTML file.
5. Publish with GitHub Pages
To share the presentation without sending files:
- Create a public repository on GitHub.
- Upload the HTML file (ensure it is named
index.html) and any assets to the root of the repository. - Navigate to Settings > Pages, select the "Main" branch, and save.
- GitHub will generate a public URL that hosts your presentation live on the web.
Key Takeaways
- Code is the Superpower: Leaning into AI’s coding ability produces superior design results compared to manipulating slide software.
- Single File Architecture: Instructing the AI to build the presentation as a single HTML file simplifies portability and editing for non-technical users.
- Tool Selection Matters: Using the right model (Opus 4.5) and the right editor (Cursor) drastically reduces the difficulty curve for non-coders.
Mentoring question
How might shifting from static, template-based slides to dynamic, code-generated presentations change the way your audience engages with your storytelling?
Source: https://youtube.com/watch?v=TZ3yYXAz_i8&is=6Ntrptpix4qx7gZL