I. Introduction

Among domestic large models, ByteDance is an outlier.

Unlike other large models that make a big fuss and fight for attention, it is more low-key and less noticeable.

However, it does the most, with independent brands for large models, Agents, development tools, and cloud services, all blossoming everywhere, covering all bases and advancing at high speed.

Seed is ByteDance's large model team, with several product lines under it, and the recently hyped video model Seedance 2.0 is their product.

Today, I will write a Skill tutorial using ByteDance's full suite ---- the newly released Seed 2.0 model and development tool TRAE.

You will see that they work together as powerful yet simple and user-friendly, and (for personal users) are also free This is also why I wrote this, to let everyone know about this solution.

It only takes ten minutes to read this tutorial, and you will also understand what Skill is, how to use it, and why you must use it.

II. Introduction to Seed 2.0

First, let's introduce Seed 2.0, which is the base model of the Seed family.

A "base model" (foundation model) refers to a general-purpose large model, which can be used to build various downstream models. The two main features are scale and strong generalization ability, making it easier to build other models.

The well-known Doubao is based on the Seed model and is also known as the "Doubao Large Model". This time, Seed 2.0 includes three general-purpose models: Pro, Lite, and Mini, as well as the Seed 2.0 Code model specifically designed for developers.

As it must support various uses, Seed 2.0's versatility is particularly prominent, stronger than previous versions.

1. Supports multimodal, capable of processing various types of data: text, charts, visual space, motion, video, and more.

2. Possesses various Agent capabilities, facilitating integration with enterprise tools: search, function calls, tool calls, multi-round instructions, context management, etc.

3. Has reasoning and coding capabilities.

Due to the last point, we can use it for programming, especially for generating front-end code. Combined with the AI programming tool TRAE released by ByteDance, the effect is excellent, especially convenient for full-stack development, and it's free for individual users.

III. Preparations for TRAE

Download and install TRAE, it has two modes, which can be switched in the upper left corner: IDE mode and SOLO mode.

Select IDE, SOLO is an AI task orchestrator, unless multiple tasks are run together, it's not needed.

Then, press the shortcut key Ctrl + U (or Command + U) to bring up a dialog box for conversation with AI.

We are building a web application, so select @Builder development mode in the upper left corner. Choose Seed-2.0-Code in the lower right corner.

It can be seen that TRAE's built-in domestic open-source programming model is very comprehensive and all free to use.

Preparation is almost done.

Four, programming and testing

I chose a somewhat challenging task to generate with Seed 2.0.

ASCII art is graphics drawn using characters, such as the image below.

I plan to create a web application where users can input ASCII graphics on the webpage, which will automatically convert them into hand-drawn style graphics in the Excalidraw style.

Prompt as follows:

"Create a web app that can convert ASCII graphics into Excalidraw-style images and provide a download option."

The model begins to think, breaking down this task into four steps.

V. Generate Results

Once the code generation for Seed 2.0 is complete, TRAE will start a local service at localhost:8080, while also opening the preview window.

The generated result is quite interesting, the upper ASCII input box provides four examples: Box, Tree, Flowchart, Smiley. Below is the appearance of Tree.

Then comes the control panel for Excalidraw parameters: line width, roughness, curvature, font size.

Click the Convert (Convert) button to get a hand-drawn style line drawing immediately.

The entire page looks like this.

VI. Skill Introduction

The design of this page doesn't feel very aesthetic and could be improved. I plan to add a dedicated front-end design skill to Seed 2.0 to create more aesthetically pleasing pages.

A "Skill" is a prompt specifically designed for a particular purpose, used to inject context.

Sometimes, prompts are very long, and typing them every time is cumbersome. We can extract the frequently used parts and save them in a file for easy reuse. Such extracted prompts are often detailed descriptions of how to complete a task, so they are called "skill files."

In terms of format, it is a Markdown text file with a YAML header containing the name field and description field.

The name field is the name of the Skill, which can be used to invoke the skill by this name; the description field is a brief description of the skill, and the model uses this description to determine when to automatically invoke the skill.

Some skills are quite complex, in addition to the description file, there are dedicated script files, resource files, template files, and so on, similar to a codebase.

Among these files, SKILL.md is the entry file, and the model uses its description to understand when and where to invoke the other files.

This library can be shared online, allowing others to use it. If you find that the AI model needs a certain skill when processing tasks, you can look for Skills written by others and load them into the model.

Section 7: Front-end Design Skills

Below, I use what Anthropic Inc. has shared.Front-end design skillsRedesign the previous page. It only consists of a single Markdown file, which can be downloaded.

Open the "Settings/Rules and Skills" page for TRAE.

Click the "+ Create" button in the Skills section to open the skill creation window.

You can fill in the SKill content in this window or upload an existing Skill file. I choose to upload, and after completion, you can see that the frontend-design skill is already in the list.

Then, I used the following prompt to invoke this skill to rebuild the page.

"Using the frontend-design skill, refactor this page to make it more beautiful and user-friendly, with a more professional feel."

Below is the text description and reconstruction result provided by the model.

The page indeed feels more upscale!

8. Vercel Deploy Skill

Finally, let's look at another example of a skill.

After code generation, it runs on the local machine. Can it be published online and shared with more people?

The answer is that as long as you use Vercel's deploy skill, you can publish the generated results to Vercel's machines with a single command.

In the GitHub repository of Vercel's official skills, download the zip file for the Vercel-deploy skill.

Then, drag this zip file into the skill window of TRAE, and it will load automatically.

"Publish the generated website to Vercel."

The model will execute the vercel-deploy skill, publish the website to Vercel, and finally provide two links: one is the preview link, and the other is the link to publish to your personal account.

Everyone can access nowThis linkLet's see the actual effect of the website.

IX. Summary

If you've read this far, you should agree with my point. Seed 2.0's programming capabilities are quite good, and when paired with its own programming tool TRAE, it's both user-friendly and free.

Skill is a powerful capability extension mechanism that makes the model capable of anything, so it's essential to learn how to use it.

(Complete)