前言本文聚焦如何用AI辅助快速实现一个前端小项目涵盖需求拆解、Prompt迭代、页面部署全流程。项目仅为技术实践演示核心是分享vibe coding无广一、MBTI 统治互联网然后 SBTI 来了在开发之前简单说下人格测试这玩意儿。MBTI是一种基于荣格心理类型理论的人格类型评估工具从能量来源E/I、信息获取S/N、决策方式T/F、生活态度J/P四个维度将人的性格分为‌16 种类型这两年可算是把互联网人的精神状态拿捏死了。维度核心问题两个极端E / I在社交场景里的能量来源外向内向S / N接收信息的习惯务实细节直觉抽象T / F做决策的依据逻辑分析 共情直觉J / P对生活节奏的掌控感计划有序 弹性随性朋友圈有人晒 INTJ 的内敛与理智有人分析 INFP 的自我感动还有什么E人属性满天飞。一时间不懂 MBTI 就好像无法开展互联网社交。然后 2026 年 4 月SBTI突然炸裂全网。SBTI直译就是傻福人格测试名字本身就带着一股子自嘲的劲儿。它模仿 MBTI 的形式但把题目换成了一堆离谱的生活情境结果标签更是荒诞又真实废物、尤物、伪人、贫穷者、ATM机、僧侣……年轻人疯狂转发的原因很简单它说了一些 MBTI 不敢说的大实话。测完 MBTI 你觉得自己是被命运选中的天选之人测完 SBTI 你发现自己是个废物。好笑吗好笑。准确吗天知道。但它出圈证明了一件事只要你有梗人格测试这玩意儿完全可以自己造。二、I CAN I UPFGOTI 诞生了我平时玩 FGO大概就是召唤古今中外的历史名人、神话人物作为自己的从者一起去拯救世界一直觉得其中的职阶系统很有意中思二。Saber剑、Archer弓、Lancer枪、Rider骑、Caster术、Assassin杀、Berserker狂……之外还有Shielder、Ruler、Avenger、Foreigner、Moon Cancer等等一共十几个职阶每个职阶都有独特的定位和气质。比如亚瑟王被召唤通常是 Saber孔明则是 Caster福尔摩斯是 Ruler等等。当时脑子里就冒出一个念头MBTI 有 16 型FGO 职阶也够多——如果把 16 型人格映射到 FGO 职阶上是不是也能整出一个魔改TI说干就干。我把这个项目命名为FGOTI或者也可以叫职阶测试、灵基测试。核心思路很简单20 道贴合现实生活情境的选择题 → 计算四个维度的倾向 → 得出 16 型人格之一 → 映射到 FGO 职阶INTJ 变成裁定者 RulerENFJ 变成剑士 SaberINFP 变成降临者 Foreigner……每一项结果都附上现实侧写人格描述和迦勒底特异点记录FGO 世界观的彩蛋解读。重点是题目全是现实生活场景不涉及任何游戏知识。任何不了解 FGO 的人都能测测完会发现自己的职阶或许还挺准的。项目已部署演示因平台规范链接放在评论区三、Vibe coding 流程初版我用的是哈G米丢一个想法进去先和它唠唠大家用任何自己喜欢的 AI 都可以。Prompt 你是擅长心理测试设计的专业人士熟知 MBTI 16 型人格体系。现请以 MBTI 16 型人格为蓝本结合 FGOFate/Grand Order的世界观、角色设定、故事背景等特色元素设计一套名为 FGOTI 的 16 型人格测试。测试需包含一系列精心设计的问题每个问题要紧密关联 FGO 相关情境或概念且问题数量合理、表述清晰易懂。最终根据测试结果对 FGOTI 16 种人格类型进行详细、独特且贴合 FGO 风格的描述涵盖人格特点、在 FGO 世界中可能扮演的角色、适合的职阶等方面内容 。可选职介如下Saber剑士、Archer弓兵、Lancer枪兵、Rider骑兵、Caster魔术师、Assassin暗杀者、Berserker狂战士、Shielder盾兵、Ruler裁定者、Avenger复仇者‌、Alter Ego他人格、Moon Cancer月之癌‌、Foreigner降临者、Pretender身披角色者、Beast兽、Grand冠位‌哈G米给了我一份还不错的初版但有点问题题目是按游戏情境写的不是现实场景。于是我又追加了一轮 prompt结果使用FGO的职阶但测试问题还是用贴合平时工作和生活的不用按游戏内容来最终问卷面向全网只在结果里留游戏彩蛋就行。并且选项不要用MBTI那几个字母换数字代替以免读者有倾向性造成测试失真迭代之后题目就变成了选项贴合现实生活但结果仍然带着 FGO 灵魂的样子。然后再要求给我一套页面最后输出包含题目数组、结果映射逻辑和基础样式。将测试流程制作成适配移动端的H5页面设计简约排版美观。把代码下载到本地 html 文件打开测一测再改改交互BUG可用的第一版就出炉了。为了本地编辑方便我就用AI IDE继续做了几轮迭代改图片路径结果卡片里要放每种人格的职阶图本地调试时路径写法需要和最终部署环境匹配。改配色和间距让移动端显示更精致卡片圆角、阴影、字体大小逐一调整。调试模式我还加了个右下角的设置按钮点击直达16种结果页面。这个来回修正的过程就是vibe coding 的核心AI 生成 → 发现问题 → 把错误丢给 AI 修 → 跑通 → 再调样式 → 反复直到满意。整个过程我们不需要懂前端知道报错信息显示在哪、能描述清运行情况、会提修改要求就够了。了解前端知识则会开发的更加顺畅。四、部署到 Cloudflare Pages5 分钟上线你的作品代码写完了接下来要让它能被全网访问。Cloudflare Pages是比较好的选择个人轻量项目Free全球 CDN 加速绑定 GitHub 仓库后每次推送自动部署具体步骤第一步整理项目文件确保项目根目录有index.html如果是多文件项目有 CSS、JS 文件夹一并推上去。imgs/文件夹放职阶图片。第二步在 GitHub 新建一个空仓库起个名字比如fgoti把项目文件全传上去。这一步可以直接让AI IDE执行。第三步连接 Cloudflare Pages登录 Cloudflare部署后的应用访问无延迟但官网控制台不用魔法比较卡进入Workers Pages→创建应用程序→选择 Pages→连接 GitHub 仓库选中刚建的fgoti仓库部署分支选main / master构建命令留空纯 HTML 不需要构建第四步等自动部署然后复制链接一般 1 分钟内完成Cloudflare 会给你一个*.pages.dev的链接这就是你的作品地址直接可以分享。我部署完立马就把链接发给朋友们测了。五、vibe coding 适合做什么不适合做什么最后按惯例升华一下。vibe coding 的优势快速原型验证半小时出一个能跑的东西验证想法靠不靠谱降低技术门槛不需要会写代码只需要会说话快速迭代AI 生成 → 你提意见 → AI 改 → 循环vibe coding 的天花板复杂逻辑和深层架构还是得自己来AI 生成的前端代码往往能用但不够好需要多轮调优涉及后端数据库、用户体系时纯靠 vibe 会比较吃力但说到底最重要的还是那个想法。工具永远不是门槛——门槛是你脑子里那个这个东西好像挺好玩的念头。