Prompt Fill (提示词填空器)

English | 中文

---

<a id="english"></a>

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.

<img width="1343" height="612" alt="image@1x-2" src="https://github.com/user-attachments/assets/7c3d969b-7f63-46fc-a16a-e3074da6c692" /> <img width="1343" height="620" alt="1231333" src="https://github.com/user-attachments/assets/08c90a9f-7b1e-4b3d-84fc-650bccfd1d2b" />

📝 Foreword

Prompt Fill has officially reached v1.1.2. 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:

   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

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

2. Install

   npm install
   

3. Dev

   npm run dev
   

4. Build

   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:

   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.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