Managing your AI prompts doesn't have to be complicated. Here's how I built a simple, powerful tool to organize and reuse my best prompts.
The Problem
If you're like me, you've probably got AI prompts scattered everywhere—saved in random text files, buried in chat histories, or worse, recreated from memory every time you need them. As someone who regularly works with AI for image generation, video creation, and text tasks, I needed a better system.
Facing the empty prompt screen in your favorite LLM image/video tool? Introducing Prompt Vault.
I wanted something that would:
Organize prompts by type–image, video, text
Make prompts reusable–with a consistent framework
Store reference images–for visual prompts
Work offline–when needed
Be super simple–to use
Commercial prompt management tools felt non-existent, too complex or locked into specific AI platforms. So I built my own. Introducing Prompt Vault.
Cool character & scene creation prompts ready to copy and paste into your favorite LLM Imagine creation tool.
Image, Video and Text tabs keep prompts organized and quick to grab during your workflow.
What is Prompt Vault
Prompt Vault is a lightweight web app for organizing AI prompts using the 🌹ROSES framework—a structured approach that breaks prompts into five key components:
1. Role - Who should the AI be?
2. Objective - What is the goal?
3. Scenario - What's the context?
4. Expected Solution - What should the output look like?
5. Steps - How should it be done?
Easy prompt creation and editing
This framework works beautifully across different AI use cases. Whether I'm generating product photography with Grok Imagine (my favorite today), Midjourney, creating animations with Runway, or drafting marketing copy with Claude, the ROSES structure keeps my prompts consistent and effective.
Key Features
1. Multi-Modal Support
Prompt Vault handles three generation types:
- 🎨 Image - Photography, illustrations, concept art
- 🎬 Video - Animations, product demos, scene transitions
- 📝 Text - Copy, scripts, documentation
Multi-modal prompt sorting & search
Each type uses the same ROSES framework but adapts to the medium. For example, an image prompt's "Steps" might be "Use thick brushstrokes, layer colors, add texture," while a text prompt's "Steps" could be "1. Hook with a question, 2. Provide solution, 3. Call to action."
Easy to fork and build your own site using this idea & structure.
2. Image Upload & Preview
For visual prompts, I can upload reference images that get stored with the prompt. This is huge for image generation—I can save example outputs from Midjourney or reference photos that inspire new prompts.
Thumbnails appear on each prompt card, making it easy to browse visually.
3. Tag-Based Organization
Instead of rigid folder hierarchies, I use tags: `#photography`, `#anime`, `#product-shots`, etc. The tag filter lets me quickly find all prompts related to a specific style or use case.
4. Scratchpad
The built-in scratchpad is perfect for composing prompt variations before saving. I'll often paste a base prompt, tweak different parameters, test them in my AI tool, then save the winner back to the vault.
Optional, scratchpad overlay for mincing and editing text without leaving the current window.
5. Live Preview
As I fill out the ROSES fields, a live preview shows exactly what the final prompt will look like. No surprises when I copy it into Claude or MidJourney.
6. Cloud Sync
All prompts sync to a cloud backend (Node.js + SQLite running on AWS Lightsail). This means I can access my prompt library from any device—desktop, laptop, or even my phone.
How I Built It
Tech Stack
I kept the stack intentionally simple:
Frontend
Pure HTML/JavaScript (no build process)
[Alpine.js](https://alpinejs.dev/) for reactivity
[Tailwind CSS](https://tailwindcss.com/) for styling
Deployed on [Vercel](https://vercel.com)
Backend
Node.js + Express
SQLite database (better-sqlite3)
Multer for image uploads
Deployed on AWS Lightsail
Infrastructure
HTTPS via Let's Encrypt + Nginx
Custom domain: `api.paulgoins.com`
Automatic backups on server shutdown
Why These Choices?
Alpine.js - I wanted reactivity without the complexity of React or Vue. Alpine's syntax is clean and the entire library is ~15KB.
SQLite - Perfect for a personal project. File-based, zero configuration, and fast enough for thousands of prompts.
Vercel - Free hosting with automatic deployments from GitHub. Push to main, and the site updates.
Lightsail - Simple, predictable pricing ($5/month). I needed a persistent server for the database and image storage.
Development Process
1. Starting with the Core
I began with a single HTML file and the basic ROSES form. No database, no cloud—just local storage to validate the UX.
Once the form felt right, I added:
- Prompt gallery view- Search and filtering- Generation type tabs (Image/Video/Text)2. Adding the Backend
When I had ~20 prompts in local storage, I built the Node.js backend:
javascript// Simple Express serverapp.get('/api/prompts', async (req, res) => { const prompts = db.prepare('SELECT * FROM prompts ORDER BY createdAt DESC').all(); res.json(prompts);});app.post('/api/prompts', async (req, res) => { const prompt = req.body; db.prepare('INSERT INTO prompts (...) VALUES (...)').run(...); res.json({ success: true });});3. Image Upload
Adding image uploads was straightforward with Multer:
const storage = multer.diskStorage({ destination: './data/uploads', filename: (req, file, cb) => { const uniqueName = `${file.originalname}-${Date.now()}${path.extname(file.originalname)}`; cb(null, uniqueName); }});
app.post('/api/upload', upload.single('image'), (req, res) => { res.json({ url: `https://api.paulgoins.com/uploads/${req.file.filename}` });});4. Deployment
Frontend (Vercel):```bash# vercel.json{ "buildCommand": "cp config.production.js config.js", "outputDirectory": "."}Backend (Lightsail):
1. Installed Node.js, Nginx, Certbot
2. Set up SSL with Let's Encrypt
3. Configured Nginx as reverse proxy
4. Used PM2 to keep the server running
# Start server with PM2pm2 start server-cloud.js --name promptvaultpm2 save5. Polish & UX Refinements
The final 20% of development was all polish:
Connecting generation type tabs visually to the grid
Adding inline examples to ROSES field labels
Moving the scratchpad button to the header
Pinning thumbnail images to the top-center of cards
Tag-based filtering instead of folders
These small touches made the app feel cohesive and professional.
What I Learned
1. Simple Stacks Scale Better for Solo Projects
No TypeScript. No bundler. No complex build process. Just HTML, CSS, and vanilla JavaScript with Alpine.js. This made iteration fast. I could edit a file, refresh the browser, and see changes instantly. For a personal tool, developer velocity beats architectural purity.
2. The ROSES Framework is Universal
I initially built this for image prompts, but ROSES works for *everything*. Product descriptions, email copy, video scripts—the structure adapts beautifully.
The framework forces me to think through:
Who's perspective am I writing from?
What's the actual goal?
What context matters?
What does success look like?
How do I get there step-by-step?
3. Design Constraints Improve UX
Removing the drag-and-drop feature made the app simpler and faster. Replacing folder filtering with tags made organization more flexible. Hiding import/export buttons reduced clutter.
Every feature I removed made the app better.
4. Deployment Infrastructure Matters
Setting up HTTPS properly (Let's Encrypt + Nginx) was critical. Modern browsers block mixed content (HTTPS frontend calling HTTP backend), so getting SSL right from the start saved headaches. Using PM2 for process management means the server auto-restarts if it crashes. Combined with automatic backups, I can trust the system to run itself.
What's Next?
Right now, Prompt Vault is a personal tool. But I'm considering adding:
#User Authentication: Switch from a single API key to proper user accounts. Each user gets their own isolated prompt library.
#Prompt Sharing: Public/private toggle for prompts. Share a link to a specific prompt or collection.
#Version History: Track changes to prompts over time. Useful when iterating on complex image generation prompts.
#AI Integration: One-click "Generate" buttons that send prompts directly to Midjourney, Runway, or Claude via their APIs.
#Prompt Templates: Pre-built starter prompts for common use cases: "Product Photography," "Anime Character," "Marketing Email," etc.
Try It Yourself (Coming this week)
The code is intentionally simple—you could fork it and have your own version running in under an hour. If you're working with AI regularly and need a better way to manage prompts, give it a try. Or build your own! The beauty of personal tools is they can be exactly what *you* need.
Final Thoughts
Building Prompt Vault solved a real problem for me. I'm no longer searching through chat logs or rewriting prompts from memory. Everything's organized, searchable, and reusable.
More importantly, the ROSES framework has made me a better prompt engineer. Breaking prompts into structured components forces clarity—and clarity leads to better AI outputs.
Whether you use Prompt Vault or build something similar, the lesson is this: the tools you need might not exist yet. But they're often simpler to build than you think.
See my visual research experiments at instagram.com/serfdad
Have questions about the build process or want to suggest a feature?
Contact me here or check out the code on GitHub.