不用自己架設網站, 就可以有自己的網站, 網頁上傳的圖片會放在自己的 google drive, 收集的提示詞儲存於 google sheet, 刪除的照片會移動到 google drive 的垃圾桶.
下載點: https://github.com/max32002/PromptNano
執行畫面:
YouTube: https://youtu.be/gbjrb-OC3Qw
PromptNano 是一個輕量級、視覺化的 AI 提示詞（Prompt）管理工具。專為 Nano banana, chatGPT, Midjourney、Stable Diffusion 等 AI 創作者設計。
不同於冷冰冰的文字表格，PromptNano 讓你透過「看圖」的方式直覺管理靈感。搭配溫暖可愛的 UI 設計，支援深色/淺色主題切換，讓整理提示詞變成一件療癒的事。
✨ 主要功能
- 👀 視覺化瀑布流 捨棄枯燥的文字列表，採用卡片式瀑布流設計，透過圖片直接回想並複製提示詞。
- 🌓 雙色溫暖主題 內建「草莓牛奶（淺色）」與「黑巧克力（深色）」兩種主題，隨點隨切，所有介面與彈窗完美適應。
- 🏷️ 智慧標籤檢索 支援
#Tag快速過濾與關鍵字搜尋。輸入框右側附帶一鍵清除功能，操作更流暢。 - 📘 內建詠唱秘籍 整合「提示詞教學」模組，包含逆向工程技巧、光影氛圍關鍵字與手繪風格指令，點擊關鍵字即可一鍵複製。
- ☁️ Google Drive 整合 基於 Google Apps Script (GAS) 開發，圖片與資料直接儲存在你的 Google Drive 與 Sheets，無需架設伺服器。
🛠️ 技術架構
- Frontend: HTML5, CSS3 (CSS Variables for Theming), Vanilla JavaScript
- Backend: Google Apps Script (GAS)
- Database: Google Sheets (儲存資料), Google Drive (儲存圖片)
🚀 如何部署 (Installation)
本專案適合部署於 Google Apps Script 環境。
- 建立 Google Sheet 在 Google Drive 建立一個新的試算表，記下網址的
Spreadsheet ID。 在 Google Drive 建立一個用於上傳的資料夾，記下網址的Folder ID。 - 建立 Apps Script 在試算表中點擊
擴充功能>Apps Script。 - 貼上程式碼
- 將
Code.gs的內容複製到編輯器的.gs檔案。 - 建立一個
index.html檔案，將前端代碼貼入。
- 將
- 發布為網頁應用程式 點擊右上角
部署>新增部署作業> 選取網頁應用程式。- 執行身分：
我 - 誰可以存取：
任何人(或僅限自己)
- 執行身分：
- 開始使用 取得生成的 Web App URL，即可開始管理你的靈感庫。
⚙️ 初始版本 (Initial prompt)
生成 Google Apps script + html 網頁的 AI提示詞:
使用 google GAS, 寫一個相簿管理的網站, 網頁顯示風格為溫暖可愛, 上傳的圖片要在放 google driver 指定的上傳路徑, 上傳後自動產生縮圖, 圖片的屬性有:標題,說明欄位,tag,圖片實際google driver 存放路徑.
前端相簿網頁, 可以輸入關鍵字進行圖片的說明欄位過濾查詢,
前端相簿網頁在顯示上傳的照片時, 以縮圖的方式顯示, 並將圖片的 hash tag 欄位以 # 號進行分隔顯示, 點下某一個 tag, 以 tag 名稱過關鍵字, 對 tag 欄位進行 "#" + tag 名稱的過濾查詢,
點下某一個縮圖後,彈出實際完整圖片, 並顯示標題與說明欄位, 有要一個"複製" 的按鈕, 把說明欄位內容複製到剪貼簿.
如果你有VPS 或 GCP / AWS 的話, 修改掉提示詞裡的 Google GAS, 就可以取得你需要的程式碼了.
🎨 更換主題 (Theme)
複製 index.html 內容貼到 AI, 提示詞:
重新改寫這個整個網站的 css, 風格是可愛溫暖, 要支援深色/淺色主題的切換, 所有的彈出式 modal 都要套用到深色/淺色的主題.
AI 自動生成網頁通常提供以下幾種主流風格：
🌈 按視覺氛圍分類
| 風格名稱 | 視覺特徵 | 適用場景 |
|---|---|---|
| 極簡主義 (Minimalist) | 大量留白、細字體、單色調 | 個人品牌、建築、攝影 |
| 科技未來 (Tech/Futuristic) | 深色模式、霓虹發光、3D 幾何 | SaaS、AI 工具、加密貨幣 |
| 可愛活潑 (Cute/Playful) | 粉嫩色、圓角、手繪插圖 | 教育、寵物、創意市集 |
| 復古懷舊 (Retro/Vintage) | 紙張紋理、低飽和度、Y2K 感 | 古著、黑膠唱片、獨立雜誌 |
| 自然環保 (Organic) | 大地色系、植物元素、有機曲線 | 有機食品、心理諮商、戶外 |
💼 按專業功能分類
- 專業商務 (Corporate)：嚴謹排版、藍灰色調，適合律師、金融業。
- 藝術創意 (Artistic)：誇張漸層、不對稱設計，適合設計工作室。
- 沉浸式 3D (Immersive)：玻璃擬態、動態渲染，適合高端產品展示。
- 俐落電商 (E-commerce)：清晰網格、醒目 CTA 按鈕，適合零售業。
💡 小撇步：在 AI 生成指令（Prompt）中加入
Glassmorphism(玻璃擬態) 或Clean Typography(乾淨排版) 等關鍵字，可以大幅提升產出的質感。
📂 檔案結構
PromptNano/
├── Code.gs # 後端邏輯 (處理圖片上傳、刪除、讀取 Sheet)
├── index.html # 前端介面 (包含 CSS, JS 與 HTML 結構)
├── appscript.json # 資訊清單（Manifest），它記錄了專案的時區、權限範圍（OAuth Scopes）與程式庫等核心設定
└── README.md # 專案說明文件
📝 版本紀錄
- v1.0.0 (2025-12-30)
- 初始版本發布。
- 實作深色/淺色主題切換。
- 新增「詠唱魔法秘籍」教學模組。
- 優化 RWD 手機版瀏覽體驗。
📄 授權 (License)
本專案採用 MIT License 授權。 歡迎自由修改、使用或作為學習用途。
相關文章
- GAS web app 與 Google drive 的「防盜連機制」造成圖片無法顯示
- GAS 執行的2種網址: 正式版 /exec , 測試版 /dev
- GAS – 編輯有版本的部署作業
- GAS appsscript.json 被稱為資訊清單（Manifest）
- GAS 雲端硬碟權限錯誤
- GAS 簡體中文字轉成繁中
- GAS 串接 telegram bot
- GAS 網頁服務
- GAS 跨檔案抓取資料
- GAS 寄送電子郵件
- GAS 用程式自動填寫試算表的格子
- Google Apps Script 入門教學
心得
Google 的 Apps script 真好, 給大家免費(有限流量)的圖床(Google Drive), 還可以架設免費的網站, 還提供免費的資料庫(Google Sheet).
