Prompt InFlow
Image AIConcept ArtIntermediate5 minSaves 1 hour

AI Assistant Chat Interface Mockup with Streaming States

For AI product designers, generate a chat interface mockup showcasing distinct speaker roles, code-block styling, and message streaming states to inform UI/UX development.

Generate a chat interface mockup for an AI assistant, emphasizing clear speaker distinction, proper code block rendering, and visual cues for message streaming. This helps product designers visualize key interaction elements and dynamic states for UI/UX development.

MidjourneyFlux

READY-TO-USE PROMPT

Copy Prompt

prompt.txt
Role: Act as a specialist UI/UX designer focusing on AI-driven interfaces. Your objective is to conceptualize and visualize a chat interaction screen for an advanced AI assistant, emphasizing clarity, functional states, and brand consistency.

Context: Our product requires a compelling visual mockup of its AI assistant chat interface. This visualization is crucial for internal stakeholder review, demonstrating key interaction paradigms, and guiding front-end development. The design must highlight distinct conversational roles, professional code block rendering, and an intuitive representation of real-time message generation. The overall aesthetic should be modern, clean, and user-centric, reflecting a high-quality software application.

Task: Generate a detailed visual mockup of a chat interface specifically designed for an AI assistant. The mockup must incorporate the following elements and design principles:

-   **Screen Type:** Specify whether the interface should be presented as a `{{screen_type}}` (e.g., 'a desktop web application window with a fixed sidebar', 'a full-screen mobile application view', 'a compact widget embedded within a larger dashboard'). This will determine the aspect ratio and overall framing.
-   **Layout Structure:** Implement a clear two-column or distinct bubble-based conversation layout. User messages must be visually differentiated from AI assistant messages through elements like distinct background colors, avatar placement, or message bubble shapes. Ensure ample padding and spacing for readability.
-   **Message Content & Formatting:**
    -   Include at least one example user message, formulating a specific technical query or request (e.g., "How do I configure a webhook for real-time data streaming in Python?").
    -   Present at least one AI assistant response that includes a well-formatted code block. This code block must be visually distinct—employing a monospace font, a contrasting background color (e.g., dark gray on a lighter chat background), subtle syntax highlighting for common languages (like Python or JavaScript), and clear borders or shadows to differentiate it from regular text.
    -   Crucially, depict at least one AI assistant message in a "streaming" or "generating" state. This should visually convey that the AI is actively composing its response, perhaps through animated ellipses, a partial message appearing letter by letter, or a dedicated "typing..." indicator with a subtle animation.
-   **Color Palette:** Apply a specific `{{brand_palette}}` to the interface (e.g., 'a sophisticated dark mode theme with electric blue accents', 'a light, airy design featuring muted pastels and a vibrant call-to-action color', 'a professional enterprise palette with charcoal, silver, and a single brand primary color'). Consistency and accessibility are paramount.
-   **Typography System:** Define and apply a clear `{{key_typography}}` scheme. This includes specifying a primary font for body text (e.g., 'a modern sans-serif like Inter or Manrope'), a distinct font for headings or UI labels (if applicable), and a dedicated monospace font for code blocks (e.g., 'Fira Code or JetBrains Mono'). Ensure font sizes and weights contribute to readability and hierarchy.
-   **Interactive Elements & States:** Integrate subtle visual cues for common interactive components. This includes hover states for buttons or clickable links within messages, scrollbar styling, and potentially a text input field with a send button.
-   **Negative/Edge States:** Include a visual representation of a non-ideal state. This could be a "message failed to send" indicator next to a user's message, a subtle alert for a connection issue, or a "rate limit exceeded" notification presented non-intrusively.

Constraints:
-   The generated output must be a static visual image or a series of images, not textual descriptions of the UI.
-   Maintain a high degree of visual fidelity and attention to detail, reflecting a production-ready design.
-   Ensure all elements are clearly legible and functionally understandable without additional explanation.
-   Prioritize a clean, uncluttered aesthetic. Avoid skeuomorphic elements unless explicitly requested for a retro style.
-   The AI's responses should reflect a helpful, knowledgeable, and professional persona.

Output: A high-resolution visual mockup image (or a set of 2-3 images if different states are shown) of the described AI assistant chat interface, ready for design review.

Estimated results

DifficultyIntermediate
Setup time5 min
Time saved1 hour
Best modelsMidjourney, Flux
Best audienceSoftware Development, Product Design

Editor's note

Why this prompt matters

Designing effective AI assistant interfaces requires careful consideration of how information is presented and how the AI's state is communicated. Generic chat mockups often fall short when it comes to the unique demands of AI interactions, such as distinguishing between human and AI voices, rendering complex data like code, and indicating real-time processing. This workflow is built for AI product designers, UI/UX specialists, and product managers who need to visualize these specific interaction paradigms.

It addresses the challenge of creating high-fidelity mockups that clearly illustrate distinct speaker roles, integrate professional code block styling, and convey the dynamic nature of message streaming. By providing a structured approach to generating these visuals, teams can quickly iterate on design concepts, gather feedback from stakeholders, and provide clear guidance to front-end developers. This is particularly valuable in the early stages of product development or when refining specific UI components to ensure a consistent and intuitive user experience for AI-powered applications.

Anatomy

Prompt engineering breakdown

Role

Act as a specialist UI/UX designer focusing on AI-driven interfaces. Your objective is to conceptualize and visualize a chat interaction screen for an advanced AI assistant, emphasizing clarity, functional states, and brand consistency.

Context

Our product requires a compelling visual mockup of its AI assistant chat interface. This visualization is crucial for internal stakeholder review, demonstrating key interaction paradigms, and guiding front-end development. The design must highlight distinct conversational roles, professional code block rendering, and an intuitive representation of real-time message generation. The overall aesthetic should be modern, clean, and user-centric, reflecting a high-quality software application.

Goal

Generate a detailed visual mockup of a chat interface specifically designed for an AI assistant. The mockup must incorporate the following elements and design principles: Screen Type, Layout Structure, Message Content & Formatting (user message, AI response with code block, streaming state), Color Palette, Typography System, Interactive Elements & States, Negative/Edge States.

Constraints

The generated output must be a static visual image or a series of images, not textual descriptions of the UI. Maintain a high degree of visual fidelity and attention to detail, reflecting a production-ready design. Ensure all elements are clearly legible and functionally understandable without additional explanation. Prioritize a clean, uncluttered aesthetic. Avoid skeuomorphic elements unless explicitly requested for a retro style. The AI's responses should reflect a helpful, knowledgeable, and professional persona.

Output format

A high-resolution visual mockup image (or a set of 2-3 images if different states are shown) of the described AI assistant chat interface, ready for design review.

Why this structure works

The prompt effectively uses role priming by assigning the persona of a 'specialist UI/UX designer', which sets expectations for the output's quality and focus. Explicit constraints define visual elements and states, guiding the model toward specific design requirements. This structured approach ensures detailed and relevant mockups for complex AI interface designs.

Pick your version

Prompt variations

BeginnerWorks with any model

When you need a quick, basic visualization of an AI chat interface with less emphasis on intricate design details or specific brand guidelines.

prompt.txt
Design a simple chat screen for an AI assistant. Show messages from a user and the AI. Make sure the user's messages look different from the AI's. Include one user question like 'What's the weather?' and an AI answer that has a code example, clearly marked with a different background. Also, show the AI typing a message, like 'AI is thinking...' or with dots appearing. Use a {{simple_color_scheme}} like 'blue and white' and a {{basic_font_style}} like 'clean sans-serif'. The screen should be a {{screen_type_simple}} such as 'a phone app'. Keep it neat and easy to understand. The goal is a clear picture of a basic chat.
ProfessionalBest with midjourney

For detailed, high-fidelity mockups intended for design validation, stakeholder presentations, or guiding front-end development, where specific design principles are critical.

prompt.txt
Act as a specialist UI/UX designer. Your task is to conceptualize a high-fidelity chat interface for an advanced AI assistant. Generate a detailed visual mockup that clearly differentiates user and AI messages via distinct bubble styles or column layouts. Incorporate a user query such as 'Explain the new API authentication flow in Node.js' and an AI response featuring a syntax-highlighted code block, using a {{code_font_spec}} like 'Fira Code'. Crucially, depict an AI message in a dynamic 'streaming' state with subtle animation. Define a {{brand_guideline_palette}} (e.g., 'a professional dark mode with specific brand blue') and a {{typography_system_spec}} including primary and monospace fonts. The output should be a {{screen_context}} (e.g., 'desktop web application') with interactive element states and an edge case (e.g., 'message failed' indicator), reflecting production-ready design principles.
Short VersionBest with flux

Ideal for rapid prototyping or early concept exploration when a concise, single-paragraph prompt is preferred for quick ideation.

prompt.txt
Create a visual mockup of an AI assistant chat interface. Clearly distinguish user and AI messages with separate styling. Include a user message and an AI response containing a distinct, formatted code block. Crucially, show one AI message in a 'streaming' or 'generating' state, conveying real-time composition. Specify a {{primary_palette}} and {{font_system}} for readability and brand consistency. The output should be a {{target_screen_type}} interface, focusing on clean aesthetics and functional clarity for quick review.
EnterpriseBest with midjourney

When working on complex projects that require adherence to corporate brand standards, accessibility guidelines, security protocols, and formal stakeholder review processes.

prompt.txt
As a lead UI/UX architect, design a compliant, high-fidelity chat interface mockup for our AI assistant, adhering to enterprise-grade standards. Ensure clear visual separation for user and AI messages, critical for audit trails. Present a user query (e.g., 'Audit log retrieval for system X') and an AI response with a securely formatted, syntax-highlighted code block, using a {{secure_code_font}} and {{compliance_palette}}. Demonstrate an AI 'streaming' state, considering performance and user feedback protocols. The design must integrate with our {{corporate_brand_guidelines}} (including accessibility standards), specify a {{enterprise_typography_system}}, and include interactive states and critical error handling visuals (e.g., 'security alert' or 'data integrity warning'). The {{deployment_environment}} (e.g., 'internal dashboard module') should reflect strict data governance requirements, ready for senior stakeholder and compliance review.

What you'll get

Expected output

The generated image displays a desktop web application window, presenting a dark mode chat interface with electric blue accents. The main chat area occupies the center, flanked by a subtle, fixed sidebar on the left, which appears to contain navigation icons or user profiles, rendered in muted grays.

The conversation layout is distinct, with user messages aligned to the right and AI assistant messages to the left. User messages are contained within rounded, light gray bubbles, while AI responses use slightly darker gray bubbles, both against a deep charcoal background. Ample padding ensures readability.

A user message is visible: "How do I configure a webhook for real-time data streaming in Python?" This message is fully rendered. Below it, an AI assistant response begins. The first part of the AI's message is standard text, followed by a prominent code block. The code block is styled with a distinct, slightly lighter background (a medium dark gray) and uses a monospace font, 'Fira Code', with subtle syntax highlighting for Python keywords in a muted teal and strings in a soft orange. The code block has a clear border and a faint shadow, making it stand out from the surrounding text.

Following the code block, another AI assistant message is shown in a streaming state. This message appears partially formed, with the initial words visible, followed by three animated ellipses (...) that subtly pulse, indicating that the AI is actively generating the rest of its response.

At the bottom of the interface, a text input field is present, styled with a dark gray background and a light gray placeholder text. A circular send button, highlighted with an electric blue fill, sits to its right. A vertical scrollbar is visible on the right edge of the chat area, styled minimally to match the dark theme. Additionally, a small, red "Message failed to send" indicator with a subtle warning icon is positioned discreetly below an earlier, hypothetical user message, demonstrating an edge case.

Under the hood

Why this prompt works

This prompt's effectiveness stems from its precise application of several prompt engineering techniques. Firstly, role priming establishes the AI's persona as a "specialist UI/UX designer," which immediately frames the output from a design-centric perspective, ensuring the generated image prioritizes aesthetic and functional design principles over generic imagery.

Secondly, the extensive use of explicit constraints is critical. By detailing specific elements like "Screen Type," "Layout Structure," "Message Content & Formatting" (including the crucial code block and streaming state requirements), "Color Palette," and "Typography System," the prompt leaves little room for misinterpretation. This granular instruction set guides the image generation model to include all necessary visual components and states, which a simple one-liner would invariably miss. The inclusion of negative constraints, such as avoiding skeuomorphic elements, further refines the desired modern aesthetic.

Finally, the prompt's structure acts as a form of structured output definition, even for an image generation task. It breaks down a complex visual concept into manageable, distinct components, each with its own set of requirements. This systematic approach ensures comprehensive coverage of the design brief, resulting in a high-fidelity mockup that directly addresses the specific needs of AI product designers for visualizing complex interaction states, rather than a vague or incomplete representation.

Model fit

Best AI models for this prompt

Midjourney

Midjourney is effective for generating aesthetically pleasing UI mockups, particularly when the emphasis is on overall mood and stylistic coherence. It handles abstract concepts like 'streaming state' by interpreting visual metaphors well. However, achieving pixel-perfect alignment or very specific functional UI components might require several iterations and precise prompt engineering. See the full Midjourney hub for deeper guidance.

Flux

Flux tends to produce cleaner, more structured UI elements, often leading to a more functional-looking mockup out of the box. Its strengths lie in consistent element placement and adherence to layout instructions, which is beneficial for technical interfaces. While it might sometimes lack the stylistic flair of Midjourney, its output is often a solid foundation for further refinement in design software. See the full Flux hub for deeper guidance.

When to use

  • When presenting initial UI concepts for AI products to stakeholders, demonstrating visual direction.
  • For rapidly prototyping various brand palettes and typography systems within an AI chat interface.
  • When validating specific UI elements like code blocks, streaming states, or error indicators with design teams.
  • To demonstrate distinct conversational roles and interaction flows, especially for AI assistant responses.
  • For guiding front-end developers on visual requirements before detailed component design begins.

When not to use

  • If you require functional, interactive prototypes or coded components for user testing. This generates static images.
  • When detailed user research or A/B testing data is needed for specific UI element performance.
  • For generating production-ready design system documentation with precise component specifications and measurements.
  • If the primary goal is a full user journey map that extends beyond a single chat screen interaction.
  • For generating marketing assets that demand photographic realism or complex 3D rendering.

Get more from it

Pro tips

  • 1

    Specify `screen_type` precisely (e.g., "desktop web application window with a fixed sidebar") to control the overall framing and aspect ratio effectively, preventing generic outputs.

  • 2

    Detail the `brand_palette` with specific hex codes or descriptive color names (e.g., "muted teal #4A8C8C, soft gray #E0E0E0, vibrant orange #FF8C00") to ensure consistent branding.

  • 3

    Describe the "streaming" state using clear visual metaphors like "animated ellipses transitioning letter-by-letter" to prevent static or ambiguous representations of AI generation.

  • 4

    Provide concrete, technical examples for user queries and AI code responses to ensure content feels realistic and relevant to the target audience, avoiding abstract placeholder text.

  • 5

    Explicitly define the `key_typography` by naming specific fonts (e.g., "Inter for body, Roboto Mono for code") to achieve the desired aesthetic and readability hierarchy.

  • 6

    For `negative/edge states`, describe the visual indicator (e.g., "small red '!' icon next to message, 'Connection Lost' banner") to prevent generic or missing error representations.

Don't ship this

Common mistakes

  • ✗ Vague color palette descriptions (e.g., "modern colors") often result in generic or inconsistent visual themes.

    Fix — Use specific color names or hex codes (e.g., "charcoal gray, electric blue accents, and subtle off-white backgrounds") to guide the AI towards the desired brand aesthetic.

  • ✗ Providing a generic "typing..." indicator for the streaming state can lead to a less dynamic visual representation.

    Fix — Describe more dynamic streaming visuals, such as "partial text appearing letter by letter" or "a pulsating ellipsis animation," for an engaging experience.

  • ✗ Not specifying a screen type, leading to an ambiguous canvas or undesirable aspect ratio for the mockup.

    Fix — Always define `screen_type` clearly (e.g., "a desktop web application, 16:9 aspect ratio") to control the layout and context of the mockup.

  • ✗ Omitting details for code block styling, which often results in plain text or poorly formatted code snippets.

    Fix — Request specific elements like "monospace font, dark background, subtle syntax highlighting for Python" to ensure professional code rendering.

  • ✗ Forgetting to include negative states, which means the mockup is incomplete and doesn't account for common user frustrations.

    Fix — Always include a specific `negative/edge state` like "message failed to send icon" or "connection error banner" for a comprehensive design.

  • ✗ Using overly simple or unrealistic user queries that do not reflect the complexity of a technical AI assistant.

    Fix — Craft technical or domain-specific user messages to make the AI's response and the overall interface feel authentic and relevant to the target audience.

People also ask

Frequently asked questions

Q.Can I use this for mobile app mockups, or is it better suited for web interfaces?

This prompt is adaptable for both. By specifying screen_type as "a full-screen mobile application view" or "a compact widget," you can guide the AI to generate the appropriate form factor and aspect ratio for your needs.

Q.How detailed should my brand palette description be for the best results?

The more specific, the better. Mentioning primary, secondary, and accent colors, along with their intended use (e.g., "primary for buttons, accent for highlights"), will yield more accurate and consistent brand representation.

Q.Will this prompt generate interactive elements or just static images of the UI?

The output is static visual images. While you can depict interactive states like hover effects or loading spinners visually, the generated image itself will not be interactive or functional.

Q.Can I request specific UI components beyond chat bubbles and code blocks, such as file upload icons?

Yes, you can. Integrate requests for additional elements like "a user profile avatar," "a file upload icon," or "a 'copy code' button" within the Interactive Elements & States section for a more detailed mockup.

Q.Is it possible to show multiple AI assistant responses in various states within a single output?

Yes, you can request "a set of 2-3 images if different states are shown" in the output. Describe each desired state (e.g., one complete, one streaming, one with an error) clearly within the prompt.

Q.What if the AI generates text descriptions of the UI instead of actual images?

This indicates the model might not be a visual AI, or it's misinterpreting the "Output" constraint. Ensure you're using a compatible image generation model like Midjourney or Flux for visual results.

Version 1.0Last reviewed August 6, 2026
Reviewed by PromptInFlow Editorial Team