TRAE Work Design First Experience: A Translator in the Design Field

1

Recently, I tried out the newly launched Design mode of TRAE Work.

TRAE Work is different from TRAE IDE. The former is designed for the workflow of ordinary users, while the latter is more oriented towards code production. It is also a software that can run locally (or on the cloud), so it can retrieve and use local files and scripts.

Since Claude gained the Design ability, many of my friends have been waiting for a similar product in China. Now, it has finally arrived.

After using it, my first impression is that TRAE Work Design is by no means a product that "makes everyone a designer." This statement is too much of a marketing gimmick and not very accurate. It is more like a translator in the design field.

In the past, an idea of ours had to go through many translations.

The idea in our minds had to be translated into a requirements document; the requirements document had to be translated into a prototype; the prototype had to be translated into a design draft; and the design draft had to be translated into code. Something could be lost at each level. When the boss says "make it more high - end," the product manager might understand it as "make the information hierarchy clearer," the designer might think it means "more white space and more restrained colors," and the developer might say "we have to change the button style again." The degree of information distortion in the process is too high, just like a game of telephone, and the final result is often off - target.

The significance of TRAE Work Design is that it reduces the cost of the most laborious translation layer in the middle. Describe a page, a product, or a set of templates in natural language, and it can first translate them into a visual result. This result may not be perfect, but the important thing is that it finally becomes something that can be seen, something that can be clicked on, and especially, something that can be further modified.

This is much more important than simply "having AI generate an image."

2

Let's start with the most direct scenario, product prototypes.

I once developed a small game library app called Gamepix. Its function is very simple: to collect the games I've played and record them as a game wall, serving as my own game archive.

If you only describe this kind of product in words, it's actually quite difficult to clearly illustrate what it should look like. Saying "make it more modern," "make it cleaner," or "make it suitable for iOS" all sound okay, but different people have different images in their minds.

I asked TRAE Work Design to help me create the main interface of this app.

In the first version, it created a relatively simple and elegant dark - colored gallery style. The background is dark gray - black, purple is used as the brand color, the game cover cards are arranged in two columns, and the search bar, filter, and bottom tab are quite restrained.

Note that all the elements in this interface are interactive. For example, these small labels below can be directly adjusted through visual operations. You can also directly add them to the conversation and let the AI make modifications.

This is the significance of the translator.

In the past, when we discussed design styles, we often talked about adjectives. What does "having a sense of texture" mean? What does "youthful" mean? What does "not too internet - like" mean? What does "high - end but not too cold" mean? What does "colorful black" mean? Now we can generate the results first. Instead of asking everyone "what does high - end mean," we can directly create three versions and see which one is more high - end.

This canvas is like a target, at least giving everyone a clear focus when discussing.

This is very important for product managers and independent developers. This doesn't mean bypassing designers to create the final draft. Instead, it requires a semi - finished product that is closer to the formal product. Low - fidelity prototypes are too abstract for bosses to understand and can easily be misinterpreted by developers. High - fidelity designs are too resource - intensive. If the requirements aren't finalized yet and you ask designers to create three versions, it's difficult to coordinate resources, and the process will get stuck.

An interactive demo can not only visually present the general effect. More importantly, if you later enter the Code mode, you don't have to explain many things again. This was also a very important value of Figma before.

In the past, there was translation loss at each level from requirements to design and from design to code. Now, with AI design tools, this loss will be much less. Or rather, people feel like they have a unified language.

3

If the previous case seems far from most people, let's talk about something else.

Actually, design is also common in our daily life and work. For example, PPTs.

I've tried many tools for generating PPTs with AI before. At first glance, they seem okay, and sometimes they're even quite amazing. But when you focus on the details, you'll find a whole host of problems. There are issues like inconsistent font sizes, mismatched color schemes, misaligned layouts, strange image positions, too much text, and too little white space. If you ask the AI to make modifications, it might fix one problem but mess up another. In the end, I usually find that it's better to create the PPT myself than to keep trying these tools blindly.

For most people, I always think that the ideal AI - generated PPT is not "generating a complete PPT with one click." The real user demand is usually to first set up a template that they approve of, fixing the font, color, layout, and typesetting rules. Then, every time you feed in the manuscript, the AI understands the content and fills it into the template.

This time, I tried to ask TRAE Work Design to create a set of PPT templates.

At first, my requirements were very simple: stable, clean, suitable for business and technical content, not flashy, and with clear information. It generated several fixed layouts: a cover page, a chapter transition page, a page with text on the left and an image on the right, a pure - text argument page, a data chart page, and an ending page.

This step seems similar to other tools. But actually, it's about establishing a set of expression rules.

I continued to say that the background should have a more high - end feel, I wanted a Klein blue style, a nicer background pattern, less text, and a larger font size. So it changed the whole set of templates to a Klein blue background, added geometric patterns and a very light inner glow, and changed the text on each page from paragraphs to keywords.

At the same time, I gave it the original manuscript of a podcast I had done before. The result was like this:

For example, the first line of this page originally read:

"Born in 1900, his father was a shoe factory sewing worker. After graduating from middle school, he became an apprentice baker, but his heart was not in it, so he switched to learning shoemaking skills."

It simplified it according to my requirements and changed it to:

"Born in 1900 · Shoemaker family"

There were some details. For example, the position of the large number "02" on the chapter transition page was very strange. Placed vertically centered on the left, it looked very out of place. I could directly select this page and say that the position of this number was wrong and move it to the bottom - left corner. It could be fixed right away.

As mentioned before, these small modifications may seem insignificant, but they can be very troublesome when there are many of them. These steps are the most headache - inducing part when making a PPT. If the rules are established this time, all subsequent PPTs can follow this template.

This is where AI Design products are very different from traditional design software. Traditional design software tests whether you can operate it and remember the specific locations of functions. AI Design tests whether you can clearly state the problem.

Whether an AI tool is useful should not be judged by whether it can "get it right" on the first try, but by how easy it is to make corrections when it goes wrong. TRAE Work Design is more like a design assistant that you can have continuous conversations with. And it also has memory.

4

Content creators can also have their own set of VI systems. In the past, to have such a design system, you might have to spend money to hire an outsourcing team or ask your designer friends for help for free.

Now it's much simpler.

For example, when I run a WeChat official account, I often need article cover images. Of course, I can use a unified font template for the cover images, but this kind of design is a bit crude. And if I fine - tune the design of a cover image every time, the cost is relatively high.

I can ask TRAE Work Design to create a set of cover image design systems.

My requirements for it are: a technology and business - oriented WeChat official account, with content directions including AI tool evaluations, technology history narratives, and business observations. The overall style should be restrained, clean, and have a magazine - like feel. Avoid the cold - toned gradients and glows of technology companies, as well as the style of marketing accounts that are filled with large characters.

The first version was in dark colors. It had a dark navy blue background, white titles, and a fixed signature of "Liu Yan Fei Yu" in the bottom - right corner. There would be a faint wireframe on the right to reflect the theme.

Later, I wanted to change to a gypsum white - yellow style. The background color became warm white gypsum, the title became dark charcoal black, and the vertical line became dark gold. A hollow - out effect was added.

The key to this set of cover image systems is not whether a single image looks good, but that the rules are fixed. The background, line patterns, and title effects are fixed elements; for each article, you only need to replace the title text and slightly adjust the font size according to the number of words. This way, you don't have to start from a blank canvas every time, and you don't have to tell the AI your requirements again.

When we talk about "design systems," we might think that they are only used by the design teams of large companies. But actually, just like Excel templates, contract templates, and email templates. A design system essentially reduces the marginal cost of repetitive work. Every time you make a PPT, you don't have to think about the layout again; every time you make a WeChat official account cover image, you don't have to think about the colors again; every time you make a webpage, you don't have to think about the button rounded corners, font hierarchy, and card styles again. This is the value of the system.

5

AI Design won't make everyone a designer, just as AI coding won't make everyone an independent developer.

What AI Design really reduces is not the threshold of aesthetic judgment, but the threshold of expression and execution. It allows more people to bring out the imaginations in their minds without first having to master the various functions of Figma, Photoshop, and PowerPoint to see a preliminary result. You can first describe it, generate it, and then make modifications.

But this doesn't mean that professional skills are no longer important. On the contrary, when everyone can generate a "seemingly okay" page, what is truly scarce is judgment.

Designers won't lose their value. In the future, what may be more important is not whether they can draw a button, but whether they can define the system, judge the style, and know why a page "seems wrong." Why do some minimalist designs look like Apple's, while others look like unfinished ones? These judgments either require a large amount of experience or professional training and are not naturally acquired.

The same goes for product managers. In the past, some of the skills of product managers were intermediate - level skills: writing PRDs, drawing prototypes, and creating flowcharts