mirror of https://github.com/Mabbs/mabbs.github.io
63 lines
21 KiB
Markdown
63 lines
21 KiB
Markdown
---
|
||
layout: post
|
||
title: Vibe Coding 新体验（2）
|
||
tags: [Vibe Coding, AI, Agent]
|
||
---
|
||
|
||
AI is Everything!<!--more-->
|
||
|
||
# 起因
|
||
在两个月前，我[体验了现在的Vibe Coding](/2026/07/01/vibe-coding.html)，不过那时候我其实还是没有完全信任AI，认为它的能力可能还不够强，大多数内容依然需要人来做。
|
||
但是自从上次做了[终端版博客](/2026/08/01/terminal.html)之后，我意识到，它的能力也许比我想象的更强，可能真的能做到超越99%的开发者了，因此在最近一段时间，我一直使用AI做我想做的各种东西，结果就是一次又一次地让我感到难以置信，现在的AI真的实在是太强了😨。而且我做的这一切并不是用最先进的那批AI，仅仅是国内被大家不怎么看好的免费模型——[腾讯混元Hy3](https://huggingface.co/tencent/Hy3)，那么我很难想象，如果我能用像GPT 5.6 Sol或者Fable 5那样当下最先进的AI，我做的这些东西得有多完美啊……
|
||
|
||
# 最近Vibe Coding出来的各种项目
|
||
## Blog API + WebMCP
|
||
在上次做完[终端版博客](/2026/08/01/terminal.html)之后，我就在想，用Linux终端来呈现博客的形式真的是个好选择吗？毕竟Linux在浏览器上并不是原生的，尽管用了[WASM Linux](https://github.com/tombl/linux)可以做到WASM原生运行Linux，但这还是额外添加的东西。于是我就想，JavaScript应该也能作为终端吧？就像Node.js一样，REPL也可以作为终端使用，正好那段时间DeepSeek-V4-Flash正式版出了，就让它直接写了[一个Demo](https://github.com/Mabbs/jsnix/blob/main/repl.html)出来试试看，可以点开[这里](https://mabbs.github.io/jsnix/repl.html)体验。
|
||
写出来效果还挺不错的，和之前做的终端版博客的主要区别就是我写的是函数，而不是命令，不管怎么说也算是“真的”终端吧，唯一体验不太好的可能就是函数需要带个括号才能运行，稍微有点麻烦。
|
||
但后来我想了想，明明开发者工具中就有个控制台，根本没必要搞什么REPL终端啊，直接把要用的功能提出来作为函数，在控制台中运行效果比那个终端的效果要好得多啊，而且这样就可以直接集成到我的博客中，不需要单独搞个页面，感觉体验更好一些。
|
||
既然有了函数，我觉得只给人类用就太浪费了，前段时间看到谷歌搞了个[WebMCP](https://webmachinelearning.github.io/webmcp/)，那我完全可以把这些函数做成WebMCP让AI来调用啊，相比于其他乱七八糟给AI的协议，至少WebMCP是有谷歌和微软撑腰的，所以加一个也不错。
|
||
最终我把WebMCP的文档以及之前实现的REPL代码直接发给AI，让它帮我实现对应的函数以及应用WebMCP API，没几分钟它就把所有功能实现好了，最终代码就是：[blog-console.js](/assets/js/blog-console.js)。在开发的过程中，AI严格按照文档中的要求实现了，结果我在实际测试的时候，发现Chrome在实现`registerTool`方法的时候和文档的实现有差异，文档说这个方法会返回Promise，但Chrome实际并没有返回，所以AI调用`.then()`时直接报错了😓……没办法就只能手动给它套一层Promise，才算是能正常工作。毕竟这还是一个没有正式上线的API，出点问题倒也能理解吧。
|
||
虽然东西已经实现了，不过到底怎么才能让其他人知道我用了WebMCP的技术呢？我发现网上有一个WebMCP Directory专门收录使用了WebMCP技术的网站，于是我就随手提交了一下，现在在[这里](https://webmcp.com/sites/mabbs.github.io)就能看到我博客的WebMCP信息了。
|
||
## 某个即将关服的游戏的离线快照
|
||
最近一段时间我在玩的一个使用Unity3D引擎制作的立直麻将游戏发了篇公告，说是要关服了，还给全服所有玩家送了一堆抽卡资源。我听到这个消息之后感觉还是挺遗憾的，那个游戏总体来说做得还算不错吧，而且画风也符合我的口味，角色模型有点米哈游的那种感觉。我曾经遇到过几次游戏关服的事件，但是每一次我都无能为力，只能看着游戏消失然后逐渐被遗忘。然而现在我有了AI，也许一切会变得不一样吧？这次我要使用AI，让即将消失的游戏不再消失。
|
||
### 重放大厅数据
|
||
最开始我其实想得很简单，游戏登录之后其实没有和服务器有太多的通信，像账号中有的角色以及各种材料等信息在登录的时候就已经发送了，直到进入对局之前客户端都没有和服务器有什么有效的沟通，而我主要需要的也就是能登进去看看角色，听听语音就好了。那么接下来我只需要让AI把整个游戏资源下载下来，然后抓个包，让它给客户端重放就好了，也不需要什么逆向操作。
|
||
AI分析了一下之后发现它用的是WebSocket+Protobuf协议，正常来说如果要使用Protobuf协议得要有.proto接口定义文件才可以，不过既然我的要求只是重放，它就没去考虑逆向了，只是简单分析了一下编码规则，就用Python把服务端给写出来了。
|
||
不过如果这个快照必须本地启动一个服务器，玩起来就有点麻烦了，这样搞得我估计就没心思玩它了，但是自从我做了终端版博客之后，我觉得浏览器可能没有做不到的事情，既然Python能运行服务器，那JavaScript一样可以，于是我就要求AI让游戏和服务端一起运行在浏览器中。
|
||
结果它还真折腾出来了，在JavaScript中似乎一切都可以被覆盖，于是AI就替换了浏览器的WebSocket对象，让客户端以为它连接到了真实的服务器，然后再按照之前录制的包发送就好了，折腾了一段时间之后游戏真的能正常启动了，真的是太离谱了😨。
|
||
### 制作对局引擎
|
||
其实这基本上已经满足我的要求了，但我还是有点好奇，这个客户端里真的没有.proto接口定义文件吗？正常来说既然客户端知道怎么和服务端通信，那么这个文件应该是必须要有的吧？反正目的已经达到了，接下来就让AI瞎折腾看看。
|
||
在我要求完之后它又折腾了好长时间，结果.proto也被它给搞出来了😨，也许对于会逆向Unity3D游戏的人来说这不算什么，但这已经让我很震惊了……既然有了这些，也许完成一个完整的服务端将不再是难事。
|
||
于是我让它录制了几把我实际对局的包，并理解整个对局中数据包的时序，开始考虑如何做出完整的麻将对局。首先作为离线运行的游戏来说，和人对局肯定是做不出来了，那就得想办法搓个人机出来。我最先想到的是著名的麻将AI [Mortal](https://github.com/Equim-chan/Mortal)，之前用它在雀魂上打了几把之后结果号没了😂，不过我确实觉得和人打麻将没什么意思，感觉麻将如果全按最优解打的话结果就全是靠运气……不过后来我想了一下还是不用Mortal了，首先这个模型不小，整个模型要好几百MiB，而且三麻和四麻的模型还不一样，还有三麻的模型还是收费的……另外真和Mortal打的话感觉难度也确实有点高，除了运气因素外，至少人机犯错的概率比人要低不少，那打起来估计会很难受。所以我就对AI说，做一个降低向听数为主的全攻型人机，其他细节让它自己考虑，另外我想到上次做的那个麻将Wordle它自己写的役种分析实在是有点烂，所以这次就告诉它必须要使用现成的[Riichi](https://github.com/takayama-lily/riichi)库，免得出乱七八糟的问题。
|
||
在连续跑了好几个小时之后AI成功把完整的[对局引擎](https://github.com/Mabbs/mahjong-dream-snapshot/blob/main/mock/riichi.js)给搓出来了，真的是相当了不起，要知道这个东西正常来说人开发怎么说也得好几周吧？它就几个小时开发出来了，还理解了数据包的时序，用之前分析的.proto文件成功接入到了游戏中，实在是太强了……当然因为我没有用大量真实牌谱去测试，有BUG也是正常的，比如目前的引擎还存在立直之后完全没法开杠这样的边缘问题，就只能慢慢修了，不过这都是小问题，它能做到目前的水平已经不是一般人能做到的了。
|
||
最终做出来的项目可以在[这里](https://github.com/Mabbs/mahjong-dream-snapshot)看到，还可以通过[GitHub Pages](https://mabbs.github.io/mahjong-dream-snapshot/)上的部署直接游玩。
|
||
### 隐藏彩蛋
|
||
在AI做完整个服务端之后，我闲得没事瞎改对战人机的角色和皮肤，因为游戏中的皮肤ID有一定的规律，所以可以根据角色ID来猜皮肤ID。在这个时候，我发现其中有一个角色在游戏中没有对应的泳装皮肤，但是我把人机的角色按照规律配置推测的泳装皮肤ID是能显示出来的……那也就是说这个游戏可能在配置中隐藏了这个皮肤，但是并没有删掉美术资源，所以接下来我就想着能不能让AI把这个隐藏的皮肤显示出来，这样就能在游戏中直接使用了。
|
||
所以我根据自己推测的信息，告诉AI：在这个游戏中有一个皮肤编号3708002，头像编号1018的资源被隐藏了，其中关于这些资源的配置应该在commonconfigs中，帮我解包并分析，考虑如何将这个皮肤和头像恢复显示，然后重新打包资源，使其可以正常加载。就这么个需求，它从Bundle的解包，到分析FlatBuffers，然后又处理XAsset的校验……最终花了3个小时就给我做出来了，而且我试了一下，非常完美，简直就像这个皮肤本来就存在一样，不过原本这就是被官方隐藏的嘛，解除隐藏自然就和真的存在一样啊😂。
|
||
## 能在WASM Linux中运行的SSG
|
||
之前我做完终端版博客之后就在想，让这个完整的Linux只用来展示博客似乎有点浪费，感觉它还能做更多事，但对我来说编译在这个系统中能运行的二进制程序还是有一点困难，虽然我有用AI，但是我的Agent是运行在macOS上的，所以编译Linux二进制程序有点困难……不过单是BusyBox其实就能做相当多的事情了，毕竟我当年可是在手机上用ash做出了论坛系统[Mabbs](https://github.com/Mabbs/Mabbs.project)，那它能做的事情应该还有很多。
|
||
最近我在和群友聊天的时候发现有人用C#做了个静态网站生成器，也是用AI做的，看起来挺有意思。其实SSG的原理还是挺简单的，说到底就是些文字转换罢了。于是我就想，要不然我就让AI搓个能在WASM Linux中运行的SSG出来吧？
|
||
当然直接搓我还是会有一点怀疑AI的能力，所以又找了点素材，之前在[体验Tilde社区](/2025/08/10/tilde.html)的时候发现了[bashblog](https://github.com/cfenollosa/bashblog)，其实这就已经是一个现成的SSG了，只不过它用的是Bash语法，得让AI转换成POSIX风格的语法。另外它还依赖使用Perl语言编写的[Markdown库](https://daringfireball.net/projects/markdown/)，我这个系统里可没有Perl啊，也得想办法找个可以替代的东西。
|
||
我想了一下，在BusyBox中最适合处理文本的大概就是awk了，所以我首先应该找找有没有用awk编写的Markdown转换程序。结果搜了一下还真被我找到了，有一个叫做[d.awk](https://github.com/wernsey/d.awk)的库，里面包含一个完全用awk写的Markdown转换程序，那么接下来我只需要把这两个项目丢给AI，让它以bashblog为基础，以d.awk为引擎制作一个兼容性极强的POSIX SSG吧。
|
||
这种问题果然还是太简单了，它只用了一两个小时的时间，就真的做出来了，最终它把这个项目起名叫做[possg](https://gist.github.com/Mabbs/3db745dc403d752a1d59d3e06938e310)，并且我把这个程序粘贴到了我的终端版博客中运行了一下，效果也是非常完美……如果哪一天我抛弃了Jekyll，也许就会用这个possg吧😂。
|
||
## 终端版博客的各种新功能
|
||
最近一段时间我在我的[终端版博客](https://github.com/Mabbs/linux)又有一些新的想法，于是就对着AI反复许愿，结果AI还真的能让愿望成真。以下就是从上次做完之后又新增的一些功能：
|
||
### Markdown高亮
|
||
最初博客在终端中显示文章时是直接打印的Markdown原文，感觉不太好看，所以我就想着如果能加个高亮功能体验应该会更好吧？最开始我要求AI做这个功能的时候它选择使用Shell+sed来实现，那时候我还没有做possg，没考虑用awk来做，所以性能非常差。因为Shell在处理这种任务的时候要不停地调用sed，这个系统开进程的开销又很大，所以处理一篇文章得好几秒，后来才考虑用awk来做，结果性能确实好了不少，最终的代码可以在[这里](https://github.com/Mabbs/linux/blob/initramfs/bin/mdhl)查看。
|
||
### 挂载本地文件夹
|
||
前段时间我看到作者合并了一个关于[virtiofs的PR](https://github.com/tombl/linux/pull/40)，当时我看到这个PR的时候就想，记得Chrome浏览器有一个[showDirectoryPicker API](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showDirectoryPicker)，可以允许网页对指定的文件夹进行读写。现在有了这个驱动的话，让AI做个将本地文件夹挂载到Linux的功能应该是个很简单的事情，于是我直接就闭着眼睛让AI做了。
|
||
做完之后虽然能用，但是我又回想起上次让AI搓的通过Service Worker访问系统内网络服务的功能，结果人家原作者已经做了一样的功能，我还给作者发了[Issue](https://github.com/tombl/linux/issues/34)推荐😅，所以这次我得吸取教训看看作者是不是已经做了这个功能，毕竟作者实现virtiofs的时候估计就有这个打算吧？结果看了一眼还真[做了](https://github.com/tombl/distro/blob/main/packages/linux-guest/src/browser.ts)😆，我闭着眼睛让这个垃圾AI去做看来确实有点着急了，虽然我不知道原来我的AI做得到底怎么样，但是我对它还是没什么信心，也许作者这个代码也是AI写的，但很明显他的AI比我的AI水平强得多，所以让它参考作者做的这个版本重新写了一版。总之最终都能用，写出来的代码就是：[hostfs.js](https://github.com/Mabbs/linux/blob/main/hostfs.js)，再配合上[mount_host](https://github.com/Mabbs/linux/blob/initramfs/bin/mount_host)脚本就可以实现挂载本地文件夹的功能了。
|
||
### 基于WebRTC的局域网内组网
|
||
我在制作网络模块的时候一直在想，有没有办法能在不依靠服务器的情况下让两个这样的Linux系统互联呢？正常来说要想让两个浏览器内的服务互相访问就必须有一个中转服务器，因为浏览器肯定是不允许网页监听端口，而且就算能监听，我的这个网页还是放在GitHub Pages上，使用了HTTPS，也没办法访问HTTP资源，搞证书也是个麻烦事。
|
||
但其实浏览器是有P2P功能的，那就是[WebRTC](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API)，只是我不太确定这个技术能不能做到无服务器，于是我问了问AI，这个功能能不能不要服务器，结果AI说可以，只要两个机器在同一个局域网，就可以通过手动交换SDP信令来实现P2P连接，而且考虑到我基本上完全没有锥形NAT网络可以用，所以就不搞STUN服务器了，反正也连不上。那既然理论上可以的话，就让AI实现吧。
|
||
最终花了一点时间AI就写出来了，使用[webrtc-p2p.js](https://github.com/Mabbs/linux/blob/main/webrtc-p2p.js)配合[connector](https://github.com/Mabbs/linux/blob/initramfs/bin/connector)就可以实现同一个局域网内两台电脑上的浏览器中的Linux互联了。
|
||
这个功能做出来之后直接就有了无限的想象空间，比如想用A电脑的浏览器控制B电脑浏览器中的Linux，就可以在B电脑中执行`tcpsvd -v 0.0.0.0 4444 /usr/bin/script -qc 'stty -echo; /bin/sh -i' /dev/null`，然后在A电脑用`nc 10.0.2.x 4444`去连接就可以了，效果就像SSH一样，而且配合之前做的挂载本地文件夹功能，甚至可以直接操作B电脑中的文件；另外之前做的Service Worker访问系统内网络服务也能用得上，假如B电脑有一个网页想要分享给A电脑，可以在B电脑上用`mount_host`把本地文件夹挂载到Linux的`/mnt/host`目录中，然后在那个目录执行`httpd -p 8080`，A电脑可以执行`tcpsvd -v 0.0.0.0 8080 /usr/bin/nc 10.0.2.x 8080`转发，接下来打开`http/8080/`就可以访问到B电脑上的网页了。
|
||
总之只要有了网络，这个系统的功能就能被无限扩大了，只是……说是这么说，其实还是依赖浏览器的功能，所以这些功能就算用JavaScript直接做也完全没问题，但毕竟是作为Linux终端，有了这些能力之后就显得更完整了。
|
||
最终我仔细确认了原作者确实没有做这个功能，所以就发了个[Issue](https://github.com/tombl/distro/issues/156)看看他有没有兴趣把这个功能加到他的库中，如果被接受了也算是做出贡献了吧。
|
||
### 使用VLESS协议的网关
|
||
虽然之前已经加了基于浏览器Fetch API的网关，但这个网关的局限性还是挺大的，基本上也就只能请求网站了。那其他能在浏览器上运行系统的项目是怎么做的呢？看了一下像v86用的是一个基于L2 Over WS的公共网关relay.widgetry.org，而WebVM用的则是Tailscale。这两种我都不喜欢，主要是这些东西基本上专门服务于这类在浏览器中运行的系统，普通人并不会特意去搭建，而我既不想用某个特定的服务，也不想自己搭……那么有什么样的网络服务既随处可见，又能在浏览器中使用呢？这时候我就想到了VLESS协议，它天生就适合运行在WebSocket中，而且搭建起来极其简单，比如有人用Cloudflare Workers做了一个叫做[edgetunnel](https://github.com/zizifn/edgetunnel)的脚本，可以轻松将Cloudflare作为代理使用，因此我决定接下来让AI实现一个基于VLESS+WSS的网关，这样除了请求网站之外还能做点别的事情，比如用`telnet towel.blinkenlights.nl`命令看ASCII版的《星球大战》😆。
|
||
只不过相比于其他项目用的那些L2的服务来说，VLESS承载的是L4的协议，所以我还得让AI实现TCP/IP协议栈……其实我不太想这样做的，因为AI做这种事情容易出错，但是它看了一下我之前用的[tcpip.js](https://github.com/chipmk/tcpip.js)库说是里面的API不满足要求……那没办法，AI既然自己想搓就让它搓吧。不过VLESS协议这个我觉得还是得给它个[文档](https://github.com/XTLS/Xray-docs-next/blob/main/docs/en/development/protocols/vless.md)，免得它开始瞎编。
|
||
不管怎么说它还是搓出来了，虽然质量我不是特别满意……但毕竟手头用的AI不是最先进的AI，就先这样吧～最终的代码就是：[vless-gateway.js](https://github.com/Mabbs/linux/blob/main/vless-gateway.js)，用法也很简单，首先要有一个**证书合法**的VLESS+WSS节点，然后在我的博客终端中按F12打开控制台，输入：`switchToVless("wss://domain:port/path", "UUID")`就可以将原来基于Fetch的网络切换到VLESS节点的网络了，考虑到避免被滥用的情况，我就不内置节点了，如果有人有兴趣可以用自己的节点进行连接。
|
||
|
||
# 感想
|
||
做到这里，可以感受到最近的AI所做的一切真的是令人难以置信，它不仅知道几乎所有知识，还有不知疲倦的思考能力，以及足够的动手能力，而这也仅仅建立在一个很一般的免费模型上。再回想起前段时间用的Agent，做的什么[订阅源预览](/2025/04/08/feed.html)，简直就太简单了😂。目前据我所知其他人使用更先进的AI已经可以解决人类没能解决的数学难题、自主设计处理器指令集架构在上面运行Doom、[从零开发一个Classic Mac OS](https://github.com/Kelsidavis/System7)、制作直接在UEFI中运行的软件、以及完全逆向Unity3D游戏，把几款游戏混合起来做成一个新游戏……（至于网上总传的什么DeepSeek的所谓的灰测模型搞出来的[各种Demo](https://github.com/6WENHAO/DS-Games)就算了，根本比不了）过去各种难以想象的东西都被轻松做出来了，而这一切就发生在最近几个月，我已经很难想象未来AI能做到什么样的地步了，也许AI真的会带领人类走向无法想象的高度吧～ |