I. Introduction
AI programming (AI coding) is currently a hot topic, but it is not a single function; rather, it is divided into different directions.
One of these directions is UI generation, especially generating UI for web pages.
UI generation involves visual design and requires specialized AI tools. There are already many such products abroad, such as v0.dev, lovable.dev, bolt.new.
They can automatically design and generate web pages based on your text descriptions and deploy them online.
I've always wanted to test whether these UI generators are good or not, but unfortunately, you can only get the full experience by subscribing to the paid version (including the latest and strongest models).
II. Dou Bao
Last week, I found that ByteDance-ownedDòubāoAlso launchedUI generation functionNow you can directly generate web applications.
The official also specially noted "Application Creation 1.0," afraid you might not notice.
The reason seems to be that the underlying DouBao large model sent it.Version 1.6The code generation capability has been greatly enhanced. OfficialPromotion has scores that rank it among the top tier internationally in multiple test sets.
Out of curiosity, I conducted a simple evaluation of it. It is completely free, and for domestic users, this domestic tool is easier to get started with compared to foreign competitors.
III. Basic Functions
Clicking the "AI Programming" option in the menu leads to the programming interface It's a large input box with a few examples below.
Without beating around the bush, I directly entered:
Generate an e-commerce website.
The system immediately switched to the code generation page, with the AI chat bar on the left and continuously scrolling generated web code (see image below).
Once the code generation was complete, the right side switched to the preview of the generated webpage.
For demonstration purposes, I've shared this page (click the "Share" button in the upper right corner).
Everyone can see the effect themselves.Click here).
Just to clarify, this was directly generated by the system, and I made no modifications.
I feel thatInput less than 10 characters can generate such a web page, it's okay.It's beyond my expectations.
Although this page seems to work, many details need to be modified.
IV. Visual Editing
While making modifications, I found that DouBao's editing features are quite well done, entirely visual, making it accessible even for those without coding knowledge. It seems that other competitors haven't reached this level.
The visual editing of DouBao is divided into AI editing and manual editing.
4.1 AI Editing
AI editing involves directly inputting commands in the AI box on the left to let the AI assist with editing.
The editing process is as shown in the image below: select the title, enter the command "optimize the wording and change it to artistic text," and it takes effect immediately.
One command can modify multiple places, and the system saves changes in real-time each time, eliminating the need for manual saving.
4.2 Manual Editing
Manual editing involves directly modifying text and images on the front end.
First, click the "Edit" button above to enter edit mode.
Then, select the element to be edited.
For example, web pages generated by AI often have mismatched images that need to be replaced.
In the image above, it should be a Bluetooth headset, but the AI paired a laptop image instead, it needs to be replaced.
In edit mode, select this image, and an edit box will appear below.
There are three options inside.
- Intelligent image generation: AI-generated images.
- One-click image search: Search the system's image library.
- Local replacement: Upload local images.
Select the first option "Intelligent Image Generation", enter "Bluetooth headset", and you will get a Bluetooth headset image generated by AI.
V. Text Turns into a Web Page
The latest update from Doubao also includes a "Text to Webpage" feature, which I find very useful.
It can long text (meeting notes, travel guides, news reports, papers, etc.) is automatically converted into a webpage through AI interpretation.
Specifically, at the bottom of the dialog box, there is a row of functional buttons, and the first one is the newly added "Text to Webpage in Seconds."
Click it, and an input box will appear with a system prompt:
"Analyze the following content and transform it into a clear and visually appealing HTML webpage."
You just paste your long text below this prompt. For example, if you paste a research report, the AI will summarize the content and then generate a webpage from the summary.
More practically, long text can also be generated by AI as . The specific method is to let the AI generate long text in the chat interface, then switch to AI programming and enter the command "Convert the above content into an HTML webpage."
For example, first chat with AI, "Help me create a 3-day, 2-night Hangzhou travel itinerary for June."
AI will talk endlessly, generating a long paragraph of text(Click to view)Then, you switch to AI programming and enter "Help me convert the above information into an interactive HTML webpage".
The webpage is ready (网页就生成好了)Click to view).
With this feature, AI content generation and web page generation are integrated.
So, the possibilities are endless. For example, upload conference audio files to generate a conference minutes website; upload documents to create a content introduction website; let AI analyze financial statements to generate a website with line charts, flowcharts, and analysis.
VI. Summary
After trying it out, I have a good impression of BeanPod's web page generation feature this time, finding it very practical with high completion, being a useful tool for users.
First, the page generated by the model is better than I expected and is usable.
Second, the visual editing is very user-friendly, easy to operate, and has a low learning curve, making it suitable for beginners and project managers or designers who are not familiar with programming.
BeanPod's team has focused on developing this feature, showing their clear understanding of the current state of AI programming: pages generated by AI cannot achieve the ideal state in one go, so it's important to have good editing functions to facilitate modifications and optimizations.
Finally, compared to foreign competitors, it has better localization. Besides the Chinese interface and usage prompts, the web pages it generates clearly use localized templates, rather than the style of foreign designers.
If we have to talk about shortcomings, it's probably that the JavaScript scripting capabilities are not yet satisfactory. Some interactive effects on pages cannot be achieved in one try and require multiple corrections with AI.
In short, when it comes to front-end application generation, BeanPod's AI programming is a productive product with strong aesthetics and usability, and it's also free, so everyone can do it themselves.Give it a try.
(Complete)