【学习工作赛道】知境—基于原子组件与全域 AI 的多身份个性化协作工作台
0. 先和大家打个招呼吧 
我是一名来自杭州电子科技大学的大一新生。
在这部分我想不用ai，而发自内心的说一些真实感受与使用trae中学到的东西，感谢你有耐心能接着看下去。很久之前我就有开发一个属于自己软件的想法，因为在学习与团队协作需要，我曾一直寻找一些软件去满足我做笔记与团队协同开发需求的软件，这其中我尝试了notion，飞书，甚至钉钉。但随着不同软件对比与实际使用，我总有一种感受，那就是功能太复杂，许多不用的功能堆叠在一起让我很难专一高效的去完成工作流，所有我萌生了一种想法，那就是自己开发一款软件去适应工作流，元境应运而生。
有一些统筹经验和软件开发基础知识的储备，我先使用Dsign去做UI开发（这里觉得TRAE的Dsign功能真的很实用，但是最开始我遇到的画板增多导致预览中修改代码会导致预览崩溃的bug让我很头疼，还好在第二个更新推送中修复了），然后转移到Code去做功能实现，最开始计划开发三端互通的软件，flutter架构，真正实现起来才发现难如登天，经过三个通宵的打磨，我发现最开始的底层框架搭建错了，但是重新写底层架构时间来不及，于是转到web端开发（相比较web开发AI的能力很强），两三天就完成了，这两三天在高铁飞机上都在赶代码和设计文档（会在源文件中.trae文件夹中展现，各位可以去找找彩蛋）。
更加深刻的理解了如何最大程度开发AI能力，比如不同文件夹协同的时候（服务器端和源文件端一般都需要不同项目且AI不能同时修改两个路径不同的文件夹），让其中一个AI出一份让另一个AI的需求文档而转给另个AI，可以节约很多交流成本。但是最重要的我认为就是一定要和AI在最开始分析好项目需要什么框架，进而避免写到一半发现框架不能完全适配的问题。
1. Demo 简介
-
是什么：三端互通的基于组件与全域AI的个性化工作流平台；
-
面向谁：学生，团队，有成熟工作流的个人工作者；
-
主要功能：
一、基于组件的工作流搭建，调节不同组件搭建符合自己工作流程的办公学习软件。
用户可以在调节组件中自己选择组件顺序和展示哪些组件。
二、全域AI助手，帮助你构建后台、多维表格、整理笔记甚至构建优化工作流。
从底层代码接入AI，预留丰富的API提供组件调用，让AI深入工作的每个角落。
三、丰富的社区组件，或通过AI开发满足自己需求的个性化组件使用与分享。
（图片仅为UI设计参考，内容存在不准确性，请以实际网页为准）
2. Demo 创作思路
很久之前我就有开发一个属于自己软件的想法，因为在学习与团队协作需要，我曾一直寻找一些软件去满足我做笔记与团队协同开发需求的软件，这其中我尝试了notion，飞书，甚至钉钉。但随着不同软件对比与实际使用，我总有一种感受，那就是功能太复杂，许多不用的功能堆叠在一起让我很难专一高效的去完成工作流，所有我萌生了一种想法，那就是自己开发一款软件去适应工作流，元境应运而生。；
我希望通过这个软件能够个性化自己的工作流程，只使用需要的组件，干干净净的，不必再因无用的功能太多而在找工具的过程上浪费太多时间，或使用后突然发现宿主软件难以满足现有工作流程导致的多开软件，进而多软件项目通讯浪费时间。
3. Demo 体验地址
网页内与后台端截图：
4. TRAE 实践过程
1：使用TRAE进行基础的项目构思与框架搭建，让TRAE开发出最初的项目开发文档。并使用Design功能开发UI界面，确定了使用web端框架，以及【iframe】封闭的组件规范文档。
274210802382272:8dc5f8fe8e175da88fb79b007d0e72e5_6a48c4b97bb4a4a6f4a29ae4.6a48c4b97bb4a4a6f4a29ae7.6a48c4b97bb4a4a6f4a29ae5:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/4 16:30:49)
2：根据TRAE设计的UI界面导出到Code模式进行宿主框架开发，包括设置界面，导航栏，登录与注册和组件中心等，同时要求AI预留好AI的API和数据库API，为后续开发ai，数据库做准备。
274210802382272:e7644a9a600062d80d02ef5a759f66f6_6a54bc389de0873b89356bbe.6a54bc389de0873b89356bc1.6a54bc389de0873b89356bbf:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/13 18:21:44)
274210802382272:1fb6fa71f60094db956d22e8b8b7fb35_6a54cd50f8bb9c3eefc44eb3.6a54cde9f8bb9c3eefc44ef2.6a54cde9f8bb9c3eefc44ef0:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/13 19:37:13)
3：搭建完成主题框架后要求AI做出封闭【iframe】结构组件的开发规范文档，并且调用AI选择新文件夹开发虚拟机和服务器部署，要求AI制作后端界面，并且链接前端。将AI部署，apikey与先前预留的AI接口连接。
274210802382272:f9da4cd7eeb0a3f7107d42702d725ffb_6a56fd82fecbbfe5c0d896f1.6a56fd82fecbbfe5c0d896f4.6a56fd82fecbbfe5c0d896f2:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 11:24:50)
274210802382272:cafab4560d648002c69db89883843de8_6a56f91efecbbfe5c0d89435.6a56f91efecbbfe5c0d89438.6a56f91efecbbfe5c0d89436:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 11:06:06)
4：根据先前组件开发文档，AntDesginUI设计规范开发后端界面，与基础的组件，同时部署内网穿透，让公网能够访问网站。
5. 对应的报名审核通过的帖子链接
【学习工作赛道】知境—基于原子组件与全域 AI 的多身份个性化协作工作台 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
