aiux
PatternsPatternsCoursesCoursesNewsNewsResourcesResources
Previous: Autonomy SpectrumNext: Plan Summary
Human-AI Collaboration

Intent Preview

Before any significant action, the agent presents a clear, scannable summary of what it intends to do - showing planned steps, reversibility status, and edit controls for user approval.

What is Intent Preview?

The Intent Preview pattern addresses a core anxiety in agentic AI: users need to understand what will happen BEFORE it happens. Unlike traditional AI where the user explicitly types a prompt and evaluates the response, agentic actions may be initiated proactively or involve consequences that are difficult to reverse - sending emails, booking flights, modifying files. This pattern shows a clear, scannable summary of planned actions using plain language (not technical jargon), with each step marked for reversibility and editable by the user. The preview must be sequential for multi-step operations, highlight irreversible actions visually, and never auto-dismiss. This transforms the approval moment from a binary yes/no into a structured review that builds trust and catches misunderstandings before they cause harm.

Problem

When an agent is about to take a multi-step action, users need to understand what will happen before it happens. Without an intent preview, users experience anxiety leading to constant monitoring or blind trust that erodes at the first mistake.

Solution

Before any significant action, present a clear, scannable preview showing planned steps in plain language, with reversibility indicators, edit controls for individual steps, and explicit approve/reject buttons. Never auto-dismiss the preview.

Real-World Examples

Implementation

AI Design Prompt

Guidelines & Considerations

Implementation Guidelines

1

Use progressive disclosure within the preview itself - show the summary first ('3 actions planned'), let users expand for detail.

2

Highlight irreversible actions visually with different color or warning icon. Sending an email deserves more visual weight than drafting a document.

3

Include a time estimate. 'This will take approximately 2 minutes' sets expectations for multi-step operations.

4

For recurring tasks, offer 'always approve this type' to graduate to higher autonomy over time.

5

Never auto-dismiss a preview. The user must explicitly approve, even if it's just a single tap.

6

Make individual steps editable - users should be able to modify, reorder, or remove steps, not just approve or reject the entire plan.

7

Use plain language descriptions, not technical jargon. Show 'Cancel your flight to San Francisco' not 'Execute cancel_booking(id: 4A7B)'.

Design Considerations

1

Preview-to-approval rate: how often users approve without modifications indicates preview quality

2

Preview-to-edit rate: how often users modify the plan indicates the preview caught misunderstandings

3

Preview skip rate: if users start skipping previews, consider graduating them to higher autonomy

4

Balancing preview frequency with user fatigue - not every action needs a full preview

5

Determining the right level of detail for each action type to avoid information overload

6

Ensuring the preview accurately reflects what will happen to maintain trust

7

Supporting both quick-scan and deep-review modes for different user contexts

Frequently Asked Questions

What is Intent Preview?

The Intent Preview pattern addresses a core anxiety in agentic AI: users need to understand what will happen BEFORE it happens. Unlike traditional AI where the user explicitly types a prompt and evaluates the response, agentic actions may be initiated proactively or involve consequences that are difficult to reverse - sending emails, booking flights, modifying files. This pattern shows a clear, scannable summary of planned actions using plain language (not technical jargon), with each step marked for reversibility and editable by the user. The preview must be sequential for multi-step operations, highlight irreversible actions visually, and never auto-dismiss. This transforms the approval moment from a binary yes/no into a structured review that builds trust and catches misunderstandings before they cause harm.

When should I use Intent Preview?

Before any significant action, present a clear, scannable preview showing planned steps in plain language, with reversibility indicators, edit controls for individual steps, and explicit approve/reject buttons. Never auto-dismiss the preview.

What problem does Intent Preview solve?

When an agent is about to take a multi-step action, users need to understand what will happen before it happens. Without an intent preview, users experience anxiety leading to constant monitoring or blind trust that erodes at the first mistake.

Check if your product already has this pattern

Upload a screenshot. We'll tell you which of the 36 patterns your AI interface uses and where the gaps are.

Audit My Design

More in Human-AI Collaboration

Contextual Assistance

Offer timely, proactive help and suggestions based on user context, history, and needs.

Human-in-the-Loop

Balance automation with human oversight for critical decisions, ensuring AI augments human judgment.

Augmented Creation

Empower users to create content with AI as a collaborative partner.

Practice in Courses

Claude Code

Claude Code Course for Designers

23 lessons — free course

Cursor

Cursor Course for Designers

12 lessons — free course

Want More Patterns Like This?

Daily AI UX news and new pattern breakdowns, straight to your inbox. Unsubscribe anytime.

Daily AIUX news. Unsubscribe anytime.

Previous PatternAutonomy SpectrumNext PatternPlan Summary

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.

Used by:
Claude
Claude
GitHub
GitHub

Agent Action Plan Preview

An interactive preview of planned agent actions with reversibility badges, edit controls, and approve/reject flow.

Toggle to code view to see the implementation details.

Works with:
Figma
Figma
Uizard
Uizard
Cursor
Cursor
Claude
Claude
Gemini
Gemini
G
Galileo AI

Design an AI agent interface that shows a plan preview before taking action. Include: (1) A task description showing what the user asked, (2) A sequential step list showing 3-5 planned actions with plain-language descriptions, (3) Visual indicators marking reversible vs. irreversible actions (green vs. amber), (4) Edit controls for each step (modify, remove, reorder), (5) Approve/Reject buttons with a 'Always approve this type' checkbox, (6) An estimated time indicator. Style: Clean, trustworthy, minimal anxiety. Use clear visual hierarchy to draw attention to irreversible actions.

Customization Tips

  • •Use green badges for fully reversible actions and amber/orange for irreversible ones to create an immediate visual risk hierarchy
  • •Show the step number and total count (Step 2 of 4) so users can gauge how far along the plan is
  • •Add a subtle collapse/expand animation for step details to reinforce progressive disclosure
  • •Include drag handles for reordering steps, but keep them subtle until hovered
  • •Place the Approve button as a primary CTA and Reject as a secondary - the flow should encourage forward motion
  • •Consider a 'dry run' option that simulates the actions without committing them
How to use this prompt

In Figma Make:

  1. Open Figma and click the "Make" button in the toolbar
  2. Paste the prompt above into the input field
  3. Click "Generate" and refine as needed
  4. Customize the components to match your design system

In other AI design tools: Copy the prompt and use it in tools like Uizard, Visily, or Diagram.