Pattern 02 · Input

Prompt templates with variables

Good prompts are long and fiddly; people re-type them badly every time, so quality varies wildly.

By Aleksey StepikinUpdated October 20263 min readLive demo
Live demo · try it

An interactive mock built in plain HTML, CSS and JavaScript. Data is fictional; no model is called.

FitWhen to use it — and when not

Use it when

  • Repeated tasks with a known shape (emails, briefs, reports)
  • Teams that need consistent output across many people
  • Onboarding non-technical users to a powerful model

Skip it when

  • Open-ended exploration and brainstorming
  • When the template has more than ~5 fields — make it a proper form or wizard

AnatomyThe parts of the pattern

  1. Sentence with slotsThe prompt reads as a sentence; variables are inline dropdowns or fields.
  2. Smart defaultsEvery slot pre-filled with the most common value.
  3. Prompt previewThe exact text that will be sent, updated live.
  4. Run + saveRun now, or save a filled version as a team template.

GuidelinesDo & don’t

Do

  • Keep the sentence readable — the template is also documentation.
  • Show the assembled prompt so power users trust and learn from it.
  • Version templates and show who owns them in a shared library.

Don’t

  • Hide the prompt entirely behind a form — people cannot debug what they cannot see.
  • Free-text slots where a dropdown would remove ambiguity.
  • Let template edits silently change results for the whole team.

In the wildReal-world examples

Notion AIJasperCopy.aiRaycast AI commands

Products named for reference only — no affiliation, and the demo above is an original illustration, not a copy of their UI.

For engineersImplementation notes

  • Store templates as data (id, version, slots with types and defaults), never as hard-coded strings in the UI.
  • Validate and escape slot values before interpolation — a slot is a prompt-injection entry point.
  • Log template id + version with every run so evals can compare versions.

InputRelated patterns

All 26 LLM UX patterns

Building an AI product?

I design and ship AI products end to end — LLM interfaces, agents, RAG, billing — from concept to a live product in weeks, not quarters. Tell me what you are building and get a fixed estimate.

Get an estimateBook a call

Create bold.
Deliver better.

See our workGet in touch