AI-assisted Webpage Creation

AI-assisted 1-minute Webpage Creation

In this post, I will share my experience of using AI to create a webpage in 1 minute.

Here is the story if you are interested — "I learned to build websites before the AI era..."

I learned to build websites before the AI era. I had to write my own tedious HTML and CSS files on my own. I am an artsy person and I was so obsessed with designing and colouring. I pretty much spent 80% of the time moving elements around, redesigning and tweaking. This is fun but in fact it is so time consuming. It kinda reminds me of the pixel drawing experience when I played Animal Crossing. Can you imagine using a Joy-Con doing pixel art and drawing an entire swimming pool for 5 hours? This is pretty much what it was like for me to construct and maintain my webpage.

And then there came ChatGPT and later Gemini, Cursor, and Codex. It totally changed the way we build websites. People no longer need to take care of the design, or in general, the frontend part of everything. This includes the CSS part of the website design, the GUI design for any software.

This is the story going around and there is a real hype about the frontend power of AI. I got to realize that it is a real thing when I was trying to help a friend with building her personal website. A short prompt in 1 minute and a couple of iterations and a super fancy liquid-glass-like website just popped up. I was shocked how good-looking it could be and how fast it was created. I have to say that 5 years of experience in webpage designing is nowhere close to this AI's capability.

Because of this, I didn't even bother doing any frontend job by myself. AI is straight up better than you, and faster.

The tool I used to generate the website is Cursor

The prompt I used to generate the website is as follows — "I would like to generate a personal website..."

Hi cursor, I would like to generate a personal website where I can showcase my research results and teaching experience. You don't have to generate everything at a time. But would be good to have an index.html page, an about.html page, and so on. Put all the styling design in a single css file. .JS file if needed.

Gallery

You can click on the following webpages to take a look at the websites generated by Cursor with the prompt mentioned above. Each website was created with different color schemes, layouts, and design styles to showcase the diversity AI can produce.