The Agentic UX Toolkit: design cards for AI agents

Onboarding

OnboardingO1

What should they do first?

What do you want done first?

Check this month's invoicesList what is overdue

What should they do first?O1

People learn an agent by giving it something to do. Ask what they want done, and offer a few real examples of what it is good at.

When to use

The first screen someone sees.

Common mistake

Making people sit through a tour before they can do anything.

What a first screen looks like

DoUseful within seconds

What do you want done first?

Check this month's invoicesList what is overdue

AvoidThey learn where things are, not what it does

Step 1 of 9

This is the sidebar. Click Next to continue.

Tap the prompt to copy it.

The one to remember

Give them a job, not a tour.

See it move in the playbook

OnboardingO2

What can't it do?

What I can do

I check invoices. I can't pay them yet, and scanned copies may be misread.

What can't it do?O2

Promising magic sets people up for disappointment. Describe the limits plainly, in terms of their work, so they know when to double-check.

When to use

Before someone gives it a real job.

Common mistake

Promising it can do anything. The first failure will feel like a broken promise.

What honest limits look like

By itselfIt just does these

Reads invoices

Compares them with last month.

Asks firstIt checks with them

Pays a vendor

Emails a vendor.

Not yetSay so plainly

Can't read handwritten bills

Can't change bank details.

Tell Claude

Tap the prompt to copy it.

The one to remember

Say what it can't do, too.

See it move in the playbook

OnboardingO3

When should it ask for access?

Connect your invoices folder?

So I can check this month's invoices.

Allow readingUpload one instead

When should it ask for access?O3

A long list of permissions on the first screen is hard to judge. Ask when there is a job in front of them, so the reason is obvious.

When to use

Any time the agent needs a file, account or tool.

Common mistake

Asking for everything at the start, before they have seen what it does.

What a good request looks like

DoWhat, why, the limit and another way

Connect your invoices folder?

So I can check this month's invoices. I can only read it.

Allow readingUpload one instead

AvoidNobody can judge this yet

Connect your accounts

Email, calendar, Drive, contacts and payments.

Tell Claude

Tap the prompt to copy it.

The one to remember

Ask when the reason is obvious.

See it move in the playbook

OnboardingO4

How much can it do on day one?

It will ask before each payment

You can change this at any time.

Change this

How much can it do on day one?O4

Decide what it can do on day one, and how people can change that later. Real products disagree here, so make this choice on purpose.

When to use

Before you launch, for every action it can take.

Common mistake

Turning on automatic actions without telling people, or how to change it.

What each starting point looks like

Start carefulSafer, but slower

It will ask before each payment

Good when mistakes are costly or public.

Change this

Start automaticFaster, so say it is on

Running with built-in checks

It acts without asking on small jobs.

Change this

Tell Claude

Tap the prompt to copy it.

The one to remember

Choose the starting limit on purpose.

See it move in the playbook

Waiting

While it works Read the full entry →

WaitingW1

How long is the wait?

You can leave this page

We'll notify you when it is done.

How long is the wait?W1

A two-second wait and a two-hour wait are different problems. Work out which one you have first, then design for it.

When to use

Before you design any loading state.

Common mistake

Using the same loading design for every wait.

What each length looks like

SecondsA small sign of life

Writing your answer...

MinutesNamed steps and a real count

Comparing 12 quotes

8 read so far.

HoursSay they can leave

You can leave this page

We'll notify you when it is done.

Tell Claude

Tap the prompt to copy it.

The one to remember

Design for the length of the wait.

See it move in the playbook

WaitingW2

What is it doing right now?

Comparing 12 vendor quotes

8 read so far.

What is it doing right now?W2

Use labels that describe the real task, and change them only when the work really changes. An activity label that isn't true is worse than none.

When to use

Any job with more than one step.

Common mistake

Showing busy-sounding labels that don't match the real work.

What real work looks like

DoAnyone can tell what is happening

Comparing 12 vendor quotes

8 read so far.

AvoidReads the same if it is stuck

Thinking...

Please wait.

Tell Claude

Tap the prompt to copy it.

The one to remember

Say what it's really doing.

See it move in the playbook

WaitingW3

Is it working or stuck?

Waiting on the vendor's site

20 seconds so far. 11 of 12 are ready.

Carry on without itKeep waiting

Is it working or stuck?W3

People worry when they can't see what is happening. A spinner looks the same either way, so always show which of these four states it is in.

When to use

Anything that takes more than a few seconds.

Common mistake

Using one spinner for everything. Nobody can tell what is going on.

What each state looks like

WorkingMaking progress

Comparing 12 quotes

8 read so far.

WaitingSomething else is slow

Waiting on the vendor's site

Carry on without itKeep waiting

Needs youNothing moves until they answer

Order from Inkwell, ₹18,500?

Place the orderNot yet

StuckIt can't go on alone

Can't reach the vendor's site

Try againCarry on without it

Tell Claude

Tap the prompt to copy it.

The one to remember

Don't just spin. Say what's happening.

See it move in the playbook

WaitingW4

How long will it take?

Usually 5 to 10 minutes

Running for 2 minutes so far.

How long will it take?W4

People want to know how long, but a false number breaks trust. Say only what you can stand behind.

When to use

Any job longer than a few seconds.

Common mistake

Showing a percentage that nothing really measures.

What honest time looks like

You knowGive a range

Usually 5 to 10 minutes

Running for 2 minutes so far.

You don'tShow what it is doing

Running for 2 minutes

Reading vendor quotes.

AvoidIf nothing measures it, it will be wrong

97% complete

About 1 minute left.

Tell Claude

Tap the prompt to copy it.

The one to remember

A false number breaks trust.

See it move in the playbook

Discovering

While it works Read the full entry →

DiscoveringD1

Should the agent speak up?

Our proposal Not yet tested with real people.

18 of these contracts have ended

You may not want to send them this update.

Leave out the 18Keep them in

Should the agent speak up?D1

An agent sees a lot while it works. Not everything deserves the person's attention. A useful test: would knowing this change what they want done?

When to use

When an agent may notice something outside its job.

Common mistake

Alerting people about everything. They may stop noticing the ones that matter.

What each size looks like

BigChanges the result. Say it now.

18 of these contracts have ended

Writing carries on. Sending waits for you.

Leave out the 18Keep them in

UsefulCan wait for a good moment

Separate from your request

40 buttons have low contrast. Not changed.

Save for laterFix them too

SmallDon't interrupt. Just note it.

Sent to 200 clients

Also noticed: 1 name may have a typo.

Tell Claude

Tap the prompt to copy it.

The one to remember

Would it change the job? Speak up.

See it move in the playbook

DiscoveringD2

Why does this finding matter?

Our proposal Not yet tested with real people.

18 of these contracts have ended

You may not want to send them this update.

Why does this finding matter?D2

A finding on its own makes someone do more work. Connect it to the job they asked for, and say what happens now.

When to use

Whenever the agent raises something it found.

Common mistake

Reporting a fact, and leaving people to work out why it matters.

What a useful finding looks like

DoWhat, why, what now, what they can do

18 of these contracts have ended

You may not want to send them this update. Sending waits for you.

Leave out the 18Keep them in

AvoidSo what? They have to work it out.

Note

18 records have an end date before today.

Tell Claude

Tap the prompt to copy it.

The one to remember

Say what it means for this job.

See it move in the playbook

DiscoveringD3

When should it interrupt?

Our proposal Not yet tested with real people.

Found something before sending

18 of the 200 contracts have ended. The rest is ready.

Review

When should it interrupt?D3

When you interrupt can matter as much as what you say. Prefer a natural break, and don't wait so long that it is too late.

When to use

Once you know a finding is worth saying.

Common mistake

Raising a finding after the step it affects has already happened.

What good timing looks like

Before the stepThe latest it can be

Found something before sending

18 of the 200 contracts have ended.

Review

At a breakBetween steps or at the end

Separate from your request

40 buttons have low contrast. Not changed.

Save for laterFix them too

Tell Claude

Tap the prompt to copy it.

The one to remember

Before the step it affects, at the latest.

See it move in the playbook

DiscoveringD4

Can the rest keep going?

Our proposal Not yet tested with real people.

Writing carries on

Only sending waits for your answer.

Can the rest keep going?D4

Hold only what the finding affects, so one question doesn't stall a whole job. Safe work like reading and drafting can carry on.

When to use

Any time the agent needs an answer mid-job.

Common mistake

Stopping everything for one question.

What keeps moving

Carries onSafe work

Writing the update

Reading and drafting carry on.

WaitsOnly the affected step

Sending waits for your answer

Nothing goes out until you decide.

AvoidSafe work waits for no good reason

Task paused

Answer this question to continue.

Tell Claude

Tap the prompt to copy it.

The one to remember

Hold only what it affects.

See it move in the playbook

Approving

When it needs the person Read the full entry →

ApprovingA1

When should it ask first?

Pay Sharma Prints ₹18,500?

For invoice 204

Pay ₹18,500Don't pay

When should it ask first?A1

List everything the agent can do, then sort it by how hard it is to take back. Stopping for everything may teach people to stop reading.

When to use

Before you design any approval screen.

Common mistake

Asking about everything. People may stop reading and just press yes.

What each pile looks like

Easy to take backJust do it

Read 6 invoices

Nothing was changed.

Small changeDo it, then tell them

Saved a draft payment

Nothing has been paid yet.

See the draft

Hard to take backStop and ask

Pay Sharma Prints ₹18,500?

For invoice 204

Pay ₹18,500Don't pay

Tell Claude

Tap the prompt to copy it.

The one to remember

Hard to take back? Ask first.

See it move in the playbook

ApprovingA2

What do they need to see?

Pay ₹18,500 by UPI?

To Sharma Prints. New UPI ID: last month's payment went to a different one.

What do they need to see?A2

Ask: what would they need to see to say "wait, that's wrong"? Show that on the same screen, and point out anything unusual.

When to use

Every time the agent asks for approval.

Common mistake

Asking for blind trust, or making a risky request look like a routine one.

What a good request looks like

DoWho, how much, and what is unusual

Pay ₹18,500 by UPI?

To Sharma Prints, invoice 204. New UPI ID: last month's payment went to a different one.

AvoidNothing here helps catch a mistake

Allow this action?

The agent wants to use the payment tool.

Tell Claude

Tap the prompt to copy it.

The one to remember

Show what would catch a mistake.

See it move in the playbook

ApprovingA3

What should the button say?

Pay Sharma Prints?

Pay ₹18,500Check with vendor first

What should the button say?A3

A button should still make sense if it is the only thing someone reads. The main button repeats the action, and the other is a real alternative.

When to use

Every button on an approval screen.

Common mistake

Using vague buttons like Approve and Cancel.

What clear buttons look like

DoThe button says what will happen

Pay Sharma Prints?

Pay ₹18,500Check with vendor first

AvoidDoes Cancel stop the payment?

Are you sure?

ApproveCancel

Tell Claude

Tap the prompt to copy it.

The one to remember

Name the button after the action.

See it move in the playbook

Interrupting

When it needs the person Read the full entry →

InterruptingI1

What does Stop actually do?

Stopped at 66 of 200

134 not sent. Your draft is kept.

What does Stop actually do?I1

Stop can mean several different things, and real products differ. Choose one, and tell people which it is.

When to use

Any job someone can stop.

Common mistake

Leaving people to guess what Stop will do.

What each kind of Stop looks like

Stop and keepHalts now. Earlier work stays.

Stopped

Your earlier work is kept.

Finish, then stopSafer for half-done actions

Finishing this step, then stopping

This keeps the record complete.

Stop and put backOnly if it really can

Stopped and put back

Your file is as it was before.

Tell Claude

Tap the prompt to copy it.

The one to remember

Decide what Stop means, then say it.

See it move in the playbook

InterruptingI2

Can they stop it right now?

Sending to 200 clients

64 sent so far.

Stop

Can they stop it right now?I2

Someone pressing Stop may be in a hurry. Keep it in view for the whole job, respond at once, and don't ask "Are you sure?"

When to use

Any job that keeps going by itself.

Common mistake

Hiding Stop in a menu, or asking them to confirm it.

What a good Stop looks like

Always in viewNot in a menu

Sending to 200 clients

64 sent so far.

Stop

Responds at onceIt shows it heard them

Stopping...

66 of 200 sent.

AvoidThe damage carries on while they answer

Are you sure you want to stop?

Emails keep sending while you decide.

Tell Claude

Tap the prompt to copy it.

The one to remember

Always in view. Answers at once.

See it move in the playbook

InterruptingI3

What can't be stopped?

Stopping

6 emails were already on their way.

What can't be stopped?I3

Some actions can't be called back once they have started. Find them before you promise anything, and say so when it happens.

When to use

Any job that sends, pays or publishes.

Common mistake

Pretending everything stopped when some of it had already gone.

What honesty looks like

Can stop at onceNothing has left the building

Stopped writing drafts

Nothing has been sent.

Already on its waySay so, with the number

Stopping

6 emails were already on their way.

AvoidLater reports get hard to believe

All sending stopped

Later: 6 more emails arrive.

Tell Claude

Tap the prompt to copy it.

The one to remember

Be honest about what is already gone.

See it move in the playbook

InterruptingI4

What should it say after Stop?

Stopped at 66 of 200

Sent: 66, can't be recalled. Not sent: 134.

Send the other 134

What should it say after Stop?I4

"Stopped" isn't enough. Sort the report by what the person can still do something about, and offer the next step.

When to use

Right after any job stops.

Common mistake

Just saying "Stopped", or making them start a new task.

What a useful report looks like

DoWhat is gone, still open and safe

Stopped at 66 of 200

Sent: 66, can't be recalled. Not sent: 134. Kept: your draft and client list.

Send the other 134

AvoidWas anything sent? Was anything lost?

Stopped.

Tell Claude

Tap the prompt to copy it.

The one to remember

Say what's gone, open and safe.

See it move in the playbook

Recovering

After it finishes Read the full entry →

RecoveringR1

Who can fix this?

The email service is still down

60 emails have not gone out.

Try again laterStop here

Who can fix this?R1

Not every failure needs a person. Bring them in only when they have a real decision to make.

When to use

For each way the job could fail.

Common mistake

Interrupting people about problems the agent could fix by itself.

What each kind of failure looks like

Agent can fix itRetry, and add a small note

Sent to 200 clients

Note: 1 brief network problem, retried.

Person must decideOffer real choices

The email service is still down

Try again laterStop here

Can't be fixedSay so. Offer a next step.

That email was already sent

Write a correction

Tell Claude

Tap the prompt to copy it.

The one to remember

Only ask when there's a real choice.

See it move in the playbook

RecoveringR2

What should it say first?

140 sent. 60 did not go out.

The email service stopped responding.

Retry the 60

What should it say first?R2

People fear the worst when something fails. Lead with what worked and what is safe, then give the plain reason, without an error code.

When to use

Any time something fails.

Common mistake

Showing a vague error. Trying again might send it twice.

What a good failure message looks like

DoWhat worked, what didn't, why, what is safe

140 sent. 60 did not go out.

The email service stopped responding. Your draft and client list are safe.

AvoidDid anything get sent?

Something went wrong.

Error 503. Please try again.

Tell Claude

Tap the prompt to copy it.

The one to remember

Start with what worked.

See it move in the playbook

RecoveringR3

How do you keep the work?

140 sent. 60 failed.

Retry the 60

How do you keep the work?R3

A failure in step 8 shouldn't throw away steps 1 to 7. Decide how to keep work, and how to avoid doing things twice.

When to use

Any job with more than one step.

Common mistake

Making people start over, so finished work is wasted or done twice.

What keeping the work looks like

Retry what failedName the amount

140 sent. 60 failed.

Retry the 60

Save the restA failed try isn't wasted

Saved as a draft

Everything so far is kept.

Avoid140 people may get the email twice

It failed.

Start again

Tell Claude

Tap the prompt to copy it.

The one to remember

Retry only what failed.

See it move in the playbook

RecoveringR4

What can undo really reach?

Undo restores your draft

It can't unsend the 140 emails.

What can undo really reach?R4

Real products document limits, but people may not read them. Put the limit where they are deciding, not in a help page.

When to use

Anywhere you offer undo.

Common mistake

Promising more than undo can really do.

What honest undo looks like

Usually restorableDrafts, files, settings

Restore the last version?

Restore

Out in the worldSent messages and payments

Undo restores your draft

It can't unsend the 140 emails.

AvoidThey will find out later

Undo all changes

Everything will be restored.

Tell Claude

Tap the prompt to copy it.

The one to remember

Say the limit where they decide.

See it move in the playbook

Any moment

All through the job

Any moment+1

What if it goes off plan?

Nobody answered

Safe work is finished. It will not assume yes.

What if it goes off plan?+1

Most of the design work is in the cases people forget. For every moment, plan what happens when things don't go as expected.

When to use

For every moment in this deck.

Common mistake

Designing only the path where everything goes right.

What the forgotten endings look like

They say noKeep the earlier work

Not paid

Earlier work is kept. Invoice 204 is still open.

Nobody answersNever assume yes

Still waiting for your answer

Safe work is finished.

The retry failsDon't loop forever

Stopped after 3 tries

Your last working version is safe.

Tell Claude

Tap the prompt to copy it.

The one to remember

Plan every ending, not just yes.

Read the playbook

Any moment+2

What should move?

Comparing 12 quotes

It only moves while work is really happening.

What should move?+2

Movement says "alive", so each movement should answer a question. It should also make sense with animation turned off.

When to use

Any time you add animation.

Common mistake

Animating to look busy when no work is happening.

What motion should mean

WorkingMoves only while work happens

Comparing 12 quotes

StoppedMovement ending is the reassurance

Stopped at 66 of 200

The count has stopped moving.

FailedNo shaking or flashing red

140 sent. 60 did not go out.

Calm, and clear about what is safe.

Small noteNo movement at all

Also noticed: 1 typo

Tell Claude

Tap the prompt to copy it.

The one to remember

If it moves, it should mean something.

Read the playbook