What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based prompt template library. The finished tool will let you:
- Browse a library of pre-built prompt templates organized by category
-
Use
{{variable}}placeholders that get detected and filled in automatically - Create, edit, and delete your own custom templates
- Copy filled-in prompts to clipboard with one click
- Persist all custom templates in localStorage so they survive page refreshes
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
Some prompt engineering knowledge helps
This is an intermediate project. Familiarity with how prompts work will help you design better templates, but the AI handles the coding.
Describe the Template Library UI
Open your AI tool and start a new conversation. You want a clean interface that shows template cards users can browse and select. Here's a prompt that works well:
Build me a single HTML file for a prompt template library. It should have:
- A header with the title "Prompt Template Library" and a search bar to filter templates
- A grid of template cards, each showing: template name, category tag (like "Writing", "Code", "Analysis", "Email"), a preview of the template text, and a "Use Template" button
- When you click "Use Template", it opens a panel/modal that shows the full template with any {{variable}} placeholders highlighted in a different color
- Below the template text, automatically generate input fields for each detected {{variable}} — for example, if the template contains {{topic}} and {{tone}}, show two labeled input fields
- A "Copy Filled Prompt" button that replaces all {{variables}} with the user's input and copies the result to clipboard
- Start with 4 sample templates hardcoded in a JavaScript array
- Use a dark theme with clean, modern styling
Put all HTML, CSS, and JavaScript in one file. No external dependencies besides Tailwind CSS via CDN.
Notice how this prompt specifies the exact UI flow: browse cards, select one, fill in variables, copy result. This level of detail prevents the AI from guessing at the interaction model.
Add Pre-Built Templates
Once the basic UI is working, expand the template library with more useful templates. Save the first output, test it in your browser, then go back to the AI:
Add 4 more templates to the library (8 total). Include these specific templates:
1. "Blog Post Outline" (Writing category) — variables: {{topic}}, {{target_audience}}, {{tone}}
2. "Code Review Request" (Code category) — variables: {{language}}, {{code_description}}, {{focus_areas}}
3. "Data Analysis Summary" (Analysis category) — variables: {{dataset}}, {{key_findings}}, {{time_period}}
4. "Professional Email" (Email category) — variables: {{recipient_name}}, {{subject}}, {{key_points}}, {{call_to_action}}
Each template should be a multi-paragraph prompt that a user would actually want to send to an AI. Make them detailed and practical — not just one-liners. Also add category filter buttons above the grid so users can filter by Writing, Code, Analysis, or Email.
The key here is being specific about the variable names. Using descriptive names like {{target_audience}} instead of {{var1}} makes the template self-documenting.
Build Variable Detection and Substitution
The core feature of this project is the regex-based variable system. If the AI's first attempt doesn't handle edge cases well, use this prompt to refine it:
Improve the variable detection and substitution system:
- Use a regex pattern like /\{\{(\w+)\}\}/g to find all {{variable}} placeholders in a template
- Deduplicate variables — if {{topic}} appears 3 times in a template, only show one input field, but replace all 3 occurrences
- Highlight unfilled variables in the preview with a colored background so users can see what's left to fill
- Show a character count next to each input field
- Add real-time preview: as the user types in a variable field, immediately update the template preview to show the substitution
- If any variables are left empty when the user clicks "Copy", highlight those fields with a red border and show a warning instead of copying
Keep the same file structure and dark theme.
Here are common issues and how to ask the AI to fix them:
Variables not detected in template text
Tell the AI: "The regex isn't finding the {{variables}}. Make sure the pattern matches double curly braces with word characters inside: /\{\{(\w+)\}\}/g"
Same variable shows multiple input fields
Tell the AI: "When a variable like {{topic}} appears multiple times, I see duplicate input fields. Use a Set or filter to deduplicate the variable list before rendering inputs."
Live preview not updating
Tell the AI: "The real-time preview doesn't update when I type. Add an 'input' event listener to each variable field that triggers a re-render of the template preview."
Add Custom Template Creation
Now let users create their own templates. This turns the tool from a static library into a personal prompt toolkit:
Add a "Create Template" feature to the prompt template library:
- Add a prominent "Create New Template" button at the top of the page
- When clicked, open a form/modal with fields for: template name, category (dropdown with Writing/Code/Analysis/Email/Custom), and a large textarea for the template body
- In the textarea, show a hint that says "Use {{variable_name}} for placeholders"
- As the user types in the textarea, show a live preview below it that highlights all detected {{variables}} in a colored badge
- Add an "Edit" button and a "Delete" button on custom template cards (not on the built-in ones)
- When editing, pre-fill the form with the existing template data
- Show a confirmation dialog before deleting
- Mark custom templates with a small "Custom" badge on their cards to distinguish them from built-in ones
Keep the same dark theme and code structure.
This is where the app gets genuinely useful. The create/edit/delete pattern (often called CRUD) is one of the most common patterns in web development, and you're building it just by describing what you want.
Add localStorage Persistence
The final step is making custom templates survive page refreshes. Without persistence, users lose their work every time they close the browser:
Add localStorage persistence to the prompt template library:
- Save all custom templates to localStorage whenever one is created, edited, or deleted
- On page load, merge the built-in templates with any saved custom templates from localStorage
- Keep the built-in templates as a constant array that's always available — never save them to localStorage
- Add an "Export All" button that downloads all custom templates as a JSON file
- Add an "Import" button that lets users upload a JSON file to add templates in bulk
- Add a "Reset to Defaults" button that clears custom templates from localStorage (with a confirmation dialog)
- Show a count like "8 built-in + 3 custom" somewhere visible
Keep everything in the same single HTML file.
What You Learned
This project teaches more than just template management. By completing it, you practiced:
Prompt Template Design Patterns
You learned how to structure reusable prompts with variable placeholders that make templates flexible and practical.
Regex for Variable Parsing
You used regular expressions to detect, extract, and replace {{variable}} patterns — a core text processing skill.
Building CRUD Interfaces
You built a full create, read, update, delete system — the most common pattern in web applications.
Template-Based Workflows
You understand how templates with variable substitution can speed up repetitive tasks and standardize prompt quality.
Tips for Working with AI on This Project
Test the regex first. Before adding UI features, make sure the {{variable}} detection actually works. Ask the AI to log detected variables to the console so you can verify.
Write real templates. The built-in templates should be prompts you'd actually use. Generic placeholder text makes the tool feel useless — realistic content makes it immediately practical.
Handle edge cases. What happens if a template has no variables? What if the user leaves all fields empty? Ask the AI to handle these gracefully.
Separate built-in from custom. Keeping built-in templates as a constant and only persisting custom ones to localStorage avoids data corruption issues.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.