← ClaudeAtlas

conversational-ui-restraintlisted

Build or review a chat/copilot/assistant interface — message list, composer, streaming responses, conversation sidebar, canvas/side-panel for structured output. Trigger for "make this chat UI look like ChatGPT/Claude", "为什么我的 对话界面看起来很乱", "streaming response feels janky", "conversation sidebar needs work", "this looks AI-generated", or when reviewing a chat/assistant screen before shipping it. This is a DIFFERENT problem than dense dashboards — a chat UI's job is to get out of the way of the content, not to show more data per screen (use `terminal-software-design` for tables/dashboards/data grids, not this). Do NOT trigger to invent a generic app aesthetic from a blank slate (use `ui-ux-pro-max`) or for landing pages. Portable: self-contained prose, no script dependency — works pasted into any assistant.
artherahq/skills · ★ 2 · AI & Automation · score 68
Install: claude install-skill artherahq/skills
# Conversational UI Restraint The best chat/assistant interfaces (ChatGPT, Claude.ai, Codex) don't look good because of a secret tool — they look good because of a small set of disciplines applied consistently, all pointing the same direction: **the interface should disappear and the content should be the only thing anyone remembers.** This is the opposite instinct from `terminal-software-design`, where density is correct — here, restraint is correct, because the "data" is prose, and prose needs room to be read, not scanned. A naive attempt at "make it look like ChatGPT" tends to copy the surface (a gray sidebar, rounded message bubbles) and miss the actual discipline underneath: near-monochrome color reserved for signal, content-first visual hierarchy, one consistent icon language, motion that serves comprehension rather than decorates it. ## 1. Color: monochrome first, color is a signal not a decoration - Default to a near-monochrome palette (grays/whites/near-blacks) for the interface chrome itself. Reserve actual color for things that mean something: a link, a syntax-highlighted token, a status indicator, the one brand accent used sparingly (a send button, a selected state). - If everything has a little color — every icon tinted, every card with an accent border — nothing stands out, and the page reads as decorated rather than considered. The restraint itself is the signal of quality. - Dark and light mode both need this discipline independently — a dark t