Table of contents
About
I've been thinking a lot about why some AI prompts produce great results while others fall completely flat. The answer usually comes down to structure — not the model, not the temperature, not the system message. Just structure.
So I built Prompt Builder — a web app that guides you through a science-backed six-part framework and assembles your prompt in real time as you fill in the fields. No sign-up, no backend, no data sent anywhere. It runs entirely in the browser.
The app is hosted on DigitalOcean and can be found here:
https://lionfish-app-rmfpf.ondigitalocean.app/
The Six-Part Framework
The core idea is a framework I call PTCEFC — six components that together cover everything a well-structured prompt needs. The app organises them into three phases so the thinking flows naturally.
Setup: Persona and Task
The first two fields define who the AI should be and what it should do.
- Persona — the role, profession, and level of expertise you want the model to adopt
- Task — a clear, specific objective: what action to take and what outcome to produce
Inputs: Context and Exemplar
The next two fields provide the background the model needs to do the job well.
- Context — background information, audience, constraints, and any domain-specific detail
- Exemplar — a reference example that shows the desired style, tone, or depth of output
Parameters: Format and Constraints
The final two fields shape the output itself.
- Format — how the response should be structured (bullet list, table, paragraphs, code, etc.)
- Constraints — hard rules about what to exclude, avoid, or never do
Real-Time Prompt Assembly
As you type into any of the six fields, the assembled prompt updates instantly in the output panel below. Each component is colour-coded with its label so you can see exactly where each piece of your input ends up.
The output section sits at the bottom of the page and stays visible as you scroll through the form. You can also switch to Edit mode to manually refine the assembled text — the parser recognises the section labels and syncs your edits back to the individual fields.
Pre-Built Examples
Not sure where to start? The Examples section at the top of the page gives you a set of ready-to-use prompts covering common scenarios — code reviews, bug reports, blog posts, API documentation, developer onboarding, and more.
Click any example card to load its values into all six fields at once. Click it again to restore what you had before — so you can use examples as inspiration without losing your own work.
Smart Suggestions
Each section has two helper controls next to its label:
- An info button (
i) that reveals five contextual tips explaining what kind of content belongs in that field - A suggestions button that shows a curated list of relevant snippets you can apply with a single click
You can apply individual suggestions, remove ones you don't need, or clear them all at once. Tips and suggestions can be open at the same time without interfering with each other.
Export Formats
Once your prompt is ready, you can copy it in three formats depending on where you plan to use it:
- Copy — plain text with section labels, ready to paste anywhere
- Copy Raw — clean prompt text without any labels, ideal for pasting directly into a chat interface
- Copy Markdown — bold-formatted labels for use in Markdown documents or Notion
A green checkmark confirms the content was copied to your clipboard successfully.
Multilingual Support
The full interface — including all labels, hints, tips, suggestions, and example content — is available in both English and Ukrainian. You can switch between them at any time using the toggle buttons in the top-right corner of the page.
