CLAUDE · VISUAL UI A field study, in screenshots
Claude
renders.

Twenty scenarios where the chat stops being a transcript and becomes the answer itself.

Sirf jawaab nahi. Banaata hai.

v1.0 · ARNESH MANDAL · 2026.04.29
PREMISE
The chat is the entry point.
The answer is its own little app.
Claude is the bar.

We are building our own AI product. Every screenshot here was captured from a real Claude session. Text in. Custom UI out. The shape follows the data — maps for travel, charts for stats, cards for weather, MCQs for input, 3D scenes for physics. Each scenario gets its own grammar.

What follows is a tour of twenty such scenarios from a single afternoon.

01
What it does

Twenty capabilities, one chat surface. Each one earns its place by being the cleanest way to answer a particular question.

04 / CAPABILITY MAP

Twenty capabilities

Each card is a Claude behaviour, drawn from one afternoon of prompts.

01
Interactive 3D
Live Three.js scenes with shaders.
02
Maps & itineraries
Google Maps with location-anchored cards.
03
Data dashboards
Bar charts, comparisons, MVP cards.
04
Animated HTML
Typeset, CSS-animated artifacts.
05
Educational UI
Side-by-side comparison cards.
06
Editable artifacts
Recipes with adjustable serving sizes.
07
Interactive forms
Keyboard-navigable MCQs.
08
Information cards
Weather, stats, heatmaps as bound UIs.
09
Rendered diagrams
Flowcharts with branching logic.
10
Templated comms
Tabbed email composers, variant tones.
11
In-line consent
Permission UI before code runs.
12
Streaming output
Progressive generation, mid-stream.
13
Place search
Restaurants, trails, attractions on a map.
14
Live web search
Real-time facts and current data.
15
Image search
Inline image results, contextually placed.
16
Code execution
Python and bash in a sandbox.
17
File creation
Real .docx, .xlsx, .pptx, .pdf outputs.
18
Connectors
Gmail, Calendar, Drive, Slack, more.
19
Memory & projects
Persistent context across sessions.
20
Research mode
Multi-source reports with citations.
06 · EDITABLE ARTIFACTS
CASE 01
Closer to a small cooking app than a chat reply.

A ramen prompt returned an editable recipe artifact: ingredient list, numbered steps, and a serving-size input that recomputes the quantities. Change "4" to "6" and the ingredients update.

CLASSIC TONKOTSU · 12-HOUR BROTH · 4 SERVINGS
01 · INTERACTIVE 3D
CASE 02
Asked about a black hole.
Ran a shader.

A Three.js fragment shader was written and rendered in an interactive 3D viewer in the same turn. The viewer is stateful — camera angles persist, the scene keeps running, and the user can rotate around to see the disk from any angle.

SCENE: GRAVITATIONAL LENSING · ACCRETION DISK · LIVE
01 · INTERACTIVE 3D · CONT.
CASE 02 · CONT.
Code and output share the panel.

The shader source is visible and editable inside the chat. The artifact panel exposes the renderer, so the user can read it, learn from it, and modify it — not only see the output.

A SINGLE PROMPT · RUNNABLE CODE · LIVE UI · ONE ROUND-TRIP
Claude artifact panel showing shader code and live render
02 · MAPS & ITINERARIES
CASE 03
A travel prompt returned a navigation, not a wall of text.

Two artifacts that work together: a full-month itinerary with week-by-week cards, and a recommendation card listing curated stops. Both are anchored to a Google Map with pinned locations. Reading the plan is itself an act of navigation.

JAPAN · 30 DAYS · 4 BASES · 11 RECOMMENDATIONS
12 · STREAMING OUTPUT
CASE 04
Loading is a UI state.
Not an empty bubble.

The user sees the answer being built. A streaming preview of "Create the month-long autumn Japan trip plan as a markdown artifact" lands before the final UI does, with an explicit loading state in the chat.

RECOMMENDED ASSET · ANIMATED GIF · 3-5 SECONDS
Claude chat with streaming preview of the trip plan
03 · DATA DASHBOARDS
CASE 05
Structured data wants a dashboard.

An NBA recap prompt returned a sports analytics surface — team logos, final score, an MVP card, a quarter-by-quarter chart, comparison bars across categories. None of the visual structure was in the prompt. Claude inferred the right shape of the answer.

NYK 126 · ATL 97 · GAME 5 · APR 28, 2026
NBA game stats dashboard rendered by Claude
04 · ANIMATED HTML
CASE 06
HTML as a creative surface.

Asked for a poem about a rainy day, Claude produced a typeset HTML artifact with custom typography and atmospheric styling. A second variant added a CSS-driven rain animation. The same content rendered with two very different intents.

RECOMMENDED ASSET · GIF · LOOP THE RAIN
05 · EDUCATIONAL UI
CASE 07
Teaching is a UI problem.

A "what is a qubit" prompt turned into a comparison artifact: a coin lying flat for the classical bit, a coin spinning in the air for the qubit. A second view added a "Flip the bit" toggle and inline code. The UI is doing the teaching, not the paragraphs.

LIVE RECREATION · CLASSICAL BIT VS QUBIT · ANIMATED
Qubit comparison artifact
07 · INTERACTIVE FORMS
CASE 08
Even the question is UI.

When Claude needs information from the user to continue, it asks with a UI, not a question. Numbered options, a free-text fallback, keyboard navigation hints, a progress indicator. The MCQ is keyboard-first and lives inside the chat.

JAPAN TRIP PLANNING · QUESTION 1 OF 3
Inline MCQ form for trip planning
08 · INFORMATION CARDS
CASE 09
For data that is naturally a glance, render a card.

A weather query produces a city card with current conditions, a five-day forecast strip, and an atmospheric background that reflects the condition. Numbers are anchors. The visual is the story.

LIVE RECREATION · SAN FRANCISCO · MAY 2026
Weather card for San Francisco
08 · INFORMATION CARDS · CONT.
CASE 09 · CONT.
The heatmap does the heavy lifting.

A usage-stats query renders a personal dashboard: summary tiles for sessions, messages, total tokens, active days, plus a heatmap calendar of activity. The numbers are anchors. The shape is the answer.

SOURCE: USER DASHBOARD · ACTIVITY OVER TIME
Usage stats dashboard with heatmap
09 · RENDERED DIAGRAMS
CASE 10
When the answer has structure, render the structure.

A prompt about chat-management strategy turned into a flowchart with branching decision logic. The diagram does what a paragraph cannot: it makes the structure visible at a glance. The flowchart is not a supplement to the answer; it is the answer.

CONTEXT MANAGEMENT · 14 NODES · 5 DECISION POINTS
Flowchart for context management strategy
10 · TEMPLATED COMMS
CASE 11
Options, not the answer.

An email-drafting prompt returned a tabbed composer with two tonal variants — "Direct ask" and "Invite discussion" — each a complete email with a subject line, body, and an "Open in Mail" handoff. A small but telling pattern: Claude generates options, not the answer.

TWO TONES · ONE COMPOSER · OPEN-IN-MAIL HANDOFF
11 · IN-LINE CONSENT
CASE 12
Consent as a first-class surface.

When an artifact needs to run code, Claude does not silently execute. The permission card surfaces the request inline in the conversation, shows the actual code that would run, and offers explicit "Always allow" and "Deny" controls. Consent is part of the UI grammar, not a hidden setting.

THREE.JS VIEWER REQUEST · CODE PREVIEW · CONSENT CONTROLS
Permission card with code preview
02
What repeats

Reading across the screenshots, a few patterns repeat. They are worth naming as design moves — these are the things our own product would need to imitate.

20 / PATTERNS

Seven patterns observed

The unifying point: Claude treats "what to render" as part of the answer, not as a separate concern.

01
Artifact panel as the answer surface

Long, structured, or interactive responses move out of the chat stream into a dedicated panel that holds rich UI.

02
Custom UI per scenario

Maps for travel, charts for data, cards for weather, MCQs for input, flowcharts for branching logic. The shape follows the data.

03
In-line cards for short answers

Small data-bound cards (weather, stats, location pickers) live inside the chat without escaping to the artifact panel.

04
Streaming as a UI state

The user sees the answer being built. Loading is a state, not an empty bubble.

05
Keyboard-first interactives

MCQs, navigation, and selection all expose keyboard hints. The chat does not stop being a chat just because UI showed up.

06
Consent as a first-class surface

Code execution is gated by an explicit permission card. The user sees what is about to run.

07
Code and output share a panel

When code is generated, both the source and the live render are visible in the same artifact, with no context switch.

IMPLICATION
"What to render" is part of the answer.
Not a separate concern.
Jawaab ki shakal bhi jawaab hai.
CLOSING
For our own product —
That is the bar.

Twenty scenarios, one chat surface, one UI grammar that rewards the user with the right shape every time. The chat is the entry point. The answer is its own little app.

FIN
Claude renders.

Built as a study for our own AI product. Every screenshot was captured from a real Claude session on the user's laptop.

v1.0 · ARNESH MANDAL · 2026.04.29 23 / 23