Prompt Fill (提示词填空器)

English | 中文

---

Prompt Fill

A structured prompt generation tool designed specifically for AI painting (GPT, Midjourney, Nano Banana, etc.). Help users quickly build, manage, and iterate complex prompts through a visual "fill-in-the-blank" interaction.

📝 Foreword

Prompt Fill has officially reached v1.1.3. The original intention of this project is to solve the problem of hard-to-remember, hard-to-manage, and tedious modification of prompts in the AI painting process. By structuring prompts, creation becomes as simple as "filling in the blanks".

🌟 Progress & Core Features

• ✅ Variable Autocomplete: Type / or { to open a dual-column autocomplete panel — select variables on the left, options on the right, with full keyboard navigation.
• ✅ Inline Variable Syntax: {{key: value}} lets you write and preview a variable's value directly in the template, with real-time highlighting.
• ✅ Smart Split: One-click prompt splitting with automatic variable annotation and bilingual template generation.
• ✅ Video Template Support: Full support for video previews and cover management.
• ✅ Official AI Support: AI-powered prompt expansion feature is now live.
• ✅ Full Dark Mode Support: One-click theme switching for desktop and mobile.
• ✅ Reliable Storage: Supports both browser (IndexedDB) and local folder storage — switching modes never loses your templates.
• ✅ Linkage Groups: Sync modifications globally within groups (e.g., {{color}}_1).
• ✅ Structured Prompt Engine: Automatic interactive form conversion via {{variable}}.
• ✅ Dynamic Bank System: Preset art tags with category management and batch import.
• ✅ HD Social Sharing: Export beautiful JPG long images with auto-extracted colors.
• ✅ Cloud Awareness: Real-time sync for official templates and features.
• ✅ Local Storage: Private data stored in browser LocalStorage.

---

✨ Core Features

🧩 Intelligent Bank Management

• Category Management: Color-coded categories (e.g., characters, actions) for visual clarity.
• Bidirectional Sync: Directly add custom options in preview to sync back to the bank.
• Category Editor: Manage categories and 12 preset colors.
• Responsive Layout: Efficient masonry multi-column layout.

📝 Multi-Template System

• Independent Templates: Create separate prompt templates for different use cases.
• Isolated State: Variable selections are independent per template.
• Clone/Copy: One-click duplication for A/B testing.

🖱️ Visual Interaction

• WYSIWYG Editing: Highlighting variables by category color during editing.
• Linkage Groups: Sync same variables in designated groups.
• Drag & Drop: Insert variables by dragging bank cards.
• Preview Mode: Templates render variables as clickable dropdowns.
• Multi-Instance: Multiple occurrences of the same variable work independently.

💾 Auto Persistence

• Changes are automatically saved to LocalStorage.
• No data loss on refresh or browser close.

🖼️ Image Management

• Preview Images: Templates support associated preview images.
• Custom Upload: Replace default previews with your own images.
• Image Actions: Hover for large view, upload, or reset.
• Ambient Background: Blurry background effect at the top.

📋 Export & Share

• One-click Copy: Copy clean generated prompt text.
• Save Long Image: Export HD JPGs for archiving and sharing.
• Private Short-link Sharing: Share templates via professional short links (Self-hostable).

---

🛠️ Tech Stack

• Build Tool: Vite
• Frontend: React
• Styling: Tailwind CSS
• Icons: Lucide React
• Export: html2canvas

---

🚀 Quick Start

Prerequisites

Node.js v18+ is recommended.

Private Share Server (Optional)

This project supports short-link sharing via a private backend. 1. Host the API: Backend code is available for private deployment (Node.js + SQLite). 2. Configure Frontend: Create a .env file in the root and add your API URL: bash VITE_SHARE_API_URL=https://your-api.com/api/share 3. Fallback: If no API is configured, the app automatically falls back to long URL sharing, which works offline and requires no server.

Installation & Run

1. Clone bash git clone https://github.com/TanShilongMario/PromptFill.git cd PromptFill
2. Install bash npm install
3. Dev bash npm run dev
4. Build bash npm run build

Shortcut Scripts

• macOS: start.command
• Windows: start.bat

Developer Tools

Import Template to Official Library

Convert a user-created template into an official (built-in) template:

1. Export the template JSON from the App (click the download icon on a template).
2. Run the import script with the file path: bash npm run import -- ~/Downloads/xxx_template.json
3. The script auto-writes into src/data/templates.js and src/data/banks.js.
4. After batch importing, manually update SYSTEM_DATA_VERSION in templates.js.

Tip: In local dev mode (localhost), the Share modal has a "Copy Full Data" button that copies the raw JSON to clipboard — you can also pipe that into the import script interactively via npm run import.

---

📖 Usage Guide

1. Manage Categories

Manage categories and colors at the top of the left panel. Each category has a unique color for quick identification.

2. Create Banks

Create "Variable Groups" and add options (single or batch). Cards can be dragged into the editor.

3. Edit Templates

Use "Edit Template" to enter visual mode. Type { to open variable autocomplete, or manually input {{variable}}. Supports drag-and-drop insertion and Undo/Redo.

4. Preview & Generate

Switch to "Preview Interaction". Select options from dropdowns. Use "+ Add Custom Option" to save new values directly.

5. Manage Images

Hover over preview images to view large versions, upload custom images, or reset to default.

6. Export & Share

Copy the final prompt or save as a long image. JSON Import/Export is available for backup.

---

💡 Tips

1. Batch Creation: Input multiple lines to add multiple options at once.
2. Clone Templates: Duplicate templates for A/B testing.
3. Color Coding: Use distinct colors for complex template structures.
4. Multi-Instance: Multiple same variables are assigned unique indices (e.g., color-0).
5. Custom Previews: Uploading representative images helps identification.
6. Image Specs: Square or vertical images around 300px are recommended.
7. Data Safety: Regularly export JSON as data is local to the browser.
8. Tags & Search: Use tags to filter and locate templates quickly.
9. Masonry View: Efficiently browse covers in the template list.
10. Import/Export (Beta): Backup or share via one-click JSON export.
11. Multi-source Upload: Supports local files and URLs for images.
12. Local Focus: Sync across devices manually using JSON files.

---

🗺️ Roadmap

• 🚀 Application: Native iOS app & Desktop version (Electron/Tauri).
• 🤝 Ecosystem: One-click sharing and online community.
• 🤖 AI Empowerment: AI bank expansion & AI prompt reorganization.
• ✨ Deep UX: More built-in templates & infinite hierarchy.

---

📝 Change Log

Version 1.1.3 (2026-04-21)

• Template Library Expansion: Added 10 new official templates — Museum Infographic, Nine-Grid Designers, Four-Panel Fictional Ads, Neo-Chinese City Poster, Textbook Poem Page, App Iconfont Set, Dual-IP Collab Postcard, Neo-Chinese Gacha Card Set, Retro Skeuomorphic Icons, Lifestyle App UI.
• Platform Support Update: Copy modal now includes ChatGPT (chatgpt.com). New best model options: GPT-image-2, Midjourney niji 7, Midjourney v8.1, Nano Banana 2.
• Bug Fix: Saving an edited bank option no longer throws when the banks sidebar is in the narrow single-column layout (missing onUpdateOption prop).

Version 1.1.2 (2026-03-28)

• Storage Fix: Writing a full IndexedDB snapshot before switching to folder mode. No templates are lost regardless of which storage mode they were created in.

Version 1.1.0 (2026-03-21)

• Variable Autocomplete: Type / or { in the editor to open a dual-column panel — pick a variable on the left and an option on the right, with full keyboard navigation (↑↓ / → / Enter / Esc).
• Inline Variable Syntax: {{key: value}} writes the current value directly into the template for instant preview without switching modes.
• New Image Template Default: Built-in usage tips and real bank variable examples so new templates are ready to use out of the box.
• Mobile Fixes: isMobileDevice now uses userAgent + viewport width and responds to resize events, fixing /explore occasionally using the desktop layout. The / trigger is disabled on mobile to prevent soft-keyboard interference.

Version 1.0.0 (2026-03-15)

• Smart Split: One-click prompt splitting with automatic variable annotation and bilingual template generation.
• Variable Auto-Detection: Content wrapped in [], 「」, or {} is prioritized as replaceable variables.
• Split Snapshot: View before/after comparison and restore with one click after splitting.
• UX Improvements: Fixed broken image on first upload; long data update notice modal is now scrollable.

Version 0.9.2 (2026-02-10)

• Material Enhancement: Supported using template materials in assets.

Version 0.9.1 (2026-02-08)

• Mobile UX: Optimized mobile interaction and small screen adaptation.
• Editor Layout: Refined template editor layout and alignment for better usability.

Version 0.9.0 (2026-02-08)

• Video Support: Full support for video previews and cover management.
• Mobile Refactor: New mobile editor layout with 60% text width and horizontal scrolling previews.
• Smart Interaction: Auto-collapsing info section when editing on mobile.
• UI Refinement: Optimized upload control sizes and label visibility.

Version 0.8.2 (2026-01-31)

• Header Refactor: Progressive blur top bar with horizontal tag navigation for mobile.
• Layout Redesign: Integrated drawer toggles in editor header for better spacing on mobile.
• Copy Enhancement: Automatically include recommended platform when copying results.
• UI Refinement: Removed icon backgrounds in settings for a cleaner look.
• Credits Update: Fully updated the list of prompt inspiration contributors.

Data Version 0.8.7 (2026-01-24)

• 🛠️ Data Correction: Updated authors for specific prompt templates.

Version 0.8.1 (2026-01-22)

• ✨ Bilingual Custom Terms: Support for separate CN and EN content in custom options.

Version 0.8.0 (2026-01-17)

• ✨ Official AI Features: AI-powered prompt generation is now available.
• 📚 Library Expansion: Significant expansion of the template library with high-quality artistic styles.
• 🚀 Performance: Enhanced masonry layout performance and smoother UI transitions.

Version 0.7.2 (2026-01-13)

• 🚀 System Upgrade: Synchronized to V0.7.2 with core performance optimizations.
• 📊 Data Update: Data version upgraded to V0.8.4 with new bank expansions and template refinements.
• 📝 Documentation: Comprehensive updates to README and release checklists for better workflow.

Version 0.7.1 (2026-01-07)

• 💾 Storage Upgrade: Migrated core data (templates, banks) to IndexedDB, overcoming the 5MB limit of LocalStorage.
• 🛠️ Maintenance: Temporary disabled AI Terms feature and optimized internal storage architecture.

Version 0.7.0 (2026-01-03)

• 📊 Analytics: Integrated Vercel Analytics for real-time traffic monitoring.
• 🚀 Export V2: Support for dynamic short-link QR codes and smart proxy fallback.
• 🌙 Immersive UI: Full Dark Mode support for mobile image preview.

Version 0.6.5 (2025-12-31)

• 🔗 Link Sharing: Added support for sharing templates via public URLs.
• 📊 Data Milestone: Data version upgraded to V0.7.6 with a comprehensive update to preset banks and templates.
• ⚡ Optimization: Improved persistence logic and cross-device data validation.
• 🎨 UI Refinement: Fixed minor rendering issues in Dark Mode.

Version 0.6.1 (2025-12-26)

• 🔗 Linkage Group Bug Fix: Fixed loose matching bug in linkage groups.
• 🆙 Version Alignment: Synchronized version identifiers site-wide.
• 🎨 UI Refinement: Optimized contrast and feedback in dark mode.

Version 0.6.0 (2025-12-25)

• 🎨 UI Upgrade & Dark Mode: Full dark theme support for desktop/mobile and Xmas theme.
• 🔗 Linkage Groups: Synchronized variable modifications within groups.
• 📱 Mobile Depth Optimization: Better dark mode adaptation and icon contrast.
• 🐞 Bug Fixes: Improved export stability and storage reliability.

Version 0.5.1 (2025-12-22)

• 📱 Mobile Interaction: Immersive details, drawer menus, and 3D gyroscope effects.
• ⚡ Performance: High