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

License Version React Vite Tailwind CSS

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 角落工作室