Design Atlas✧AI interface patterns
Streaming responses, thinking indicators, citations, suggestion chips — UI patterns settling in across generative AI products. — 20 entries
Streaming response스트리밍 응답
Appending each token to the screen as it is generated, instead of waiting for the whole answer to finish.
Typing indicator타이핑 인디케이터
Three bouncing dots signaling the other side is "typing" before any response text has arrived.
Thinking indicator생각 중 인디케이터
A shimmering trace of the model's reasoning before the answer, collapsing into "Thought for N seconds" once done.
Suggestion chips제안 칩
Short pill-shaped buttons under a response that can be tapped to send them as the next message.
Citations인용 표시
Numbered inline markers that show a hover card with the source when pointed at.
Prompt input프롬프트 입력창
A chat text box that grows with the number of lines typed, with attach and send controls.
Regenerate다시 생성
A button that re-runs the same prompt to produce a fresh answer when the last one didn't land.
Response feedback응답 피드백
Thumbs-up/down icons under a response for lightweight quality feedback.
Tool call card도구 호출 카드
A collapsible card showing which function or API the model is calling, with what arguments, while it runs.
Agent status에이전트 상태 목록
A vertical list showing each step of a multi-step agent task as done, in progress, or pending.
Human in the loop휴먼 인 더 루프
A card that stops an agent before an irreversible action and requires explicit human approval or denial.
Confidence indicator신뢰도 표시
A small badge showing how confident the model is in an answer — high, medium, low.
Canvas artifact캔버스 아티팩트
A layout that keeps the conversation in a narrow left column and opens a long-lived, editable result — code, a document — in a wide panel on the right.
Diff review변경사항 검토
Shows a model's proposed edit as removed (red) and added (green) lines, acceptable or rejectable hunk by hunk.
Empty prompt state빈 대화 시작 화면
The first screen before any conversation exists, showing example prompt cards to tap instead of a blank page.
Model picker모델 선택기
A dropdown for choosing between models that trade off speed, quality, and cost, with each option briefly labeled.
Context window meter컨텍스트 윈도우 미터
A bar showing how close a conversation is to the model's context limit, turning to a warning color near capacity.
Stop generating생성 중단
A button that halts a response mid-stream, right where it currently is, whenever pressed.
Voice mode orb음성 모드 오브
A soft blob that ripples with audio amplitude, showing — without any text — whether it's listening or speaking.
Generative UI생성형 UI
Instead of plain text, the model assembles a structured interface — a card, a table, buttons — fitted to the answer itself.