Claude UI Flows — Design Patterns & Interactions
Next generation AI assistant
API in HTML artefact
This recording captures an AI-assisted content creation flow where users navigate through sequential decision panels with auto-advancing transitions. Starting from a category tab, the interface guides users through interactive prompts, multi-select questions, and branching logic before rendering a dynamic embedded application. The pattern demonstrates intelligent state management, progressive form disclosure, and iframe integration—ideal for understanding AI chat scaffolding, guided workflows, question branching, and embedded tool composition in conversational interfaces.
Guided and intentional — auto-advancing transitions with pauses for user comprehension and input.
- Select content category
- Read initial prompt description
- Answer first multiple-choice question
- Answer second multiple-choice question
- Wait for embedded app to load
- Interact with generated interface
- AI Features
- Content Creation
- Feature Discovery
- Dark Mode
- Minimal
- Card-heavy
- Auto-transition Flow
- Progressive Disclosure
- Iframe Load Handling
- Loading
- Active / Selected
- Expanded
- Tab Navigation
- Prompt Input Field
- Multi-choice Question Panel
- Radio Button Group
- Auto-transition Container
- Embedded iframe Application
- Secondary Navigation Menu
Checklist in HTML artefact
This recording demonstrates an interactive HTML checklist artifact within Claude, showcasing task-driven content creation workflows. Users interact with toggleable checkbox items to mark completion status, triggering real-time visualization updates and state changes. The flow illustrates how Claude renders dynamic, interactive components—perfect for project planning, task management, and structured content workflows. Designers can study checkbox states, list interactions, auto-transitions, and feedback patterns for building robust task interfaces.
Responsive—instant checkbox feedback, smooth auto-transitions, live visualization updates.
- View checklist artifact
- Toggle first checkbox item
- Review updated visualization
- Toggle second checkbox item
- Observe state propagation
- Content Creation
- Data Visualization
- Feature Discovery
- Dark Mode
- Minimal
- Dense
- List Layout
- Checkbox Toggle
- Stagger Fade In
- Auto-Transition
- Inline State Update
- Active / Selected
- Expanded
- Progress Indicator
- Interactive Checklist
- Collapsible Section
- Checkbox List Item
- Task Item Toggle
- Visualization Panel
- List Container
Signup Suspension
This recording captures Claude's signup suspension flow—a critical error handling and account status notification pattern. The user enters their email, triggers an automatic state transition, and encounters a suspension notice modal displaying account restrictions. The flow demonstrates how to communicate service interruptions, access denials, and regulatory blocks clearly. Designers can learn modal layering, error state hierarchy, and how to guide users through denied access scenarios with transparent messaging about account status and next steps.
Immediate—modal interrupts flow seamlessly, no confirmation delays, state updates automatically.
- Enter email address
- Trigger signup state transition
- View suspension notice modal
- Auto-advance to confirmation state
- Conclude suspended account flow
- Sign-up
- Error Handling
- Notifications
- Dark Mode
- Minimal
- Card-heavy
- Modal Transition
- Form Submission
- Account Status Alert
- Focus State
- Active / Selected
- Disabled
- Error
- Email Input Field
- Primary Action Button
- Modal Dialog
- Form Container
- Suspension Notice Card