mcpField
U
ux-copy

ux-copy

github.com/anthropicsDesign & UI33.6k4.7k installsUpdated 1d ago
Repository

About ux-copy

A skill for writing and reviewing UX copy across interface contexts. It uses principles and patterns for concise, clear, consistent text, with guidance for common UI elements and optional connected design or knowledge sources.

Key features

  1. 01UX copy writing and review
  2. 02Guidance for CTAs and errors
  3. 03Patterns for empty and loading states
  4. 04Tone adaptation by context
  5. 05Optional brand and design references

Use cases

  1. 01Draft copy for interface flows
  2. 02Improve error and confirmation messages
  3. 03Align text with brand voice and layout constraints

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/anthropics/knowledge-work-plugins --skill ux-copy

After installing, type/ux-copyin Claude Code to confirm it loaded.

Details

From the project README

/ux-copy

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Write or review UX copy for any interface context.

Usage

/ux-copy $ARGUMENTS

What I Need From You

  • Context: What screen, flow, or feature?
  • User state: What is the user trying to do? How are they feeling?
  • Tone: Formal, friendly, playful, reassuring?
  • Constraints: Character limits, platform guidelines?

Principles

  1. Clear: Say exactly what you mean. No jargon, no ambiguity.
  2. Concise: Use the fewest words that convey the full meaning.
  3. Consistent: Same terms for the same things everywhere.
  4. Useful: Every word should help the user accomplish their goal.
  5. Human: Write like a helpful person, not a robot.

Copy Patterns

CTAs
  • Start with a verb: "Start free trial", "Save changes", "Download report"
  • Be specific: "Create account" not "Submit"
  • Match the outcome to the label
Error Messages

Structure: What happened + Why + How to fix

  • "Payment declined. Your card was declined by your bank. Try a different card or contact your bank."
Empty States

Structure: What this is + Why it's empty + How to start

  • "No projects yet. Create your first project to start collaborating with your team."
Confirmation Dialogs
  • Make the action clear: "Delete 3 files?" not "Are you sure?"
  • Describe consequences: "This can't be undone"
  • Label buttons with the action: "Delete files" / "Keep files" not "OK" / "Cancel"
Tooltips
  • Concise, helpful, never obvious
Loading States
  • Set expectations, reduce anxiety
Onboarding
  • Progressive disclosure, one concept at a time

Voice and Tone

Adapt tone to context:

  • Success: Celebratory but not over the top
  • Error: Empathetic and helpful
  • Warning: Clear and actionable
  • Neutral: Informative and concise

Output

## UX Copy: [Context]

### Recommended Copy
**[Element]**: [Copy]

### Alternatives
| Option | Copy | Tone | Best For |
|--------|------|------|----------|
| A | [Copy] | [Tone] | [When to use] |
| B | [Copy] | [Tone] | [When to use] |
| C | [Copy] | [Tone] | [When to use] |

### Rationale
[Why this copy works — user context, clarity, action-orientation]

### Localization Notes
[Anything translators should know — idioms to avoid, character expansion, cultural context]

If Connectors Available

If ~~knowledge base is connected:

  • Pull your brand voice guidelines and content style guide
  • Check for existing copy patterns and terminology standards

If ~~design tool is connected:

  • View the screen context in Figma to understand the full user flow
  • Check character limits and layout constraints from the design

Tips

  1. Be specific about context — "Error message when payment fails" is better than "error message."
  2. Share your brand voice — "We're professional but warm" helps me match your tone.
  3. Consider the user's emotional state — Error messages need empathy. Success messages can celebrate.

Comments

Markdown supported