我用Gemini手搓了高顏MBTI人格測試網站！附全套提示詞

作者：阿星AI工作室
日期：2026年4月13日 上午7:50
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

用 Google AI Studio 零基礎打造高顏 MBTI 人格測試網站，附完整提示詞與部署教學

整理版摘要

呢篇文章係阿星分享佢點樣用 Google AI Studio 嘅 Build 功能，由零開始整咗個免費 MBTI 人格測試網站。近年 SBTI 網站爆紅後被 ban，好多人想知點樣複製類似體驗，阿星就將自己嘅開發流程公開曬出嚟。佢強調就算冇程式底子，只要跟住三步—打開 AI Studio、貼提示詞、驗收產出物—就可以整到個有雙語、語音朗讀、AI 分析報告同雷達圖嘅網站。

文章詳細交代咗 Project Master Prompt 嘅寫法，包括角色設定、技術棧（React 19、Tailwind、Gemini API）、頁面結構（首頁人格卡、12 題測試、結果 Report）同 UI 規範。阿星仲解釋點解用 SVG 頭像、Recharts 雷達圖，同埋點樣透過紅綠色塊簡化答題體驗。佢嘅結論係：AI + 前端嘅開發模式令以前要搞幾日嘅全棧應用，而家幾分鐘就整到，前端只需專注美感，AI 負責邏輯同內容生成。

最後佢建議將專案下載到本地，換成國產模型（例如 DeepSeek），再透過 GitHub 同 Vercel 免費部署上線，令全世界用到。成個流程由零到上線，清晰可行，係一篇實戰價值好高嘅 AI 開發教學。

  • 核心方法：用 Google AI Studio 嘅 Build 模式，配合完整嘅 Project Master Prompt，就可一鍵生成前端網站，省卻手寫程式碼。
  • 關鍵差異：呢個 MBTI 網站唔係靜態模板，而係用 Gemini API 即時生成個人化報告，分析用戶嘅維度分數，做到「千人千面」。
  • 技術啟發：Recharts 雷達圖同 SVG 頭像嘅組合，令結果頁視覺上易讀又快載入，而紅綠色塊嘅 UX 設計降低答題嘅腦力負擔。
  • 可行動點：下載專案到本地後，可將 API 轉成 DeepSeek 或 Kimi 等國產模型，再修改 prompt 強制基於 8 個維度分數生成分析，避免模板式報告。
  • 部署捷徑：將程式碼推上 GitHub，用 Vercel 一鍵部署，只需設定環境變數（API Key、Model、Base URL），即可免費上線供全球使用。
值得記低
Prompt

Project Master Prompt

完整嘅角色設定、技術棧、頁面結構同功能要求提示詞，可按原文複製貼上到 Google AI Studio Build。

留作參考
結構示例

內容結構

內容結構 text 
📋 項目總提示詞 (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 調用邏輯。
整理重點

點解要整呢個 MBTI 網站？

阿星話，SBTI 網站最近爆紅之後被 ban，好多人走嚟問佢要之前發過嘅提示詞。市面上嘅 MBTI 測試多數要付費，於是佢就用 Google AI Studio 整咗個免費版，仲順手部署上線，手機同電腦都用到。

佢強調呢個 site 係「永久免費」，而且同 SBTI 一樣，都係用 Gemini API 生成內容。

呢篇文章唔單止分享成品，仲詳細公開開發流程，就算零基礎都可以跟住整。

整理重點

三步搞掂：提示詞係關鍵

  1. 1 打開 Google AI Studio，揀 Build 模式（唔好入 Playground），Build 係雲端編輯器，方便做正經嘅開發。
  2. 2 將 Project Master Prompt 貼過去，個 prompt 將 AI 設定成「精通 React、Tailwind 同 Gemini API 嘅高級前端工程師」，仲有曬項目概況、技術棧同核心功能。
  3. 3 等 5 分鐘左右，AI 就會產出完整嘅網站代碼，包括首頁、測試頁同結果頁，直接可以驗收。

佢特別提醒：角色設定要包括「精通 Google API」，因為 API 係資源水龍頭，要氪金先用到。另外頁面結構要講清楚標題 Logo 放邊、正文放邊，先確保佈局啱心水。

整理重點

網站功能逐個睇：由語音到雷達圖

首頁展示 16 種人格卡片，點擊會彈出 Modal 並自動用瀏覽器 Speech API 朗讀角色名言，成個體驗好流暢。

測試頁得 12 題，用紅綠色塊代替數字按鈕，一眼就明係反對同意，減少答題負擔。結果頁就係重點：AI 根據用戶嘅 8 個維度分數即時生成總結、優劣勢、職業建議同感情分析，真正做到「因人而異」。

佢用 Recharts 畫雷達圖，因為 MBTI 嘅四個維度八個方向好適合用呢種圖表展示強弱。

結果頁仲有 SVG 頭像（來自 16Personalities），矢量高清又透明底，同底色自然融合。下面嘅 Tag 同社羣 banner 幫用戶快速歸類同揾同類。

整理重點

進階優化同部署：換模型、改 prompt、上 Vercel

如果想再好啲，阿星建議將專案下載到本地（zip 解壓後拖入 Codex 或 Trae），然後換成自己嘅 API Key，例如 DeepSeek 或者 Kimi，咁就可以免費用國產模型。

佢教路：修改 prompt 強制 AI 基於 8 個分數 + 4 組維度差值嚟寫報告，唔好俾佢用泛泛模板。

  • 推到 GitHub 倉庫。
  • 去 Vercel 新增 Project，Framework 揀 Vite，Build Command 用 npm run build，Output Directory 係 dist。
  • 喺 Environment Variables 加入 DEEPSEEK_API_KEY、DEEPSEEK_MODEL 同可選嘅 BASE_URL。
  • Deploy 後測試結果頁，確認正常就搞掂；想用正式域名就去 Domains 綁定。

 

圖片

哈囉，大家好

我係阿星！👋

最近SBTI網站爆紅之後又俾人封咗，

之後好多人問我要之前出過嘅呢個網站提示詞。（一個 Vite + React 項目）已經上線咗

https://mbti-coral-seven.vercel.app/

👇請睇大屏幕（舊年11月嘅我真係好肥）

主要係市面上嘅測試多數都要俾錢，於是我整咗個🆓嘅順便上線埋。

圖片

電腦端

手機端

都能用

圖片

同大家見到嘅SBTI其實係一樣嘅

你用google ai studio

做出嚟嘅嘢都係咁樣，幾個端都可以同步適應。

圖片

如果你唔知點樣上線可以睇返之前寫嘅呢個👉

今日唔單止分享成品，仲要分享背後嘅 開發流程 ，

跟我行一次，就算你係零基礎，你都code到第一個高顏值網站！

第一步：打開Google AI studio

圖片

第二步：將提示詞send過去

首先，我哋係喺google studio度做係真嘅，

但係大家唔好揾錯地方。

我哋係喺build度㩒入去做，唔係直接喺playground度做。build就係專門用嚟做在線編程㗎，相當於你嘅雲端編輯器，會比playground好啲。

我平時只要係想認真做嘅嘢都唔會喺playground搞。

圖片

呢段提示詞直接send過去，

其實係當佢係一個精通 React、CSS 同 Google API 嘅前端視覺工程師嚟設定角色，

（乜嘢係api？api就好似資源水龍頭，喺邊度打開模型嘅能力就會流向邊度，當然啦，係要比錢嘅）


📋 項目總提示詞 (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 調用邏輯。

有幾個關鍵設定都要講下：

頁面係雙語嘅，你可以直接同佢講根據用戶瀏覽器自動對應語言。咁中文嘅人打開就會自動變中文，英文瀏覽器語言嘅人就會變英文。

技術棧要做一個總嘅設定，頁面結構要強調標題 Logo 放邊度、正文放邊度。

將呢啲send過去㩒 Build 之後，效果就出咗嚟。

第三步：驗收產出

提示詞send過去大概5分鐘啲code就出咗嚟。

圖片

標題層級好清晰，第一行色號、第二行字號都好規範。

喺兩行標題中間——即係視覺最集中嘅地方——放咗「開始免費測試」嘅掣。

佢對佈局有自己嘅諗法，大標題下面嘅襯線字體都起到裝飾作用。

圖片

往下睇啲會發聲嘅卡片，

發聲係用瀏覽器自帶嘅 Speech API，呢度唔使自己接咩AI語音api。

而且每個人物配嘅果句話係 AI 自己生成㗎，

唔係我哋規定嘅。

圖片

例如「效率係最高形式嘅美」，即係話佢對人物口頭禪有自己嘅理解。

答題體驗上都做咗簡化

答題時用紅色🔴同綠色🟢嘅 UX 做直觀處理，

因為好多人做測試最大嘅痛點就係個腦諗緊上一題、對眼睇住選項，手眼唔協調，

題目一多腦力負擔就大。而家用紅綠色塊，餘光一掃就明意思。

圖片

成個流程得 12 題，輕鬆負擔，唔使兩分鐘就出到 Report。

Report 頁面嘅內容全部係 AI 生成㗎，咁樣設計係為咗避免「千人一面」——例如你係 J 人但 P 得分都高，佢就會喺報告入面講：「雖然你係 J 人，但你嘅 P 方面係點樣點樣」。

（唔係infp，我係高貴嘅intj，下面呢個係亂㩒㗎）

圖片

例如同樣係 INFJ，如果你 T 值偏高，Gemini 會分析出你比普通 INFJ 更理性；

職業建議、情感分析全部係 AI 實時生成。

呢啲先係真正嘅定製化報告，每個人見到嘅建議都係獨一無二㗎！

圖片

SVG 有三個特點

結果頁上方有 icon，用嘅係 SVG。

1️⃣ 檔案體積細，網頁負擔低

2️⃣ 透過 CDN 加載，來源係國外嘅 16Personalities 網站，加載速度好快

3️⃣ 向量高清，點放大都唔會矇，而且係透明底，可以同頁面底色自然配合，唔會有背景衝突

點解 Gemini3 會將人物 icon 放喺呢度？

因為測完結果之後要快速同用戶建立視覺連結，呢個 icon 就起到視覺錨定作用。下面嗰行襯線字係對人物特性嘅核心概括，相當於一個 Summary。

再下面嘅 Tag 就係畀你快啲掌握自己嘅特色，下面嘅社羣banner都起到匯聚作用——測出係 ENTJ 之後，就可以同同類相聚。

點解要用雷達圖？

數據分析部分用嘅係 Recharts 呢個技術棧，專門服務圖表。而家見到嘅雷達圖只係其中一種。

呢個同 MBTI 嘅原理有關：

MBTI 係基於四個基準、八個方向嚟做心理測評，所以雷達圖啱啱好可以從八個維度展示你邊度強、邊度弱。呢個主意係 Gemini3 自己揀㗎，我完全冇提佢要用邊種圖表。

圖片

右邊就係常見嘅「你嘅缺點」（又驚又想睇）、職業建議同感情關係部分。如果對測試結果唔信，㩒「重新測試」就可以直接返返題目頁面再嚟一次。

如果你想要更多

如果你想進一步優化，右上角直接搞返本地修改。（即係彈出嚟嘅zip解壓之後拖入codex、trae等編程軟件就得）。

點解要搞返本地？

1、因為你喺google ai studio上用人哋嘅api，你整返本地可以換成自己嘅DeepSeek或者kimi等國產模型。你換模型係要改api code㗎，你到時部署到vercel或者其他平台，畀全世界嘅人用，都要叫ai幫你改啲code。所以你整返本地方便啲。

而且一開始喺studio度寫嘅report可能比較簡單，去到本地之後優化下，叫ai強制基於 8 個分數 + 4 組維度差值嚟寫，唔係求其模板。

圖片

2、如果你要加私貨最好自己喺本地加檔案

你喺google studio上要上傳可能麻煩啲，喺本地隨便拉就得。


圖片

部署到vercel

具體步驟可以睇返我之前嘅三種部署方法

簡單講就係兩步

1、推到github

圖片

2、去vercel度部署並補返變數

打開 Vercel -> Add New Project -> 導入嗰個倉庫。

Framework 揀 Vite（通常自動識別）。

圖片

Build 設定確認：

Build Command: npm run build，

Output Directory: dist。

喺 Environment Variables 加入：

  1. 1. DEEPSEEK_API_KEY=你嘅新key
  2. 2. DEEPSEEK_MODEL=deepseek-chat
  3. 3. 可選 DEEPSEEK_BASE_URL=deepseek嘅api 地址
圖片

㩒 Deploy。如果你更新咗code都可以重新部署。

圖片

部署後打開網站，做一輪測試去到結果頁，確認正常返回。需要正式域名就去 Domains 度綁定。

以前寫呢啲全棧應用要好耐，而家有 AI 輔助，前端只負責「靚」，Gemini 負責「勁」！呢種 AI + 前端嘅開發模式真係好上癮！

ok，我係阿星 

更多AI應用 

我哋下期再見👋


 

圖片

 

圖片

哈嘍，大家好

我是阿星！👋

最近SBTI網站火了然後又被封了，

然後好多人問我要之前發過的這個網站提示詞。（一個 Vite + React 項目）已經上線了

https://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就像是資源水龍頭，在哪裏打開模型的能力就會流向哪裏，當然了，是要氪金的）


📋 項目總提示詞 (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 調用邏輯。

有幾個關鍵規定也說一下：

頁面是雙語的，你也可以直接跟他說根據用戶瀏覽器適配對應的語言。那麼中文的人打開後會適配中文，英文作為瀏覽器語言的人會適配英文。

技術棧要做一個總述規定，頁面結構要強調標題 Logo 放哪、正文放哪。

把這些發過去點 Build 之後，效果就出來了。

第三步：驗收產出物

提示詞發過去代碼大概5分鐘就出來了。

圖片

標題層級非常清晰，第一行色號、第二行字號都很規範。

在兩行標題中間——也就是視覺最集中的地方——安放了“開始免費測試”的按鈕。

它對佈局有自己的思考，大標題下的襯線字體也起到了裝飾作用。

圖片

往下看那些會發音的卡片，

發音用的是瀏覽器自帶的 Speech API，這裏不需要你自己去接什麼AI語音api。

而且每個人物配的那句話是 AI 自己生成的，

不是我們規定的。

圖片

比如“效率是最高形式的美”，說明它對人物口頭禪有自己的理解。

做題體驗上也做了簡化

答題時用紅色🔴和綠色🟢的 UX 做直觀處理，

因為很多人做測試最大的痛點就是腦子裏想着上一題、眼睛看着選項，手眼不協調，

題目一多腦力負擔就大。現在用紅綠色塊，餘光一掃就明白意思。

圖片

整個流程一共 12 題，輕負擔，不到兩分鐘就能出 Report。

Report 頁面的內容全部是 AI 生成的，這麼設計是為了避免“千人一面”——比如你是 J 人但 P 的得分也高，它就會在報告裏說明：“雖然你是 J 人，但你的 P 方面是怎樣怎樣的”。

（不是infp，我是高貴的intj，下面這個是亂點的）

圖片

比如同樣是 INFJ，如果你 T 值偏高，Gemini 會分析出你比普通 INFJ 更理性；

職業建議、情感分析全部是 AI 實時生成。

這才是真正的定製化報告，每個人看到的建議都是獨一無二的！

圖片

SVG 有三個特點

結果頁上方有 icon，用的是 SVG。

1️⃣ 文件體量小，網頁負擔低

2️⃣ 通過 CDN 加載，來源是國外的 16Personalities 網站，加載速度很快

3️⃣ 矢量高清，怎麼放大都不模糊，而且是透明底的，能和頁面底色自然適配，不會出現背景衝突

為什麼 Gemini3 會把人物 icon 放在這裏？

因為測完結果後需要快速和用戶建立視覺連結，這個 icon 就起到了視覺錨定作用。下面那行襯線字是對人物特性的核心概括，相當於一個 Summary。

再下面的 Tag 則讓你快速掌握自己的特色，下面的社羣banner也起到匯聚作用——測出是 ENTJ 後，就能和同類相聚。

為什麼用雷達圖？

數據分析部分用的是 Recharts 這個技術棧，它專門服務於圖表。現在看到的雷達圖只是其中一種。

這和 MBTI 的原理有關：

MBTI 是基於四個基準、八個方向做的心理測評，所以雷達圖正好能從八個維度展示你哪裏強、哪裏弱。這個主意是 Gemini3 自己選的，我完全沒提醒它要用哪種圖表。

圖片

右邊就是常見的“你的缺點”（又怕又想看）、職業建議和情感關係部分。如果對測試結果不信，點“重新測試”就能直接回到題目頁面再來一次。

如果你想要更多

如果你想進一步優化，右上角直接搞到本地去改。（就是彈出來的zip解壓後拖入codex、trae等編程額軟件即可）。

為啥要搞到本地？

1、因為你在google ai studio上用的是人家的api，你弄到本地好換成自己的DeepSeek或者kimi之類的國產模型。你換模型是要改api代碼的，你到時候部署到vercel或者別的平台，讓全世界的人去用，也是要讓ai給你改一些代碼的。所以你弄到本地更方便。

而且一開始在studio裏寫的report可能比較簡單，到了本地之後優化一下，讓ai強制基於 8 個分數 + 4 組維度差值來寫，不是泛泛模板。

圖片

2、如果你要夾帶私貨最好自己在本地加文件

你在google studio上要上傳可能更麻煩在本地隨便拖就行了。


圖片

部署到vercel

具體步驟可以看我之前的三種部署方法

簡單來說就是兩部

1、推到github

圖片

2、去vercel裏部署並補充變量

打開 Vercel -> Add New Project -> 導入該倉庫。

Framework 選 Vite（通常自動識別）。

圖片

Build 設置確認：

Build Command: npm run build，

Output Directory: dist。

在 Environment Variables 添加：

  1. 1.   DEEPSEEK_API_KEY=你的新key
  2. 2.   DEEPSEEK_MODEL=deepseek-chat
  3. 3.   可選 DEEPSEEK_BASE_URL=deepseek的api 地址
圖片

點 Deploy。如果你更新了代碼也可以重新部署。

圖片

部署後打開站點，做一輪測試到結果頁，確認正常返回。需要正式域名就到 Domains 裏綁定。

以前寫這種全棧應用要很久，現在有 AI 輔助，前端只負責“美”，Gemini 負責“強”！這種 AI + 前端的開發模式真的太上頭了！

ok，我是阿星 

更多AI應用 

我們下期再見👋


 

圖片