The cumbersome task of making a presentation is something I loathe. It’s a boring thing to do and I never get the thing to look the way I envision. So when Claude showed me it could make presentations, I thought: wait, what. Let’s try it.
Claude shows it's Powerpoint skills
Hey Claude, can you make me a Keynote about 3 of the most interesting experiments on hugomelis.nl
Make the presentation in the style of the website hugomelis.nl so same typography and colors etc.
It started humming and the first version was created. The result didn’t look at all in the way my website looked. Above all it lacked personality. Something that becomes more obvious when you see and read a lot of AI slop. This is where we still have a long way to go. Human in the loop will still be necessary when this keeps on happening.
Presentation
Claude Presentation Draft 1
The first deck, embedded as a paginated preview and still downloadable as the original PPTX.
Claude shows it's Powerpoint skills
Ok, this is in no way what my website looks like. Go to Chrome and actually open the website hugomelis.nl and download the CSS and font. Use that in the presentation.
Presentation
Claude Presentation Draft 2
A second iteration of the deck, using the same shortcode and preview flow.
This new version was a bit better, but still wasn’t what I envisioned. It didn’t surprise me, just did something basic that I found not that interesting. So a thought came over me: what if I wrote a better prompt? Let’s try having a good prompt written first by ChatGPT.
The prompt generated by ChatGPT
You are not designing a presentation.
You are recreating the exact visual system of an existing website and then rendering a presentation inside that system.
Your goal: Replicate the design system of https://hugomelis.nl with ~95% visual accuracy, and then build slides inside that system.
You must treat the provided CSS as the single source of truth.
STEP 1 — PARSE DESIGN SYSTEM (MANDATORY)
Carefully read and extract the design system from the provided CSS. From this CSS, explicitly identify and reuse:
- Typography
- Primary font: Geist
- Mono font: Geist Mono
- Font weights, sizes, and line heights must match variables exactly
- Use the same font hierarchy:
- Headings: font-geist (sans)
- Body: font-geist-mono
- Color system (DO NOT approximate)
- Use ONLY CSS variables: –color-zinc-* –color-accent –color-accent-soft
- Respect both light and dark themes
- No custom colors allowed
- Spacing system
- Use the spacing scale:
--spacing - All padding, margins, gaps must be multiples of this scale
- Avoid arbitrary px values
- Borders and radius
- Use: –radius-xs, –radius-sm, –radius-lg
- Borders must use the exact zinc color variables
- Layout constraints
- Max width:
max-w-160 - Content width: ~72ch for readable text
- Grid + flex patterns must follow existing utilities
- UI patterns to replicate exactly:
- Post cards
- Presentation preview blocks
- AI prompt blocks
- Buttons (rounded-full, subtle borders, hover states)
STEP 2 — BUILD PRESENTATION SYSTEM (NOT GENERIC SLIDES)
You are NOT allowed to use standard slide design conventions.
Instead:
- Each slide must look like a “page” or “component” from the website
- Slides should resemble:
- post cards
- content blocks
- AI prompt previews
- experiment logs
Slides must feel like: “Scrolling through hugomelis.nl, not watching a keynote”
STEP 3 — STRUCTURE
Create a presentation based on 3 experiments.
Structure:
- Cover
- Minimal
- Title using Geist
- Subtle accent usage
- Per experiment (repeat 3x):
- Slide 1: Title + context
- Slide 2: What was attempted
- Slide 3: What happened (with visual hierarchy)
- Slide 4: Key insight (use blockquote styling from CSS)
- Final slide:
- Patterns across experiments
STEP 4 — STRICT VISUAL RULES
You MUST follow these constraints:
- No shadows except those defined in CSS
- No gradients unless already defined
- No new components
- No center-heavy “presentation style”
- Prefer left-aligned, editorial layout
- Use subtle borders instead of containers
- Use whitespace instead of decoration
Typography must feel:
- Dense
- Precise
- Slightly technical
STEP 5 — IMPLEMENTATION
Output:
- HTML + CSS (or framework if specified)
- Reuse class names from the CSS where possible
- Do NOT rewrite the design system
- Assume CSS is already loaded
If you need to create new classes:
- They must be composed from existing variables
STEP 6 — VALIDATION CHECK (IMPORTANT)
Before final output, verify:
- Does this look like a page from hugomelis.nl?
- Or does it look like a presentation tool?
If it looks like a presentation tool → redo.
KEY PRINCIPLE
You are not designing slides.
You are rendering content inside an existing design system.
Presentation
Claude Presentation Draft 3
The third iteration of the pptx, using a longer prompt generated by ChatGPT
The result was better, but still a bit rough around the edges. This might be because now it first created a HTML version and then converted that into a pptx file.
Anyway, I still have to keep loathing the task of making a presentation it seems.
Key Insight:
Speed is not the problem, the problem is that AI tools are convinced they are right. I had to reject two .pptx presentations before I got one that (sort of) matched my actual website. The capabilities are there, but my willingness to accept something that looked good enough but is not mine is not yet there.