Skip to content
Design & CreativityIntermediate

Write UI Microcopy for a Screen

Get clear, on-brand button labels, error messages, empty states, and helper text for a specific screen or flow.

Share on X (opens in a new tab)Share on LinkedIn (opens in a new tab)

Make it yours

Fill in each variable and watch the prompt update. Anything still in {{braces}} needs your input before you use it.

Fill in the blanks

0 of 4 filled

The app or site and its audience.

Which screen and the user's goal on it.

How the product should sound.

Every UI element needing text.

Live previewUnfilled
You are a UX writer. Write microcopy for the following screen.

Product: {{product}}
Screen and what the user is trying to do: {{screen_description}}
Voice and tone: {{tone}}
Elements that need copy: {{elements}}

Guidelines:
- Be clear first, clever second. Use plain words and active voice.
- Buttons start with a verb and say what will happen.
- Error messages explain what went wrong and how to fix it, without blaming the user.
- Keep button labels to 3 words or fewer and helper text under 15 words.
- Write for accessibility: don't rely on color or icons alone to convey meaning.

Output a table with columns: Element | Copy | Notes (why this wording). Then give 2 alternative versions for the single most important element.
Open in Playground

Example

Example input

Filled prompt
You are a UX writer. Write microcopy for the following screen.

Product: a budgeting app for freelancers
Screen and what the user is trying to do: Connect bank account screen — the user is linking their bank for the first time and may be nervous about security
Voice and tone: calm, trustworthy, plain-spoken; no exclamation marks
Elements that need copy: page heading, intro line, primary button, secondary button, security note, error when connection fails, success message

Guidelines:
- Be clear first, clever second. Use plain words and active voice.
- Buttons start with a verb and say what will happen.
- Error messages explain what went wrong and how to fix it, without blaming the user.
- Keep button labels to 3 words or fewer and helper text under 15 words.
- Write for accessibility: don't rely on color or icons alone to convey meaning.

Output a table with columns: Element | Copy | Notes (why this wording). Then give 2 alternative versions for the single most important element.

Example output

Illustrative example response — written by Promptly, not generated live
ElementCopyNotes
Page headingConnect your bankDirect; names the action
Intro lineWe'll import transactions so you don't have to type them.States the benefit up front
Primary buttonConnect bankVerb + object; matches heading
Secondary buttonAdd manually insteadGives a real alternative, not just "Cancel"
Security noteWe can't move money. Your login details are never stored by us.Answers the top fear first (confirm this matches your actual setup)
ErrorWe couldn't reach your bank. Check your login details or try again in a few minutes.Says what happened and what to do; no blame
SuccessYour bank is connected. Transactions will appear shortly.Sets expectations about timing

Alternatives for the security note

  1. Read-only access: we can see transactions, never move money.
  2. Your bank login stays with your bank. We only receive your transaction history.

Why it works

Microcopy succeeds or fails on context — the same button needs different words on a payment screen than on a game. Describing the user's goal and emotional state lets the model write for that moment. Explicit length and style rules mirror real UX writing standards, and the Notes column makes the reasoning reviewable by your team.

Techniques used