【学习工作赛道】TRAE Flow - 使用TRAE创建专属于你的 Mac 灵动岛

  1. 团队介绍:
    我是一名全栈开发和我的女朋友是一个完全不懂软件开发的牙医。
    我负责项目开发和规划。
    她负责测试项目能不能满足她这样的完全代码小白也能把想要的功能实现到灵动岛上。

    我常跟她聊 AI在我工作里有多好用。她听着,点点头,然后该干嘛干嘛。对她来说,AI 是我嘴里的一个词,和她每天面对的牙椅、患者、病历、排期表没有关系。

    后来我按照她的工作流程想到可以帮她做一个复诊患者的随访时间的应用。她用了一阵,挺高兴,说了很多想要的其他功能,但我工作忙,没时间维护,那个应用就慢慢搁下了。

    如果我让她自己去维护呢?即便有 TRAE 帮她写代码,对她来说依然隔着一条河。她不知道代码写完放在哪,不知道怎么让它跑起来,不知道怎么发布更新。TRAE 能写,但写完之后她够不到。

    这个项目在TRAE能力的基础上提供了从「想要」到「看到」之间那座桥,跨过那条「会写代码」和「能用代码」之间的河。只要说话,就能让想要的东西在电脑上动起来。

    她不需要懂什么是 HTML,不需要懂代码怎么运行。她只做一件事:用最自然的话告诉 TRAE「我想要什么」。TRAE 听懂了,帮她写出来;TRAE FLOW 接过来,放到灵动岛上,放到她随时能看到的地方。

    她说「我希望岛上能提醒我今天哪几个患者该复诊了」,岛上就有了复诊记录表和提醒功能。
    她说「每两小时提醒我喝水」,岛上就有了喝水小组件。
    她说「我要把工作排班显示到岛上」,岛上就有了排班表。

    我们希望这个项目能让一个完全不碰开发技术的人,也享受到「我说,它就在」的体验。

  2. 产品简介:

  • 是什么TRAE FLOW 的核心理念是 「利用TRAE的能力创建专属于你的 Mac 灵动岛」:TRAE 任务动态丝滑上岛、VibeCoding 任意组件到灵动岛和展开区域显示、使用TRAE Work Design 一键创建专属于你的电子宠物上岛还可以拖拽显示到桌面。

  • 面向谁:为TRAE 用户提供一个好用易用、高自由度、附带提供情绪价值的灵动岛

    • 同时启用多 TRAE 窗口的开发者:同时开着TRAE的多个窗口,希望所有任务状态汇聚在一个入口;

    • 喜欢 VibeCoding 自定义工作流的人:不满足于固定功能,想把自己写的 HTML、数据面板、小工具直接塞进灵动岛;

    • 想让桌面更有「陪伴感」的用户:想要一个属于自己的电子宠物,在编码时变换 idle、运行、等待、跳跃动作,还能拖拽到桌面显示、用滚轮缩放大小。

  • 完整功能

    • TRAE 任务动态丝滑上岛
      通过 Trae 官方 Hook 协议,实时监听 SessionStartUserPromptSubmitPreToolUsePostToolUseStopNotification 事件,四个 TRAE 变体(TRAE / TRAE CN / TRAE WORK / TRAE WORK CN)的任务状态自动汇聚到 Flow 岛右侧。需要审批、追问、干预时,岛会自动展开;处理完即可一键跳回对应 IDE 窗口,无需在 Dock 和标签页里翻找。
      trae-tips

    • VibeCoding 任意组件上岛
      左侧功能岛完全开放:内置音乐控制、文件中转站、新闻热搜集合,更支持把本地 HTML 目录或任意远程网页直接渲染进灵动岛。通过 traeFlowHint JS Bridge,网页还能向灵动岛上推送提示或内容;文件改动通过 FSEvents 实时刷新。你可以用任何前端工具链写一个小组件,下一秒它就出现在你的岛上。

      trae-flow-mineradio

    • TRAE Work Design 一键创建专属于你的电子宠物上岛
      内置基于精灵表的桌面宠物系统,内置 月薪喵、Frieren 等多个主题。更支持从 ~/.traeflow/pets 加载自定义宠物包,让你可以用 TRAE Work Design 工作流生成自己的角色素材(已内置完整工作流提示词),一键放上岛。宠物会随任务状态切换动画,还能拖拽到桌面、滚轮缩放,成为你的专属桌面陪伴。

      trae-pets

  1. 产品演示视频:
  • 8.43 UYz:/ :4pm 10/04 f@o.dN TRAE Flow 使用 TRAE 创建专属于你的 Mac 灵动岛 https://v.douyin.com/HdM0jv6SmRk/ 复制此链接,打开Dou音搜索,直接观看视频
  1. 产品创作历程:
  • 灵感来源:
    灵感来自 ping-island、vibe-notch、boring.notch、claude-island、nookX这些灵动岛风格的 AI 代理监视器和功能软件。它们证明了:macOS 刘海屏下方那块区域,天生适合承载 AI 的实时状态、实用小组件。

    但越看这些产品,我越觉得它们像是「别人定义好的岛」——状态是固定的、功能是固定的、可用组件是固定的、宠物也是固定的,有些收费并且还不支持TRAE。而我每天同时开着 TRAE、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 让「丝滑」成为可能:没有官方事件,任务上岛就只能靠轮询或猜测;有了 SessionStartNotification 的完整事件流,岛的展开、收起、提醒才能做到真正无感。

    • 自定义 HTML + JS Bridge 是「任意内容」的关键:开放 WebView + Bridge。用户可以用最熟悉的前端方式创造内容,这比内置 100 个固定组件更有生命力。

    • 宠物系统直接调用最新上线的TRAE Work Design:支持自定义宠物,鼓励用户用 TRAE Work Design 一键生成自己的宠物,真正实现「一键创建专属于你的电子宠物上岛」。

    • 在过去这类工具是开发者的专属,你要懂 Swift、懂 macOS API、懂 Xcode 工程化,才能给 Mac 写一个灵动岛小组件。
      TRAE FLOW站在巨人的肩膀上把这件事的门槛降到了零。提供一个所想即所得的入口,面向更大的用户群体——产品经理、运营、学生、医生、老师、设计师——任何人只要有想法,就能立马让它在屏幕上跑起来。

  • 项目愿景:

    • 后期拓展为TRAE社区灵动岛组件/宠物板块,大家可以分享自己创作的灵动岛组件、宠物。提升社区用户活跃度和基于用户创造性提升出圈可能性

    • 推动TRAE应用周边生态发展,激发更多好的想法接入TRAE周边生态。

  1. 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就急着开始写代码了:woman_facepalming:

    继续补充想要实现的功能让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生成自定义宠物:grinning_face_with_smiling_eyes:

    把提示词添加进项目里了,一键生成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,中间很多对话是有些功能测试有问题后一直出现重复的改不动的问题然后进行了多次代码的重构 :rofl:

  • 优化测试补充:

    调试过程中发现TRAE Work虽然设置里没显示hooks设置但实际是支持使用的 :thinking:
    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)

3 个赞

我觉得把手机上的灵动岛搬迁到Windows上还挺酷的!期待TRAE友后续的作品!

是Mac上的,Windows版暂时没开发计划。因为灵动岛天然适合有刘海的Mac电脑,Windows需要另外寻找思路去做

1 个赞

好滴,那就先把Mac做好了!可以试试整理一些作品视频,方便TRAE友们学习和感受~

Touch Bar 也复刻回来吧!