想必大家在 Android 學習的路上都學過天氣 APP 怎麼做吧!
今天，要使用 Prompt 像工廠產線一樣製造量產型天氣 APP 前端
我們將使用 AI Studio 來建置網頁，它可以讓你在完全不寫任何程式碼的情況下，僅憑自然語言就能完成所有工作。

💡Tip: AI Studio 是什麼?
Google 提供的 AI 開發者平台，上面有各種功能(包含實驗中功能) 與 模型可以免費並且幾乎無限量的試用，Pro 版的 Gemini 也隨便你用，完全就是佛心來著。

準備

首先請登入 https://aistudio.google.com/

請確認左下角是已登入的狀態

開始

介面導覽

主頁左上角

1. Studio:
   涵蓋 Gemini 幾乎所有的模型與功能包含 chat (普通聊天) 、Stream (Gemini LIve 拆分的功能)、media(生成圖片等等，最紅的 nano-Banana也可以在裡面隨便用)、Build(今天的主角)
2. Dashboard:
   可以查看自己的 API Key 與 API 用量

主頁左下角

帳號、可以查看自己的 API Key 與 API 用量

主頁右側

調整模型與情緒等參數設定

今天的步驟

1. 點 Studio → Build

2. Build 介面

中間輸入框

1. 放入提示詞，可以直接生成 APP
2. 齒輪設定可以調整框架(語言僅限 TypeScript)
3. 加號可上傳 圖片、文件、PDF

輸入框下方

各種模板可以自己玩玩看，程式碼審查對新手或簡易測試稍微有用
更下方也有已經建置好的APP 可以直接使用或改進

給 AI 的步驟

這個是要放入輸入框的提示詞
我們思考一下，假設要做的是一個網頁應用程式
那我們回想一下 Prompt 的技巧，可能可以用”拆分步驟” 讓 AI 在細節上也能如我們所想的運作
在寫一個 APP時我們可能會有以下步驟:

第一步可能會是先拉一個 View 放上我們的標題

你可以這麼寫:

#第一步：建立專案並顯示靜態內容
請幫我建立一個基本的 React 網頁應用程式。
在 App 中，只需要顯示一個簡單的標題，例如「台灣天氣 App」。

💡Tip: 使用 markdown 可以讓你自己更好閱讀與變動，結構化的文字 AI 可控性也會提升，他能更快找到重點，但不會增加他理解能力(受模型能力所限)。

第二步可能是加入控制項

我們需要讓 App 具備互動性
這一步的重點是加入一個「控制項」，讓使用者可以選擇他們感興趣的縣市
你可以這麼寫:

#第二步：新增城市選擇功能
這個階段我們會為 App 新增一個互動功能。
請在 App 中加入一個下拉式選單 (select)，列出台灣所有縣市的選項。預設選單值為「臺中市」。
當使用者選擇不同縣市時，應用程式的狀態（state）會隨之更新。

第三、四…步 細節步驟

根據你想要的細節，決定他細節部分要怎麼寫，也可以不要規定他，讓他隨意思考要怎麼寫
你可以這麼寫:

#第三步：整合 Gemini API 並獲取動態資料
現在，我們需要讓 App 變得動態。請為這個 App 整合 Google Gemini API，並用它來獲取所選縣市的天氣資料。
要求 API 回傳所選縣市的「目前天氣」和「未來三天預報」。
#第四步：定義資料結構與建立 UI 元件
是時候建立 UI 了。請幫我完成以下工作：
建立兩個 UI 元件：
WeatherCard：用來顯示「目前天氣」的詳細資訊。
ForecastCard：用來顯示「單日預報」的資訊。
最後，將這些元件整合到 App 中，讓它能正確顯示目前天氣和未來三天的預報。

💡Tip: 這步驟的重點是增加細節的可控性，依據使用者的需求與能力可以模糊化或者細節化

最後一步 介面

美化整個介面，把你想到的都說上去，不然會醜到不行 🙂
你可以這麼寫:

#第五步：最終美化與優化
最後一步是為整個 App 進行視覺上的提升，讓它看起來更專業。
我們已經有了一個功能完整的天氣 App。最後，請幫我對它的介面進行美化。
產出一些動畫效果，例如當資料載入時顯示載入動畫。

💡Tip: 這步驟如果你會畫 figma 等設計圖，也可以上傳圖片給他，可以在元件旁邊備註效果與功能，效果有限，但至少會好看一點。

天氣應用程式完整提示詞

放入輸入框後，按下 ⬆️ 就會自動開始生成

請按照以下步驟，一步步依據提供的提示詞來生成整個應用程式。
#第一步：建立專案並顯示靜態內容
請幫我建立一個基本的 React 網頁應用程式。
在 App 中，只需要顯示一個簡單的標題，例如「台灣天氣 App」。
#第二步：新增城市選擇功能
這個階段我們會為 App 新增一個互動功能。
請在 App 中加入一個下拉式選單 (select)，列出台灣所有縣市的選項。預設選單值為「臺中市」。
當使用者選擇不同縣市時，應用程式的狀態（state）會隨之更新。
#第三步：整合 Gemini API 並獲取動態資料
現在，我們需要讓 App 變得動態。請為這個 App 整合 Google Gemini API，並用它來獲取所選縣市的天氣資料。
要求 API 回傳所選縣市的「目前天氣」和「未來三天預報」。
#第四步：定義資料結構與建立 UI 元件
是時候建立 UI 了。請幫我完成以下工作：
建立兩個 UI 元件：
WeatherCard：用來顯示「目前天氣」的詳細資訊。
ForecastCard：用來顯示「單日預報」的資訊。
最後，將這些元件整合到 App 中，讓它能正確顯示目前天氣和未來三天的預報。
#第五步：最終美化與優化
最後一步是為整個 App 進行視覺上的提升，讓它看起來更專業。
我們已經有了一個功能完整的天氣 App。最後，請幫我對它的介面進行美化。
產出一些動畫效果，例如當資料載入時顯示載入動畫。
完成後總結所有功能，謝謝你。

#為什麼要加完成後 “總結所有功能，謝謝你。”

https://www.threads.com/@eason.chu.79/post/DILnOejB0Z-/好好笑我每次用完ai都會莫名其妙說感恩或謝謝