我用Gemini手搓了高颜MBTI人格测试网站！附全套提示词

哈喽，大家好

我是阿星！👋

最近SBTI网站火了然后又被封了，

然后好多人问我要之前发过的这个网站提示词。（一个 Vite + React 项目）已经上线了

mbti-coral-seven.vercel.app/

👇请看大屏幕（去年11月的我真胖）

主要是市面上的测试基本要付费，于是我做了个🆓的顺手上线了。

电脑端

手机端

都能用

和大家看到的SBTI是一样的其实

你用google ai studio

做出来的东西都是这样的好几个端都可以同步适应的。

如果你不知道怎么上线可以看之前写的这个👉

今天不仅分享成品，更要分享背后的 开发流程 ，

跟我走一遍，即使你是0基础，你也可以code出第一个高颜值网站！

第一步：打开Google AI studio

第二步：把提示词发过去

首先，我们是在google studio里做不假，

但是大家不要找错地方了。

我们是在build里点进去做，不是直接在playground里做。build就是专门用来做在线编程的，相当于你的云上编辑器，会比在playground里好一点。

我平常只要是想正经做的东西我都不会在playground里搞。

这段提示词直接发过去，

其实是把他当成一个精通 React、CSS 和 Google API 的前端视觉工程师来规定角色，

（什么是api？api就像是资源水龙头，在哪里打开模型的能力就会流向哪里，当然了，是要氪金的）

makefile 复制代码

📋 项目总提示词 (Project Master Prompt)
角色设定 (Role):
你是一位精通 React、Tailwind CSS 和 Google Gemini API 的高级前端工程师，擅长开发视觉精美、交互流畅且支持多语言的 Web 应用。

项目概况 (Project Overview):
开发一个双语（中文/英文）的 MBTI 16型人格测试 Web 应用。该应用包含精美的 UI 设计、基于 Web Speech API 的语音交互、基于 Google Gemini 的 AI 智能分析以及雷达图数据可视化。

技术栈 (Tech Stack):
Framework: React 19 (ES Modules via CDN, 无需构建步骤).
Styling: Tailwind CSS (via CDN).
Icons/Charts: Recharts (雷达图), SVG icons.
AI: @google/genai SDK (Gemini 2.5 Flash).
State Management: React Hooks (useState, useEffect).
核心功能需求 (Core Requirements):
多语言支持 (Bilingual):
全站必须支持中英文对照。
主要标题和内容以中文为主，英文为辅（通常作为小标题或注释）。

首页 (Home Page):
品牌标识: 标题或 Logo 处需展示 "阿星AI工作室" (Axing AI Studio)。强调 "永久免费" (100% Free)。
角色展示: 展示 16 种 MBTI 人格卡片。
分类颜色: NT(紫), NF(绿), SJ(蓝), SP(黄)。
卡片内容: 官方全身立绘 (不裁剪)、中文俗称/昵称 (如 "快乐小狗", "紫老头")、学名、名言。
交互细节:
点击卡片打开详细 Modal (模态框)。
点击卡片或 Modal 时，自动调用浏览器 TTS (Web Speech API) 朗读角色的中文名言。
Modal 内展示大图、双语描述、名言，并提供 "去测试这个性格" 的按钮。
测试页 (Quiz Page):
题目: 包含 12 道核心测试题，涵盖 EI, SN, TF, JP 四个维度。
UI: 顶部进度条，大字中文题目，小字英文题目。
选项: 4个选项 (非常反对 - 非常同意)，带有明确的视觉反馈。
功能: 必须包含 "上一题" (Previous) 按钮，允许用户回退修改答案。

结果页 (Result Page):
数据处理: 根据用户评分计算 MBTI 类型 (如 INTJ)。
AI 分析 (Gemini): 调用 Gemini API 生成详细的 JSON 格式分析报告，包含：
总结 (Summary)
优势 (Strengths) & 劣势 (Weaknesses)
职业建议 (Career Path)
情感关系 (Relationships)
人生格言 (Motto)
可视化: 使用 Recharts 绘制雷达图，展示 8 个维度的得分倾向。
引流: 底部展示二维码 (QR Code) 引导关注 "阿星AI工作室"。
数据与素材规范 (Data & Assets):
头像: 使用官方风格的 16 Personalities SVG 全身立绘 (URL 格式: https://static.neris-assets.com/images/personality-types/avatars/{slug}.svg)。
昵称字段: 数据结构中需包含 aliasCn 字段用于存储趣味昵称 (例如: ENTJ - "大姐头", ENFP - "快乐小狗")。
视觉设计规范 (Design Guidelines):
字体: Inter (正文), Merriweather (衬线体用于引用/名言)。
风格: 现代、极简、圆润 (rounded-3xl)、柔和阴影 (shadow-xl)。
动画: 页面加载淡入 (fade-in)，卡片悬停浮动效果。
代码结构 (Code Structure):
单文件组件结构 (在 src/ 目录下平铺，不嵌套文件夹)。
types.ts: 定义所有接口。
constants.ts: 存储所有静态数据（角色、题目、昵称）。
services/geminiService.ts: 封装 AI 调用逻辑。