When I have empty time, I often review my past life. I find that many things I regret are things I did not do immediately when I first thought of them.
Caution is good. Thinking more is also good. But hesitation often means missing out.
So express love bravely, and do things bravely.
Why Build Jianhua.Art
Here is what happened.
Last month, I told Max that I wanted to build a tool that could help me quickly design cover images for WeChat Official Account articles, because this work is genuinely painful for me.
But cover images strongly affect article click-through.
My most-read article had an AI beauty image as the cover.
But how could someone as pure as me put beauty images every time?
Then Max came up with a name for the product: Jianhua. He also gave many suggestions.
Then he pulled in a design friend, who gave a lot of input from a professional design perspective.
In the end, we spent about two weeks building the first PoC version of Jianhua.Art.
Right now it is a browser extension that can quickly design images, text graphics, and animations through natural language.
As for what later versions will become, I do not know yet. I have not thought it through.
Because during the two weeks of building the PoC, I already spent about one week constantly overturning my own design.
Then I spent one day communicating interaction and visual design with the designer.
Then two days learning the browser extension development framework Plasmo.
The last two days were for development and debugging.
What Is Jianhua.Art?
As mentioned above, right now it is only a browser extension that can quickly design images, text graphics, and animations through natural language.
Jianhua designed this for the article.
A summary graphic designed by a certain expert.
To launch quickly, the current version is cut down. It is almost offline, except for large model calls.
It has no database, no user system, and all data is stored locally.
So now, as long as you have an OpenAI-format large model key, you can use this extension for free and do many interesting things.
I built a rough webpage summary template into the default templates. It can extract content from the current tab and generate an SVG image.
With it, you can generate sharing posters for any webpage.
Of course, if you dislike the visual output, you can completely modify the built-in prompt yourself.
This is its effect when summarizing the official website.
You can do many operations based on the generated content.
For example, I directly exposed SVG code editing. Switch to the Code tab, edit the code yourself, switch back, and you will see the new effect.
Or you can copy it directly as a PNG image, or download the SVG and insert it into WeChat, WeChat Official Account, Figma, and so on.
By the way, when inserted into Figma, it is layered, so every element can be edited very conveniently. Later, I will add the ability to insert SVG into WeChat Official Account and more places.
Let me first think about the best way to do it.
Also, I strongly recommend everyone use their own creativity, because I am really not good at it. If you want to use webpage content extraction, turn on the extraction switch when creating the app. All supported variables are listed above; just copy and paste them into the prompt.
Finally, I created a feedback group. If you are interested, you are very welcome to join. I will not consider payment in the short term, so as long as you have tokens, you can freeload it for a long time.
From Artifacts to V0: The Principle Behind AI GenUI
No matter how impressive a similar product looks right now, the real hero behind it at this stage is Claude.
Everything else is engineering optimization. There is not much secret. Many people are confused only because the path from designing a complete application to launching it is very long. If you only focus on your own part, you naturally do not understand what others did.
Now you want a large model to handle this whole chain. Then you have to tell it which part to do, what to do there, and to what degree.
The websites, apps, and mini-programs we see every day usually go through at least these stages:
Product design -> visual design -> frontend coding -> backend coding -> integration -> testing and validation -> launch
When Artifacts first appeared, it was only the most basic HTML rendering. That is actually not hard; any browser can do it. But the effect was also weak.
The reason is that after so many years of frontend development, almost nobody writes things today with native HTML + CSS + JS alone. Good-looking and easy-to-use things have been continuously accumulated. Later people only need to use them. There is an old saying: do not reinvent the wheel.
Today, even without large models, we can rely on expert-built frameworks to quickly write a good-looking page.
If you do not believe me, go look at Tailwind CSS.
Then look at https://ui.shadcn.com/
Does it feel familiar, like you have seen it in many places?
Let me give another example of how easy it is to design pages using frameworks.
Pick a random calendar component in shadcn. Installing and using it is only two lines of code.
Two simple lines of React code.
Then you get:
An elegant resume.
Building a house out of mud and lime is much harder than building with finished bricks and tiles. If you can assemble finished house modules, it is even easier. That is what Tailwind CSS and Shadcn UI do: they make the wheels. In China, there are Ant Design and Element UI.
I previously built my own demo quickly, and the effect was even better than the early V0. I used it to draw prototypes and make demos very efficiently. I even modified a version, connected Agent and ASR, and installed it on my home TV.
So when you understand how experts do things, and then ask a large model to learn from experts and do the same thing, you find it is not hard.
The hard part is only the distance between you and the expert.
As for why my first product did not continue polishing UI generation and become a domestic V0, even though many people around me kept urging me:
The direction is too big. I think many people will compete there.
I do not have enough energy. It is also hard to defend.
Finally, Why Build Products Independently?
First, a little cold water: although I am a product manager, I am not zero-code. When developing Jianhua.Art, I spent one or two days reading Plasmo’s official docs first. If you are building a complete product, do not expect zero foundation, no extra input, and only Cursor to get you all the way there.
The reasons are probably:
-
The world is a huge makeshift team.
-
LLMs have broken and flattened knowledge and technical thresholds, bringing knowledge equality.
-
If you have time to align other people’s cognition, why not align a large model with you instead?
-
Time is money, my friend.
-
Maybe because I am INTJ.
Quietly muttering: if any generous sponsor is willing, contact me anytime.
Original
This article was first published on the WeChat Official Account “白苏Elliot”: https://mp.weixin.qq.com/s/EmjsRE59Zq1Y1uT_iY_FoA