打造高颜值MBTI测试网站：从构思到实现

哈喽，大家好！👋 我是阿星，Zui近SBTI网站火了又被封了于是我决定分享一个我自己打造的高颜值MBTI测试网站，不仅如此，我还会带大家一起kankan背后的开发流程和提示词攻略！

项目背景与技术栈

MBTI测试作为一种流行的心理测评工具，一直受到大家的关注。市面上的测试大多需要付费，于是我决定Zuo一个免费的MBTI测试网站。在技术选型上，我采用了Vite + React的技术栈，并利用Google Gemini API来实现AI智Neng分析。

核心功Neng与实现

整个项目包含以下核心功Neng：

多语言支持全站支持中英文对照，主要标题和内容以中文为主，英文为辅。

首页角色展示展示16种MBTI人格卡片，点击卡片可打开详细Modal，并调用浏览器TTS朗读角色的名言。

测试页包含多道核心测试题，涵盖EI、SN、TF、JP四个维度，采用直观的红色和绿色UX设计。

结果页根据用户评分计算MBTI类型，并调用Gemini API生成详细的JSON格式分析报告，包括、优势、劣势、职业建议、情感关系等。

可视化使用Recharts绘制雷达图，展示用户的八个维度得分倾向。

开发流程详解

我们在Google AI Studio中进行初步开发，但为了实现geng高的定制化，我们将项目迁移到本地进行开发。主要步骤如下：

项目初始化创建一个Vite + React项目，并安装必要的依赖。

Gemini API集成封装Gemini API调用逻辑，实现AI智Neng分析。

UI设计与实现采用Tailwind CSS进行样式设计，实现现代、极简、圆润的视觉风格。

功Neng实现完成首页、测试页、结果页的核心功Neng开发。

部署上线将项目部署到Vercel，并绑定自定义域名。

提示词攻略与AI辅助开发

在开发过程中，我编写了一套详细的提示词，用于指导AI生成代码和内容。例如在定义项目角色时我设定了以下提示词：

角色设定 : 你是一位精通 React、Tailwind CSS 和 Google Gemini API 的高级前端工程师...

通过这种方式，AINeng够geng好地理解我们的需求，并生成高质量的代码和内容。以前写全栈应用需要hen长时间，现在有了AI辅助，前端只需负责“美”，Gemini负责“强”！这种开发模式真的太高效了！🚀

🌟

通过这篇文章，我们不仅了解了如何打造一个高颜值MBTI测试网站，还掌握了背后的开发流程和提示词攻略。未来我将继续探索AI在前端开发中的应用，为大家带来geng多有趣且实用的项目。👋 我们下期再见！🎉

项目地址

Ru果你想查kanZui终效果，Ke以访问我的项目地址： mbti-coral-seven.vercel.app/

技术要点回顾 🔍

技术栈Vite + React + Tailwind CSS + Google Gemini API

核心功Neng多语言支持、首页角色展示、测试页、结果页AI分析、雷达图可视化

部署方式Vercel一键部署，支持自定义域名

AI辅助通过精心设计的提示词，实现高效的AI代码生成与内容创作

希望这篇文章Neng为你带来启发，无论是想打造类似的测试网站，还是希望深入了解AI在前端开发中的应用，dou欢迎随时交流！ 💬

---