Claude: Reasoning traces, artifacts and a calmer visual language
Anthropic's Claude mainstreamed the thinking trace, artifacts that turn replies into canvases, and a warm low-contrast palette built for trust.
An independent reading of Claude's interface, grounded in Anthropic's public documentation. Quotes are verbatim from the linked official pages. The product UI may differ from what is described.
Visible reasoning
- The thinking trace collapses to a quiet header line — you see that it thought, and how long, without reading the thoughts.
- Expanding reveals step-by-step reasoning; the elapsed timer reads as progress, not impatience.
- Reasoning completes with a small check, not a fanfare — the outcome, not the process, stays central.
“Click the "Thinking" section to view Claude's thought process summary and problem-solving approach. Reviewing it can be valuable for verifying how Claude arrived at its conclusion.”
Source: Claude Help Center — Change the model, effort, and thinking settings ↗
- 1
Formulating an approach…
Artifacts over replies
- When the answer is a document or app, Claude opens it beside the chat as a live canvas.
- The artifact becomes the interface; the chat stays the place to iterate on intent.
- Every edit re-rolls only the artifact — the conversation is the plan, the artifact is the product.
“When Claude creates an artifact, you'll see the content displayed in a dedicated window to the right of the main chat.”
Source: Claude Help Center — What are artifacts and how do I use them? ↗
Restrained color
- Warm neutrals and a single accent family — first terracotta, then violet; no neon, no gradient soup.
- Trust through calm: the interface recedes so the AI's work carries the attention.
Per-tool status, not JSON walls
- Tool use renders as a compact status line — tool name, outcome, elapsed time.
- Inputs and outputs hide behind an expand/collapse; the result reads at a glance.
“Shows detailed tool usage and execution, with a timestamp and the model used on each assistant message. Also expands MCP calls, which collapse to a single line like “Called slack 3 times” by default”
Source: Claude Code docs — Interactive mode (transcript viewer) ↗
Draft-first composition
- Prompt editing stays inline with rich text; the draft is first-class, not a throwaway box.
- The composer communicates the product's personality before any answer does.
“For Markdown documents, you can edit in place: highlight the text you want changed, click "Edit with Claude," and type your request. Claude makes the edit right where you marked it, so you don't have to describe which section you mean in the chat.”
Source: Claude Help Center — What are artifacts and how do I use them? ↗
Design takeaways
- Show the work — reasoning, tools — but keep it collapsible and quiet: status over spectacle.
- When the answer is a document, give it a canvas; the chat edits intent, the canvas is the result.
- Warm, low-contrast palettes read as trustworthy for AI; one accent family is enough.
- Make every agent action auditable at a glance, with details one click away.