ChatGPT UI Flows — Design Patterns & Interactions
AI chatbot for everyday use
First Suggestions
First-time chat initialization showing AI-generated prompt suggestions. User encounters empty state with textarea focus, system auto-transitions through suggested queries as clickable chips, demonstrating content discovery and interaction patterns. Captures onboarding moment where user selects or views AI recommendations before composing first message. Relevant for studying empty state design, suggestion UI, progressive disclosure, and conversational AI affordances.
Instant and frictionless—suggestions appear immediately, auto-transitions guide without blocking.
- Focus on message input textarea
- View auto-suggested prompt chips
- Select or interact with suggestion
- Submit initial message to AI
- Receive and view AI response
- AI Features
- Content Creation
- Empty State
- Dark Mode
- Minimal
- Card-heavy
- Auto-transition Animation
- Stagger Fade In
- Typeahead Suggestions
- Empty State
- Focus State
- Hover Reveal
- Active / Selected
- Loading
- Message Input Textarea
- Suggestion Chip
- Chat Message Container
- Auto-Transition Overlay
- Message Content Block
- Response Text Area
First prompt
First user interaction with ChatGPT's conversational interface. User enters initial prompt into message input field, triggering AI response generation and display. Captures the core chat creation pattern—typing, submission, streaming response rendering. Demonstrates empty-to-populated state transition, real-time message rendering, and auto-scroll behavior. Ideal reference for designing conversational AI UX, input-to-output workflows, and message bubble layouts.
Responsive—instant input focus, smooth message rendering, live streaming feedback.
- Focus message input field
- Type initial prompt
- Submit message to AI
- Observe streamed response
- First exchange complete
- Content Creation
- AI Features
- Dark Mode
- Minimal
- Card-heavy
- Stagger Fade In
- Auto-scroll to Latest
- Typeahead Processing
- Focus State
- Loading
- Active / Selected
- Message Input Field
- Send Button
- Chat Message Container
- Thread Scroll Container
- Message Bubble
- Auto-transition Overlay
Signup + Onboarding
ChatGPT's signup and onboarding flow captures the progressive disclosure pattern where users enter email, verify via code, complete profile information (name, age), and advance through modal-based screens. The recording demonstrates a guided, step-by-step account creation experience with automatic transitions between states. Designers will observe modal dialogs, input validation, form progression, and the transition from authentication to profile setup to feature introduction—ideal for studying streamlined account registration, empty state progression, and AI product onboarding patterns.
Guided — seamless modal progression with auto-transitions and no friction between steps
- Enter email address
- Submit verification code
- Fill profile information
- Review feature capabilities
- Complete onboarding setup
- Onboarding
- Sign-up
- Profile
- AI Features
- Minimal
- Dark Mode
- Card-heavy
- Flat Design
- Auto-transition Between Steps
- Form Field Validation
- Modal Progression Flow
- Loading
- Focus State
- Active / Selected
- Progress Indicator
- Email Input Field
- Verification Code Input
- Profile Form Fields
- CTA Button
- Modal Dialog
- Auto-advancing Slide Panel