FG—01AI Design Field Guide

Search the field guide

Search chapters, principles, patterns, worksheets, and glossary terms

PTN—19

Stage and Conversation

Split the interface into a persistent workspace for the work and an adjacent chat for directing it.

Chat is a great steering wheel and a lousy workbench. The stage-and-conversation layout accepts both facts: the work — a document, a codebase, a design, a spreadsheet — holds the primary surface with full direct-manipulation editing, while the conversation runs alongside as the channel for instructions, questions, and narration. Neither pretends to be the other, and the person moves between talking about the work and just doing it.

The pattern’s real product is shared context. Because the stage is visible to both parties, the conversation can be deictic: “make this section shorter” resolves against the current selection instead of a paragraph of description. Every AI-native editor that works — Cursor’s editor-plus-chat, canvas modes in the major assistants — earns its fluency from this shared frame. Chat-only tools force people to describe what a pointer could simply indicate.

The design risk is divided attention. Two live regions compete for focus, and changes appearing on the stage while the user reads the chat can go unnoticed or feel unauthorized. The stage must signal what the AI changed — highlights, diff marks, pending states — and the conversation must reference stage locations concretely. When the two panes stop pointing at each other, the layout decays into two apps taped together.

When to use

Design considerations

Pitfalls

In the wild

Cursor
The editor is the stage and the chat pane directs it — the agent’s edits land as reviewable diffs in the code, referenced from the conversation.
ChatGPT
Canvas puts the document or code in an editable primary pane with the chat alongside; both the person and the model edit the same surface.
Claude
The artifact panel functions as a stage: the conversation revises the object in place while the person reads and copies from it directly.
Figma
AI features operate on the canvas itself — generated and edited layers appear in the working file, with the prompt UI subordinate to the design surface.

Principles served

Discussed in the guide