跳到正文
UIGrammer
EN 中文

主题 · 产品 · 进阶

AI 聊天产品界面

AI 对话界面 = 常驻会话列表、可滚动的消息流,以及固定在底部的输入区。

直达修改 Prompt

提示

输入条保持固定,模型胶囊要清晰——它是用户唯一会注意到的品牌面。

Build an AI chat product UI (ChatGPT-style). STYLE - Dark sidebar (#0c1220), light thread area (#111827) - 16px message bubbles, accent color for the user bubble - Model pill inside the composer (e.g. "Sage-1") LAYOUT - Left conversation sidebar (~96px): "New chat" action, a list of past threads with one active, and an "Upgrade to Pro" footer - Main thread: a greeting bubble, user and assistant messages, pinned composer at the bottom COMPONENTS - Conversation list with an active state - Assistant and user message bubbles (left / right aligned) - Composer with a placeholder, a model pill, and a round send button TECHNICAL - React - Tailwind CSS - shadcn/ui