作者用 TRAE 改造 B站界面：从源码拆解到换肤脚本

编辑更正（2026年11月4日）：统一原文两处活动日期：文中前段标为10月29日至11月4日，末段不再写成周一至周日；活动资格和费用以官方说明为准。

为了放心摸鱼，我给 B 站做了爆改。

把推荐页全部换上飞书皮肤，一键伪装，无懈可击。

看起来在跟进项目，实际上在刷视频

展示一下效果：

首页推荐流被我改成了飞书群聊消息，点开卡片就能直接看视频。

不同分区也变成了不同的飞书群。

评论区也爆改成飞书消息，可以直接在伪装的飞书皮肤内回复。

怎么样，是不是感觉这班也没那么难上了？

接下来我就教大家制作这种摸鱼皮肤，傻瓜操作，零代码基础也能轻松复刻。

一、工具选择

AI 编程工具我选的是 TRAE 。

它最近上线了一个编程“个人助手” TRAE 宝，很适合项目里有多个环节需要协调推进的情况。

个人助手（Personal Agent）这个概念最近很火，ChatGPT 的 Dot 助手和 Claude 的 Cowork，都是这个方向的产物。

简单来说，就是给你的子 Agent 配一个“拿鞭子的管理员”。

负责分配任务，遇到卡点及时协调，最后把结果汇总给你。

TRAE 是国内首个推出“个人助手”的 AI 编程工具。TRAE 宝可以根据任务上下文补充提示词，还可以跨任务进行全局项目统筹。

比如说在用 AI 编程时，经常碰见调研、写代码、做测试分散在几个任务里的情况。

每开一个新任务，都得重新交代背景，非常费劲。

TRAE 宝可以直接帮你上一个任务的结果交给下一个任务，主动梳理任务背景，减少不同任务之间的信息断层。

比如说像下面这样：

甚至可以连接微信、飞书，跨平台进行唤起。

更重要的是，10 月 29 日 - 11 月 4 日用 TRAE 宝跑任务免费。

赶紧去薅羊毛！

链接：https://www.trae.cn/

二、项目 TRAE 宝做解包

其实这样的换肤项目，已经有不少人做过，也有很多开源版本可以参考。

在做的时候，可以先去 GitHub 上找找类似项目，让 AI 分析它们的制作逻辑，再结合自己的需求进行改造。

这样做出来的效果会更好，也更节省 Token。

比如说，我先让项目 TRAE 宝广泛搜索一波已有的类似开源项目。

它会自动帮我补充提示词，进行更精准的搜索。

然后 TRAE 宝会自己唤起新任务，在项目文件夹里深度解包不同方向的摸鱼伪装。有伪装成微信的，有伪装成 Word 的。

参考它们的代码思路，去统筹做开发。

接着，让 TRAE 宝结合深度拆包的结果做方案。

深入分析当前目录中各个开源换肤项目的源码，梳理模块架构、渲染流程、数据映射和原生交互机制，对比实现差异，标出可复用模块及站点耦合代码。选择一个最合适的项目，结合“B 站改成飞书界面”的目标输出技术拆解与迁移方案，关键结论附源码位置，暂不修改代码。

一定要做深度拆包，否则一句话跑出来的结果会比较惨烈。

比如说我尝试一句话做 B 站切飞书皮肤的项目，出来的结果是下面这样。

完全不能用....

做到这里，个人助理和直接开新对话的区别就比较明显了。

前面找过哪些项目、拆出了哪些可用模块，就算是保存在别的对话，后面做方案时也能接着用。

我不用再翻聊天记录，各种复制粘贴。

现在，我们初始的框架就算完成了，下面可以让它来跑代码了。

三、跑代码和测试

我们这个项目基础的技术栈是JavaScript、HTML和CSS，通过油猴脚本运行。

大概 10 分钟左右，初版就已经跑完了。

侧边栏可以看到详细的代码。

跑完脚本后，你可以让TRAE 操纵你的 chorme 浏览器安装脚本。

它会自己读取历史上下文，帮你补充提示词，按照你需要的方式开启任务。

不过，这个油猴插件需要你点击确认安装才能运行， TRAE 不能自行操作。

TRAE 帮你安装完脚本后长这样。

按下 Ctrl + R 刷新页面，就能看到第一次换肤的效果。

基础功能测试通过了，现在可以通过滑动推荐流群聊，刷首页视频。

四、增加趣味功能

但只是这样未免有些无聊，我还想加一些其他的功能。

我把提示词和趣味功能的效果都贴在下面了，大家也可以去参考。

分区群组：把 B 站各个分区@参考图 映射成左侧的飞书群组@参考图，点击不同群组，就能浏览对应分区的视频。

模拟同事：在消息列表里加入模拟同事@参考图 会话，显示姓名、消息预览和未读角标，点击后可以查看聊天内容。

这个功能是为了在老板凑近看屏幕时，能顺手点开一段工作聊天，临时撑一下场面。

评论功能：把评论展示成聊天气泡@参考图，底部添加飞书样式的输入框@参考图，复用 B 站原生评论功能完成发送。

楼中楼回复：点击评论下方的回复数量时，在右侧展开同楼回复，并支持点击其中任意一条进行定向回复。参考原飞书的样式@参考图

搜索功能：把搜索入口和结果页改成飞书样式@参考图1 @参考图2，输入关键词后，将视频结果展示为文档列表，并保留点击观看功能。

肤色切换：支持浅色、深色主题一键切换，点击侧边栏按钮即可调整整套界面配色。

大家在做功能时，最好加上具体的参考图，迁移和映射效果会好很多。

不要写太长的提示词，图示效果比文字更好。

五、总结

好了，这个小项目就先做到这里。

写代码的时候想着赶紧做完看视频，真做了，又忍不住继续加功能。

Vibecoding 真上瘾！

为了摸这点鱼，最后反而给自己加了个班。

以后会分享更多实用又好玩的 AI 编程小项目，欢迎关注我。

原文前段给出的活动时间为10月29日至11月4日；经TRAE宝入口发起任务的免费资格、范围及有效期，以官方当期说明为准。

工具链接：https://www.trae.cn/

文章来自于"JackCui"，作者 "JackCui"。