AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Outputs

Skeleton Screens

Show the shape of what is coming (bubbles, cards, charts) while generation runs. Layout appears before final tokens, so the wait feels shorter.

Interactive demo

Compare our top three competitors on pricing and positioning.
Loading

Overview

How might we design skeleton screens so people can trust and act on AI output?

When to use

  • Ideal for AI apps with longer generation times, where a structure-matched loading state reduces perceived latency and sets expectations.

When to skip

  • Sub-200ms responses where skeletons flicker uselessly.
  • Unknown output shapes that would make a fake skeleton misleading.
  • Voice-only modes where visual skeletons do not apply.

Rules

  • Spinners with blank layout instead of content-shaped placeholders.

  • Skeletons that do not match the final layout, causing jumpiness.

  • Leaving skeletons on screen after content failed.

  • Animating so aggressively that accessibility suffers.

Evidence

ProductImplementation
LinearContent-shaped loading placeholders in app views.
NotionBlock skeletons while AI or pages load.
Vercel / Next.js appsRoute and streaming skeletons for AI UIs.
ChatGPTStreaming placeholders as answers begin.

FAQ

When should AI UIs use skeletons vs streaming text?

Stream text when the answer is prose. Use skeletons for cards, tables, or multi-panel layouts that are not token-shaped.

Do skeletons replace progress steps?

No. Skeletons show layout; progress steps explain tool work. Use both for agent runs.

How do you avoid layout shift?

Match skeleton dimensions to the likely final component, then morph into real content.

What if generation fails?

Replace skeletons with an error state and retry. Never freeze on gray bars.