1. Demo 简介
-
是什么：TRAE FLOW 的核心理念是 「利用TRAE的能力创建专属于你的 Mac 灵动岛」：TRAE 任务动态丝滑上岛、VibeCoding 任意组件到灵动岛和展开区域显示、使用TRAE Work Design 一键创建专属于你的电子宠物上岛还可以拖拽显示到桌面。
-
面向谁：为TRAE 用户提供一个好用易用、高自由度、附带提供情绪价值的灵动岛：
-
同时启用多 TRAE 窗口的开发者：同时开着TRAE的多个窗口，希望所有任务状态汇聚在一个入口；
-
喜欢 VibeCoding 自定义工作流的人：不满足于固定功能，想把自己写的 HTML、数据面板、小工具直接塞进灵动岛；
-
想让桌面更有「陪伴感」的用户：想要一个属于自己的电子宠物，在编码时变换 idle、运行、等待、跳跃动作，还能拖拽到桌面显示、用滚轮缩放大小。
-
-
主要功能：
-
TRAE 任务动态丝滑上岛
通过 Trae 官方 Hook 协议，实时监听SessionStart、UserPromptSubmit、PreToolUse、PostToolUse、Stop、Notification事件，四个 TRAE 变体（TRAE / TRAE CN / TRAE WORK / TRAE WORK CN）的任务状态自动汇聚到 Flow 岛右侧。需要审批、追问、干预时，岛会自动展开；处理完即可一键跳回对应 IDE 窗口，无需在 Dock 和标签页里翻找。
-
VibeCoding 任意组件上岛
左侧功能岛完全开放：内置音乐控制、文件中转站、新闻热搜集合，更支持把本地 HTML 目录或任意远程网页直接渲染进灵动岛。通过traeFlowHintJS Bridge，网页还能向灵动岛上推送提示或内容；文件改动通过 FSEvents 实时刷新。你可以用任何前端工具链写一个小组件，下一秒它就出现在你的岛上。
-
TRAE Work Design 一键创建专属于你的电子宠物上岛
内置基于精灵表的桌面宠物系统，内置 月薪喵、ikun、Frieren 等多个主题。更支持从~/.traeflow/pets加载自定义宠物包，让你可以用 TRAE Work Design 工作流生成自己的角色素材（已内置完整工作流提示词），一键放上岛。宠物会随编码状态切换动画，还能拖拽到桌面、滚轮缩放，成为你的专属桌面陪伴。
-
2. Demo 创作思路
-
灵感来源：
灵感来自 ping-island、vibe-notch、boring.notch、claude-island、nookX这些灵动岛风格的 AI 代理监视器和功能软件。它们证明了：macOS 刘海屏下方那块区域，天生适合承载 AI 的实时状态、实用小组件。但越看这些产品，我越觉得它们像是「别人定义好的岛」——状态是固定的、功能是固定的、可用组件是固定的、宠物也是固定的，有些收费并且还不支持TRAE。而我每天同时开着 TRAE CN、TRAE WORK，我希望的岛是属于我自己的：它上面应该出现我关心的 TRAE 任务、我写的 VibeCoding 小组件、我设计的电子宠物。
于是 TRAE FLOW 的核心理念自然浮现：利用TRAE的能力创建专属于你的 Mac 灵动岛；
-
想解决的问题：
-
TRAE 任务状态太分散：四个变体、多个窗口，开发者很难一眼判断「谁需要我」。我希望任务能丝滑上岛，自动聚合、自动提醒、一键跳回。
-
灵动岛组件不够自由：现有方案大多是固定面板，用户只能看、不能放自己的东西。我想让用户通过 VibeCoding，把任意 HTML、数据看板、小工具上岛。
-
桌面缺少专属陪伴：很多效率工具冷冰冰的。我希望用户能用 TRAE Work Design 轻松创建自己的电子宠物，让编码过程多一个会动、会反应、属于自己的伙伴。
-
-
为什么做这个方向：
-
从「看岛」到「造岛」是更本质的差异化：ping-island、vibe-notch、boring.notch、claude-island 已经验证了形态但这些应用都没有支持TRAE并且功能较少且固定，TRAE FLOW 不仅支持了TRAE任务监控并且契合TRAE的能力选择把注意力从「监视」转移到「创造」，——每个用户都能造出不一样的岛，每个人都是自己产品的产品经理。
-
三条主线对应三个用户动作：「TRAE 任务上岛」解决效率问题，「VibeCoding 内容上岛」解决工具自由度问题，「电子宠物上岛」提供情绪价值。三条线合在一起，才让 TRAE FLOW 不只是一个工具，而是创造个人化桌面空间。
-
TRAE 官方 Hook 让「丝滑」成为可能：没有官方事件，任务上岛就只能靠轮询或猜测；有了
SessionStart到Notification的完整事件流，岛的展开、收起、提醒才能做到真正无感。 -
自定义 HTML + JS Bridge 是「任意内容」的关键：开放 WebView + Bridge。用户可以用最熟悉的前端方式创造内容，这比内置 100 个固定组件更有生命力。
-
宠物系统直接调用最新上线的TRAE Work Design：支持自定义宠物，鼓励用户用 TRAE Work Design 一键生成自己的宠物，真正实现「一键创建专属于你的电子宠物上岛」。
-
后期可拓展为TRAE社区灵动岛组件/宠物板块，大家可以分享自己创作的灵动岛组件、宠物。提升社区用户活跃度和基于用户创造性提升出圈可能性。
-
在过去这类工具是开发者的专属，你要懂 Swift、懂 macOS API、懂 Xcode 工程化，才能给 Mac 写一个灵动岛小组件。
TRAE FLOW站在巨人的肩膀上把这件事的门槛降到了零。提供一个所想即所得的入口，面向更大的用户群体——产品经理、运营、学生、老师、设计师——任何人只要有想法，就能立马让它在屏幕上跑起来。
-
3. Demo 体验地址
4. TRAE 实践过程
第一步：
3068085140728899:a2fd2cc6b84f316dc4d9ed7ae498b0a3_6a3e2813d605ccd00e56a8ac.6a3e2813d605ccd00e56a8af.6a3e2813d605ccd00e56a8ad:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/26 15:19:47)
直接把初赛报名写好的创意提案和想要补充的功能、选择作为框架基础的开源库发给TRAE WORK的/specs生成需求描述、Tasks、检查节点文档
这里trae给出的集成可行性方案中有错误，实际上TRAE官方已支持了hook配置
https://docs.trae.cn/ide_automate-actions-with-hooks
继续补充需求的时候出现了一个问题，需求还没明确完成TRAE就急着开始写代码了
继续补充想要实现的功能让TRAE帮我确认可行方案
specs检查一遍基本满意了，最后让TRAE做个review
第二步：
3068085140728899:012f89e9c6e62c9c171271fbecf3e2f9_6a3e545337d383c53b4fa5a2.6a3e545337d383c53b4fa5a5.6a3e545337d383c53b4fa5a3:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/26 18:28:35)
开了一个新对话选择了使用glm5.2+速通来实现确定好的specs。
实现完成后就是漫长的测试调整优化了。
第三步：
3068085140728899:d0c94f9bac7fb203f242768693661313_6a3f9f5c37d383c53b4fd079.6a3f9f5c37d383c53b4fd07c.6a3f9f5c37d383c53b4fd07a:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/27 18:01:00)
三大核心功能之宠物系统
依然是spec起手把需求描述出来然后按照trae生成的文档进行检查和修改没问题后开始执行，执行完成后测试和优化。
3068085140728899:e76b6747f045dc740fc91fe3ff336ad8_6a423973bb4dd69ae63c2537.6a423973bb4dd69ae63c253a.6a423973bb4dd69ae63c2538:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/29 17:22:59)
测试了可以使用TRAE Work刚新出的Design生成自定义宠物
把提示词添加进项目里了，一键生成get自定义宠物
第四步：
3068085140728899:759e7d0628b0ad85b23b386ee571bf81_6a41151037d383c53b4fe650.6a41207437d383c53b4fe6cd.6a41207437d383c53b4fe6cb:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/28 21:24:04)
三大核心功能之自定义页面组件
这次选择了先讨论功能性的实现方案在生成spec,因为直接前面几次开spec再进行讨论的话会出现还没确认最终方案就开始执行写代码的问题，希望trae能优化一下这方面的体验
经过漫长的技术方案讨论后最终完成specs进入执行代码编写环节。
第五步：
3068085140728899:fe450140a7040f799c6c27b5fab47ad5_6a45e5d7822bda3534d0009e.6a45e5d7822bda3534d000a1.6a45e5d7822bda3534d0009f:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 12:15:19)
发布到github，中间很多对话是有些功能测试有问题后一直出现重复的改不动的问题然后进行了多次代码的重构 
优化测试补充：
调试过程中发现TRAE Work虽然设置里没显示hooks设置但实际是支持使用的 
3068085140728899:147192ccd631bcb5d16eb58a21f7dd37_6a47e6d1446d1b4501efdd10.6a485fa0446d1b4501efdecb.6a485fa0446d1b4501efdec9:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 09:19:28)
添加了最近爆火的开源音乐播放器MineRadio,接入使用体验效果很好。
3068085140728899:1ad253623bc64e4b4b5f6bf8866b3628_6a4a87dea9445adabfd2eff0.6a4a87dea9445adabfd2eff3.6a4a87dea9445adabfd2eff1:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/6 00:35:42)
5. 对应的报名审核通过的帖子链接
