TRAE Work Launches Design Mode: Conversation as Design, Canvas as Prototype
TRAE Work has launched a new Design mode, fully available on both desktop and web versions simultaneously. Users can generate design schemes through natural language conversations, modify them in real-time on the canvas, and create interactive prototypes. This mode supports importing existing design assets such as Figma and allows one-click export of design drafts to Code mode, achieving a seamless one-stop connection from design to development.
Design mode is a work mode in TRAE Work dedicated to generating and iterating interface designs. You can input design requirements, upload reference images, or select a design system to let AI generate page prototypes or high-fidelity designs.
Generated design results are displayed on the canvas, supporting further editing, previewing, exporting, and other operations. Once design outcomes are confirmed, they can be combined with Code mode to further transform them into frontend code or development tasks.
Use Cases
The following scenarios can prioritize using Design mode:
- Quickly generate page designs
Describe page type, content structure, visual style, etc., via natural language to generate web or app page designs. Results can be edited further on the canvas, exported as design files, or handed over to Code mode for continued development.
- Generate pages based on established styles
When a team already has an established design style, relevant assets (themes, components, images, etc.) can be imported into the design system and reused when generating pages.
- Batch modify existing design drafts
For existing design drafts, AI can execute batch adjustments to reduce repetitive operations. Common operations include globally replacing colors, unifying font styles, or generating different content versions based on the same page template.
- Manage and share design assets
Teams can centrally manage themes, images, components, and design specifications through the design system, supporting import, export, and sharing, making design assets reusable and migratable.
Quick Start
Switch to Design Mode
In the top left corner of the interface, click Design to switch TRAE Work to Design mode.
Specify Design Style
In the lower left of the conversation input box, click the design style dropdown menu to select the desired design style, making generated results closer to expectations.
Options are as follows:
- Free Exploration: TRAE Work will automatically select a suitable design style based on your requirements, suitable for early concept exploration or scenarios where design specifications are not yet determined.
- Design System: The design system is used to store themes, components, graphics, and design specifications. You can select TRAE Work's built-in design system or create and use a custom design system. For details, refer to Design System.
Initiate Task
Describe design requirements in the input box and provide necessary context as much as possible, such as page type, core content, target users, visual style, device dimensions, and interaction requirements. The clearer the context, the closer the generated results will be to expectations.
Common task types are as follows:
- Design Restoration: Upload UI reference images and explain the scope to be restored or adjusted using natural language, letting AI generate corresponding designs based on the reference images.
- Concept to Draft: Directly describe the design goal, content structure, and visual style, letting AI generate page prototypes or high-fidelity designs.
- Specification to Image: Select a suitable design system and explain requirements, letting AI generate design outcomes that comply with specified design specifications.
Preview and Manage Design Outcomes in Canvas
After task completion, TRAE Work will display design outcomes on the canvas. You can preview, move, and organize artifacts, import materials, export design files, etc.
The top toolbar supports the following operations:
After selecting a specific artifact, an operation menu will appear at its top:
Develop Design Artifacts Using Code Mode
When artifacts meet requirements, you can send them to Code mode and generate corresponding frontend code based on them.
- Select one or more artifacts needing development in the canvas.
- In the top navigation bar, select ··· > Export Design File > Develop in Code Mode.
TRAE Work will open an independent Code mode window, package the selected design outcomes into a .zip file and add it to the conversation input box, while filling in default development instructions.
- Modify default instructions as needed, such as supplementing tech stack, page interaction, responsive requirements, or code directory specifications.
- Select task running environment and code storage location.
- Send instructions.
This page provides an editorial summary based on publicly available information. It is not a republished article. Use the source link below for the original report.