Emerging

Prompt enhancer

The system rewrites a thin prompt into a fuller one and shows the rewrite before running it.

MAsk MilkyWorkspace data

Milky can draw on

Q3 retention review Onboarding funnel July exit survey Billing events

Nothing has run yet.

Milky never rewrites a prompt behind your back. You see the rewrite first, and your original stays one click away.

Try it: Click Enhance to see the fuller prompt Milky suggests, with every addition marked. Toggle or edit the additions, then run either version and compare.

In the wild

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

Bolt home input box filled with a long enhanced prompt starting 'Build a full-stack second-hand clothing marketplace website using React' with a Project Overview section, not yet sent — Bolt
Bolt's Enhance prompt asks a few clarifying questions, then rewrites a one-line idea into a detailed spec in the input box for you to edit before sending.
Source: Bolt support ↗

Ideogram image details listing the original Prompt 'Photo of a rabbit in a garden' above the longer Magic Prompt rewrite, followed by style, model and resolution — Ideogram
Ideogram's Magic Prompt expands a short prompt into a richer one and shows both versions side by side, so you can see or copy the rewrite.
Source: Ideogram docs ↗

When to use

Products whose users under-specify, especially image, video and research generation.

Seen in

Firefly prompt assist, Midjourney prompt help, Perplexity query rewriting, image tool magic-wand icons.

For engineers

Show the enhanced prompt as editable text and keep the original for comparison and retry.

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 enhancer" pattern: `PromptEnhancer`

## 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
The system rewrites a thin prompt into a fuller one and shows the rewrite before running it.

Use it when: Products whose users under-specify, especially image, video and research generation.

## What to build
A control that rewrites a short prompt into a fuller one and shows the rewrite as editable text before anything runs. It lists what was added and keeps the original one click away, so a person chooses which version to run. It renders under or inside a prompt composer.

### Props
- `original`: string, the prompt as the person typed it.
- `enhanced?`: string and `onEnhancedChange(text: string)`, the suggested rewrite, editable and controlled.
- `additions?`: Array<{ label: string; text: string }>, what the rewrite added, e.g. { label: "Timeframe", text: "Q3" }.
- `status`: "idle" | "enhancing" | "review" | "error".
- `onEnhance()`: asks for a rewrite. The component never rewrites on its own or before the person asks.
- `onRun(prompt: string, which: "original" | "enhanced")`: runs the chosen version. The component never runs the prompt itself.
- `onDiscard()`: closes the rewrite and returns to the original.

### States it must render
- Idle: the composer with an Enhance button beside Run as typed.
- Enhancing: a busy indicator on Enhance; the original stays visible and editable.
- Review: the rewrite in an editable text area marked as AI-written and "Not run yet", the original text shown inline (struck through where replaced) and a list of additions as chips.
- Edited: once the person changes the rewrite, its marker changes to "Edited by you".
- Error: enhancement failed; the original is untouched and can still run.

### Interactions
- Run rewrite calls `onRun(enhanced, "enhanced")`; Keep mine calls `onRun(original, "original")`; both are equal-weight buttons.
- Selecting an addition chip highlights its words in the rewrite; a remove control on the chip deletes that addition from the text.
- Discard calls `onDiscard` and restores the composer to the original exactly.

### Edge cases
- The rewrite changes meaning (adds a constraint the person did not ask for): additions must list every change so nothing is silent.
- The person edits the original while a rewrite is pending: mark the rewrite as out of date and offer to enhance again.
- An empty or one-word prompt: Enhance may ask a clarifying question instead of guessing; render it as a question with an answer field.
- After a run, the result should be labelled with which version produced it; expose `which` in `onRun` for that.

## Must avoid
Silently rewriting intent, so the user cannot tell whether the miss was theirs or the enhancer's.

## Engineering constraint
Show the enhanced prompt as editable text and keep the original for comparison and retry.

## Accessibility
- The rewrite text area is labelled "Suggested rewrite, not run yet"; announce when it is ready.
- Struck-through original text is also exposed as text ("replaced: …") so the change is not visual only.

## 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 inputs

0 of 4 checked

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

Can the user attach the real context, or must they describe it?
Is there a path for the expert and the novice in the same field?
Does the input show what will be sent, including hidden context?
Can a long input be edited and re-run without retyping?