Standard

Prompt template / fill-in form

A structured form that produces a good prompt, trading expressive freedom for reliable output.

MSave-the-account emailTemplates Template v4

Write a short email from Leo Martin, account manager, to . Acknowledge that , without blaming them. Offer: . Tone: . Under 120 words, one clear next step. Don't promise discounts or dates that aren't listed here.

This is the whole prompt. Last edited 12 Sep by Maya Reyes.

Try it: Change the fields and watch the full prompt update on the right, then generate. Nothing is added behind your back.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Ideogram Prompt builder with Manual tab fields for aspect ratio, scene description, background and a list of elements, a canvas of labelled bounding boxes, and a JSON prompt panel with an 'Enhance & apply prompt' button — Ideogram
Ideogram's Prompt builder breaks a prompt into scene, background and placed elements, then builds the structured prompt from those fields.
Source: Ideogram docs ↗

Jasper

Jasper's templated agents open as a form. You pick brand voice, audience, style guide and language instead of writing those instructions into a prompt.

Source: Jasper Help Center ↗

When to use

Repeated jobs with known variables, and for users who freeze at a blank input.

Seen in

Canva Magic Design briefs, Jasper templates, Salesforce Prompt Builder, Zapier AI action setup.

For engineers

Store templates as versioned prompt objects so you can improve wording without breaking saved runs.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Prompt template / fill-in form" pattern: `PromptTemplateForm`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A structured form that produces a good prompt, trading expressive freedom for reliable output.

Use it when: Repeated jobs with known variables, and for users who freeze at a blank input.

## What to build
A short form that fills a versioned prompt template, with a live preview of the exact prompt that will run. It lets a person produce a reliable prompt for a repeated job by choosing a few values instead of writing from scratch. It renders in a side panel or modal beside the place the output will go.

### Props
- `template`: { id: string; version: number; title: string; body: string; fields: Array<{ key: string; label: string; type: "select" | "text" | "segmented"; options?: string[]; required?: boolean; allowCustom?: boolean }> }, where `body` contains `{key}` placeholders.
- `values`: Record<string, string> and `onChange(key: string, value: string)`, controlled field values.
- `fixedText?`: string[], any instructions the template always adds, shown in the preview so nothing is hidden.
- `meta?`: { editedBy?: string; editedAt?: Date }, shown as the template's provenance.
- `status`: "editing" | "generating" | "done" | "error".
- `onGenerate(compiled: { templateId: string; version: number; values: Record<string, string>; prompt: string })`: the component never runs the prompt itself.
- `onSwitchToFreeText?()`: leaves the form for a plain prompt box, carrying the compiled text.

### States it must render
- Editing: fields on one side, the compiled prompt below or beside them with each filled value highlighted and empty slots visibly marked.
- Incomplete: required fields empty; Generate is disabled and the missing slots are named.
- Generating: fields locked, progress on the button, preview still readable.
- Done: the result is handed to the parent; the form offers "Change inputs" to return to editing with values kept.
- Error: values stay as entered, with a message and retry.

### Interactions
- Changing any field updates the preview immediately, word for word.
- Generate calls `onGenerate` with template id, version, structured values and the compiled string.
- A select field with `allowCustom` accepts typed text as well as listed options.
- "Write it myself" calls `onSwitchToFreeText` with the current compiled prompt.

### Edge cases
- Templates with more than about 5 fields: show a field count and an estimated time beside Generate so length is visible; designers should split such templates.
- Every instruction that reaches the model appears in the preview; there is no hidden field or silent override.
- The template version changes while a person is editing: keep their values, show "Template updated to v5", and refresh the preview.
- A value containing braces or quotes: insert literally, never re-interpreted as a placeholder.

## Must avoid
Forms so long the user would have rather typed a sentence; hidden fields that silently override intent.

## Engineering constraint
Store templates as versioned prompt objects so you can improve wording without breaking saved runs.

## Accessibility
- Each field has a visible label; the preview is a labelled region updated with `aria-live="polite"` debounced to pauses in typing.
- Highlighted values in the preview are distinguished by underline or weight as well as colour.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for wayfinders

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a first-time user act without typing anything?
Do suggestions reflect the user's actual context, not a generic list?
Is the system's boundary stated somewhere findable?
Do nudges stop appearing once the behaviour is learned?