blog/_posts/2026-07-01-vibe-coding.md

---
layout: post
title: Vibe Coding新体验
tags: [Vibe Coding, AI, PJAX, 麻将]
---

  All in AI!<!--more-->   

# 起因
  前段时间，我写了一篇关于[AI Agent](/2026/04/14/ai-agent.html)的文章，虽然当时我说这并没有什么创新之处，但在那之后用着用着感觉还是挺好用的，至少相比以前[在云端Vibe Coding](/2025/04/08/feed.html)来说又快又免费，所以我打算分享一下最近我用AI Agent的经历。   
  不过大多数情况下我写代码都可以直接让各路AI在对话中给我生成，那到底有什么样的场景才需要用AI Agent呢？一般应该就是需要边改边测的东西吧。   

# 关于PJAX的改造
  虽然说AI生成的东西可靠性并不是很高，但至少在网上已经有很多例子的代码应该不至于乱生成吧……其实我一直都想给我的博客增加全站无刷新的功能，但是每次看到PJAX都要自己重新调用当前页面的各种函数就懒得动手了😂。不过其实这也不是什么复杂的事情，主要是一个一个分析函数比较麻烦，所以既然有AI了，不如直接让AI帮我做吧。于是我让它克隆了我的仓库，分析并写出PJAX的代码。   
  用AI Agent最大的好处就是能让它了解整个项目的所有代码，如果是直接在对话里让AI修改的话就很难做到这一点。总之我告诉它之后等了一会它真的写出来了，我试了一下确实能用，虽然刚开始有不少问题，主要是因为我用了[Live2D](/Live2dHistoire/)，主要问题也是这个引起的。不过只要我告诉它问题在哪里，它总是能给我改好，先不论它实现的代码怎么样，但至少从效果来说还是相当不错的。   
  最终生成的代码我看了一下，代码质量非常糟糕，把我在别处的代码到处复制粘贴到PJAX用的代码里了，但是体验效果不错……所以没办法，虽然代码很糟糕，但先用着吧。不过我觉得优化应该也能交给AI Agent，只是它有时候改来改去还会把正常代码改坏，所以优化看起来还是只能自己做……   
  最终的代码就是：[pjax.js](/assets/js/pjax.js)，虽然我对这个代码质量不是很满意，但是毕竟能用，效果也不错，就先这样用吧～   

# 生成一个小游戏
  前段时间，我在Bilibili上看视频的时候发现了一个有趣的微信小游戏，叫做“雀谜”，它把立直麻将和Wordle两个玩法结合到一起，看起来挺有意思。不过它作为微信上的小游戏有些问题，一是看提示要看广告，二是换题也要看广告，而且看广告就算能换题也有次数限制，一天也就几次机会，让我有点不爽。   
  不过从功能上来说看起来并不复杂，感觉用AI直接Vibe Coding完全不是问题，不过AI Agent从零开始写比较考验模型的水平，所以我打算先让各路网页上的AI生成初版的Demo，之后再考虑怎么改。于是我对它们说：   
> 帮我制作一款立直麻将Wordle网页小游戏，规则为：
> 1. 系统随机生成一个有役能和的14张牌，必须按照万、筒、索、字的顺序排列，同花色内数字从小到大，但是第14张用来和的牌可以不遵守排列规则
> 2. 让玩家猜6次来猜到这个牌型，每次猜的牌也必须是满足有役和牌的条件
> 3. 位置和内容正确的牌用绿色标注、只有内容正确但是位置不正确的用黄色标注，不在生成范围内的牌用灰色标注
> 4. 界面中所有的牌使用Unicode中的麻将字符，并且提供一组输入按钮用于输入这些麻将字符
> 5. 输入按钮在游玩过程中也要标注颜色
> 6. 随机生成的牌需要标注场风、自风和是否自摸，如果是荣和需要额外的役，需要考虑平和之类的役种
> 7. 加一个提示键，可以查看答案牌型的役种

  直接生成确实很考验水平，有很多AI直接生成出来的完全用不了，像DeepSeek生成出来的按钮按上去都没有反应😅，最终只有Gemini生成出来的感觉还不错，无论是界面还是输入的感觉都很好，于是接下来的修改我就打算以Gemini生成出来的代码为主。   
  刚生成出来的代码虽然能玩，但是每个AI直接生成都不想做完整的役种检测，说什么一个对话不够😥，明明各个都是几百k上下文的AI，有什么不够的……总之想一口气就完美做出来显然是不现实的，不过其实最开始我也不打算把所有役都做了，毕竟条件是“有役和牌”，而且没有副露，所以好多可以叠加的役其实都不需要做，尤其是役满那些，大多都可以用其他役的条件满足。   
  在这期间，“平和”算是实现起来最麻烦的，主要是这个役需要根据和牌判定，必须是顺子的两面听牌才可以……虽然AI理解这些知识，但是写的时候经常出问题，像边张之类的经常误判……但是不实现又不行，毕竟这是可以nomi的牌型。   
  最终写的差不多了，感觉还不错，于是在GitHub Pages上[部署了一份](https://mabbs.github.io/riichi-mahjong-wordle/)，起名叫[立直麻将 Wordle](https://github.com/Mabbs/riichi-mahjong-wordle)。   
  最开始我以为这个小游戏的玩法是他们原创的，于是把生成的代码又丢给AI，让它评价一下创新性，结果AI说已经有开源了😂，有个叫做[Mahjong Handle](https://github.com/xnuk/mahjong-handle)的才是最早做这个玩法的……还好这代码不是我写的，要是我写了半天结果发现有现成的那就很无语了😆。   
  当然我让AI写的版本也有一些特色，Mahjong Handle那个和原版Wordle一样，每天只有一道题，而且这个题是从题库里抽的，我让AI Agent看了一下它的代码，似乎是用[phoenix-logs](https://github.com/MahjongRepository/phoenix-logs)这个脚本从天凤上下载的牌谱数据解析得到的题库，所以它的题目数量是有限的，而我的代码是完全随机生成的，所以结果是无限的。但AI似乎认为作为Wordle来说一天一题才是它的特色，无限就显得没意思了……既然如此，那干脆让它给我把两个游戏合并了，让它参考Mahjong Handle把一天一题的功能也给我加上，另外Mahjong Handle还有一个MPSZ快速输入法，也让AI给我合并进我的游戏里了。   
  这时候就体现了AI Agent的优势，如果直接用线上的AI把Mahjong Handle中的功能移植到我的代码，我还得完整描述要实现的功能，但是AI Agent能自己看人家仓库的代码，就知道要改什么东西了。   
  最终实现的效果也很不错，虽然我的代码没有题库，但是使用了当天日期作为随机种子，用mulberry32算法搞出了一天一题的功能，还挺有意思的。   
  另外在Mahjong Handle以及原版的Wordle中，还有一个困难模式，就是每次猜测必须使用之前的猜测条件，不过我觉得如果原模原样把这个功能抄过来似乎有点无聊，而且我发现玩这个东西一般直接一个国士+两个一气就基本上把要猜的牌找完了，有点简单，所以我想了一下，要不然限制一下提交的条件，提交的牌型必须包含目标的役种之类的……不过要是做这个功能就不能像之前那样只实现部分役种了，得把所有能用到的都实现一遍，还好这种事情肯定也不是我来做，肯定还得是让AI来😋。   
  实现的时候还不能让AI直接一口气全加上，还得一步一步的提示，而且每个牌型还得手动测一遍……最终虽然做的看起来似乎已经很完善了，不过逻辑的根本还是有点问题，AI设计役种计算的时候是按拆解后役种数量最多的情况来算，但事实上立直麻将算役种是按照高点法，要最终点数最大才行。虽然按照目前的方法绝大多数情况下都能正常工作，但偶尔也会遇到问题，比如像这副牌：
  - 🀈🀈🀈🀉🀉🀉🀊🀊🀊🀞🀟🀗🀗 🀝

  按照目前的方法计算的结果是：
  - 断幺·平和·一杯口 = 3番30符

  然而正确答案是：
  - 断幺·三暗刻 = 3番50符

  但是符数的计算又很麻烦……不过反正提示和验牌都是同一套程序，题倒是也能做出来……所以就懒得修了🤣。当然说到底还是因为AI没有用现有的计算库，像Mahjong Handle用的是现成的[Riichi](https://github.com/takayama-lily/riichi)库，制作起来比我这个就简单多了。   

# 为游戏添加字体
  在我制作“立直麻将 Wordle”这个小游戏的时候，我让AI使用的是Unicode中的麻将字符，毕竟有现成的字符总比去找牌的图片要方便，而且实现起来感觉更简单一些。不过用字符确实也会遇到一些问题，我不知道为什么在macOS和Android上其他牌都是黑白的，唯有🀄️是彩色的😅，Windows上使用的Segoe UI Emoji倒都是彩色的，但是牌很丑，像是小学生设计的……虽然不影响玩，但是看着很难受，至少牌的颜色统一一下也好吧？虽然也可以搞出黑白的🀄︎，但如果用这个，在Windows上又成了只有🀄️是黑白的😅。虽然Mahjong Handle是直接用了SVG格式的牌图片，但我觉得应该有现成的麻将字体，像这种问题应该有现成的解决方法才对吧？   
  于是我直接问AI有没有这样的字体，AI搜了一下看起来还真有，有个叫做[Mahjong Colored](https://github.com/kfarwell/Mahjong-Colored)就是基于那些SVG做的OpenType-SVG字体，我本来以为问题就会这样解决，然而当我应用了字体之后发现牌的位置变成了白色的方块，貌似只有Firefox才支持这种字体……然而现在谁还用Firefox啊？   
  那遇到这种问题怎么办？当然还是让AI解决，它说要在Safari和Chrome上使用彩色字体，用COLR或者SBIX格式比较好，COLR格式的兼容性最好，三个浏览器都能用，而SBIX的话Firefox没法用。不过Firefox既然基本上没人用了，我倒是不太在乎它的兼容性，但我肯定还是更希望能用兼容性更好的方案，于是我把OpenType-SVG字体转换为COLR的工作交给了AI Agent。   
  结果它整了半天也没整出来，貌似是因为SVG的特效太多，没办法转换为COLR格式，于是它选择了SBIX方案，不过COLR存储的是矢量图，而SBIX存储的是位图，大小要大一些，而且放大还会有锯齿。只是目前实在是没办法了，只能用这种格式。   
  最终我把它转换后的字体存了一份到[仓库](https://github.com/Mabbs/Mahjong-Colored-SBIX)，但是看着它1MiB多的大小以及不太好的浏览器兼容性，再考虑到它还是位图，实在是不太想在我的游戏里应用它……   
  结果后来我又搜了一下，原来是有现成的麻将字体啊，有个叫做[Mahjong Font](https://github.com/rutopio/mahjong-font)的项目用的就是COLR格式，兼容性非常好，而且大小只有80KiB，算是最完美的解决方案了。垃圾AI给我推荐的Mahjong Colored真的是……浪费了不少时间，看来有的时候自己调查要比问AI好一些吧。

# 感想
  总的来看，目前Vibe Coding的体验确实是相当不错，只是问题也非常明显，完全让AI生成的代码要么实现的不优雅，要么就会出BUG，如果完全不懂要写的东西，纯粹由AI生成，那出问题的概率就非常高了。不过要是看不出来错误，完全被AI忽悠过去了，也许这时候的Vibe Coding在另一方面算是完美吧😂？至少对用的人来说也算是解决了问题呢。