用 TraeWork 搭建爆火的个人工作台

02Trae Work 如何把想法落地#

1一张喜欢的界面参考图
2温暖、安静的视觉氛围
3类似 Apple 的玻璃质感
4所有模块必须能真实操作
5数据刷新后仍然保留

从参考图到可运行产品，Trae Work 完成了八个关键步骤：

Step 1｜拆解参考图的设计语言

从我提供的参考图中提取了晨曦云层、奶油白玻璃卡片、深咖文字和珊瑚橙点缀等视觉特征，并统一了字体、圆角、阴影、间距和交互状态，不是简单照着图片复刻。

Trae Work 通过内置 imagegen 生成并落地背景素材，最终使用的 Prompt 是：

1为高端个人生活工作台生成宽幅、低对比的桃杏色晨曦云层摄影背景。
2视觉重点位于下方及右侧，中央保留低细节空间。
3不包含 UI、文字、人物或水印。

Step 2｜规划工作台的信息架构

Trae Work 把分散的生活管理需求整理成 首页、账本、计划、习惯和日记 五个区域。首页负责展示当天信息和快速操作，二级页面负责查看和管理完整记录，避免把所有内容都堆在同一张页面里。

Step 3｜生成并落地背景素材

它根据参考图的氛围生成了一张低对比的桃杏色晨曦云层背景，并保存为项目本地素材。页面不依赖外部图片链接，打开时更稳定，整体画风也能保持一致。

Step 4｜使用内置 Design 画布推进设计

Step 5｜实现完整的生活记录功能

Trae Work 做出了快速记录、日常记账、待办管理、习惯打卡、饮水与热量记录、25 分钟专注计时、日记管理、历史搜索、天气详情和个人设置等功能。每次点击都会产生真实的数据变化，不是只能看的静态页面。

Step 6｜让个人数据刷新后仍然存在

账目、待办、习惯、学习时间和日记都会自动保存在浏览器本地。第一版不需要配置数据库或注册账号，打开就能直接使用。

Step 7｜适配电脑和手机

桌面端采用左侧导航和多栏卡片布局；手机端自动切换为单列卡片和底部导航，并针对触屏调整按钮、输入框和弹窗。

Step 8｜自动检查功能是否可用

Trae Work 不只生成了代码，还启动真实浏览器逐项测试快速记录、记账、计划、习惯、日记、天气弹窗和移动端布局。

03最终成果#

下面的视频展示了工作台在真实场景中的操作效果。

04这套实践最值得借鉴的地方#

可直接复用的需求模板

1我要搭建什么：
2谁会使用：
3核心使用场景：
4必须具备的功能：
5参考界面与视觉关键词：
6数据保存方式与安全边界：
7电脑端、手机端及验收标准：

看起来是在“让 AI 做页面”，实际上是我们最开始梳理需求要做好的事情，或者叫 Harness。

05使用边界与安全提醒#

Trae Work 能自动生成完整页面，但不能替代产品判断，也不应该默认接管所有数据处理。

适合交给 Trae Work 的任务

• 已有清晰参考图和功能清单。
• 数据保存方式已经确定。
• 电脑端与手机端的要求明确。
• 有可以逐项检查的验收标准。

在这些边界清楚的情况下，Trae Work 可以高效拆解页面结构、统一设计语言、实现功能并执行测试。

不能只用一句模糊需求让它猜

如果只说“帮我做一个好用的生活工作台”，却没有说明谁来使用、需要记录什么、哪些功能优先、数据保存在哪里，Trae Work 只能根据常见产品形态推测。页面可能看起来完整，却不一定符合真实生活习惯。功能取舍、信息优先级和个人使用方式，仍然需要由使用者决定。

Trae Work 可以协助设计数据结构和实现功能；但是否应该采集、保存和展示这些数据，必须由使用者自行判断。