用 TRAE Work 三模式联动，一个人从设计到上线一套 AI 训练系统
#TRAE技巧便利店
背景
我是一个独立开发者，最近在做一套 AI 提示词迭代训练系统 用于参与trae举办的大赛，完全基于trae work实现的完整的项目——用户用成功/失败案例描述业务标准，系统通过多轮评估、分析和优化，自动产出可部署的提示词。
技术栈是 FastAPI + 原生前端（无框架），一个人要搞定设计、前后端、联调全流程。TRAE Work 的三种模式在这个过程中帮了大忙，下面说说我的真实用法。
一、Design 模式：先画图再写码，少走弯路
以前我是直接上手写 HTML，写完发现布局不对又来回改。这次我先用 Design 模式 画了整套系统的原型：
- 在画布上直接拖拽出侧边栏、训练面板、案例列表的布局
- 一眼就能看到整套系统的完整设计，不用在脑子里拼页面
- 调整好间距和层次后，再照着写 CSS，几乎不用返工
省心点：设计稿和代码在同一张画布上，改设计的时候能直接看到效果，不用在 Figma 和编辑器之间来回切。
二、Code 模式：前后端联调的舒适区
这个项目前端是原生 HTML/CSS/JS（没有 React/Vue），后端是 FastAPI。用 Code 模式开发时最舒服的一点：
右侧实时预览 + 元素精准定位
- 改完前端代码，右侧画布立刻展示效果，不用手动刷新浏览器
- 可以快速选择页面里的元素给 AI，告诉它"这个按钮的间距不对"“这个卡片需要调整”
- AI 能精准定位到需要修改的位置，不用我自己去翻文件找行号
联调场景：后端 API 跑起来后，前端直接在预览里调，控制台报错一眼就能看到。训练面板的实时事件流、进度条、案例详情展开这些交互细节，都是这样快速调出来的。
最爽的是调试训练进度的时候——后端在跑训练任务，前端在实时展示事件流，我在 Code 模式里一边看预览效果一边改样式，改完刷新就能看到新效果，不用切窗口。
三、Work 模式 + 飞书技能：信息整理利器
参加开发大赛的时候，规则帖和赛程帖都很长。我直接把帖子链接粘贴给 TRAE Work，它内置的飞书技能一下就帮我：
- 把比赛规则提炼成重点清单
- 规划出我该做什么、先做什么后做什么
- 连时间节点和交付要求都整理好了
真的不要太方便——以前看一篇长帖要半小时，现在几分钟就有了结构化的行动清单，直接照着做就行。
总结
三种模式各有侧重，但组合起来用才是最大价值：
| 模式 | 我的用法 | 省了什么 |
|---|---|---|
| Design | 画系统原型和布局 | 不用额外开设计工具，设计稿和代码同屏 |
| Code | 前后端开发 + 联调 | 右侧实时预览 + 元素精准定位，调试速度翻倍 |
| Work | 整理比赛规则和长文 | 飞书技能一键提炼重点，秒出行动清单 |
一个人做全栈项目，最怕的就是在工具之间来回切换。TRAE Work 把设计、开发、信息整理放在一个地方，省下的时间都能多写两个功能了。