AI workflows in 2026 stopped being one-shot prompts. The serious products move users through multi-step flows: ingest a source, reason over it, take an action, verify, and hand back. The design problem is no longer "what does the chat bubble say". It is "what does the workflow surface look like across five steps and two minutes of time".

This guide collects the eight workflow UX patterns the AY Design team has watched stabilise across leading AI products in 2026. Each pattern is named, mapped to a real product, and scored on four dimensions so you can grade your own build against the bar.

TL;DR, the eight patterns are progressive disclosure, generative preview, undo as default, citation-grounded outputs, two-track UI (autopilot plus copilot), interruptible streaming, structured output contracts, and human handoff with state preserved.

The 8 patterns: a brief overview

• Pattern 1, Progressive disclosure: workflow surfaces reveal complexity step by step, not all at once.

• Pattern 2, Generative preview: the workflow output renders live as the model generates it, not after.

• Pattern 3, Undo as default: every workflow step is reversible, with the undo control visible.

• Pattern 4, Citation-grounded outputs: every claim or change is tied to a source the user can drill into.

• Pattern 5, Two-track UI: the same workflow offers an autopilot path and a copilot path side by side.

• Pattern 6, Interruptible streaming: the user can interject during streaming output and steer the next token batch.

• Pattern 7, Structured output contracts: outputs land in a typed structure the rest of the product can consume.

• Pattern 8, Human handoff with state: workflows route to humans with full context preserved, not a clean slate.

Scoring matrix: rate your workflow on four dimensions

Score each pattern 1 to 5 on trust (does the user believe the workflow), control (can they steer it), speed (does it feel fast), and recovery (can they undo or escape). Sum out of 20.

1. Pattern 1, Progressive disclosure

Progressive disclosure is the design rule that workflows reveal complexity step by step, only when the user needs it. The first screen is one box and one button. The second screen reveals the plan. The third reveals the tool calls. Power users can pin every panel open; first-time users see one decision at a time.

v0 from Vercel is the cleanest consumer example. The empty state is a single prompt. The second screen reveals the generated component plus an inline chat. The third reveals routing, props, and integration surfaces. The user never sees a feature they have not yet needed, but every feature is one click away.

Design moves

• Empty state with one box, one verb.

• Reveal the plan after the first prompt.

• Hide tool calls behind a default-collapsed log.

• Power-user mode that pins every panel open.

• Onboarding nudges that teach the next layer of UI in context, not in a tour.

Trade-off: progressive disclosure can feel infantilising to power users. The two-track UI (pattern 5) is how you serve both audiences without compromising either.

2. Pattern 2, Generative preview

Generative preview is the rule that workflow output renders live as the model generates it, not after the stream finishes. The classic version is token-by-token streaming in chat UIs. The 2026 version is richer: live code rendering in Cursor, live UI rendering in v0 and Lovable, live spreadsheet population in agentic data tools.

The pattern solves the "wait, what is happening" anxiety that kills retention on slow workflows. A 20-second generation feels fast if the user sees output materialise from second 2. The same 20 seconds feels broken behind a spinner.

Design moves

• Stream output from the first available token or chunk.

• For non-text outputs, render partial state (skeleton UI, partial code, partial diff).

• Show "thinking" UI for the gap between submit and first chunk.

• Distinguish provisional output (still streaming) from final output (locked).

• For multi-step workflows, stream the plan first, then stream each step.

Reference: Cursor's Composer streams file edits as they generate, with the diff materialising line by line. Lovable streams the UI into a live preview pane. Both make multi-second workflows feel sub-second.

3. Pattern 3, Undo as default

Undo as default is the rule that every workflow step is reversible by default, and the undo control is visible without searching. Hidden undo functionality does not exist for most users, even when it technically works. The mental model "I can try anything because I can roll it back" is what unlocks experimentation.

Bolt and Replit Agent both implement strong undo. Every code change, deployment, and database migration lands as a checkpoint the user can revert from a one-click control. The checkpoint history is visible in the sidebar, not buried in a menu.

Design moves

• Checkpoint every workflow step automatically.

• Visible undo control adjacent to the step's output.

• Checkpoint history in a sidebar or timeline.

• For external actions (deploys, emails, payments), prefer "undo within X seconds" rather than no undo.

• For genuinely irreversible actions, require explicit confirmation and surface the reason undo is unavailable.

Honest trade-off: undo costs engineering, especially for distributed systems. The right scope is the workflow surface itself, not the entire backend.

4. Pattern 4, Citation-grounded outputs

Citation-grounded outputs tie every claim, decision, or generated artifact to a source the user can drill into. Perplexity is the canonical reference for research; the same pattern applies to any RAG product, any document generator, and any agentic workflow that synthesises across multiple inputs.

The mechanic is simple: every sentence, every code change, every data point links back to the chunk that grounded it. The discipline is harder: you have to design the retrieval and generation pipeline so the citations are real, not retrofitted.

Design moves

• Cite at the claim level, not the response level.

• Inline numbered citations with hover or drill-down preview.

• Distinguish high-confidence sources from low-confidence ones visually.

• For agentic workflows, cite tool call outputs alongside retrieval sources.

• Surface "ungrounded" generations as a distinct category the user can choose to trust or verify.

5. Pattern 5, Two-track UI

Two-track UI is the design pattern of offering an autopilot path and a copilot path through the same workflow. Autopilot means the user describes the goal and the system executes end to end. Copilot means the user drives each step and the system suggests. The same workflow should support both, often with a toggle visible at the top of the surface.

GitHub Copilot is the prototype. The same product offers inline suggestions (copilot) and agent mode (autopilot) on the same codebase, with a clear UI distinction. The user picks based on the task, not on a global setting.

Design moves

• Identify the autopilot path: one prompt, one outcome.

• Identify the copilot path: stepwise with suggestions.

• Expose a toggle at the workflow surface, not in settings.

• Maintain feature parity between modes where possible.

• For high-stakes workflows, default to copilot and let users escalate to autopilot.

6. Pattern 6, Interruptible streaming

Interruptible streaming is the rule that users can interject during streaming output and steer the next token batch without restarting the workflow. The vanilla ChatGPT pattern is "stop generating", which is the floor. The ceiling is "while it streams, type a correction and the model folds it in".

Claude Code implements this for multi-step plans: the user can type a correction mid-execution and the agent picks it up at the next step boundary. Replit Agent does the same for build workflows. The pattern compresses the iteration cycle from "wait, evaluate, redo" to "watch, steer, ship".

Design moves

• Visible "stop" control during streaming.

• Inline correction box that does not cancel the stream.

• For multi-step workflows, accept corrections at step boundaries.

• Show the corrected step distinctly so the user knows it was integrated.

• Keep partial output usable even after interruption.

7. Pattern 7, Structured output contracts

Structured output contracts are typed schemas the workflow output conforms to, so the rest of the product can consume it without parsing free text. The OpenAI Playground exposes JSON schema mode. The Vercel AI SDK exposes typed output through Zod schemas. Anthropic's tool use returns structured arguments. All of these are the same pattern: the model returns data the app can rely on.

For end-user UX, structured outputs matter because they unlock follow-on actions. A meeting agent that returns action items as a typed list can pipe them into a task tracker. A research agent that returns sources as typed objects can render them as cards. Free text cannot.

Design moves

• Define a schema for every workflow output the product will consume.

• Use the framework's structured-output primitive (Zod, Pydantic, JSON schema).

• Validate at the boundary and surface schema failures as named errors.

• Render structured outputs as rich UI (cards, lists, tables) not free text.

• Version the schema so the model can be upgraded without breaking the app.

8. Pattern 8, Human handoff with state preserved

Human handoff with state preserved is the rule that when a workflow escalates to a human, the human picks up with full context: the conversation, the plan, the tool calls, the partial outputs, and the reason for the escalation. The anti-pattern is the "here is a transcript, good luck" handoff that forces the human to re-read everything.

Granola implements this well for meeting workflows: when a user shares an AI-generated summary with a colleague, the summary includes the timestamp links, the source notes, and the user's edits, so the colleague can verify or extend without context loss. The same pattern applies to support workflows, sales workflows, and any agentic system that escalates to a human in the loop.

Design moves

• Bundle the conversation, plan, and tool calls into a handoff artifact.

• Name the reason for escalation at the top of the artifact.

• Surface the human's expected action ("verify the citation", "approve the deploy", "respond to the user").

• Allow the human to return control to the agent with their own context appended.

• Track handoff outcomes as product telemetry to find the workflows that escalate most.

Putting the patterns together: a worked example

Imagine an AI workflow that helps a product marketer turn a customer interview transcript into a landing page hero, three feature bullets, and a social post. The workflow has four steps: ingest the transcript, extract themes, draft the variants, and produce a typed bundle the rest of the app can use.

Pattern 1 (progressive disclosure) means the marketer sees one upload box on the empty state, the extracted themes after step 2, and the structured output only after step 4. Pattern 2 (generative preview) streams the hero, bullets, and social post into a live preview pane as the model writes them. Pattern 3 (undo as default) checkpoints each step so the marketer can roll back to "before social post" and try a different angle. Pattern 4 (citation-grounded outputs) ties every bullet to the timestamp in the transcript where the theme originated. Pattern 5 (two-track UI) lets the marketer flip between autopilot (one prompt, full bundle) and copilot (approve each step). Pattern 6 (interruptible streaming) lets them type "make the hero shorter" while the hero is still streaming and the model folds in the correction. Pattern 7 (structured output contracts) returns the bundle as a typed object the CMS, the social scheduler, and the analytics layer all consume. Pattern 8 (human handoff with state) routes the final bundle to a colleague for review with the source transcript, the structured edits, and a reason ("ready for legal sign-off") attached.

The workflow takes 45 seconds end to end. The same task with no UX investment is a paste-into-chat, wait, copy-out, repeat loop that takes ten minutes and produces output the rest of the stack cannot consume. Same model. Same prompts. Different product.

How to apply these patterns to your product

1) Which two patterns should you build first?

Patterns 2 (generative preview) and 3 (undo as default) have the largest impact on perceived speed and trust. If you are pre-launch, ship both before opening a beta. If you are in production, audit them first in your scoring matrix. Both have the highest activation impact for the lowest engineering cost.

2) Are you autopilot, copilot, or two-track?

Most teams start single-track and discover their power users want the opposite mode. Plan for two-track UX from the start, even if you ship one mode first. The toggle is cheaper to add at design time than to retrofit after users have learned the wrong default.

3) How structured do your outputs need to be?

If any downstream surface in your product depends on the workflow output, you need structured contracts (pattern 7). If everything is end-user-facing text, structured outputs are still worth it for analytics, but lower priority. The Vercel AI SDK's typed outputs and OpenAI's structured outputs are the cheapest paths to adoption.

4) Where does your workflow hand off to humans?

Every agentic workflow has an escalation point. Map it. Then design pattern 8 around it. Most teams skip this until the first ugly handoff fails publicly. Doing it on day one is cheaper than triage on day 90.

If you have mapped your workflow patterns but want a design partner to turn them into a shippable surface, that is what AY Design does. We build AI workflow UX that converts and earns trust, not just demos that look slick on Twitter. Book a design audit to see what to fix first.

FAQ

What is an AI workflow in product design?

An AI workflow is a multi-step product surface where an LLM (or agentic system) takes a user input, runs through plan, retrieval, generation, and action steps, and returns a result the user can verify or refine. Workflows are distinct from single-prompt chat UIs because they have intermediate state the user can see and steer. Cursor's Composer, v0's component generation, and Granola's meeting capture are canonical examples.

What is the difference between an AI workflow and an AI chatbot?

An AI chatbot answers one prompt with one response per turn. An AI workflow runs through multiple steps internally (planning, retrieval, tool calls, generation) and may take seconds to minutes to complete. Workflows need patterns like generative preview, interruptible streaming, and human handoff that chatbots do not.

What is progressive disclosure in AI UX?

Progressive disclosure is the design rule that the UI reveals complexity step by step rather than all at once. For AI workflows, this means the first screen is one prompt and one button, the second screen reveals the plan, and the third reveals tool calls and structured outputs. v0 and Lovable are strong references.

How do I design AI workflows with undo?

Checkpoint every workflow step automatically and surface a visible undo control next to the step's output. Bolt and Replit Agent both implement this for code, database, and deploy actions. For genuinely irreversible actions (external emails, payments), prefer "undo within N seconds" rather than no undo at all.

What are structured output contracts?

Structured output contracts are typed schemas the AI workflow output conforms to, so the rest of the product can consume it as data instead of free text. The Vercel AI SDK exposes typed outputs via Zod, OpenAI exposes JSON schema mode, and Anthropic returns structured tool call arguments. All three implement the same pattern.

Should I build an autopilot or copilot UI for my AI product?

Build a two-track UI that supports both. Autopilot is one-prompt-one-outcome, copilot is stepwise with suggestions. GitHub Copilot is the canonical example: the same product offers inline suggestions and agent mode on the same codebase, with a clear UI distinction. Users pick per task, not per global setting.

How do I show streaming AI output well?

Stream output from the first available token or chunk, render partial state for non-text outputs (skeleton UI, partial diffs, partial code), and distinguish provisional output from finalised output visually. Cursor and Lovable both make 20-second generations feel sub-second by streaming output immediately.

What is the best way to hand off an AI workflow to a human?

Bundle the conversation, plan, tool calls, and partial outputs into a handoff artifact, name the escalation reason, and surface the human's expected action. Granola's shareable meeting summaries are a strong consumer example. The anti-pattern is dumping a raw transcript and forcing the human to re-read everything.