企业官网建设流程全解析

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. 马上拉会，跟产品经理对齐所有细节（E）；B. 自己先查资料、画流程图，想清楚了再找人（I）”。

其次，我将答题过程游戏化。用户不是面对枯燥的问卷，而是与两个性格迥异的“程序员导师”Agent对话。每回答一个问题，对应的Agent会根据选择给出即时、个性化的反馈，比如“哈哈，看来你是个行动派！”或“嗯，深思熟虑是个好习惯。”这种互动能让用户更有代入感。

最后，根据用户的答案分布，计算出其MBTI类型。但报告不是标准化的心理学描述，而是用程序员的语言重新诠释。比如“INTJ”可能被描述为“系统架构师型：喜欢在脑海里构建完美世界，看见烂代码就手痒，文档是你最后的仁慈”。

2.3 技术栈全景图

为了实现从Agent到用户手中的H5，需要一套完整的技术链路：

1. Agent后端（Python + QClaw）：这是大脑。使用Python编写，基于QClaw框架构建两个Agent实例。负责处理测试逻辑、与LLM API交互、管理对话状态（用户历史答案）、计算MBTI类型并生成报告。
2. 后端API服务（FastAPI）：这是神经中枢。用轻量级的FastAPI框架搭建RESTful API，作为前端H5与Agent后端之间的桥梁。它接收前端的答题请求，调用对应的Agent进行处理，并将结果（Agent回复、下一题、最终报告）返回给前端。
3. 前端H5（Vue.js + Vant）：这是脸面。使用Vue 3框架进行开发，搭配Vant UI组件库快速构建移动端友好的界面。负责渲染对话界面、展示题目和选项、发送用户选择、接收并展示Agent的回复和最终报告。
4. 部署与发布：后端服务部署到任意的云服务器或容器平台（如阿里云ECS、腾讯云CVM、或Vercel/Zeabur等Serverless平台）。前端H5打包后，可以放在同一个服务器的静态目录，或上传至对象存储（如阿里云OSS、腾讯云COS），生成一个URL链接。这个链接就可以在微信、浏览器、或其他App的WebView中轻松打开。

3. 核心实现：打造两个“戏精”程序员Agent

3.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_key=os.getenv("OPENAI_API_KEY")) # 定义“老K”Agent agent_k = Agent( name="老K", system_prompt="你是老K，一个资深技术专家...（如上文所述）", llm_client=client, llm_model="gpt-3.5-turbo", # 可根据情况选择模型 tools=[], # 本例中未使用工具调用，如需可在此添加 memory=True # 开启记忆，记住对话历史 ) # 定义“阿灵”Agent agent_a = Agent( name="阿灵", system_prompt="你是阿灵，一个创意程序员...（如上文所述）", llm_client=client, llm_model="gpt-3.5-turbo", tools=[], memory=True ) # 测试流程管理函数 def run_test_session(user_answers, agent_choice): """ user_answers: 用户答案列表，如 ['A', 'B', 'A', ...] agent_choice: 本次对话选择的Agent，'K' 或 'A' """ agent = agent_k if agent_choice == 'K' else agent_a session = Session(agent=agent) all_feedback = [] # 假设questions是预定义的题目列表 for i, answer in enumerate(user_answers): # 构建当前问题上下文 question_context = f"这是第{i+1}个问题：{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需要提供两个核心端点：

1. 提交答案并获取反馈(POST /api/answer)：接收题目ID和用户选择的选项，调用run_test_session函数（或类似逻辑）处理当前这一步，返回对应Agent的反馈和下一题信息（如果是最后一题，则触发报告生成）。
2. 获取最终报告(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 = f"Agent {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_code=404, 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)，管理整个测试流程。

1. 页面与路由：只需要一个主页面。状态管理当前题号、题目列表、用户答案、Agent反馈和最终报告。
2. 组件设计：
   • QuestionCard.vue：展示题目和选项卡片。
   • AgentMessage.vue：展示Agent头像和对话气泡，根据agent_type切换“老K”或“阿灵”的头像和样式。
   • ReportPage.vue：全屏展示最终MBTI类型和趣味报告，设计分享海报的功能。
3. 状态管理：使用Vue的reactive或Pinia来管理全局状态，包括会话ID、答题进度、Agent反馈历史等。
4. API调用：使用axios或fetch封装与后端FastAPI的通信。
5. 样式与动效：利用Vant的组件保持UI清爽，添加一些微交互，如选项点击动效、Agent消息渐入效果，提升游戏感。

关键的前端逻辑流是：用户进入页面 -> 选择Agent角色 -> 获取第一题 -> 用户选择 -> 提交答案到后端 -> 接收Agent反馈并显示 -> 获取下一题 -> ... -> 所有题答完 -> 跳转到报告页 -> 调用/api/report获取并展示个性化报告。

4.3 微信与移动端适配要点

为了让H5在微信和各种手机浏览器里有良好体验，需要关注以下几点：

• 视口与响应式：确保<meta name="viewport">设置正确，CSS使用Flex/Grid布局和媒体查询适配不同屏幕。
• 禁止缩放：在移动端，通常需要禁止用户缩放页面，以保持游戏UI的稳定。

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 点击延迟：移动端有300ms点击延迟，可以使用fastclick库或CSS属性touch-action: manipulation;来解决。
• 微信内适配：在微信内置浏览器中，需要注意分享卡片的自定义（设置标题、描述、图标），这需要接入微信JS-SDK（如果需求强烈）。对于简单的H5，至少确保页面标题和描述在<head>里设置好。
• 横屏签名/输入框问题：这是一个常见的CSS坑。如果页面有输入框，在iOS Safari等浏览器中，键盘弹出可能会挤压或错位布局。解决方案通常是将页面主要容器设置为fixed定位，并动态计算高度，或者使用window.scrollTo在输入框聚焦时滚动到合适位置。对于本游戏，由于主要是选择按钮，输入场景少，问题不突出。

5. 部署上线与优化心得

5.1 从本地到公网的部署流程

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 &

2. 前端部署：在frontend目录下运行npm run build，生成dist文件夹。将这个文件夹里的所有文件，复制到云服务器上Nginx配置的静态网站根目录（如/var/www/html）下。或者，更推荐的做法是上传到阿里云OSS/腾讯云COS，开启静态网站托管，获得一个更快的专属访问域名。
3. 配置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模式 } }

4. 域名与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 踩坑记录与避坑指南

1. Agent性格“漂移”：初期发现Agent的回复偶尔会偏离预设性格，比如“老K”突然变得很温柔。这是因为单次Prompt可能不足以牢牢锁定角色。解决方法是：在每一轮对话中，都将关键的角色描述作为“系统提示词”的一部分传递给LLM，而不仅仅是会话初始化时。QClaw的Session管理可以帮助我们维护这个上下文。
2. 网络延迟影响体验：用户点击选项后，需要等待LLM API返回Agent反馈，这可能有1-3秒的延迟。优化方法是：前端在提交答案后立即显示一个加载动画（比如Agent头像在“思考”）。同时，后端做好超时设置和错误处理，给用户友好的提示。
3. MBTI计算结果波动：由于题目少，个别题目的选择可能对最终结果影响很大。缓解方法是：在最终报告的开头，可以幽默地注明“本测试仅供娱乐，结果受今日咖啡因含量影响较大”。或者，可以设计一个“倾向强度”的显示，让用户知道自己在某个维度上只是略微倾向。
4. 微信内分享样式失效：在微信中打开H5链接，分享给朋友时，显示的是默认的标题和图片，而不是你精心设计的封面。这是因为微信有严格的缓存机制。你需要接入微信JS-SDK，通过后端签名，调用wx.updateAppMessageShareData等API来动态设置分享信息。对于轻量级游戏，如果觉得接入麻烦，至少确保你的页面在首次被微信爬虫抓取时，<title>和<meta property="og:image">等标签是正确的。

6. 项目总结与扩展思考

做完这个小项目，感觉像是用代码和AI导演了一出微型互动剧。QClaw降低了构建对话式Agent的门槛，让“赋予AI性格”这件事变得直观。前端H5则是最佳的传播载体，轻点链接就能体验。

这个项目的价值不在于其心理测量的准确性，而在于它展示了一种可能性：将AI Agent从抽象的“自动化工具”，转变为有性格、可互动的“数字伙伴”，应用于娱乐、轻社交、个性化引导等场景。你可以很容易地将其改造成“美食家版MBTI”、“旅行者版MBTI”，只需要更换题目库和重新设计Agent的Prompt。

从技术成长角度看，它串联了AI应用开发、后端API设计、前端交互和部署运维，是一个非常好的全栈练手项目。遇到的每一个坑，从Prompt工程到微信适配，都是宝贵的实战经验。

最后，关于AI Agent开发的学习，我的体会是，不要一开始就陷入复杂的框架和理论。像这样从一个有明确目标、有趣味性的小点子出发，选择一个像QClaw这样轻量的框架快速实现，在过程中遇到问题再去深入研究（比如记忆管理、工具调用），学习曲线会平滑很多。先让Agent“动起来”，再思考如何让它更“聪明”、更“可靠”。