Design Atlas
한국어
✧ AI interface patterns

Empty prompt state

빈 대화 시작 화면

The first screen before any conversation exists, showing example prompt cards to tap instead of a blank page.

Also known as: Starter promptsEmpty chat stateConversation zero state
···
html
<div class="es">
  <div class="mark"></div>
  <h3>무엇을 도와드릴까요?</h3>
  <div class="grid">
    <button class="card" data-i="0"><span>이 계약서에서<br>위험 조항 찾기</span></button>
    <button class="card" data-i="1"><span>발표 대본<br>더 간결하게 다듬기</span></button>
    <button class="card" data-i="2"><span>버그 원인<br>같이 찾아보기</span></button>
  </div>
</div>
css
.es{width:100%;height:100%;display:grid;place-items:center;gap:12px;padding:16px;text-align:center}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
h3{margin:0;font-size:14px;color:var(--fg)}
.grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:300px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:10px 12px;font-size:10.5px;line-height:1.4;color:var(--muted);cursor:pointer;transition:transform .15s,border-color .15s,color .15s;width:130px}
.card[data-active]{transform:scale(.95);border-color:var(--accent);color:var(--accent)}
js
const cards = [...document.querySelectorAll('.card')];
let i = 0;
setInterval(() => {
  cards.forEach((c) => c.removeAttribute('data-active'));
  cards[i % cards.length].setAttribute('data-active', '');
  setTimeout(() => cards[i % cards.length].removeAttribute('data-active'), 500);
  i++;
}, 1600);

An empty input box alone leaves people unsure what's even allowed to ask. Showing a handful of concrete example prompts on the first screen lets someone tap one to send it as the first message, or at least get a feel for "oh, this is the kind of thing it's for."

Generic copy ("Ask me anything") does far less work than a specific, plausible sentence ("Find risky clauses in this contract"). Picking examples that overlap with the tool's actual strengths also quietly explains what the product is for, right at first impression.

Tapping a card sends it as the conversation's first message, and the empty state gives way to the normal chat screen. It looks similar to suggestion chips, but chips propose a "next" after a conversation is already underway, while this proposes a "first" before one has started at all.

When to use

Use it on the first screen of a general-purpose conversational tool where the user has to decide what to even ask. Less needed for a single-purpose tool whose use is already obvious, like a pure translator.