AI-UX Patterns
Elevate your design skills by learning essential AI-UX patterns. Discover practical insights into building intuitive, AI-powered products that balance user needs with AI capabilities.

Starting with a blank canvas can be intimidating, but providing prompt starters can help individuals overcome this initial hurdle and jumpstart their creativity.

An intelligent assistant that analyzes emails to identify questions and feedback requests, providing pre-generated response options and converting them into complete and contextually appropriate replies.

Generative AI can provide custom types of input beyond just text, like generated UI elements, to enhance user interaction.

Proactive agents can autonomously initiate conversations and actions based on previous interactions and context providing timely and relevant assistance.

Letting people select text to ask follow-up questions provides immediate, context-specific information, enhancing AI interaction and exploration.

Provide relatable and engaging translations for people with varying levels of expertise, experience and ways of thinking.

Starting with a blank canvas can be intimidating, but providing prompt starters can help individuals overcome this initial hurdle and jumpstart their creativity.

Proactive agents can autonomously initiate conversations and actions based on previous interactions and context providing timely and relevant assistance.

Voice interfaces should dynamically adapt to user interruptions, seamlessly incorporating them into the conversation ensuring a fluid and responsive dialogue.

Based on your selection and situation, context menus can help you discover actions and access them quickly.

Letting people select text to ask follow-up questions provides immediate, context-specific information, enhancing AI interaction and exploration.

Referencing nested data from your database in the form of tags can simplify the creation of elaborate prompt formulas.

Input design concepts in small bits and see the cumulative output in real-time. Explore different combinations and immediately visualize the results, making the creative process interactive and flexible.

AI collaboration agents can act as writing partners that assist people by enhancing their content through transparent, easily understandable suggestions, while respecting the original input.

Spatial prompting integrates spatial relationships into prompts, offering a novel approach to manipulate concepts. This dynamic approach can lead to more intuitive and creative outcomes.

Input design concepts in small bits and see the cumulative output in real-time. Explore different combinations and immediately visualize the results, making the creative process interactive and flexible.

Referencing nested data from your database in the form of tags can simplify the creation of elaborate prompt formulas.

Generative AI can provide custom types of input beyond just text, like generated UI elements, to enhance user interaction.

Embedding models can rank content along virtually any dimension. This capability provides significant value by enabling users to explore and analyze the embeddings to create a spectrum of any features.

Embedding models can rank data based on semantic meaning, evaluating each individual segment on a spectrum to show its relevance throughout the artifact.

Input design concepts in small bits and see the cumulative output in real-time. Explore different combinations and immediately visualize the results, making the creative process interactive and flexible.

Use a spatial dimension to explore and manipulate language. By pulling text around on a map, you can play with different features in a playful and meaningful way.

AI excels at classifying vast amounts of content, presenting an opportunity for new, more fluid filter interfaces tailored to the content.

Embedding models can rank content along virtually any dimension. This capability provides significant value by enabling users to explore and analyze the embeddings to create a spectrum of any features.

Embedding models can rank data based on semantic meaning, evaluating each individual segment on a spectrum to show its relevance throughout the artifact.

An intelligent assistant that analyzes emails to identify questions and feedback requests, providing pre-generated response options and converting them into complete and contextually appropriate replies.

Generative AI can provide custom types of input beyond just text, like generated UI elements, to enhance user interaction.

Automatic model switching in AI can boost efficiency by selecting the most appropriate model for each query, ensuring a balance between quick and accurate responses.

Ordering content along different interpretable dimensions, like style or similarity, makes it navigable on x and y axes facilitating exploration and discovery of relationships between the data.

Provide relatable and engaging translations for people with varying levels of expertise, experience and ways of thinking.

Textual information often misses intuitive cues for understanding relationships between ideas. AI can clarify these connections, making complex information easier to grasp quickly.

Comprehend and compare large documents by visualizing embeddings and their scores, enabling a clear and concise understanding of vast data sources in a single, intuitive visualization.

LLM’s are great at organizing narratives and findings. It's helpful to see the sources that support these conclusions, making it easier to understand the analysis and where it comes from.

Using the source input as ground truth will help trust the system and makes it easy to interpret its process and what might have gone wrong.

LLM’s are great at organizing narratives and findings. It's helpful to see the sources that support these conclusions, making it easier to understand the analysis and where it comes from.

In Arc, a playful pinch interaction lets you quickly distill any webpage into a brief summary, capturing the essence of the content in moments.

Referencing nested data from your database in the form of tags can simplify the creation of elaborate prompt formulas.

AI actions often take time to complete. To improve user experience, use descriptions of what is happening combined with basic animations that represent different types of actions.

In Arc, a playful pinch interaction lets you quickly distill any webpage into a brief summary, capturing the essence of the content in moments.

Textual information often misses intuitive cues for understanding relationships between ideas. AI can clarify these connections, making complex information easier to grasp quickly.

In Arc, a playful pinch interaction lets you quickly distill any webpage into a brief summary, capturing the essence of the content in moments.

LLM’s are great at organizing narratives and findings. It's helpful to see the sources that support these conclusions, making it easier to understand the analysis and where it comes from.

Voice interfaces should dynamically adapt to user interruptions, seamlessly incorporating them into the conversation ensuring a fluid and responsive dialogue.

Realtime generation allows people to manipulate content instantly, giving them more agency in using generative AI as a tool for exploration.

AI actions often take time to complete. To improve user experience, use descriptions of what is happening combined with basic animations that represent different types of actions.

Generating multiple outputs and iteratively using selected ones as new inputs helps people uncover ideas and solutions, even without clear direction.

Guide users to understand what makes a good prompt will help them learn how to craft prompts that result in better outputs.

Empower users to make decisions and give feedback quickly or engage more deeply when needed in natural language.

Realtime generation allows people to manipulate content instantly, giving them more agency in using generative AI as a tool for exploration.

Presenting multiple outputs helps users explore and identify their preferences and provides valuable insights into their choices, even enabling user feedback for model improvement.

Letting people select text to ask follow-up questions provides immediate, context-specific information, enhancing AI interaction and exploration.

AI actions often take time to complete. To improve user experience, use descriptions of what is happening combined with basic animations that represent different types of actions.

Input design concepts in small bits and see the cumulative output in real-time. Explore different combinations and immediately visualize the results, making the creative process interactive and flexible.

Spatial prompting integrates spatial relationships into prompts, offering a novel approach to manipulate concepts. This dynamic approach can lead to more intuitive and creative outcomes.

AI excels at classifying vast amounts of content, presenting an opportunity for new, more fluid filter interfaces tailored to the content.

Generating multiple outputs and iteratively using selected ones as new inputs helps people uncover ideas and solutions, even without clear direction.

Presenting multiple outputs helps users explore and identify their preferences and provides valuable insights into their choices, even enabling user feedback for model improvement.

You should control how products and services (not) access your data through a manageable profile. This allows you to create a relevant context across many platforms while maintaining control.

A smart browser assistant that understands the context of your open tabs to offer relevant suggestions and actions, enhancing productivity through transparency and control.

You should control how products and services (not) access your data through a manageable profile. This allows you to create a relevant context across many platforms while maintaining control.

Automatic model switching in AI can boost efficiency by selecting the most appropriate model for each query, ensuring a balance between quick and accurate responses.

You should control how products and services (not) access your data through a manageable profile. This allows you to create a relevant context across many platforms while maintaining control.

Empower users to make decisions and give feedback quickly or engage more deeply when needed in natural language.

When an observation is added to the context from an implicit action and a prediction is made, users should be able to easily evaluate and dismiss it.

Presenting multiple outputs helps users explore and identify their preferences and provides valuable insights into their choices, even enabling user feedback for model improvement.

AI actions often take time to complete. To improve user experience, use descriptions of what is happening combined with basic animations that represent different types of actions.

Starting with a blank canvas can be intimidating, but providing prompt starters can help individuals overcome this initial hurdle and jumpstart their creativity.

AI can enhance live chat streams by analyzing real-time data, identifying trends, and driving interactive elements like voting to boost audience engagement.

Provide relatable and engaging translations for people with varying levels of expertise, experience and ways of thinking.

AI actions often take time to complete. To improve user experience, use descriptions of what is happening combined with basic animations that represent different types of actions.

Automatic model switching in AI can boost efficiency by selecting the most appropriate model for each query, ensuring a balance between quick and accurate responses.