TL;DR

• 學習如何將昨天的藍圖，轉化為一份讓 Gemini 秒懂的結構化 Prompt。

• 見證「一鍵生成」的魔力，在幾秒鐘內獲得一個功能完整的互動網頁。
• 理解 AI 的初版成品雖驚艷但非完美，為明天的優化課程做好準備。

我們扮演了一次產品經理，精心繪製出一份專屬於自己的「演奏總譜」（專案藍圖）。今天，就是我們擔任「指揮家」的時刻！

我們將學會如何將這份總譜，交給團隊裡的首席音樂家 Gemini，讓他為我們演奏出一首華麗的「互動交響曲」。而演奏的品質，完全取決於我們指揮的清晰度。

指揮家的藝術：如何寫一份讓 AI 秒懂的「總譜」（Prompt）

要讓 Gemini 這位天才工程師完全理解我們的需求，我們給的指令（Prompt）就不能只是一句模糊的話。一個好的 Prompt，本身就是一份結構清晰的需求文件。

與其說「幫我做個退休金計算機」，不如像這樣，將我們的需求拆解成幾個關鍵部分：

1. 角色扮演（Persona）：先告訴 Gemini 他是誰。
2. 功能需求（Features）：條列出所有我們在藍圖中規劃的輸入與輸出。
3. 頁面設計（Layout & Style）：描述我們希望這個工具「長什麼樣子」。
4. 計算邏輯（Logic）：這是金融工具的靈魂！我們要用白話文，一步步告訴 AI 該如何計算。
5. 技術要求（Technical Specs）：明確告知產出的格式。

【今日實戰】：演奏我們的第一首「互動交響曲」

現在，讓我們把 Day 6 繪製的藍圖，填入下方的「總譜範本」中，然後交給 Gemini 來演奏！

第一步：填寫我們的「演奏總譜」(Prompt）

請直接複製底下這段精心設計好的 Prompt 範本。這就是我們與 AI 溝通的魔法咒語。

## 技術要求（Technical Specs）
請根據我以下的藍圖，為我打造一個「互動式退休金缺口計算機」的互動網頁。

## 功能需求（Features）
我需要以下輸入欄位：
* 目前年齡（輸入框）
* 預計退休年齡（輸入框）
* 目前已準備的退休金（輸入框）
* 每個月預計投入的金額（輸入框）
* 退休後預計每月花費（輸入框）

我需要以下可調整的參數：
* 預期年化投資報酬率（%）（滑桿或輸入框）
* 預期通貨膨脹率（%）（滑桿或輸入框）

## 頁面設計（Layout & Style）
* 我需要一個「開始計算」的按鈕。

## 計算邏輯（Logic）
點擊計算後，頁面上需要顯示以下輸出結果：
* 預計退休時累積的總資產
* 退休金缺口金額
* 一張顯示資產隨年齡成長的折線圖
* 一段根據計算結果自動生成的總結建議文字

第二步：交給首席音樂家 Gemini

• 打開 Gemini，將第一步的 Prompt 貼進輸入框，點選【Canvas】後送出對話。

• 靜待幾秒鐘，見證奇蹟的時刻！Gemini 會在右側的 Canvas 視窗中，直接產生我們要的互動網頁。

功能說明：

• 使用「Canvas」可以產生程式碼，或是互動網頁的神奇工具，只要提出我們的指令（Promp），Gemini 就會根據需求做出東西！
• 點擊在互動網頁功能列右邊的「預覽」，這就是我們要的互動網頁；而點擊左邊的「程式碼」，畫面會顯示一大段程式碼，這就是我們計算機的「原始碼」。

第三步：驗收成果與首次公演

我們可以在右側的 Canvas 畫面中，直接與這個網頁互動！
試著修改一下輸入的數值，像是把退休時間往前調，或是提高每個月的投資金額，然後重新計算。點擊【開始計算】會發現，所有數值和圖表都會立刻更新！

20103826HC1TFZ0kEL.jpg)

還是缺了點什麼...

儘管 Gemini 譜出的樂曲已足夠動人，但我們仔細聆聽，還是會發現幾個不和諧的音符。這個作品似乎還沒有達到 100% 我們想要的效果。

明天我們將會調整這個計算機，讓他可以更能滿足客戶的需求，使客戶更可以瞭解退休後的情況。之後，我們會變身為專業的「品保員」，學習驗證並優化 AI 的產出，確保我們的工具不僅好用，更要絕對可靠！

備註

注意喔！Gemini 每次產生的互動式網頁都會有些許不同，因此你產出的畫面可能會與我不同，所以要檢查功能是否都有實作出來。
另外，有時候沒有產出網頁，可以叫 Gemini 再產生一次喔！