奠定缘分

一天上课，室友突然发现了这个东西，先是自己测着玩，然后给另一个朋友测，人格分别是“妈妈”（室友的）和“小丑”。挺乐，所以室友就叫我也来测，结果是“送钱者”。过了几天我突然在B站看到个视频：AI Coding教学实况：即兴DIY一个「SBTI」测试站。看了一点，感觉非常有意思，所以后来的某天心血来潮做了这个

思路

大纲

由于我看了下那位大佬的视频，所以我模仿了一下，让AI去了解一下SBTI这个项目。但是我没什么思路，只好先顺着AI的思路来了：AI模仿原作者，设计了31道题目，以及一些人格。不过原作者的选项是3个，AI做的是4个选项，但是题目和人格的制作水平都不算太高：

1. 题目生硬，让人提不起兴趣；
2. 人格就只有个名字和简短的介绍 根据我对这个项目的了解，这个项目是偏抽象风格的，所以我先改动了部分：优化题目，增加梗、谐音、双关和地狱笑话一类的网络段子；增加人格的详细描述等。但是AI做的题目还是不尽人意，人格的改动还凑乎。没有办法，我只好手动稍微改改题目，让某些题目不太人机。

UI和某些机制的改动 AI最初的版本题目是一题一题显示的，不像原版那样一次性展示所有题目。我先是没有改这个，增加“上一题”、“下一题”的功能，但是稍微用用就感觉这个机制的确不好，于是我就改成一次性显示所有题目了。但是这时候一旦跳过某个题目，还要充头找那个题目，非常的麻烦，于是我让AI增加显示未答题目的功能（位于答题页最下方，点击后会依次滚动到未答题目的位置）并在题目左侧增加醒目标志。随着自己的测试又发现了问题：可以不做题直接提交。这肯定是不行的，直接让AI增加功能：题目未做完的情况下点击提交会自动依次滚动到未答题目处，正好跟上一个改动重合，算是精简了一下。

到这其实基本上可以玩玩了，就是有点简陋，但是对于我这个纯小白来说这个过程已经挺麻烦的了。不过我没什么创新点，这个就很拉跨，必然是不行的，所以接下来就是各种优化

---

结果页优化

结果页太简陋，一个抽象的项目，之前的小改动还是不太行。我先是让AI大改人格名称，尽量增加网络热梗或者是什么抽象词语，减少重复的人格。然后增加特征词语标签（用几个具有特点的词语描述这个人格）、人格对应的抽象图片、增加隐藏人格（全选同一项），并改变隐藏人格的UI来凸显不同。这些都是先让AI做个设计理念的HTML，然后确定好之后再改测试文件，以免造成不必要的麻烦。可惜，可能是我的opencode是原生状态，AI无法进行自主搜集图片插入到网页，就只好退而求其次选用emoji表情来表达了。 而且随着我测试的次数增多，我发现这个测试流程太复杂了：我要一遍遍答题、刷新。所以我先让AI做个测试功能放到答题页最上方：一键随机选项、一键同一选项等，来加快我的测试速度，并在结果页增加”再测一次“的功能。感觉还是有点单调，我就与AI讨论一下还有什么可以优化，最后在AI大人的帮助下增加了人格结果的匹配值，并在人格描述的下方增加人格匹配度的排行榜，并在排行榜下面增加各个人格的五维图。但是最初版并不是太好，我又进行了小幅度优化：增加点击排行榜内的人格后显示对应人格的详细信息。然后我就没什么思路了，只好着手其他方向。

宏观调控

我发现整个测试过程太安静了，本来就没有什么音效，又没有BGM，显得很无聊。而且这又是个抽象的项目，正好加上这几年挺火的哈基米音乐，抽象又豪听，很不错！我先是询问AI怎么做，但是这个过程比我想的要麻烦很多：AI无法在网络上搜集音乐后直接添加到项目网页里，它只能增加AI合成的音乐，但是这个合成音乐是非常低级的那种，不像视频里面的那种，而是只有嘀嘀嘀的声音，然后用速度和声调来改变风格，总之就是效果非常的差。最终只能我来操作了：我先是搜集各种我认为豪听的哈基米音乐然后进行选择。 我打算在测试首页和答题页共用一首BGM，然后结果页单独设计BGM。 首页和答题页（算作默认BGM） 首先要不难听，然后要有点压迫感，所以我选取的是： 【哈基米音乐】格哈罗基の小曲（原曲：Witch Parade Assassin） 结果页 我原本想得是每个人格都有一首对应的哈基米音乐呢，但是我发现很难细分每个人格的风格，不好设计对应的BGM，而且我没找到这么多豪听的哈基米音乐。所以我就根据最高值五维来进行BGM的选择。但是我多次测试发现，这个五维最高值的数量并不均衡，所以我就借助AI进行五维数值的算法优化以此来平衡各维度达到最高值的数量。 最终BGM版本：

1. 内耗——my soul（哈基米版）（比较悲伤的音乐，内耗嘛，焦虑和忧伤是主基调）
2. 躺平——蓝莲哈（原曲：蓝莲花。公路神曲，听了之后谁不想来场说走就走的旅行，在我看来这是比较符合躺平的内核，不骄不躁，自由的感觉）
3. 社交——不再曼波（原曲：Normal No More。祝你在社交方面不再平庸）
4. 幽默——约德尔曼波（原曲：Auf und auf voll Lebenslust—大家在热情的生活（约德尔调）欢快的节奏）
5. 社畜——夜曲（哈基米版）（这个我在夜曲·哈基米版和跳楼基之间犹豫了下，因为两首歌都挺不错的，而且歌词合适，这里我是将歌词的描述对象看作是钱来理解的。但我细细品味之后感觉跳楼基虽然符合意思，但是格局小了，更适合情情爱爱。但是夜曲更加深沉点，不仅可以描述对钱的情感，也可以用来说创业艰辛和事业碰壁这些复杂的情感，所以我最终选了夜曲·哈基米版）

最后就是最这一大改动进行优化：

1. 在右上角增加BGM开关
2. 进入首页后不播放音乐，点击网页任意位置后播放默认BGM
3. 首页到答题页：默认BGM继续播放；答题页到结果页：暂停默认BGM，根据五维播放对应BGM
4. 点击排行榜人格及返回后继续播放结果页BGM
5. 再测一次后（即结果页-首页），暂停结果页BGM，然后循环播放暂停BGM流程
6. 整个过程根据BGM播放/暂停情况对BGM开关进行UI变换 最终效果还行，不过这个大改动确实很麻烦，可能是AI模型太拉，这个过程中出现很多BUG 接下来就是更改题目数量：31题太多，而且每个人做的题目都是一样的，不太好，所以我就让AI每次测试从31题随机抽取21题，并进行相关适配

首页优化

因为是抽象风格的项目，所以增加抽象语录。根据标签设计思路增加：测试内容标签和随机人格名称标签（后来优化成再次回到首页刷新人格标签内容，原本是固定的）

灵感一现

可想而知：只有少数人会来玩玩，而且一般都是只测一遍。但是只测一遍能体验到的内容太少了：只能听到一首结果页BGM，只能答部分题目，而且可能都不知道有隐藏人格这种东西。所以我在结果页新增“设计内容”这个功能，并支持返回结果页，里面包含：五维信息及对应的人格数量；所有题目；所有人格及其详细信息；所有BGM。原本我想让所有BGM在设计内容里也可以随便播放暂停呢，没想到是个技术难题，以我的实力做不到，其中遇到的bug有：音乐重叠、无法连续播放、设计页损坏、无法返回结果页、返回结果页后不暂停设计页音乐等。真是可惜，我能力有限，最终只好舍弃这一方案，只做BGM展示了。

这个改动难点挺多，除了BGM的问题，如何设计这个页面也很难。我觉得应该是有什么专业术语来描述的，可惜我不知道，跟AI说清楚让他来描述，效果也不好。我最初想做成跳转式的，就是点击“设计内容”跳转到另一页面，就像主页-答题页-结果页这般。但是AI做出不来这种，它要么是另开一个标签页，要么就是做出来有很多bug：结果页音乐不能连续播放；返回不了结果页；返回结果页无音乐、音乐重叠等很多问题。只好让AI给出优化方案，最终做成现在这种侧边栏式的。

最后

进行手机端适配并部署网站，直接遵循AI大人的指导就行了。 就是手机端适配是真的麻烦，我记得问AI得到的回答有两种：先部署再进行手机端测试；还有个什么访问IP进行本地测试（有点忘了，反正是没成功）？而且AI总是做不好，会在手机端适配这一过程中出现很多bug：

1. BGM开关位置错误
2. 设计内容侧边栏在手机端也显示不出来，尝试好几次也解决不了，只好加个缩小窗口的提示，而这个提示我也搞了很多次，要么是电脑端出问题（不显示、不能用），要么是手机端出问题 总之做不同设备之间的适配是真麻烦，最后我实在是懒得搞了，就只好这样了

---

遗憾

1. 匹配人格的算法与题目适配不够好，简言之就是选项ABCD各提供一些值，如+-1、+-2，通过用户的回答得到最终值来匹配人格，再加上我稍微改了一两个题目，所以这个结果可以说很不准了，就是你的回答跟最终人格结果可能没有特别强的关系，但毕竟是AI制作的，也很难避免
2. 手机端适配UI有点小问题：1.BGM开关位置错误；2.手机端窗口点击“设计内容”会无反应，因为侧边栏在手机浏览器窗口会显示不出来，只有缩小窗口才能看见