After Experiencing Alibaba's First Design Agent, I'm Starting to Feel Anxious for UI/Frontend Developers...

Hello everyone, I'm Kangaroo Emperor.

As a backend programmer, I have a slight understanding of frontend development, but when it comes to UI design, I'm completely clueless.

I still remember back when I was working, most of the UI designers in the company were women, and I hadn't even opened Figma before.

Since the rapid development of AI, although I can build various complex frontend projects, one problem has always bothered me: I can't make them look good.

I can distinguish what kind of page looks sophisticated and beautiful, but I find it very difficult to create that sense of sophistication with interactive animations. This feeling is really frustrating 😮‍💨

I originally wanted to learn UI design and Figma, but I never had the time.

And then... I once again realized what it means to say, "If you learn slowly enough, you won't have to learn at all." I have to admit, there's some truth to that statement.

Of course, I don't encourage everyone to stop learning altogether, because if you learn, you at least know how this stuff develops and what its underlying logic is.

First, let me show you something fun: this is a product official website page I quickly put together in about 20 minutes.

Doesn't the effect look pretty good? I feel like it's already better than many product official websites out there.

The overall design of the page is very comfortable, with various animations and user interactions, creating a stunning effect. The key is that this was made by a backend programmer (yours truly) who doesn't know UI design.

You must be very curious: how was this effect achieved?

Without further ado, it was made with the help of QoderWork's AI Native Design Workbench (Design Desk). Simply put, it's a design Agent.

Design Desk truly impressed me. The entire process of using it was very smooth. Even if I encountered some issues, whether I was dissatisfied with a certain part of the page design or some details (colors, borders, spacing), I could quickly adjust them manually on the canvas.

Moreover, the entire development process is very friendly to people who are not familiar with software development but have their own ideas and want to quickly achieve results (more on this later).

Creating a Product Official Website

For instance, for the product official website shown at the beginning, I gave it this prompt:

"Create a product website for an audio company. Implement all animations using React, Tailwind CSS, and Framer Motion. The product itself should be presented like a sculpture. Sound should be visualized through interaction, not just a monotonous gimmick. Material and engineering design should be showcased through scrolling. Even in a static state, the website should be smooth to use, with silky smooth scrolling. Every interactive element should have micro-interactions. The website must be fully responsive. Reference cases: Transparent Speaker, Bang & Olufsen, Sennos, Tecno, Awwards level."

The first version was already quite good.

Then I added a skill to QoderWork for converting images to 3D: tripo-3d-generation.

After designing the product image using GPT-image2, I had QoderWork directly convert it into a 3D product and replace it on the webpage.

The final result was quite nice.

To be honest, as a backend programmer, I never imagined I could one day create such a professional-looking product official website (I feel it's already more advanced than many product websites out there). After all, I'm not a frontend developer, let alone a designer.

And it only took 20 minutes. Crucially, I barely did any manual work; I just made a few choices (making decisions at key junctures).

Then I also compared it with Codex. I gave Codex the same prompt, and while its generated effect was also pretty good, it was clearly not as good as QoderWork Design Desk.

It seems that professional tasks still require professional Agents 🤝

3D Models for Physics Experiments

Recently, 3D model generation websites for educational purposes have become very popular on X.

So, I also used QoderWork to create a 3D interactive website for high school physics experiments.

I wanted to see how friendly QoderWork is to people who are not familiar with software development but have their own ideas.

My input was very simple:

"Help me design a science app for a 3D interactive laboratory for high school teaching, focusing on interactive 3D models to demonstrate different principles in high school physics, specifically magnetism and atomic physics. Then, expand globally."

Note that this statement contains absolutely no software development jargon; it doesn't require you to have a developer mindset or provide specific implementation plans.

Then it did something I found very clever: instead of directly starting work, it first asked a few questions to help me dig deeper into more specific requirements.

After asking, it didn't just start writing code haphazardly; it generated a design plan for me to confirm.

This plan included deliverables, technical solution confirmation, pages, interaction design, and risk assessment. It was quite detailed. I think this process is correct: first align, then plan, and finally execute.

Aligning the direction first, then executing, significantly increases the hit rate and avoids repeated rework. This is also key to ensuring the Agent generates more stable quality.

Finally, it generated a complete React + Vite frontend project file with 3D interactions.

This is different from Claude Design; as far as I know, Claude can currently only output HTML.

QoderWork, on the other hand, can directly output complete project files, which is very important for the maintenance and iteration of a project.

I asked my frontend friend to open a few files and take a look. His feedback was that they were indeed good and conformed to the coding habits of most frontend engineers.

So, I think QoderWork's Design Desk is also very friendly to people who don't understand development.

You don't need to know technical jargon; it will help you uncover requirements and create a plan. The barrier to entry is much lower than I expected.

Of course, it only raises the baseline for everyone doing UI design and frontend development. For professional UI designers, their ceiling with Design Desk will certainly be higher.

Throughout the entire experience, three points significantly improved efficiency for me:

Direct editing on the canvas: The entire project is on an infinite canvas, allowing basic adjustments like width, height, position, dragging, and resizing without writing code, with real-time effects.
Box selection for modification: Previously, to modify a specific part of a page, you often had to describe it in a dialogue box, like "change the color of the button in the top-left corner of the navigation bar..." Typing out a bunch of tedious words, and sometimes it's genuinely hard to describe. Now, you can directly select the target content on the canvas with a box and tell it how you want to change it.
Key design decisions: When developing, you might realize you need to change global elements like theme colors or fonts. Normally, you'd still change these through a dialogue box and wait for the result, and changing global elements can easily break the code. QoderWork now exposes high-frequency fine-tuning items like color schemes, spacing, rounded corners, and font sizes directly as adjustable parameters. You can drag and adjust them, and they take effect in real-time, even without needing to refresh to see the changes.

Again, no waiting.

These three points collectively address the same core pain point: don't make me wait, don't make me type out descriptions; after development is complete, what's needed is simple, fast, and precise page adjustment.

It's worth noting that QoderWork is fundamentally different from Tencent's previous Figma-like cloud design tools.

Tencent's core focus is still on cloud-based collaborative vector design.

QoderWork's positioning is an AI-driven design-as-code tool: the boundaries between traditional "pure drawing designers" and "pure page-writing frontend developers" are collapsing. Design files will no longer be untouchable black boxes but visual assets that everyone on the team can jointly maintain.

Additionally, QoderWork has over 150 high-quality style references built-in. The benefit of templates is that the style is controllable, solving my long-standing pain: having an aesthetic sense but being unable to execute it.

Extreme Test: Replicating a Ceiling-Level Website

To test its limits, I found a website with ceiling-level animation aesthetics: lusion.co

Honestly, this is absolutely the coolest website I've ever seen, bar none; it can only be described as stunning.

The interactions on this website are like watching a Hollywood blockbuster; every page turn is accompanied by extremely complex, smooth, and cool 3D transformations.

This was definitely an extreme test. I dare say that currently, no AI can 100% replicate the frontend of this website in one go.

In January, I gave it to Kimi's Agent, and it could replicate about 30%.

But the version generated by QoderWork this time was very impressive; I think it reached 50%.

Unfortunately, QoderWork currently lacks visual capabilities, so it couldn't be shown a screen recording of lusion.co, which might have led to some deviation in understanding.

Also, regarding issues, QoderWork occasionally experiences some lag when handling particularly complex 3D scenes and continuous scrolling animations. The generated code also doesn't always run perfectly on the first try, sometimes requiring manual adjustments.

However, this is only the first version, and this level of performance is already quite good.

On a Side Note

QoderWork's custom workbenches, in addition to the Design Desk, also include a PPT Workbench and a Writing Workbench.

Each slide in the PPT Workbench is an independent HTML file, with various Chinese fonts built-in, and it can render offline. The entire process has 11 stages, and users can intervene at each stage. The generated results, I tried them, are quite good, already catching up to Master Zang's open-source PPT skill.

The "select to annotate" feature in the Writing Workbench is quite interesting. You can circle a piece of text like you're reviewing an article and write instructions like "make it more formal" or "compress to within 100 words," and the AI will modify the selected text accordingly.

I'll bookmark these two for now; if you're interested, we can discuss them separately later.

"Finally"

With this attempt, I feel that my problem of "not being able to make things look good" has been largely solved.

And personally, I feel that UI and frontend roles are indeed becoming increasingly precarious. I'm curious what UI and frontend developers think; welcome to discuss in the comments section.

I'm not saying this without basis. Especially now that I'm doing OPC, from my personal perspective, if I can create such a product official website myself, why would I still need to hire professional UI and frontend developers?

Because the results produced are already better than many product official websites on the market.

A few days ago in Beijing, I was having dinner and chatting with a friend from my hometown. She's a senior lawyer who has worked in Beijing for a long time, and she proactively brought up her anxiety and asked me if there were any ways to break through.

The two breakthrough methods I suggested at the time were:

Break through and amplify: Embrace trends, embrace change, and deeply use AI. Not only be an expert in your industry but also become an expert in your industry + AI.
Become a rarer talent: When a person can do both X and Y, their scarcity increases exponentially. For example, a person who understands key AI technologies, understands marketing, has a good sense of online trends, and is also good at business (even without templates) is extremely rare. So, every skill you add significantly reduces your competitors, making you rarer and more valuable.

This is also why I haven't found a technical editor for my public account – because there are simply too few people suitable to help with my public account content.

Honestly, from Sketch to Figma, the conflict of different design and development formats persists. In traditional workflows, the fidelity from design to code averaged less than 70%, and the page interaction handover often required 3-5 rounds of annotation and rework. Those who know, know how painful it is.

Previously, the frontend development process involved product managers finalizing wireframes, UI designers creating mockups, and then frontend developers coding. How much communication cost and development cycle time were involved in between? Now, with the help of a design agent, it might just be a matter of a few sentences; input natural language, and you can get deliverable project files.

Therefore, if you have certain aspirations for the visual effect of your webpages, or want to optimize your team's existing development process, you can try a design Agent like QoderWork Design Desk. It is indeed a productivity tool that can enhance aesthetics and improve efficiency.

Finally, I hope the comments section won't accuse me of selling anxiety. Because AI is developing too fast, even I myself am very anxious.

But anxiety is normal. The key is how you deal with it – whether to take action or let it fester, that's up to you.

However, my family's two generations of experience tell me that one cannot always keep their head down pulling the cart; one must also look up at the road.

Those who can read this far are truly rare gems!

If you think it's good, please give it a like, "in-sight," and share it ✨

If you want to receive push notifications immediately, you can also star it ⭐

Thank you for patiently reading my article~