Image AI Concept ArtAdvanced90 minSaves 2+ hours

Rich-Text Editor Toolbar & Inline Formatting Mockups

Q: Can I request different themes like dark mode?

Yes, you can specify `dark mode` instead of `light mode` in the `target_device_type` variable. Ensure your `primary_color_palette` and `secondary_color_palette` are adapted for the dark theme.

For product designers, generate detailed UI mockups of rich-text editor toolbars, including inline formatting popovers and slash-menu variants, to accelerate design iterations for writing applications.

For product designers, generate detailed UI mockups of rich-text editor toolbars, inline formatting popovers, and slash-menu variants. This prompt focuses on screen type, layout, palette, typography, and interactive states to accelerate design iterations for writing applications.

Midjourney Flux

READY-TO-USE PROMPT

Copy Prompt

prompt.txt

Role: Act as a senior UI/UX designer specializing in productivity software interfaces.
Context: You are tasked with developing a precise visual specification for a rich-text editor component within a new writing application. The goal is to generate high-fidelity mockups that clearly illustrate the primary editor toolbar, an inline formatting popover, and a contextual slash-menu variant. The output will guide an image generation AI.
Task: Detail the visual attributes and interactive states of the following UI elements:
1. **Main Editor Toolbar**: Describe its layout, iconology (generic representations like bold, italic, link), and overall aesthetic.
2. **Inline Formatting Popover**: This appears when text is selected. Detail its appearance, available options (e.g., bold, italic, underline, link, heading styles), and positioning relative to selected text.
3. **Slash-Menu Variant**: This appears when a user types `/` at the start of a new block. Detail its visual presentation, example command suggestions (e.g., /heading, /bullet list, /image), and interaction model.
Ensure that the descriptions cover:
* **Screen Type**: Specify whether it's a desktop web app, tablet app, or mobile app interface. (e.g., `{{target_device_type}}` web application, light mode)
* **Overall Layout**: Describe how the editor fits into a larger application window, including surrounding elements (e.g., document title, sidebar, save button).
* **Color Palette**: Define the specific color scheme to be used, drawing from provided brand guidelines. (e.g., `{{primary_color_palette}}` for interactive elements, `{{secondary_color_palette}}` for backgrounds)
* **Typography**: Specify font families, weights, and sizes for different UI elements (e.g., body text, button labels, menu items).
* **Interactive States**: Describe hover, active, and disabled states for buttons and menu items.
* **Negative Space**: Emphasize appropriate spacing and visual hierarchy.
Constraints:
* Maintain a clean, modern, and minimalist aesthetic.
* Adhere strictly to the provided `{{brand_guidelines}}`, focusing on consistency in iconography and component styling.
* The design must convey professionalism and ease of use.
* Include descriptions for both a default (inactive) state and a hover/active state for key interactive elements.
* Specify elements that should *not* be present, such as overly skeuomorphic designs or excessive gradients.
Output: A comprehensive, image-AI-ready prompt structured to generate a detailed visual mockup. The output should be a single, cohesive description, ready for direct input into an image generation model. Include details on screen type, layout, palette, typography, interactive states, and negative space. Explicitly state the absence of elements that would detract from a clean UI.

Estimated results

DifficultyAdvanced

Setup time90 min

Time saved2+ hours

Best modelsMidjourney, Flux

Best audienceSoftware Development, Product Design

Editor's note

Why this prompt matters

Designing user interfaces for writing tools often involves intricate details, particularly for rich-text editors. Iterating on the visual presentation of toolbars, formatting options, and contextual menus can consume significant design time. This workflow is crafted for product designers and UI/UX specialists engaged in developing productivity applications where precise control over the editing experience is paramount.

The challenge lies in translating abstract brand guidelines into concrete visual elements, ensuring consistency across interactive states and varying UI components. This approach streamlines the initial mockup generation phase, providing a detailed visual specification that can be fed directly into an image generation AI. It's particularly useful when exploring different aesthetic directions, testing interactive state visualizations, or quickly prototyping the look and feel of a new editor component within an existing design system.

By front-loading the descriptive effort, designers can accelerate their visual iteration cycles and refine components without extensive manual drawing or re-drawing.

Anatomy

Prompt engineering breakdown

Role

Act as a senior UI/UX designer specializing in productivity software interfaces.

Context

You are tasked with developing a precise visual specification for a rich-text editor component within a new writing application. The goal is to generate high-fidelity mockups that clearly illustrate the primary editor toolbar, an inline formatting popover, and a contextual slash-menu variant. The output will guide an image generation AI.

Goal

Detail the visual attributes and interactive states of the Main Editor Toolbar, Inline Formatting Popover, and Slash-Menu Variant, including Screen Type, Overall Layout, Color Palette, Typography, Interactive States, and Negative Space, to generate high-fidelity mockups.

Constraints

Maintain a clean, modern, and minimalist aesthetic. Adhere strictly to the provided `{{brand_guidelines}}`, focusing on consistency in iconography and component styling. The design must convey professionalism and ease of use. Include descriptions for both a default (inactive) state and a hover/active state for key interactive elements. Specify elements that should *not* be present, such as overly skeuomorphic designs or excessive gradients.

Output format

A comprehensive, image-AI-ready prompt structured to generate a detailed visual mockup. The output should be a single, cohesive description, ready for direct input into an image generation model. Include details on screen type, layout, palette, typography, interactive states, and negative space. Explicitly state the absence of elements that would detract from a clean UI.

Why this structure works

The prompt uses role priming to establish the AI's persona as an expert UI/UX designer, ensuring a focused and informed approach. Explicit constraints guide the aesthetic and functional requirements, preventing undesirable design choices. The structured output format ensures all necessary visual details are covered for effective image generation.

Pick your version

Prompt variations

BeginnerWorks with any model

For quick ideation or when basic visual concepts are needed without deep technical detail.

prompt.txt

Design a simple rich-text editor interface for a `{{device_type}}` app. Show the main toolbar with basic options like bold and italic. Also, show a small pop-up that appears when text is selected, offering format choices. A slash-menu should appear when typing `/`. Use a `{{simple_color_scheme}}` and a readable `{{font_style}}`. Make sure everything looks clean and easy to use. Describe button states (normal and when clicked) and ensure enough space between elements. Avoid old-fashioned or overly complex designs.

ProfessionalBest with midjourney

When a detailed, high-fidelity visual specification is required, mirroring the complexity of the original prompt.

prompt.txt

As a senior UI/UX designer, generate precise visual specifications for a rich-text editor within a `{{target_application_type}}`. Detail the main editor toolbar's layout, iconology (e.g., bold, italic, link), and aesthetic. Illustrate the inline formatting popover, including options and positioning. Describe the slash-menu variant with example commands and interaction. Specify `{{screen_type}}`, overall layout within the app window, `{{brand_color_palette}}`, `{{typography_details}}` (font families, weights, sizes), interactive states (hover, active, disabled), and negative space. Adhere to a modern, minimalist aesthetic, ensuring consistency with provided `{{brand_guidelines}}`. Exclude skeuomorphic elements or excessive gradients.

Short VersionBest with flux

For rapid prototyping or when a concise summary of design requirements is sufficient for initial visual concepts.

prompt.txt

Create a concise visual mockup description for a rich-text editor toolbar, inline formatting popover, and slash-menu for a `{{device_platform}}` application. Define the layout, a `{{core_color_palette}}`, key typography, and essential interactive states (default/hover). Emphasize a clean, modern aesthetic with clear spacing, avoiding complex or dated design elements. The output should be a single, focused description ready for image AI generation, detailing how these core UI components appear and function.

EnterpriseBest with midjourney

For large-scale projects requiring adherence to corporate standards, accessibility, and stakeholder review.

prompt.txt

Act as a lead UI/UX architect, specifying a rich-text editor component for a `{{enterprise_platform_type}}` application. Develop high-fidelity mockups detailing the main editor toolbar, inline formatting popover, and a slash-menu variant. Ensure strict adherence to `{{corporate_brand_standards}}`, `{{accessibility_guidelines}}` (WCAG 2.1 AA), and internal UI conventions. Describe `{{target_device_type}}` layout, `{{defined_color_system}}`, `{{approved_typography_stack}}`, and all interactive states (default, hover, active, disabled, focus). Incorporate considerations for future localization and scalability. The design must project professionalism and comply with all stakeholder requirements. Explicitly forbid outdated UI trends, ensuring a clean, modern, and universally usable interface.

What you'll get

Expected output

A desktop web application interface in light mode, featuring a modern rich-text editor. The overall layout places the editor prominently in the center of a clean, minimalist application window. Above the editor, a subtle document title input field resides, and to the right, a compact "Save" button. A narrow, collapsible sidebar for document navigation is suggested on the left, partially obscured to maintain focus on the main content area.

The main editor toolbar is a horizontal strip positioned at the top of the editing canvas. It features a muted gray background (#F9FAFB) with clearly delineated, circular icon buttons. Icons are line-art style, depicting standard formatting options: bold (B icon), italic (I icon), underline (U icon), strikethrough (S icon), link (chain icon), and align text (stacked lines icon). Default state icons are a dark gray (#333333). On hover, icons transition to a vibrant blue (#3498DB), and on active state, they are filled with the primary blue and appear slightly recessed. Negative space between icons is generous, approximately 12px.

An inline formatting popover appears directly above selected text. It's a subtle, rounded rectangle with a white background (#FFFFFF) and a faint shadow for depth. Within the popover, smaller, square icon buttons mirror the toolbar's iconography for bold, italic, underline, and link. Additionally, a dropdown for heading styles (H1, H2, H3) and a text alignment menu are present. Buttons are dark gray (#333333) in their default state, turning blue (#3498DB) on hover, with a light blue background fill on active. Text labels for headings are Roboto Mono, 14px, regular weight.

The slash-menu variant, triggered by typing / at the start of a new block, presents as a vertical list below the cursor. It has a white background (#FFFFFF) and a subtle border. Each menu item displays a small icon (e.g., a square for /heading, three dots for /bullet list, a mountain for /image) followed by the command text (e.g., "Heading 1", "Bullet List", "Image"). Font for menu items is Inter, 16px, regular weight, dark gray (#333333). Hover state highlights the entire menu row with a light blue background (#F0F8FF). This design adheres to a contemporary, sans-serif aesthetic with generous negative space and subtle shadows, emphasizing clarity and user focus, without overly skeuomorphic designs or excessive gradients.

Under the hood

Why this prompt works

This structured prompt achieves precise UI mockups by employing several deliberate prompt engineering techniques. First, role priming establishes the model as a "senior UI/UX designer specializing in productivity software interfaces." This immediately sets a professional context, guiding the model to generate responses with the appropriate level of detail and design acumen expected from an expert.

Explicit task definition and structured output requirements are critical. The prompt breaks down the complex request into distinct UI components (toolbar, popover, slash-menu) and then specifies granular attributes for each, such as screen type, layout, color palette, typography, interactive states, and negative space. This granular instruction prevents generic outputs by forcing the model to address every relevant aspect of a high-fidelity mockup. Furthermore, the inclusion of negative constraints, such as stipulating the absence of "overly skeuomorphic designs or excessive gradients," helps refine the aesthetic direction, ensuring the output aligns with a clean, modern, and minimalist style.

Unlike a simple one-liner like "design an editor," this approach ensures comprehensive coverage of interactive elements, visual hierarchy, and brand consistency, resulting in an output that is directly actionable for image generation models and significantly reduces the need for post-generation refinement.

Model fit

Best AI models for this prompt

Midjourney

Midjourney excels at maintaining stylistic consistency across a complex scene, making it suitable for generating coherent UI elements. It handles abstract concepts like 'clean UI' and 'modern aesthetic' well, translating them into visually appealing mockups with good attention to overall composition and negative space. Its strength lies in creating a unified visual language for the entire interface. See the full Midjourney hub for deeper guidance.

Flux

Flux is effective for producing detailed UI components, particularly when specific interactive states and precise element positioning are required. It interprets explicit instructions on iconography, typography, and color palettes with high fidelity, making it a strong choice for structured interface design. Flux can accurately render the distinct elements of a rich-text editor, from toolbars to popovers. See the full Flux hub for deeper guidance.

When to use

When needing high-fidelity mockups for a rich-text editor, including toolbars, popovers, and slash menus.
For visualizing interactive states like hover, active, and disabled for editor UI elements.
When developing precise design specifications for developer handoff on writing tools.
To rapidly iterate on different layout options and color palettes for editor components.
When evaluating UI consistency across desktop, tablet, or mobile editor interfaces.

When not to use

If only a low-fidelity wireframe or basic sketch is required, as the prompt generates detailed visuals.
For generating full application flows or user journeys beyond the core editor components.
When the primary focus is on backend functionality rather than frontend UI aesthetics.
If you lack specific brand guidelines or a clear color palette to define.
When seeking a functional, interactive prototype.

Get more from it

Pro tips

1
Clearly specify the `target_device_type` to prevent mismatched aspect ratios or unresponsive layouts in the generated image.
2
Provide concrete hex codes or RGB values for `primary_color_palette` to avoid generic or off-brand color interpretations.
3
Describe typography using specific font names and weights; this prevents inconsistent text hierarchy and readability issues.
4
Outline negative space requirements with precise terms like 'generous padding' to avoid cluttered or cramped designs.
5
Detail interactive states (hover, active) for each button, preventing static, non-functional UI representations.
6
Mention elements to exclude, like excessive gradients, to prevent outdated or overly skeuomorphic design outputs.
7
Refine icon descriptions to be generic yet clear, preventing the AI from creating overly specific or copyrighted symbols.

Don't ship this

Common mistakes

✗ Omitting specific font names, leading to generic or mismatched typography.
Fix — Always name desired font families and weights for body, headings, and UI elements to ensure visual consistency.
✗ Using vague color descriptions instead of precise palette definitions.
Fix — Provide hex codes or explicit brand palette names for primary, secondary, and accent colors to maintain brand identity.
✗ Failing to describe interactive states for buttons and menu items.
Fix — Specify hover, active, and disabled states to ensure the UI representation is dynamic and functional.
✗ Not defining negative space, resulting in cluttered UI components.
Fix — Clearly state padding, margins, and spacing between elements for a clean and professional aesthetic.
✗ Describing icons with too much ambiguity, leading to uninterpretable symbols.
Fix — Use standard UI terms like 'bold icon,' 'link icon,' 'bullet list icon' for clear interpretation.
✗ Forgetting to specify the `target_device_type`, causing inappropriate scaling.
Fix — Always declare 'desktop web app,' 'tablet app,' or 'mobile app interface' for accurate mockups.

Frequently asked questions

Q.Can I use this to design a unique icon set for my editor?

While the prompt helps visualize editor components with generic icons, its primary focus is overall layout and interaction. For unique icon sets, a dedicated prompt specifying icon style and detail would be more effective.

Q.How specific should my `brand_guidelines` input be?

The more specific, the better. Include details on primary and secondary colors, typography, corner radii, and even specific UI component styles. This ensures the output aligns closely with your brand identity.

Q.Will this generate a functional prototype?

No, this prompt generates high-fidelity static image mockups. It's a visual specification, not an interactive prototype. You would use these images to guide development or further prototyping in dedicated tools.

Q.Can I request different themes like dark mode?

Yes, you can specify dark mode instead of light mode in the target_device_type variable. Ensure your primary_color_palette and secondary_color_palette are adapted for the dark theme.

Q.Is it possible to generate multiple layout variations in one go?

To generate distinct layout variations, it's best to run the prompt multiple times, adjusting the Overall Layout and potentially other parameters in each iteration. This ensures focused results for each design concept.

Q.Does this support custom components beyond basic text formatting?

Yes, you can describe custom inline formatting options or slash-menu commands. For example, specify a /chart command or an inline comment button. The key is clear, concise visual description.

Version 1.0Last reviewed August 6, 2026

Reviewed by PromptInFlow Editorial Team