从零到一：我如何用AI助手打造专业级MBTI人格测试小程序
最近完成了一个让我颇为满意的项目——基于微信小程序的MBTI人格测试应用。整个开发过程中，AI助手发挥了关键作用，今天想和大家分享这个项目的开发历程，以及一些实用的AI提示词技巧。
项目概览：不只是简单的心理测试
这不是一个普通的在线测试，而是一个功能完整、设计精美的专业级应用：
核心特性一览：
- 93道标准MBTI测试题目，覆盖四个维度（EI、SN、TF、JP）
- 16种人格类型的详细解读和职业建议
- 智能进度保存，支持测试中断后继续
- 精美海报生成功能，一键分享测试结果
- 代码数据分离设计，题库独立维护
开发亮点：技术与用户体验的完美结合
1. 智能化的答题体验
答题界面采用了5级Likert量表设计，从"非常不同意"到"非常同意"，确保测试结果的科学性和准确性。最让我满意的是进度保存功能——用户可以随时中断测试，下次打开时自动恢复到上次的进度。
2. 科学的计分算法
项目的核心是MBTI计分算法，采用标准化的计分方法：
// 核心计分逻辑示例
function calculateMBTI(userAnswers, questionBank) {
let scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
const scoreMap = { 1: 0, 2: 0.5, 3: 1, 4: 1.5, 5: 2 };
// 遍历答案进行双向计分
for (let i = 0; i < userAnswers.length; i++) {
const answer = userAnswers[i];
const question = questionBank.questions[i];
// 根据维度和方向计算得分...
}
// 确定最终人格类型
const type = [
scores.E >= scores.I ? 'E' : 'I',
scores.S >= scores.N ? 'S' : 'N',
scores.T >= scores.F ? 'T' : 'F',
scores.J >= scores.P ? 'J' : 'P'
].join('');
return { type, scores, strengths };
}3. 详细的结果分析
结果页面不仅显示人格类型，还提供：
- 四个维度的详细分析和倾向强度
- 个人优势特质和发展建议
- 需要注意的潜在盲点
- 基于人格类型的职业推荐
4. 精美的海报分享功能
使用Canvas API绘制高清海报，包含完整的测试结果信息。用户可以长按保存到相册，方便在社交媒体分享。
AI助手开发经验：提示词的艺术
在整个开发过程中，我总结了一些高效的AI协作技巧：
1. 项目规划阶段的提示词
请帮我设计一个MBTI人格测试小程序的技术架构，要求：
1. 基于微信小程序原生开发
2. 支持93道标准测试题目
3. 需要精确的计分算法
4. 代码和数据要分离，便于维护
5. 请提供详细的项目结构和技术选型建议2. 算法实现的提示词
请实现一个标准的MBTI计分算法，要求：
1. 基于Likert 5级量表（1-5分）
2. 支持四个维度：EI、SN、TF、JP
3. 每个答案要同时影响对立维度的得分
4. 最终输出人格类型和各维度倾向强度
5. 代码要有详细注释，遵循最佳实践3. UI设计优化的提示词
请优化这个答题界面的用户体验：
1. 当前代码：[粘贴现有代码]
2. 问题：用户选择后需要手动点击下一题
3. 需求：选择后自动跳转，但要有适当的延迟反馈
4. 要求：保持代码简洁，注重性能4. 问题解决的提示词
遇到一个技术问题：
- 环境：微信小程序
- 问题：Canvas绘制海报时文字换行显示异常
- 现象：长文本没有自动换行，超出画布边界
- 需求：实现自动换行，并计算合适的行高
- 请提供解决方案和代码示例项目架构：模块化设计的智慧
MBTI_miniprogram/
├── Projects/miniprogram/
│ ├── pages/ # 页面文件
│ │ ├── index/ # 首页 - 测试入口
│ │ ├── test/ # 测试页 - 答题界面
│ │ ├── result/ # 结果页 - 分析报告
│ │ └── poster/ # 海报页 - 分享功能
│ ├── lib/ # 工具库
│ │ ├── core-logic.js # MBTI核心算法
│ │ └── utils.js # 通用工具函数
│ ├── models/ # 数据文件
│ │ ├── question-bank.json # 题库数据(93题)
│ │ └── interpretations.json # 结果解释
│ └── app.js # 应用入口这种架构的优势在于：
- 代码数据分离：题库和解读文案独立维护，更新时无需修改代码
- 模块化设计：每个功能模块职责单一，便于维护和扩展
- 错误处理完善：多重备用方案确保系统稳定性
开发心得：AI协作的最佳实践
1. 明确需求，分步实现
不要试图让AI一次性完成整个项目。将复杂需求拆分成小的、具体的任务，逐步完善。 我一般会让AI生成详细文档，这样开启新对话也不用担心AI重新读取整个项目，添加新功能或修复bug时@规则文件以及项目文档即可。一般情况下，除了第一次外，很少有超出模型上下文的情况。 这是我的项目结构截图，比较清晰，当然主要是项目比较简单😂。
2. 提供充分的上下文
在请求AI帮助时，提供当前的代码状态、遇到的具体问题、期望的结果。上下文越详细，AI的回答越精准。
3. 迭代优化，持续改进
第一版代码往往不是最优的。通过多轮对话，不断优化代码质量和用户体验。
4. 学习理解，而非盲目复制
理解AI提供的解决方案的原理，这样才能在遇到类似问题时举一反三。
技术细节：值得分享的实现技巧
1. 题库加载的多重备用方案
loadQuestions: function() {
try {
// 主方案：文件系统读取
const fs = wx.getFileSystemManager();
fs.readFile({
filePath: 'models/question-bank.json',
encoding: 'utf8',
success: (res) => {
const questionBank = JSON.parse(res.data);
this.setData({ questionBank, questions: questionBank.questions });
},
fail: (err) => {
// 备用方案：内置题库
this.handleLoadError();
}
});
} catch (error) {
this.handleLoadError();
}
}2. 海报生成的响应式设计
Canvas绘制时需要考虑不同设备的屏幕尺寸，实现了自适应的布局算法：
drawPosterContent(ctx, result, interpretation) {
const canvasWidth = 1080;
let currentY = 60;
// 渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, canvasWidth * 1.5);
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(1, '#764ba2');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvasWidth, canvasWidth * 1.5);
// 动态计算内容布局...
}项目成果：数据说话
经过完整的开发和测试，项目达到了预期目标：
- 功能完整性：100%实现了所有核心功能
- 用户体验：流畅的交互和精美的界面设计
- 代码质量：规范的代码结构和详细的注释
- 可维护性：模块化设计，便于后续维护和扩展
反思与展望
这个项目让我深刻体会到AI助手在软件开发中的巨大价值。它不仅能够快速生成代码，更重要的是能够提供设计思路、最佳实践建议，甚至帮助发现潜在问题。
但AI助手并非万能，开发者的经验判断、需求理解、架构设计能力仍然不可替代。最佳的协作模式是：人负责思考和决策，AI负责执行和优化。
写在最后
虽然这次没有开源代码(小程序正在审核中)，但希望通过分享开发思路和AI协作经验，能给大家带来一些启发。如果你也在尝试用AI助手进行开发，欢迎交流心得。
技术的进步让个人开发者也能快速构建专业级应用，这是一个最好的时代。让我们一起拥抱AI，创造更多有价值的产品。
本文分享的是个人开发经验，MBTI测试结果仅供参考，不构成专业心理评估建议。