Pattern library
Battle-tested UX flows you can use as the starting point for your own.
20 patterns · Authentication (5) · AI (5) · Commerce (5) · Collaboration (5)
Authentication
Two-Factor Authentication
🌿Adds a second verification step (TOTP code, SMS, or push notification) after password to dramatically reduce account takeover risk.
authsecurity2famfaEmail Login
🌱Standard email-and-password sign-in. The user enters credentials, the system verifies them, and a session is created on success.
authloginemailpasswordMagic Link Sign-in
🌱Passwordless sign-in. User enters email, gets a one-time link, clicks it, and is signed in. No password to remember.
authloginpasswordlessemailSign in with Google
🌱Let users sign in using their existing Google account. No new password to remember; faster signup.
authloginoauthgooglePassword Reset
🌱Lets users recover access when they forget their password, via a time-limited email link to set a new one.
authpasswordresetrecovery
AI
AI Chat Loop
🌿A turn-by-turn conversation with an AI, where each user message and AI response is added to a growing history that the AI sees on the next turn.
aichatconversationllmHand Off to Human
🌿Detects when AI cannot help (low confidence, sensitive topic, explicit user request) and seamlessly transfers the conversation to a human agent with full context.
aiescalationsupporthuman-in-the-loopRAG Document Retrieval
🌳Adds your private documents to the AI's knowledge by finding relevant chunks via embedding similarity and injecting them into the prompt before the AI answers.
airagretrievalembeddingStreaming AI Response
🌿Shows AI response token-by-token as it generates instead of waiting for the full reply, dramatically improving perceived speed.
aistreamingssewebsocketAI Tool Calling
🌿Lets the AI invoke functions you define (lookup data, send email, create record) instead of just generating text. Foundation of "agentic" behavior.
aitoolsfunction-callingagent
Commerce
Shopping Cart
🌿Lets users add products, change quantities, and review their selection before checkout. Persists across sessions.
commercecartshoppingecommerceCheckout
🌿Takes payment from the user via a payment provider (Stripe, LINE Pay, 토스), confirms the order, and triggers fulfillment.
commercecheckoutpaymentstripeCoupon / Promo Code
🌱Lets users apply a discount code at checkout (percentage off, fixed amount, free shipping) with rules around usage limits and expiry.
commercecoupondiscountpromotionRefund Request
🌿Lets the user request a refund (full or partial), evaluates the request against your policy, processes via the payment provider, and updates the order status.
commercerefundreturncustomer-serviceSubscription Billing
🌳Recurring payments on a schedule (monthly, yearly), with self-serve plan changes, cancellations, and dunning when payments fail.
commercesubscriptionrecurringbilling
Collaboration
Activity Feed
🌿A chronological stream showing what happened on a resource or for a user — who changed what, when. Foundation of audit trails and "what's new" sections.
collabactivityfeedauditApproval Request
🌿A submitter sends a resource (document, expense, design) to one or more approvers, who can approve, reject with reason, or request changes.
collabapprovalworkflowreviewComments on a Resource
🌱Lets users add text comments to a resource (post, document, image), see others' comments, and edit/delete their own.
collabcommentsocialfeedback@Mention Users
🌱Lets a user reference another user by typing @ followed by a name, with autocomplete. Mentioned users get notified.
collabmentiontagnotificationReal-time Collaboration
🌳Multiple users see each other's presence and changes to a shared resource in real-time (cursor positions, edits, selections), like Figma or Google Docs.
collabrealtimewebsocketpresence