In the past, web development was a challenging task for ordinary people and even statistic programmers. This is why tools like R Shiny emerged — they encapsulate various functional components, allowing statisticians unfamiliar with web development to create interactive web applications.
However, with the rapid development of artificial intelligence technology, the barriers to web development are being significantly lowered. You may have seen titles like “6-Year-Old Uses AI to Create a Website” in news or videos. This is not an exaggeration, but a fact that can indeed be realized. Next, I will introduce how to leverage AI capabilities to easily engage in web development.
In our previous “#Gift for You” series, we shared two practical web tools:
1. No More AI Erasure! Here’s a Batch Watermark Adding Tool
2. Here’s a Support Light Board
Today, we will take the “Support Light Board” as an example to detail how to use AI to develop web applications.
Step 1: Define Requirements
I told AI that my friend is running a marathon tomorrow and I need to create a light board webpage to cheer him on at the event, with the special effect of a support light board, displaying the message “Go Lao Yuan!”
Step 2: Optimize Features
I opened the AI-generated .html file, and the effect was as shown above. It basically achieved what I wanted, but I hoped AI could make further modifications: remove the “Switch Animation” button and add a text input box that allows me to customize the displayed text, changing the default text to “+7 AI Laboratory”.
Step 3: Add Custom Options
After the update, a text box appeared, and we entered “HAPPY BIRTHDAY”, then clicked confirm. This allowed us to modify the displayed text. Besides the content, I also hoped to let users customize the text’s font, font size, and glow color.
Although I added glow color options, there were only 3 colors to choose from, and the font selection was insufficient. So, I asked AI to change the glow color selection to a color palette model and provide 10 open-source font choices. Additionally, support light boards typically have a scrolling subtitle feature, so I asked AI to add a scrolling function that allows customization of the scrolling speed.
During the development process, although I encountered some minor issues (like the glow effect disappearing during scrolling, and the text not being centered in full-screen mode), they were quickly resolved through communication with AI. The entire process took less than 20 interactions to complete this fully functional support light board webpage.
Once the webpage is completed, the next step is to publish it on a server, allowing others to access the webpage via a URL.
Here’s a little anecdote: a friend of mine, after my recommendation, created a webpage using AI and then asked me how to publish it. I replied, why not continue asking AI? Using AI is just the first step; more importantly, it’s about changing our mindset. AI is not a single-function tool but more like a “vendor.” If a vendor created a webpage for you, would you ask others how to publish it, or would you directly ask the vendor to publish it or teach you how to publish it?
Actually, I don’t know how to publish a webpage either; I just asked AI: how to publish? Which ones are free? What are the pros and cons? Which one is the most recommended?
Since I mostly publish open-source free web tools, I ultimately chose to publish on GitHub. I just needed to ask AI how to publish the webpage I just created on GitHub, and it provided detailed tutorials (as shown in the image below), even helping me write the README and LICENSE, and finally reminding me that if I have any questions, I can take a screenshot and ask. As long as I follow AI’s guidance step by step, I can successfully complete the publication. Moreover, this process itself is a great learning opportunity. After going through the process, I can basically master the essentials and operate independently next time.
Finally, regarding the selection of AI tools for web page creation. The above web page was created using Claude 3.5 Sonnet, primarily because Artifacts is very useful, as shown in the two blocks on the right, which update the code and webpage in real-time. Additionally, I have listed Doubao, Kimi, and GPT-4o, which can also create light boards (the most basic versions). These tools can all create web pages (with different effects), but may require copying the code, saving it as HTML, and then opening it in a browser. There are also some one-click tools for creating and publishing web pages that I haven’t tried yet; I will introduce them to everyone when I have the chance (digging a pit).
Conclusion
With the support of AI, creating web pages has indeed become very simple and quick, even for those with zero programming background. The key is the Idea. This transformation has made web development no longer an exclusive domain for programmers; anyone can turn their ideas into actual web applications through conversations with AI. The development process has shifted from “must learn programming first” to “learn while using” or even “just use without learning,” reducing the development cycle from weeks to hours, allowing us to focus more on product ideas themselves rather than technical implementation. In this AI-powered new era, the main obstacles to technological innovation are no longer programming skills but rather creative thinking and problem-solving abilities, leading us to anticipate even more surprising innovative applications.
I took a long break for myself, so the update was delayed until now.
The following video is about my “work” from visiting the “Black Monkeys” in Shanxi.
This should be the last issue before the Spring Festival, so I wish everyone a prosperous Year of the Snake and family happiness!
See you next year.
If you liked this content, feel free to follow, share, like, and save!
