1. 项目概述一个程序员视角的MBTI趣味实验最近在捣鼓AI Agent开发正好看到QClaw这个框架挺火就想着用它来整点活儿。作为一个对MBTI迈尔斯-布里格斯类型指标有点兴趣又天天和代码打交道的程序员我冒出一个想法能不能用AI Agent来模拟MBTI的测试过程并且把它做成一个轻量级的H5小游戏这个想法听起来有点跨界但仔细一想MBTI测试的本质是一系列基于认知偏好的选择题而AI Agent的核心能力之一就是根据预设的“性格”或“规则”进行决策和交互这两者结合似乎有戏。说干就干。我的目标很明确搭建两个具有不同“程序员性格”的AI Agent让它们来引导用户完成一个简化版的MBTI测试最后生成一个带有程序员特色的、幽默风趣的类型解析报告。整个项目将以前端H5的形式呈现确保用户能在微信、浏览器等地方轻松打开和玩耍。这不仅仅是一个技术Demo更是一次对AI Agent应用场景的趣味探索——如何将抽象的“智能体”概念落地成一个有互动、有反馈、能带来乐趣的轻量级应用。2. 核心思路与技术选型2.1 为什么是QClaw在决定用QClaw之前我也简单对比过市面上其他一些Agent框架。QClaw吸引我的点在于它的“轻快”和“面向对话”。它不像一些重型框架需要庞大的基础设施而是强调快速构建基于大语言模型的、有状态的对话应用。这对于我这个想快速验证想法、且核心交互就是“问答”的小游戏来说再合适不过。具体来说QClaw提供了清晰的Agent定义、工具调用、记忆管理和会话流控制机制。我可以很方便地为我的两个Agent定义不同的“系统提示词”System Prompt来塑造它们截然不同的性格。比如一个Agent可以扮演严谨、逻辑至上的“架构师”风格另一个则可以扮演天马行空、追求创意的“极客”风格。通过QClaw我能让这两个Agent根据用户的答题选择进行不同的反馈和引导让测试过程本身也变得更有“人设”和趣味性。注意QClaw的部署和配置相对简单但其核心是对大语言模型API如OpenAI GPT、国内各大模型平台API的封装。你需要准备好相应的API Key和一定的模型调用预算。2.2 游戏化MBTI测试的设计传统的MBTI测试有93道题显然不适合做成一个轻快的小游戏。我的设计思路是“精髓提取”和“场景化”。首先我提炼了MBTI四个维度E/I, S/N, T/F, J/P最核心的决策点将其浓缩为8-10个关键问题。每个问题都设计成程序员熟悉的场景。例如不是问“你更喜欢聚会还是独处”而是问“接到一个模糊的需求你的第一反应是A. 马上拉会跟产品经理对齐所有细节EB. 自己先查资料、画流程图想清楚了再找人I”。其次我将答题过程游戏化。用户不是面对枯燥的问卷而是与两个性格迥异的“程序员导师”Agent对话。每回答一个问题对应的Agent会根据选择给出即时、个性化的反馈比如“哈哈看来你是个行动派”或“嗯深思熟虑是个好习惯。”这种互动能让用户更有代入感。最后根据用户的答案分布计算出其MBTI类型。但报告不是标准化的心理学描述而是用程序员的语言重新诠释。比如“INTJ”可能被描述为“系统架构师型喜欢在脑海里构建完美世界看见烂代码就手痒文档是你最后的仁慈”。2.3 技术栈全景图为了实现从Agent到用户手中的H5需要一套完整的技术链路Agent后端Python QClaw这是大脑。使用Python编写基于QClaw框架构建两个Agent实例。负责处理测试逻辑、与LLM API交互、管理对话状态用户历史答案、计算MBTI类型并生成报告。后端API服务FastAPI这是神经中枢。用轻量级的FastAPI框架搭建RESTful API作为前端H5与Agent后端之间的桥梁。它接收前端的答题请求调用对应的Agent进行处理并将结果Agent回复、下一题、最终报告返回给前端。前端H5Vue.js Vant这是脸面。使用Vue 3框架进行开发搭配Vant UI组件库快速构建移动端友好的界面。负责渲染对话界面、展示题目和选项、发送用户选择、接收并展示Agent的回复和最终报告。部署与发布后端服务部署到任意的云服务器或容器平台如阿里云ECS、腾讯云CVM、或Vercel/Zeabur等Serverless平台。前端H5打包后可以放在同一个服务器的静态目录或上传至对象存储如阿里云OSS、腾讯云COS生成一个URL链接。这个链接就可以在微信、浏览器、或其他App的WebView中轻松打开。3. 核心实现打造两个“戏精”程序员Agent3.1 Agent角色定义与Prompt工程这是整个项目的灵魂所在。两个Agent的性格必须鲜明且符合程序员群体的某些典型画像。Agent A: “逻辑严师 – 老K”角色资深技术专家追求架构优雅、代码清晰信奉“Talk is cheap, show me the code”。系统Prompt设计要点语气冷静、直接、略带犀利。常用“我认为”、“从逻辑上讲”、“这个选择会导致...”。知识背景暗示其拥有多年系统设计、代码评审经验。行为指令对用户的每个选择从“可维护性”、“扩展性”、“潜在风险”等工程角度进行简短点评。偶尔可以毒舌但要点到即止体现专业。示例Prompt片段“你是老K一个在硅谷和西二旗都待过的资深程序员。你重视逻辑胜过一切讨厌含糊的需求和重复的代码。在引导用户进行程序员风格MBTI测试时针对他的每一个选择请用一两句话从软件工程或项目管理的角度给出冷静、直接、甚至带点挑剔的点评。不要展开长篇大论。”Agent B: “创意潮人 – 阿灵”角色年轻的前端/全栈开发者热爱新技术、热衷参与黑客松认为“Code should be fun and magical”。系统Prompt设计要点语气活泼、热情、充满鼓励。常用“酷”、“这个想法有意思”、“试试看呗”。知识背景暗示其熟悉各种新奇框架、工具喜欢用创意解决问题。行为指令对用户的每个选择从“创新性”、“用户体验”、“开发乐趣”等角度给予积极反馈。可以适当玩梗使用一些程序员社区的流行语。示例Prompt片段“你是阿灵一个活跃于GitHub和各种开发者大会的创意程序员。你觉得编程是创造世界的魔法。在引导用户进行程序员风格MBTI测试时针对他的每一个选择请用一两句话从技术趣味性、创新可能性或开发者体验的角度给出热情、开放、带点俏皮的反馈。可以适当使用‘yyds’、‘优雅’等网络用语。”通过精心设计的Prompt我们让两个Agent在相同的测试题目下给出风格迥异的互动反馈极大地增强了游戏的趣味性。3.2 基于QClaw的Agent搭建实战安装好QClaw和配置好LLM API环境后搭建Agent的代码结构非常清晰。# 示例代码结构 import os from qclaw import Agent, Session from your_mbti_logic import calculate_mbti, generate_report # 自定义的MBTI计算和报告生成模块 # 初始化LLM客户端例如使用OpenAI from openai import OpenAI client OpenAI(api_keyos.getenv(OPENAI_API_KEY)) # 定义“老K”Agent agent_k Agent( name老K, system_prompt你是老K一个资深技术专家...如上文所述, llm_clientclient, llm_modelgpt-3.5-turbo, # 可根据情况选择模型 tools[], # 本例中未使用工具调用如需可在此添加 memoryTrue # 开启记忆记住对话历史 ) # 定义“阿灵”Agent agent_a Agent( name阿灵, system_prompt你是阿灵一个创意程序员...如上文所述, llm_clientclient, llm_modelgpt-3.5-turbo, tools[], memoryTrue ) # 测试流程管理函数 def run_test_session(user_answers, agent_choice): user_answers: 用户答案列表如 [A, B, A, ...] agent_choice: 本次对话选择的AgentK 或 A agent agent_k if agent_choice K else agent_a session Session(agentagent) all_feedback [] # 假设questions是预定义的题目列表 for i, answer in enumerate(user_answers): # 构建当前问题上下文 question_context f这是第{i1}个问题{questions[i][text]} 用户选择了{answer}。请根据你的角色给出反馈。 response session.run(question_context) all_feedback.append(response.content) # 所有问题答完后计算MBTI mbti_type calculate_mbti(user_answers) # 生成最终报告可以调用另一个LLM或使用模板 final_report generate_report(mbti_type, agent_choice) return { feedbacks: all_feedback, # 每题的Agent反馈 mbti_type: mbti_type, final_report: final_report }这段代码勾勒出了核心逻辑初始化两个性格不同的Agent在一个会话Session中根据用户的一系列答案让指定的Agent依次给出反馈最后再汇总生成报告。3.3 MBTI逻辑与报告生成题目和MBTI计算逻辑需要独立维护。我设计了一个questions列表每个问题包含题干、选项以及每个选项对应的影响维度E/I, S/N, T/F, J/P和分值。questions [ { id: 1, text: 接到一个模糊的需求文档你的第一反应是, options: [ {text: 马上拉个会拉着产品经理把每个细节都对齐, dimension: E, score: 1}, {text: 自己先查竞品、画流程图理清思路后再单独找产品确认, dimension: I, score: 1} ] }, { id: 2, text: 在评估新技术时你更看重, options: [ {text: 官方文档是否详尽社区是否活跃有没有成功案例, dimension: S, score: 1}, {text: 它的设计理念是否优雅未来有没有颠覆性的潜力, dimension: N, score: 1} ] }, # ... 更多题目 ]calculate_mbti函数会遍历用户答案累加每个维度的得分。每个维度如E和I得分高的那一方即为该维度的倾向。最终拼接成四个字母的MBTI类型码。报告生成则更具创造性。我准备了一个报告模板库针对16种MBTI类型结合“老K”和“阿灵”的语言风格各准备了一段描述。例如给“老K”的ISTP报告可能强调“高效的问题解决者擅长临场调试”而“阿灵”的ISTP报告则可能形容为“沉默的极客能用最简单工具做出最酷原型”。4. 前后端联动与H5开发4.1 使用FastAPI构建轻量后端后端API需要提供两个核心端点提交答案并获取反馈(POST /api/answer)接收题目ID和用户选择的选项调用run_test_session函数或类似逻辑处理当前这一步返回对应Agent的反馈和下一题信息如果是最后一题则触发报告生成。获取最终报告(GET /api/report/{session_id})当所有题目完成后前端通过此接口获取完整的MBTI类型和风格化报告。from fastapi import FastAPI, HTTPException from pydantic import BaseModel from typing import List, Optional app FastAPI(title程序员MBTI游戏API) # 临时存储用户会话生产环境请用Redis或数据库 sessions {} class AnswerRequest(BaseModel): session_id: str question_id: int answer: str # 如 A agent_type: str # K or A app.post(/api/answer) async def submit_answer(req: AnswerRequest): if req.session_id not in sessions: sessions[req.session_id] {answers: [], current_step: 0} session_data sessions[req.session_id] session_data[answers].append({q_id: req.question_id, answer: req.answer}) # 调用Agent处理逻辑这里简化实际需调用QClaw Agent # feedback agent_process(req.agent_type, req.question_id, req.answer) feedback fAgent {req.agent_type} 对第{req.question_id}题选择{req.answer}的反馈。 # 判断是否最后一题 next_q_id req.question_id 1 if req.question_id TOTAL_QUESTIONS else None if not next_q_id: # 所有题答完计算MBTI mbti calculate_mbti_from_session(session_data[answers]) session_data[mbti_result] mbti return { feedback: feedback, next_question_id: next_q_id, is_completed: not next_q_id } app.get(/api/report/{session_id}) async def get_report(session_id: str): if session_id not in sessions or mbti_result not in sessions[session_id]: raise HTTPException(status_code404, detail报告未生成或会话不存在) data sessions[session_id] # 生成风格化报告 report generate_styled_report(data[mbti_result], data.get(agent_type, K)) return {mbti_type: data[mbti_result], report: report}4.2 灵动前端Vue 3 Vant UI前端H5的核心是一个单页应用(SPA)管理整个测试流程。页面与路由只需要一个主页面。状态管理当前题号、题目列表、用户答案、Agent反馈和最终报告。组件设计QuestionCard.vue展示题目和选项卡片。AgentMessage.vue展示Agent头像和对话气泡根据agent_type切换“老K”或“阿灵”的头像和样式。ReportPage.vue全屏展示最终MBTI类型和趣味报告设计分享海报的功能。状态管理使用Vue的reactive或Pinia来管理全局状态包括会话ID、答题进度、Agent反馈历史等。API调用使用axios或fetch封装与后端FastAPI的通信。样式与动效利用Vant的组件保持UI清爽添加一些微交互如选项点击动效、Agent消息渐入效果提升游戏感。关键的前端逻辑流是用户进入页面 - 选择Agent角色 - 获取第一题 - 用户选择 - 提交答案到后端 - 接收Agent反馈并显示 - 获取下一题 - ... - 所有题答完 - 跳转到报告页 - 调用/api/report获取并展示个性化报告。4.3 微信与移动端适配要点为了让H5在微信和各种手机浏览器里有良好体验需要关注以下几点视口与响应式确保meta nameviewport设置正确CSS使用Flex/Grid布局和媒体查询适配不同屏幕。禁止缩放在移动端通常需要禁止用户缩放页面以保持游戏UI的稳定。meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno点击延迟移动端有300ms点击延迟可以使用fastclick库或CSS属性touch-action: manipulation;来解决。微信内适配在微信内置浏览器中需要注意分享卡片的自定义设置标题、描述、图标这需要接入微信JS-SDK如果需求强烈。对于简单的H5至少确保页面标题和描述在head里设置好。横屏签名/输入框问题这是一个常见的CSS坑。如果页面有输入框在iOS Safari等浏览器中键盘弹出可能会挤压或错位布局。解决方案通常是将页面主要容器设置为fixed定位并动态计算高度或者使用window.scrollTo在输入框聚焦时滚动到合适位置。对于本游戏由于主要是选择按钮输入场景少问题不突出。5. 部署上线与优化心得5.1 从本地到公网的部署流程后端部署将FastAPI应用打包依赖写入requirements.txt。购买一台最基础的云服务器如1核1G安装Python和Nginx。使用uvicorn或gunicorn作为ASGI服务器运行FastAPI应用并通过Nginx做反向代理和静态文件服务。常用命令# 在服务器上 git clone your-repo cd your-repo/backend pip install -r requirements.txt # 使用screen或systemd后台运行 uvicorn main:app --host 0.0.0.0 --port 8000 --reload 前端部署在frontend目录下运行npm run build生成dist文件夹。将这个文件夹里的所有文件复制到云服务器上Nginx配置的静态网站根目录如/var/www/html下。或者更推荐的做法是上传到阿里云OSS/腾讯云COS开启静态网站托管获得一个更快的专属访问域名。配置Nginx编辑Nginx配置文件将API请求如/api/代理到后端FastAPI服务localhost:8000将其他所有请求指向前端静态文件。server { listen 80; server_name your-domain.com; # 你的域名或IP location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; } location / { root /var/www/html; # 前端dist文件位置 index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } }域名与HTTPS如果有域名在DNS解析到服务器IP。使用Let‘s Encrypt的Certbot工具为域名申请免费的SSL证书配置Nginx启用HTTPS提升安全性和专业性。5.2 性能优化与成本控制Agent调用优化这是主要成本点。LLM API按Token收费。优化策略包括精简Prompt反复打磨系统提示词用最少的字数表达清晰的角色设定。缓存反馈对于固定的题目和选项组合Agent的反馈其实是可以预测的。可以在后端建立一个简单的缓存如用题目ID选项Agent类型作为Key将首次生成的精彩反馈缓存起来。后续相同的问题直接返回缓存内容无需再次调用LLM API能节省大量费用和延迟。选择合适模型对于这种互动反馈gpt-3.5-turbo的性能和成本平衡已经足够无需使用更贵的gpt-4。前端资源优化对图片、图标进行压缩。使用Vue Router的懒加载拆分代码包。利用浏览器缓存策略对静态资源设置合适的Cache-Control头。会话管理示例中用了内存字典session这只适用于开发。生产环境必须使用Redis或数据库来存储用户会话和答题进度并设置合理的过期时间如24小时避免内存泄漏和数据丢失。5.3 踩坑记录与避坑指南Agent性格“漂移”初期发现Agent的回复偶尔会偏离预设性格比如“老K”突然变得很温柔。这是因为单次Prompt可能不足以牢牢锁定角色。解决方法是在每一轮对话中都将关键的角色描述作为“系统提示词”的一部分传递给LLM而不仅仅是会话初始化时。QClaw的Session管理可以帮助我们维护这个上下文。网络延迟影响体验用户点击选项后需要等待LLM API返回Agent反馈这可能有1-3秒的延迟。优化方法是前端在提交答案后立即显示一个加载动画比如Agent头像在“思考”。同时后端做好超时设置和错误处理给用户友好的提示。MBTI计算结果波动由于题目少个别题目的选择可能对最终结果影响很大。缓解方法是在最终报告的开头可以幽默地注明“本测试仅供娱乐结果受今日咖啡因含量影响较大”。或者可以设计一个“倾向强度”的显示让用户知道自己在某个维度上只是略微倾向。微信内分享样式失效在微信中打开H5链接分享给朋友时显示的是默认的标题和图片而不是你精心设计的封面。这是因为微信有严格的缓存机制。你需要接入微信JS-SDK通过后端签名调用wx.updateAppMessageShareData等API来动态设置分享信息。对于轻量级游戏如果觉得接入麻烦至少确保你的页面在首次被微信爬虫抓取时title和meta propertyog:image等标签是正确的。6. 项目总结与扩展思考做完这个小项目感觉像是用代码和AI导演了一出微型互动剧。QClaw降低了构建对话式Agent的门槛让“赋予AI性格”这件事变得直观。前端H5则是最佳的传播载体轻点链接就能体验。这个项目的价值不在于其心理测量的准确性而在于它展示了一种可能性将AI Agent从抽象的“自动化工具”转变为有性格、可互动的“数字伙伴”应用于娱乐、轻社交、个性化引导等场景。你可以很容易地将其改造成“美食家版MBTI”、“旅行者版MBTI”只需要更换题目库和重新设计Agent的Prompt。从技术成长角度看它串联了AI应用开发、后端API设计、前端交互和部署运维是一个非常好的全栈练手项目。遇到的每一个坑从Prompt工程到微信适配都是宝贵的实战经验。最后关于AI Agent开发的学习我的体会是不要一开始就陷入复杂的框架和理论。像这样从一个有明确目标、有趣味性的小点子出发选择一个像QClaw这样轻量的框架快速实现在过程中遇到问题再去深入研究比如记忆管理、工具调用学习曲线会平滑很多。先让Agent“动起来”再思考如何让它更“聪明”、更“可靠”。