I did a small live sharing a few days ago. When sharing, I was thinking about whether I could make a PPT in the form of a web page. In the previous environment, if I said that I wanted to make a web version of PPT, it would definitely be a bit of a waste of talent or an overkill.

But now that Claude and DeepSeek can generate HTML pages with one click, all this has become possible.

So I created the following page:

https://jhailab.online/poju_live/

First of all, why do I want to use HTML pages to make PPT? What are the benefits?

Compared with traditional PPT tools, presentations made with HTML pages have several obvious advantages:

First, it is highly customizable. You can design every detail according to your own ideas without being restricted by templates. You can add any animation or interaction you want as long as HTML/CSS/JS can achieve it.

Second, it has strong cross-platform compatibility. Whether it is Windows, Mac or mobile platform, as long as there is a browser, it can be displayed normally, without worrying about the problems that often occur in traditional PPT, such as font loss and layout disorder.

Third, it is easy to share. A link can be shared with everyone, and the other party does not need to install any software. They can just open the link to view it. It is especially suitable for use in live broadcast or remote sharing scenarios.

Fourth, more interactive possibilities. HTML pages can embed various interactive elements, such as real-time voting, dynamic charts, and even small games, making your presentation more vivid and interesting.

But in the past, to make a web page PPT like this, you either need to find a professional front-end developer or spend a lot of time learning front-end technology yourself, which is too costly. Now with AI tools like Claude and DeepSeek, I can generate a complete HTML page in a few minutes just by using my prompt words, which is really convenient.

So, today's topic is

You can use Claude to create a web version of PPT with just one prompt

This article will proceed in the following order:

• Demand Analysis
• Step by step
• Prompt word writing and testing
• Summarize

1. Demand Analysis

All the prompt words in today's content need to be input as parameters, and then they can be generated with one click. If you are not satisfied with anything later, you can modify and fine-tune the dialogue~

1) Input

Prompt words adjusted based on prompt word template

b) Output

Complete HTML code => PPT page

2. Writing and testing prompt words

1) Prompt words

You are a front-end UI designer with 10 years of experience. You always insist that only the most primitive tools can create the most perfect design, so you have been focusing on using HTML, CSS, and JS to draw the most beautiful pages.
-  Colloquialism: "Which PowerPoint should I use to make the best "PPT" on the web"
-  No trace of the author should be left in the PPT, not even spoken words.

Please help me make a PPT with an HTML page based on the following content, with suitable special effects and as many animation effects as possible.
1.  Analyze the content and divide it into multiple pages:
   -Must  include: home page (introduction page), directory, thank you page
   -  May include: title page, detail page, etc.
2.  Extract the essence of the content as a PPT page
3.  Design requirements:
   -Rich  dynamic effects, styles, and special effects
   -  No pictures to display, no need to reserve picture space
   -  Reasonable space arrangement
   -  Optional use of SVG or plugins to draw charts (treemaps, fan charts, etc.), freely choose the best way
   -  Font size and font fit the content
   -  Contains page turning buttons
   -  Elements do not overlap, avoid overcrowding, and leave appropriate white space
4.  Design keywords:
   -  Unlimited creative freedom
   -  Responsive design
   -  Dynamic effects
   -More  interactive effects
   -Data  integration
   -  Web-native experience
   -  Beautiful graphics
   -  Attention to detail

The following is the content of my PPT. Please design it according to the following content. The overall style uses [style]

--- 
[content]
---

II) Effect display

I just copied an article from MQ teacher's WeChat official account! I won't show you the content! If you are interested, you can go and have a look~

Simple style

Preview link: https://jhailab.online/ai-education-presentation.html

Hand-painted style

Preview link: https://jhailab.online/powerpoint/handdrawn-presentation.html

Pixel Style

Preview link: https://jhailab.online/powerpoint/pixel-presentation.html

Natural Style

Preview link: https://jhailab.online/powerpoint/natural-ai-education-presentation.html

It is recommended to use the Claude Thinking model, which can be generated in one go and the effect is better!

IV. Conclusion

Same as before, I still made a preview page, if you are interested you can go and have a look!

https://jhailab.online/powerpoint/

DeepSeek v3 should also be able to accomplish this, you can try it, but it may take several clicks to continue generating.

I'm too lazy to adjust the code. Hehe~

Well, that’s the end of today’s content. Thank you for watching. I hope that you will like my content and gain something from it.