GAS & Firebase
完美提示詞生成器

整合三種資料庫後端架構，為你量身打造極致視覺與免綁定設定的 AI 提示詞。
不再苦惱怎麼寫 Prompt，選好架構、輸入需求，一鍵生成完整部署指令碼。

🟢 GAS 一鍵部署🟣 GAS 獨立前端🔥 Firebase NoSQL

💡軟體由來

在教學現場，我經常遇到老師們想用 Google Apps Script 或 Firebase 開發一些小工具——學生請假系統、線上簽到表、器材借用登記——但每次都要從零開始寫提示詞給 AI，反覆修改、來回調整，光是把需求講清楚就花掉大半時間。

後來我發現，與其每次手動撰寫冗長的 Prompt，不如做一個「提示詞生成器」：讓使用者只要選好架構、填入簡單需求，系統就能自動幫你組裝出一份完整、精準、可直接貼給 AI 的提示詞。

更進階的是，我還把 AI 智能優化功能直接內建進去——你只要隨意打幾句話，點一下「AI 智能優化」，Gemini 就會幫你把模糊想法擴寫成清晰的功能規格書。這就像身邊多了一位產品經理，幫你把需求梳理得條理分明。

⚙️核心功能一次看

🧩

三種架構一鍵切換

GAS 一鍵部署、GAS 獨立前端、Firebase NoSQL，點選卡片即時切換技術規格與配色。

✨

AI 智能優化

隨意輸入想法，AI 自動擴寫為完整功能規格書，支援原文與優化版 Tab 切換。

🎨

六種介面風格

粉嫩馬卡龍、校園繽紛、活力藍橘、現代質感綠、日系無印、科技深色，一鍵選用。

📋

完整部署輸出

生成包含 README.md、Code.gs、Index.html 的三段式完整指令碼，附詳盡中文註解。

📁

雲端硬碟自動存檔

GAS 架構自動建立「上傳的資料」子目錄，圖片壓縮後存檔並以縮圖 ID 回傳。

🔗

Base64 分享機制

支援網址參數分享設定，生成短網址與 QR Code，方便團隊協作與快速部署。

🏗️三種架構，各有千秋

根據你的使用場景，選擇最合適的後端架構：

🟢 GAS 一鍵部署（免設定）

前端與後端合一，無跨網域（CORS）問題
直接從試算表建立腳本，免手動設定 ID
可全自動於雲端硬碟建立目錄與存放圖片

💡 適合：校園內部、快速上線、表單登記與小型行政管理工具

🟣 GAS 獨立前端（API）

前後端分離，HTML 可放任何網頁主機或 GitHub
極高擴充性，支援一鍵複製與說明文件彈出
試算表結構清晰，支援雲端硬碟自動分類存圖

💡 適合：需自訂網域名稱、嵌入學校現有網站、有特殊美化與託管需求的專案

🔥 Firebase NoSQL 架構

讀寫效能極高，毫秒級即時資料庫同步更新
原生支援匿名安全登入、LocalStorage 自動緩存
前端單一網頁部署，無需自行管理伺服器

💡 適合：高互動（即時聊天室、搶票）、大用量與需要嚴密安全規則的專案

🎨六種預設介面風格

內建六款精心設計的 UI 風格，從活潑校園到科技深色，滿足不同場景需求：

🍬 粉嫩馬卡龍

🌈 校園繽紛

⚡ 活力藍橘

🌱 現代質感綠

🌾 日系無印風

🌙 科技深色

也可以自由輸入！除了預設風格，你可以在風格欄位中自行描述想要的視覺效果，AI 會根據你的描述生成對應的前端程式碼。

📖使用教學

選擇後端架構
在頁面頂部點選你要使用的架構卡片——GAS 一鍵部署、GAS 獨立前端或 Firebase NoSQL。選定後，下方的技術規格區會自動切換對應內容。
輸入核心功能需求
在「需求輸入區」中，用自然語言描述你想要開發的網頁應用。例如：「我想要做一個學生請假系統，學生可以填寫請假單並上傳證明照片……」
（選用）AI 智能優化
點擊輸入框上方的「AI 智能優化」按鈕，系統會自動將你的簡短描述擴寫為完整的功能規格書。優化後可透過 Tab 切換查看原始版本與 AI 優化版本。
選擇介面風格
從六款預設風格中點選，或自行輸入描述。選定後輸入框會有短暫的高亮動畫回饋。
一鍵生成提示詞
點擊底部的「生成提示詞」按鈕，右側輸出區會立即顯示完整的提示詞內容。確認後點擊「複製提示詞」按鈕，即可貼到任何 AI 對話視窗中使用。

🔬技術亮點

AI 雙模式 API Key 架構：支援「自訂模式」讓使用者輸入自己的 Gemini API Key 並存入 LocalStorage，也支援「預設模式」在 Gemini Canvas 環境中免 Key 直接測試。兩種模式無縫切換，降低使用門檻。

精緻 Glass-Panel UI：採用毛玻璃效果面板（backdrop-filter: blur）、馬卡龍配色架構卡片、流暢的 CSS 過渡動畫，以及自訂模態視窗（嚴格禁用 alert/confirm），整體視覺體驗媲美專業 SaaS 產品。

智慧色彩切換系統：根據使用者選擇的架構，全頁面的按鈕、輸入框 focus ring、右側面板邊框、技術規格區配色會同步切換為對應色系（綠 / 紫 / 橘），打造沉浸式的操作體驗。

// 架構選擇後，全頁色彩同步切換
if (arch === 'gas-embed') {
  btn.className = "...bg-emerald-600 hover:bg-emerald-700";
  rightPanel.style.borderLeftColor = '#10b981';
} else if (arch === 'firebase') {
  btn.className = "...bg-orange-500 hover:bg-orange-600";
  rightPanel.style.borderLeftColor = '#f97316';
}

🚀如何取得與使用

這是一款獨立的網頁工具，無需安裝任何軟體，直接透過瀏覽器即可使用：

開啟生成器頁面
點擊下方按鈕或直接造訪連結，即可在瀏覽器中開啟完整工具。
選擇架構 → 輸入需求 → 生成
按照頁面引導，選好後端架構、輸入功能描述（可搭配 AI 優化）、選定風格後，一鍵生成提示詞。
複製提示詞貼到 AI 對話
將生成的提示詞複製後，貼到 ChatGPT、Gemini、Claude 等任何 AI 對話視窗中，即可開始開發你的網頁應用。

立即開啟完美提示詞生成器

讓 AI 幫你寫出完美的開始

做工具的目的，就是把重複的事情變得簡單。
這款生成器濃縮了我在 GAS 與 Firebase 開發上的經驗，希望能夠幫助更多老師與開發者，
用更少的時間把想法變成真實可用的應用程式。

開始使用 →

阿剛老師的異想世界

網頁

2026年9月9日星期三