Skip to content
Course · Shipping AI interfaces

The anatomy of an AI answer

An AI answer is not a paragraph that happens to be generated — it is a surface with parts: the thinking state, the streaming body, the citations, the actions, and the honesty line. Naming the parts is the first step to designing them.

Beginner1 min read (computed · recorded 3)updated 2026-09-14aichatdesigncourse

by Motif Editors

revised 2026-09-14First publication in the bank-4 AI-interface curriculum.

Part 1 of 15 in Shipping AI interfacesStreaming, done honestly

Key takeaways
  • An answer has five parts: state, body, sources, actions, honesty — design all five, not just the text.
  • The parts appear at different moments; each moment is a design decision.
  • Every part that pretends to be more than it is becomes a trust leak.

Five parts, five decisions

Strip an AI answer down and five parts survive. The state that precedes it — thinking, streaming, finished — each state needs its own honest visual. The body itself: text, code, lists, and the rhythm of a streaming reveal. The sources: citations that let a reader check the claim. The actions: copy, retry, dislike, each announcing what it actually did. And the honesty line: the note that generated content may be wrong.

None of these are decoration. A user who cannot tell thinking from finished will double-click; a user who cannot check a source will trust less, not more. The parts are the product.

Design the moments, not the text

An answer is a sequence of moments — the dots appear, the first tokens land, the sources stack up, the actions light up. Each moment is a separate design decision, and they should be designed in order: what does the user believe at each one? A calm thinking state sets a different expectation than a frantic spinner.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

The component this essay works with — mounted, not pictured
Response Actions
A theme is a token remap: keep the intent names, invert the scale, and the components follow without a single hex flip.

Actions are local — nothing is posted.