![478db7a1-8a3b-44e0-8b2d-b281fee8f5ff](https://developer.qcloudimg.com/http-save/yehe-1209475/7ead452dc014bc3f44fcbbfff43e9db9.png)
## 前言

你好，我是喵喵侠。最近 B 站上有个 MBTI 的变种火了，叫做 SBTI。测试的过程很简单，用户答题，提交结果后就能看到自己的 SBTI 人格，有具体的名称和解析。虽然这个不靠谱，但传播度很广，娱乐性很强。所以我想着我能不能做一款程序员版本的 MBTI 测试呢？带着这个想法，我开始动手做这么一款有趣的 H5，下面是我的实操分享。

## 开始动手

### 创建QClaw Agent

既然有 QClaw 小龙虾这个工具，那么这个活儿当然是给它干了！QClaw 最近出来智能 Agent 模式，简单说你可以用这种方式，创造属于自己的智能体。

我这个 H5 小游戏需要做需求功能分析和代码编写，那么我就可以做两个 agent，分别是产品经理 Agent 和前端开发 Agent。

首先打开 QClaw，可以看到有个【新建 Agent】按钮，点击它。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/da58dfd9520b8111ae907b54e6eefd8a.png)

然后你就可以看到关于这个 Agent 创建工坊的介绍。你可以选择用内置的 Agent，比方说自由撰稿人、程序员、辅导员，也可以选择自定义创建。内核默认选择 OpenClaw 就好了，Hermes Agent 理论上会更强，但现在在内测只能创建一个 Agent，感兴趣也可以试试。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/c1c3360df95577deefb7f464069c6c43.png)

### 创建产品经理Agent

这里我选择自定义，创建全新 Agent。然后点击【现在创作】。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/cc4d3cdd5081c7a1e4b97cfd539f64c3.png)

我给出的提示词如下，可以参考下：

```
按照以下信息修改你的identity和soul文件，修改后立即更新：你的名称是「苏晚柠（Nina）」关于你的经历「你是一名 00 后美女产品经理，主攻 C 端增长方向，有 3-5 年互联网产品经验，深度参与过多个 App 和 H5 从 0 到 1、1 到 10 的增长项目。你熟悉抖音、小红书、B站、微信生态，擅长裂变拉新、用户留存、转化路径优化等典型增长玩法。

你对年轻用户（尤其 Z 世代）有很强的洞察能力，熟悉用户心理（占便宜、从众、炫耀、好奇心驱动等），能够设计让用户“忍不住点击、分享、参与”的机制。同时你具备数据驱动思维，习惯通过漏斗分析、A/B Test 来验证增长策略，而不是拍脑袋决策。

你还非常擅长把产品“内容化”，会将功能包装成更具传播性的形式，比如人格测试、星座分析、MBTI、情绪测试、互动小游戏等，并结合热点和社交话题设计传播点，让产品具备自增长能力。
」，关于你的风格「你是一个网感极强的产品经理，性格活泼可爱，表达自然，有亲和力，很会聊天也很会接话。你熟悉中文互联网热梗，对 MBTI、星座、情绪测试等内容非常了解，并能自然融入到产品设计和表达中。

你的表达风格是：轻松、有一点点俏皮，但逻辑清晰，不说废话。你不会用空洞的“可以优化一下”这种话，而是会直接指出问题，并给出具体、可落地的方案，同时说明背后的用户心理和增长逻辑。

你可以适当玩梗，但不会过度；可以可爱，但不会降智；可以共情，但依然保持专业判断。面对不合理需求，你会用轻松但坚定的方式指出问题，而不是一味迎合。

你的目标不是做一个“看起来很懂产品”的人，而是一个真正能帮用户把产品做得更容易增长、更容易传播的产品经理。」
```

然后把内容按照下图对照位置填充进去就好，模型我这里选择当前积分扣的最多的 GLM-5.1，这个效果也是最好的。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/c0a3bedc7c93c4ec9096f7fcb9a8750f.png)

等待一会儿，就可以看到我们的 00 后美女产品经理苏晚柠（Nina）已经创建好啦！

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/07e1296ad5b789e340b9765621678017.png)

接着我跟她描述我的需求，而且我给了她一个SBTI 的 skill 做参考：

```
	​我想做一个程序员版本的 MBTI 测试 H5，用户通过回答十道题提交，即可获取自己的测试结果，结果有四个字母组合和名称，以及具体的介绍和解析。你可以把程序员的行为和性格特点，融合到最终的结果里面。问题可以随机一点，可以是工作、生活、情感等方方面面，问题可以滑稽离谱一点，也可以设置一些非常有趣又有梗的选项，哪怕个别题目这个几个选择只能瞎蒙或者用户是被迫选择的，都没关系，重点是好玩有趣。目前网上很流行 sbit，也就是 mbti 的变种，你可以参考这个 skill 去设计属于程序员版本的mbit，我取名叫做 itit，如果有更好的名字，你也可以提供。
```

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/f7d58d68a799f0b3abdf86d1c32fa19c.png)

等待一会儿，她给我设计了 ITTI 的四个字母维度，我觉得很棒！

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/1456af3a07b0ff1c309f857071cba976.png)

只是目前她做的还不够，还需要把首页和问题设计一下。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/f39a26b55ed4b9358150ef1605b5ae69.png)

然后就可以看到她的思考过程，其中调用了 python 工具，写了一个 md 文档。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/18840f2832e5003df69b9919d3f92e67.png)

打开文档，可以看到写的非常详细，每个环节都考虑到了！下面是文档内容节选。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/90df6833d3c74af2a6113dda4af18aee.png)

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/8287424367ff168f03ec47625539e525.png)

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/420747122f1780086f313a9f6196961c.png)

### 创建前端工程师 Agent

有了这样详细的文档，我们就可以做具体的代码编写了，这里我又创建了一个前端工程师 Agent，因为这个 H5 小游戏不需要存储数据库，也不需要服务器 API 接口，纯前端开发就足够了。

创建步骤和上面一样，这里分享我的提示词：

```
按照以下信息修改你的identity和soul文件，修改后立即更新：

你的名称是「Claw · 前端工程师」

关于你的经历「你是一名前端开发工程师，深耕 Web 与 H5 开发多年，具备丰富的项目实战经验。你主导和参与过多个高质量网站与活动页（H5）开发，擅长复杂交互动效实现与性能优化。在长期实践中，你对浏览器渲染机制、网络加载优化、动画原理有深入理解，能够在保证性能的前提下实现极致视觉效果。你熟练使用现代前端技术栈（如 React / Vue / TypeScript / Vite / Next.js 等），并持续关注行业前沿技术与工程化方案。你具备良好的产品理解能力，能够将抽象需求快速转化为高质量实现，是团队中连接产品与设计的关键角色。」

关于你的风格「你是一名典型的极客型前端工程师，理性、专业但不死板，追求代码优雅与用户体验的平衡。你对 UI 细节极其敏感，擅长像素级还原设计稿，对 CSS（动画、布局、响应式、细节表现）有极高掌控力。你在表达上简洁高效，习惯结构化输出，必要时会给出代码示例或实现思路。你会主动思考用户体验、交互反馈与性能优化，而不仅仅是“实现需求”。面对需求时，你会先拆解问题、给出更优方案，而不是机械执行。你乐于使用新技术，但不会盲目炫技，一切以稳定性与体验为优先。整体风格偏工程化、现代化、注重细节，同时带有一点极客气质与审美洁癖。」
```

等待片刻，前端工程师 Agent 就创建好了。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/06bfef547ad112333a2bf637e5864475.png)

然后把刚刚产品经理写的文档，丢给他实现就好了。

> 注意：我之前 ITTI 的似乎有错别字，这里纠正下。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/f4abe5bdbf919e47bee37bee25c0614e.png)

这个等待过程会稍微有点长，你可以看到他在思考，他在完善功能并修复 bug。

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/aa454aae4eedb1c5f466b444b593e914.png)

最后可以看到生成了一个 index.html 文件，打开即可看到这个 h5 游戏。

下面是 h5 测试的首页截图：

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/e71add353717dc9a754ac12438662aca.png)

答题页截图如下，可以看到问题和回答选项都非常有梗：

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/1c7eed2748d7e9eb5b5fc201314d1c00.png)

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/e2ca1eb624c310d928526e2ffe7039e5.png)

结果页如下，可以说性格类型和解析都非常详细了！

![image](https://developer.qcloudimg.com/http-save/yehe-1209475/8cba482212c4a4e4d9641e87774f6e2b.png)

这个体验地址我放到对象存储了，感兴趣的朋友可以测试玩玩，欢迎把你的结果分享到评论区。

H5 体验地址：[https://h5-1251131656.cos.ap-shanghai.myqcloud.com/demo/itti.html](https://h5-1251131656.cos.ap-shanghai.myqcloud.com/demo/itti.html)

## 总结

这次用 QClaw 做这个 H5 小游戏，其实最大的感受不是“它能写代码”，而是你可以把它当成一个团队在用。

我分别创建了「产品经理」和「前端工程师」两个 Agent，让它们各司其职：一个负责想清楚要做什么，一个负责把事情漂亮地做出来。最终从想法到落地，整个链路是打通的，而且体验也在线。

本质上，这是一种更高级的 AI 使用方式：通过角色建模，把复杂任务拆进一个可协作的系统里。

如果你也在做项目、写工具，甚至只是想提升效率，其实都可以照这个思路来一套。做几个真正能干活的 Agent，比单纯多问几句要有用得多。


你好，我是喵喵侠。最近 B 站上有个 MBTI 的变种火了，叫做 SBTI。测试的过程很简单，用户答题，提交结果后就能看到自己的 SBTI 人格，有具体的名称和解析。虽然这个不靠谱，但传播度很广，娱乐性很强。所以我想着我能不能做一款程序员版本的 MBTI 测试呢？带着这个想法，我开始动手做这么一款有趣的 H5，下面是我的实操分享。

我用 QClaw 搭了两个 Agent，做个程序员版 MBTI 小游戏

人工智能

程序员版MBTI测试H5上线！通过10道趣味编程题测试你的ITTI人格类型，包含滑稽选项和详细解析。体验地址：https://h5-1251131656.cos.ap-shanghai.myqcloud.com/demo/itti.html

对象存储

TypeScript

数据库

服务器

智能体

Agent

对象存储COS新用户低至1元！


2026采购季 | AI焕新·智启新局

tencentdb-catalog

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我用 QClaw 搭了两个 Agent，做个程序员版 MBTI 小游戏-腾讯云开发者社区-腾讯云

我用 QClaw 搭了两个 Agent，做个程序员版 MBTI 小游戏

我用 QClaw 搭了两个 Agent，做个程序员版 MBTI 小游戏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐