P

ChatGPT Prompt to Create Mockups

Mockups are essential visual representations in the digital product design process. They allow you to visualize the final appearance of an app, website, or interface before development begins. With ChatGPT, you can now generate detailed mockup descriptions, obtain complete page structures, and even produce realistic mockup images via integrated DALL-E. Whether you are a designer looking to speed up your ideation phase, a project manager needing to present a concept to stakeholders, or an entrepreneur wanting to materialize your product vision, ChatGPT transforms your text brief into usable mockups. The tool particularly excels at generating annotated wireframes, high-fidelity mockups with realistic content, and design variations to test different approaches. By combining contextual understanding of natural language with image generation, ChatGPT allows you to go from idea to visual in minutes, whereas the traditional process would require several hours of work in Figma or Sketch.

The prompt

ChatGPT

Act as a senior UI/UX designer with 15 years of experience. I need to create a mockup for [type of project: mobile app / website / dashboard / landing page]. Here is the context:

  • Industry: [industry sector]
  • Target audience: [audience description]
  • Main page objective: [conversion / information / navigation / onboarding]
  • Desired visual style: [minimalist / corporate / creative / luxury / tech]
  • Color palette: [main colors or "to propose"]

Generate a detailed mockup including:

  1. The complete page structure (header, sections, footer) with visual hierarchy
  2. Realistic text content for each element (headlines, subheadings, CTAs, paragraphs)
  3. Specifications for each component (suggested dimensions, spacing, typography)
  4. Recommended interactions and micro-animations
  5. A high-fidelity mockup image showing the final rendering

Follow modern UX conventions and WCAG 2.1 accessibility standards. Propose 2 layout variants for the hero section.

Personalize this prompt with Léa

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

Why it works

This prompt works thanks to assigning a precise expert role that activates ChatGPT's specialized knowledge in UI/UX design. The numbered bullet structure with variables in brackets forces a comprehensive and personalized response. Mentioning WCAG standards and requesting variants pushes the model to produce a professional rather than generic result.

Expected result

You will obtain a complete architectural description of your mockup with each section detailed, ready-to-use text content, and a DALL-E generated image representing the visual rendering. The result includes typography, spacing, and interaction recommendations that can be directly ported to Figma or any other design tool.

Variants by level

FAQ

Can ChatGPT really generate usable mockup images?
Yes, thanks to integrated DALL-E, ChatGPT can generate visually realistic mockup images. However, these images primarily serve as visual references and communication tools. For an editable pixel-perfect mockup, it's recommended to use the result as a guide in a tool like Figma or Adobe XD. ChatGPT excels at rapid ideation, generating variations, and producing realistic content for your mockups.
How to get a mockup consistent with my existing brand guidelines?
Provide ChatGPT with the key elements of your brand guidelines: hexadecimal color codes, font names, button and component styles, as well as examples of existing pages via screenshots. The more precise you are in describing your visual identity, the more faithful the mockup will be. You can also attach your style guide as a PDF for ChatGPT to analyze and follow.
What is the difference between a wireframe and a mockup generated by ChatGPT?
A wireframe generated by ChatGPT focuses on structure and information hierarchy: block layout, navigation flow, and content architecture, typically in black and white. A high-fidelity mockup includes colors, typography, images, and realistic content to represent the final rendering. In your prompt, explicitly specify the desired fidelity level. Always start with a wireframe to validate the structure before moving on to the detailed mockup.

Related prompts

How to use this prompt

  1. Copy the prompt with the button above.
  2. Paste it into ChatGPT, Claude or your favorite AI assistant.
  3. Replace the bracketed variables with your details, then refine the result.

About Prompt Guide

Prompt Guide is a free library of 4800+ ready-to-use prompts for ChatGPT, Claude and other AIs, with guides to learn prompting and tools to build and optimize your own prompts.

More prompts to explore

ChatGPT Prompt to Optimize a Workflow

Workflow optimization is a major lever of productivity, whether for a development team, a marketing department, or complex project management.

ChatGPT Prompt to Optimize Ads

Digital advertising is an essential growth driver, but creating high-performing ads requires a fine mastery of copywriting, targeting, and data analysis. ChatGPT transforms this discipline by enabling marketers to generate, test, and refine their ads with unprecedented speed.

ChatGPT Prompt to Summarize a Document

Summarizing a document is one of the most requested tasks for ChatGPT, and for good reason: facing 50-page reports, dense scientific articles, or endless meeting minutes, saving time without losing the essentials has become a key skill. But a simple "summarize this text" often produces a flat result that misses important nuances. The difference between a mediocre summary and a truly useful one lies entirely in the quality of the prompt used. A good summary prompt must specify the expected format, the desired level of detail, the target audience, and the elements to prioritize. It should also guide ChatGPT on what not to do: invent information absent from the document, merge distinct ideas, or omit crucial numerical data. The prompts presented on this page are designed to extract the substance of a document while preserving its logical structure, key arguments, and conclusions. Whether you are a student facing a thesis, a professional dealing with an audit, or a researcher analyzing a literature review, you will find here the prompt suited to your exact need.

ChatGPT Prompt to Write a Blog Post

Writing a quality blog post takes time: research, structuring, writing, proofreading. ChatGPT can significantly speed up this process by...

ChatGPT Prompt to Write a Business Proposal

Writing a compelling business proposal is a demanding exercise that requires both writing skills, in-depth knowledge of the client, and strategic structuring of the offer. ChatGPT radically transforms this process by allowing you to produce professional proposals in a fraction of the usual time.

ChatGPT Prompt to Write an Email

Writing emails represents a significant part of our daily professional communication. Whether prospecting a client, following up with a partner, responding to a complaint, or simply informing your team, each email must be clear, impactful, and tailored to its recipient. ChatGPT transforms this often time-consuming task into a smooth and efficient process. By providing it with the right prompt, you get a structured email with the right tone that respects the codes of professional written communication. No more minutes spent searching for the right polite phrase or rewording an awkward paragraph. AI gives you a solid foundation that you can refine as needed. This prompt was designed to cover the most common use cases: commercial, internal, follow-up, negotiation, or customer service emails. It integrates essential parameters—context, tone, objective, and structure—so that ChatGPT produces a directly usable result without unnecessary back-and-forth.

Go further

Get new prompts every week

Join our newsletter.