What designing for AI agents means
Products increasingly have two audiences: humans who interact through visual interfaces, and AI agents that act on behalf of users — booking travel, comparing products, filling forms, extracting data, completing workflows. This is not a future scenario; it's happening now. AI assistants browse websites, agents execute multi-step workflows, and automated systems consume APIs and parse interfaces to complete user-delegated tasks.
Designing for AI agents doesn't mean abandoning human-centered design. It means extending it to include a new kind of user — one that reads structure instead of visuals, acts on semantics instead of aesthetics, and needs predictable patterns instead of delightful surprises. The good news: many agent-friendly design practices (clean markup, structured data, consistent patterns, clear state management) also improve accessibility, SEO, and API quality. The challenge: when human and agent needs conflict, designers must navigate trade-offs deliberately.
Agents vs. AI-powered features
UX.3.01 (AI for Designers) covers designing AI-powered features in your product — chatbots, recommendations, smart actions. This topic covers a different challenge: designing your product so that external AI agents can interact with it as users. The first is about embedding AI; the second is about being consumed by AI.
Dual-audience design
Dual-Audience Design Framework Core Method
Use when: your product needs to serve both human users navigating visually and AI agents parsing structurally.
Dual-audience design operates on two layers simultaneously. The human layer is visual, emotional, and exploratory: layout, hierarchy, delight, progressive disclosure, motion, and the full toolkit of UX craft. The agent layer is structural, semantic, and task-oriented: clean HTML markup, structured data (schema.org, JSON-LD), consistent patterns, predictable state transitions, and machine-readable labels. For each feature, ask four questions: Can a human complete this task through the interface? Can an agent complete this task through the structure? Does optimizing for one audience degrade the experience for the other? Where should handoffs between agents and humans occur? Where the layers reinforce each other: Well-structured semantic HTML serves both screen readers and agents. Clear labeling helps both confused humans and parsing algorithms. Consistent patterns help both new users learning the interface and agents building reliable automations. Where they conflict: Dynamic, JavaScript-heavy interfaces may delight users but be opaque to agents. Visually rich product tours help humans learn but block agents from reaching tasks. CAPTCHAs protect against bots but also block legitimate agents acting on behalf of users.
Agent-readable interface patterns
Agent-Readable Interface Patterns Core Method
Use when: making your product's interface parseable and actionable by AI agents.
Agents interact with products through structure, not pixels. Design patterns that support agent interaction: Semantic markup: Use HTML elements that convey meaning — <nav>, <main>, <article>, <button>, <form> — not generic <div>s with visual styling. Agents parse the DOM; semantic elements tell them what each part does. Structured data exposure: Add schema.org markup for products, prices, availability, reviews, events, and other structured content. This makes your content machine-readable without changing the visual interface. Consistent action patterns: Use standardized form patterns, consistent button labeling, and predictable state transitions. An agent that learns to complete checkout on your site should be able to complete a similar checkout after a redesign. Stable selectors: Use meaningful IDs and data attributes (data-action="add-to-cart", data-product-id="12345") that agents can target reliably. Avoid auto-generated class names that change with each build. Clear state communication: Make loading, error, success, and empty states distinguishable in markup, not just visually. Agents need to know if a page is still loading or if the result set is actually empty.
Human-AI handoff design
Human-AI Handoff Design Core Method
Use when: designing the transition points where AI agents need human input, approval, or intervention.
Not every task should be fully automated. Handoff design determines where agents operate autonomously and where humans intervene. Handoff triggers: Define clear conditions for agent-to-human handoffs: ambiguous choices (the agent found three similar products and can't determine the user's preference), high-stakes decisions (purchase above a threshold, irreversible actions), authentication requirements (CAPTCHA, biometric verification), and subjective judgment (selecting a gift, choosing a restaurant). Handoff quality: When an agent hands off to a human, it should transfer context — what it's tried, what it's found, and what decision it needs. A good handoff feels like a helpful colleague saying "I've narrowed it down to these three options and here's why" rather than starting the human from scratch. Human-to-agent return: After human intervention, the agent should be able to resume. This means preserving state: the human's selection, any form data entered, the current position in a multi-step flow. Design for round-trip interaction, not one-way handoffs. Trust calibration: Let users set their agent's autonomy level — "book anything under $200 automatically, ask me for anything above" — and show audit trails of agent actions so users can adjust trust over time.
Agent task completion testing
Agent Task Completion Testing Core Method
Use when: evaluating whether AI agents can successfully complete tasks in your product.
Agent testing is a new dimension of quality assurance. Task inventory: List every task a user might delegate to an agent — search, compare, purchase, fill a form, extract data, complete a workflow. Prioritize by frequency and delegation likelihood. Agent testing protocol: For each task, test with multiple AI agents (browser-based agents, API-based agents, different LLM providers) to identify where agents succeed, struggle, or fail entirely. Common failure points: dynamic content that loads after initial page render, CAPTCHAs and bot detection, non-standard form patterns, and ambiguous action labels. Success metrics: Task completion rate (percentage of tasks an agent can finish without human intervention), error rate (how often agents take wrong actions), time-to-completion (agent efficiency compared to human), and recovery rate (how often agents can recover from errors). Regression testing: Include agent task completion in your release testing checklist. A UI redesign or markup change that breaks agent interaction may be undetectable by visual QA.
Collaborative actor mapping
Collaborative Actor Mapping Framework
Use when: designing experiences where multiple actors — humans, AI agents, automated systems — participate in the same workflow.
Traditional user flows show one actor (the user) interacting with one system (your product). Agent-mediated experiences involve multiple actors with different capabilities. Map them: Human user: Makes subjective decisions, provides preferences, approves high-stakes actions, handles edge cases. User's AI agent: Executes routine tasks, compares options, fills forms, monitors for changes. Acts within the user's delegated authority. Product's AI system: Your product's own AI — recommendations, personalization, automated responses. Product's human support: Customer service agents who handle escalations. The map: For each workflow step, identify which actor(s) participate, what they need to complete their part, and where handoffs occur. Then design the interfaces, APIs, and state management to support all actors. This is service design expanded to include machine actors — the same discipline, a wider cast.
Real-world examples
Case study
Airline booking: agents as power users
Travel booking is one of the first domains where AI agents are acting on behalf of users at scale. Airlines that structured their booking flows with clean, semantic HTML, predictable form patterns, and machine-readable pricing data (schema.org/Flight) found that AI agents could search, compare, and book flights reliably. Airlines with heavily JavaScript-dependent interfaces, dynamic pricing that only rendered client-side, and inconsistent form structures saw agents fail frequently — leading to user frustration directed at the airline, not the agent.
Why it matters: When an agent fails on your product, users blame your product — not the agent. Agent-friendliness is becoming a competitive advantage in high-delegation categories.
Case study
API-first products: agent-native design
Products like Stripe, Twilio, and Notion designed API-first, with human interfaces as one consumption layer. This architecture is inherently agent-friendly: well-documented APIs with consistent patterns let agents interact programmatically while humans interact visually, both working with the same underlying data and capabilities. The lesson: products that separate their capability layer (API) from their presentation layer (UI) are automatically better prepared for agent interaction.
Why it works: API-first architecture doesn't require agents to parse HTML — they interact with clean, documented interfaces designed for programmatic consumption.
Common pitfalls
Treating agents as threats
Not every automated interaction is a bot attack. Users increasingly delegate legitimate tasks to AI agents. Blocking all automated access with aggressive bot detection prevents users from using your product in the way they want. Design nuanced access policies: block malicious scraping, allow authenticated agent interaction on behalf of verified users.
Designing only for today's agents
Agent capabilities are improving rapidly. An interface that today's agents can't handle may be trivial for next year's agents. Don't over-invest in workarounds for current agent limitations. Instead, invest in structural quality (semantic markup, clean APIs, consistent patterns) that serves both current and future agents.
Forgetting the human
In the rush to be agent-friendly, don't degrade the human experience. An interface optimized for machine parsing at the expense of visual clarity, delight, and human usability has missed the point. Dual-audience design means serving both audiences well, not sacrificing one for the other.
Connected topics in your library
Cross-discipline connections
PM.3.01 AI Product Management covers when to build for agent interaction and agent task completion metrics. CS.2.02 Content for AI Systems covers structuring content so AI agents can parse and act on it. MK.3.01 AI in Marketing covers how AI agents change discovery and positioning.