一款專為 AI 繪圖（GPT、Nano Banana 等）設計的結構化提示詞產生工具。透過可視化的「填空」互動方式，協助使用者快速組裝、管理與迭代複雜的 Prompt。

Prompt Fill 已更新至 v0.5.1。專案初衷是解決 AI 繪圖時提示詞難記、難管理、修改繁瑣的痛點。透過結構化的 Prompt，讓創作變得像「填空」一樣直覺。

• ✅ 結構化 Prompt 引擎：支援 {{variable}} 語法，將文字模板自動轉為互動式表單。
• ✅ 動態詞庫系統：預置數百個常用美術標籤，支援分類管理、自訂擴充與批次匯入。
• ✅ 高清社群分享：內建模板封面渲染，支援一鍵匯出精美 JPG 長圖（自動擷取氛圍色）。
• ✅ 模板/版本感知：官方模板雲端同步感知，免手動重新整理即可取得最新模板與功能。
• ✅ 純本地儲存：基於瀏覽器 LocalStorage，無需註冊登入，資料完全掌握在自己手上。

• 🧩 智能詞庫管理：

  • 分類管理：支援自訂詞庫分類（人物、動作、畫面、物品等），並以顏色區分，視覺更清晰。
  • 雙向同步：右側預覽填空時可直接新增「自訂選項」，會自動同步回左側詞庫，無需來回切換。
  • 分類編輯器：內建分類管理器，支援增刪改分類與顏色配置（12 種預設顏色）。
  • 響應式版面：詞庫列表支援瀑布流多欄版面，空間運用更有效率。

• 📏 多模板系統：

  • 支援建立多個獨立的 Prompt 模板（如「角色概念分解圖」、「3x3 攝影網格」）。
  • 獨立狀態：每個模板的變數選擇彼此獨立、互不干擾。
  • 副本複製：一鍵建立模板副本，方便做 A/B 測試或微調。

• 🖥️ 可視化互動：

  • 所見即所得編輯：編輯模式下，變數依分類色彩高亮顯示，支援直接文字編輯與結構調整。
  • 拖曳插入：將左側詞庫卡片拖進編輯區域，即可快速插入變數。
  • 預覽模式：模板中的變數（{{role}}）會自動渲染為可點選的下拉控制項。
  • 獨立實例：同一變數在模板中出現多次（如 {{color}}）時，可分別選擇不同的值（支援 color-0、color-1 獨立索引）。

• 💾 自動持久化：

  • 使用 LocalStorage 自動保存所有修改（模板、詞庫、分類設定）。
  • 重整頁面或關閉瀏覽器後，資料依然保留。

• 🖼️ 圖像管理：

  • 預覽圖顯示：每個模板支援關聯預覽圖，展示於模板標題區域，視覺更豐富。
  • 自訂上傳：支援上傳自訂圖片取代預設預覽圖（支援 jpg、png、webp 等格式）。
  • 圖片操作：滑鼠懸停圖片時顯示操作按鈕：查看大圖、上傳新圖、重置預設圖。
  • 大圖預覽：點擊查看大圖按鈕，可在 Lightbox 模式下全螢幕瀏覽。
  • 裝飾背景：預覽圖會作為模糊背景顯示在模板頁頂，營造沈浸感。

• 📋 匯出與分享：

  • 一鍵複製：複製最終產生的純淨 Prompt 文字。
  • 儲存長圖：將當前填好的 Prompt 模板匯出為高清圖片，方便分享與存檔。

• 建置工具： Vite
• 前端框架： React
• 樣式庫： Tailwind CSS
• 圖示庫： Lucide React
• 匯出工具： html2canvas

• 內建 Prompt Gallery（模板/詞庫）維護與更新：docs/prompt-gallery.md

• 上游檔案：放到 src/data/upstream-data.json（可包含 categories、banks、templates，中文欄位用 cn）。
• 執行同步：在專案根目錄跑 node scripts/sync-upstream.mjs，腳本會：
  • 將 cn 鍵改為 zh-tw，並用 OpenCC 做簡轉繁。
  • 只合併「新增」的資料（banks 只補新的 options，templates 只加新 id，categories 只加新類別）。
  • 更新 src/data/data.json，並呼叫 scripts/sync-data.mjs 產出 src/data/banks.js / src/data/templates.js。
• 僅用本地來源：若只有本地 data.json 變更，可直接跑 node scripts/sync-data.mjs。
• 重要：sync-data.mjs 會用 data.json 完整覆蓋 banks.js / templates.js。執行前請先確保 data.json 已包含完整資料（可先匯出備份、再整合上游），避免遺漏。
• 驗證：git diff 查看變更，啟動前端確認載入正常。

請先安裝 Node.js（建議 v18+）。

1. 複製專案

   git clone https://github.com/TanShilongMario/PromptFill.git
   cd PromptFill

2. 安裝依賴

   npm install

3. 啟動開發伺服器

   npm run dev

   將自動開啟瀏覽器造訪 http://localhost:5173。

4. 建置生產版本

   npm run build

專案根目錄提供啟動指令稿，雙擊即可一鍵啟動伺服器並開啟瀏覽器：

• macOS：start.command
• Windows：start.bat

• 點擊左側面板上方的「管理分類」按鈕。
• 可在此新增分類、修改名稱或顏色（支援 12 種預設顏色），亦可刪除不需要的分類。
• 每個分類都有獨特的顏色標記，方便在編輯與預覽時快速辨識變數類型。

• 點擊「建立新變數組」新增變數詞庫，並指派分類。
• 在詞庫卡片中新增選項：
  • 單筆新增：輸入選項後按 Enter。
  • 批次新增：輸入多行選項（每行一個），系統會自動分行加入。
• 詞庫支援拖曳，可直接拖入編輯器快速插入變數。

• 點擊右上角的「編輯模板」按鈕，進入可視化編輯模式。
• 拖曳插入：按住左側詞庫卡片，拖入編輯器即可插入變數（如 {{weather}}）。
• 手動輸入：亦可直接在編輯器輸入 {{變數名}}，系統會自動識別並渲染。
• 編輯器中的變數會依分類顏色顯示，方便辨識與管理。
• 支援復原/重做功能，隨時調整模板結構。

• 切換回「預覽互動」模式。
• 點擊彩色變數詞，從下拉選單選擇值。
• 自訂選項：若列表沒有需要的值，點擊下拉選單底部的「+ 新增自訂選項」，輸入後按 Enter 即可直接使用，並會自動保存到詞庫。
• 多實例支援：同一變數在模板中出現多次（如 {{color}}）時，每個實例可獨立選擇不同的值。

• 查看預覽圖：若模板有預覽圖，會顯示在模板標題右上角，同時做為模糊背景裝飾頂部區域。
• 上傳自訂圖片：
  1. 將滑鼠懸停於預覽圖，會出現三個操作按鈕。
  2. 點擊中間的「上傳圖片」按鈕（圖片圖示）。
  3. 選擇本機圖片檔（支援 jpg、png、gif、webp 等格式）。
  4. 圖片會自動上傳並取代目前預覽圖。
• 查看大圖：點擊左側「查看大圖」按鈕（放大圖示），即可全螢幕瀏覽。
• 重置圖片：點擊右側「重置預設圖片」按鈕（復原圖示），可恢復模板預設預覽圖。

• 複製結果：點擊右上角「複製結果」，一鍵複製最終產生的純淨 Prompt，可直接貼到 AI 繪圖工具使用。
• 儲存長圖：點擊「儲存長圖」，將當前填好的 Prompt 模板（含預覽圖）匯出為高清圖片（PNG 格式），方便分享、備份或參考。匯出前會等待封面載入並進行 Base64 預取，避免出現空白封面。
• 匯入 / 匯出（Beta）：支援將模板與詞庫以 JSON 匯入/匯出。匯入前建議手動備份；匯入後系統模板會自動合併，使用者資料保留。

1. 批次建立詞庫：新增選項時可一次貼上多行文字，系統會自動按行拆分。
2. 模板副本功能：測試不同 Prompt 效果時，可用「建立副本」保留原模板，方便對照。
3. 顏色編碼：為不同類型的變數設定不同顏色，讓複雜模板更易讀。
4. 多實例獨立選擇：當同一變數在模板中出現多次時，系統會自動分配獨立索引（如 color-0、color-1），每個位置可選擇不同值。
5. 自訂預覽圖：為模板上傳具代表性的參考圖，可快速辨識用途，也讓匯出長圖更有視覺效果。
6. 圖片尺寸建議：預覽圖建議 300x300px 左右的正方形或直式圖片，呈現效果最佳。
7. 本機資料安全：所有資料（含上傳圖片）皆儲存在瀏覽器本機，定期匯出備份可避免遺失。
8. 標籤化檢索：模板加上標籤後，可在列表按標籤篩選快速定位。
9. 瀑布流瀏覽：模板列表支援瀑布流展示，多張封面瀏覽更高效。
10. 匯入/匯出（Beta）：可一鍵匯出所有模板/詞庫為 JSON，或匯入他人設定；匯入前建議先手動備份。
11. 多來源圖片上傳：新建或編輯模板時，支援本機檔案與圖片 URL。若需最佳匯出效果，建議使用同源的 public/ 路徑圖片。
12. 本地化儲存：預設使用瀏覽器本地儲存模板、詞庫與圖片。如需跨裝置同步，請搭配匯入/匯出。

我們會持續優化並擴充 Prompt Fill，未來計畫如下：

• 🚀 產品應用化：
  • 開發 iOS 原生應用，提供更好的行動端互動體驗。
  • 推出桌面端軟體（Electron/Tauri），打造完全離線的在地化環境，確保隱私與效能。
• 🤝 模板生態社群：
  • 支援模板一鍵分享與線上匯入，打造 Prompt 創作者的共享社群。
• 🤖 AI 智能賦能：
  • 詞庫擴充：串接 AI，自動產生並擴充相關變數候選。
  • 提示詞重組：支援 AI 將既有提示詞結構化拆解並一鍵優化重組。
• ✨ 深度體驗優化：
  • 持續更新更多高品質內建模板。
  • 引入更進階的模板分類與標籤管理模式，支援無限層級的詞庫組織。

• 📱 行動端互動大革新：
  • 沉浸式詳情頁：針對手機端重新設計圖片預覽與卡片互動，支援上下滑動切換卡片狀態。
  • 側滑抽屜選單：導入雙側滑抽屜設計，模板列表與詞庫列表在編輯模式下可隨手喚出。
  • 陀螺儀 3D 效果：行動端詳情頁支援依手機陀螺儀動態調整透視，帶來更真實的照片質感。
  • 獨立設定中心：為行動端打造全螢幕設定頁，整合系統參數、更新日誌與作者聯繫方式。
• ⚡ 效能與穩定性優化：
  • Mesh Gradient 背景：首頁導入高效能網格漸變，取代傳統毛玻璃背景，解決複雜渲染的閃爍與撕裂問題。
  • 平滑捲動邏輯：海報模式自動捲動升級為 requestAnimationFrame，實現 60FPS 絲滑體驗。
  • 記憶體管理增強：開啟圖片詳情時，自動卸載並隱藏底層複雜瀑布流元件，大幅降低 GPU 負載。
• 🛠️ 智能資料合併：
  • 平滑升級機制：優化資料遷移邏輯，系統更新時自動識別並合併使用者自訂選項，而非簡單覆蓋或冗餘備份。
  • 多圖模板支援：底層架構現已支援單一模板配置多張預覽圖。

• 🏗️ 深度架構重構：
  • 元件化解耦：將巨型 App.jsx 拆分為 DiscoveryView（發現視圖）、TemplatesSidebar（模板側邊欄）、BanksSidebar（詞庫側邊欄）等獨立元件，大幅提升維護性。
  • 效能飛躍：透過 React.memo 與全域狀態優化，顯著減少無效重渲染，解決部分瀏覽器的「螢幕閃爍」與「跳動」問題。
  • 資源調度：導入背景任務智能調度，介面處於編輯模式時自動暫停瀑布流捲動等高負載動效，降低 GPU 佔用。
• 🎨 全新互動體驗：
  • 獨立發現頁：新增「發現視圖」作為入口，以瀑布流呈現所有模板及其封面。
  • 抽屜式懸浮：優化發現頁 Hover 效果，採用底部抽屜式磨砂玻璃標籤，視覺更輕盈。
  • 全功能工具列：側邊欄回歸排序、重新整理、語言切換與設定工具，並新增醒目的「回到主頁」快捷按鈕。
• 📸 匯出功能增強：
  • 寬度優化：匯出長圖寬度由 600px 提升至 860px，適配更複雜排版，減少換行。
  • 文字美化：優化匯出圖片的變數膠囊樣式，確保文字清晰與 UI 質感一致。
  • 穩定性修復：徹底解決匯出時正文內容可能遺漏的問題。
• 🔔 模板更新感知：
  • 新增模板/應用雙重版本校驗，雲端更新即時提醒，支援一鍵無損同步。
• ✨ 新模板補充：
  • 新增「雨滴定格藝術」「可視化藝術成長之路」等高分模板與配套詞庫。

• 匯出功能優化：
  • 匯出格式改為 JPG（92% 品質），檔案大小減少 60-70%。
  • 新增模糊背景框，從模板圖片自動提取顏色，視覺更細緻。
  • 重構匯出版面：圖片移至頂部（限高 300px），標題簡潔（移除版本號與標籤），正文不重複標題，底部統一顯示版本號與 QR Code。
  • 匯出按鈕支援載入狀態（「匯出中...」），避免重複點擊。
  • 網址字型與整體風格統一協調。
  • 優化匯出尺寸：降低 scale（3.0 → 2.5），縮小邊距，整體圖片尺寸減少 30-40%。
• 行動端體驗提升：
  • 匯入模板改用 Toast 通知取代 alert，更友善。
  • 完整備份匯入會顯示詳細確認對話框（模板、詞庫、分類數量）。
  • 新增匯入載入狀態與進度回饋。
  • 修復手機端匯入檔案後無回饋的問題。
• 細節改進：
  • 匯出圖片中的變數膠囊添加輕微陰影，更立體。
  • 版本號動態取得，支援持續升級。
  • 底部浮水印優化，移除冗餘標籤。

• 模板體驗：新增瀑布流展示、標籤篩選；支援匯入/匯出（Beta）；新建模板可上傳本機或 URL 圖片。
• 資料儲存：預設本地化儲存模板與詞庫，支援一鍵重新整理系統模板/詞庫並保留使用者自訂內容。
• 匯出改進：長圖匯出會等待圖片載入並進行 Base64 預取，避免封面空白。
• 新模板/詞庫：新增「經典場景微縮復刻」「可視化企業成長之路」等模板；補充公司、畫幅比例、渲染風格（3D 像素）等詞庫。
• 工程與啟動：start.bat 與啟動腳本相容性修復；瀏覽器自動開啟邏輯優化。

• UI 優化：
  • 優化「新建模板」按鈕樣式，採用統一的 Premium Button 設計語言，提升整體視覺一致性。
  • 按鈕新增滑過漸變與陰影動畫，互動體驗更流暢。
• 功能說明：
  • 完善圖像上傳與展示的文件說明。
  • 支援自訂上傳模板預覽圖。
  • 圖片懸停操作：查看大圖、上傳新圖、重置預設圖。
  • Lightbox 全螢幕圖片預覽模式。
• 文件完善：
  • 重構使用指南，採用分步驟的結構化說明。
  • 新增「使用技巧」章節，提供最佳實務建議（含圖片建議）。
  • 新增更新日誌，記錄版本迭代歷史。
  • 補充圖像管理功能的詳細說明。

• 新增模板匯出長圖功能。
• 支援自訂分類顏色配置。
• 優化響應式版面體驗。
• 修復多項已知問題。

• 初始版本發佈。
• 基礎模板管理功能。
• 詞庫建立與編輯功能。
• 變數填空互動系統。

歡迎提交 Issue 或 Pull Request 改進本專案！

如有任何建議或發現 Bug，請隨時在 GitHub Issues 告訴我們。

本專案採用 MIT 授權。

本專案原始出處為 TanShilongMario/PromptFill，感謝原作者的開源貢獻。

Made with ❤️ by 角落工作室