跪拜 Guibai
← Back to the summary

ByteDance's TraeWork Spins Up a Full-Stack Family Dashboard in 15 Minutes

Building a Family Workstation for Kids with TraeWork

Personal Site

https://blog.zbztb.cn/

Preface

Hello everyone, I'm Wanshao. Summer vacation is here, and the kids have been staying at home lately. Their daily routines and meal plans are quite casual, unlike the structured schedule they had at school. I wanted a tool that could conveniently help me record my child's diet, studies, daily routines, habits, and more.

Access address:

https://gongzuotai.zbztb.cn

Tool Selection

This Family Children's Workstation has quite a few requirements. The intuitive needs include: a nice-looking UI, stable functionality, and the ability for data to link between modules. Since this is an MVP product, the database is preferably stored locally in IndexedDB.

TraeWork Introduction

https://docs.trae.cn/work_what-is-trae-work

Based on the requirements above, I chose to use ByteDance's TraeWork.

TraeWork is an AI-native workspace offering Web, Desktop, and Mobile clients. It has three built-in work modes—Work / Code / Design—catering to different roles like developers, product managers, and designers.

Download and Installation

We'll be using the TraeWork Desktop version here

https://www.trae.cn/ide/download?utm_source=content&utm_medium=doc_solo&utm_campaign=overview#solo-download

After downloading and installing, an icon will appear on the desktop.

Open it to get started.

Basic Workspace Introduction

The left menu has four functional entry points:

Proposing Requirements for the Family Workstation Task

State your requirements in TraeWork. Open the TraeWork Desktop version, create a new task, and remember to select a local workspace—this is where the workstation's related code will be stored.

Local mode runs the task directly on your computer.

Cloud mode means TraeWork provides you with an online runtime environment, so the task doesn't have to run on your computer.

You can choose the model based on your needs. If you're unsure about the differences between models, you can also directly select AutoMode.

Then start proposing the requirements:

Note that last sentence: "Based on my rough requirements, please align the plan with me, and then help me save the detailed development plan to a local desktop md file"—this is key. I didn't rush the AI into writing code; instead, I first had it solidify the development plan.

After a moment, TraeWork indeed generated an md file on the local desktop.

image-20260805102921091

A look at the content:

The development document was quite detailed, covering project positioning, tech stack selection, functional modules, data models, and other aspects we care about.

Next, you can fine-tune the current document based on requirements. Actually, I didn't make any adjustments later and just used it directly.

Executing the Plan

Next, let TraeWork start executing this development plan.

As you can see, the development was set up in under 15 minutes. Compared to traditional development, which would have taken at least a month, the efficiency gain is enormous.

And it can also be run locally right away.

Fine-Tuning

Adding Recipes

Actually, from the start, I just wanted a usable Family Children's Workstation. I hadn't thought too much about many details and requirements. So after getting the workstation running, I could continue fine-tuning.

For example, in the diet management module, the recipe library initially had no preset recipes. I wanted the workstation to include some common recipes and also allow adding new ones, as shown below.




Adding Themes

Then, this workstation only had a default pink theme. As a tough guy, I couldn't accept that, so I had it continue to add some themes for me.


In the time it takes for a cup of coffee, the skins were ready: Fresh and Bright, Eye-Care Night Mode, and Sakura Vitality. I'm very satisfied with this ability to understand immediately and execute correctly.

Fixing Hidden Bugs

Then I felt the functionality was about right, so I let the AI do a comprehensive test itself, helping me check and fix some bugs I might not have noticed.

The result? In 12 minutes, it actually found 2 hidden bugs. That's really thoughtful. If these had been discovered after going live, they might have caused anomalies in my real data. Thumbs up to TraeWork for this.

Changing the Name and Creating a New Favicon

Finally, there were some minor tweaks left, like the website lacking a favicon icon and the name Family Children's Workstation not being distinctive enough. I had TraeWork handle all of these for me.

Finally, it reached a usable standard. My child's data for this summer vacation is now all under my control.

Summary

Using TraeWork to build a family workstation for my child this time, I have a few deep impressions from the whole process.

At the beginning, I didn't rush the AI into development. Instead, I first had it solidify the development plan into a local md document based on my initial requirements.

The entire development was set up and running locally in under 15 minutes. Compared to traditional development cycles that easily take a month, the efficiency gain is enormous. For MVP-stage product validation, this speed is very friendly.

Before going live, I also had it do a comprehensive test itself, and it found 2 hidden bugs in 12 minutes.

Often, it's not that we lack ideas, but that the distance from idea to finished product is too far—so far that it discourages people from even starting. AI-native workspaces like TraeWork are shortening this distance—from a month to the time it takes for a cup of coffee.