ChatGPT Prompt for Creating Mockups
Mockups are essential visual representations in the digital product design process. They allow you to visualize the final appearance of an application, website, or interface before development even begins. With ChatGPT, you can now generate detailed mockup descriptions, complete page structures, and even produce realistic mockup images via integrated DALL-E. Whether you're 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 turns your text brief into usable mockups. The tool excels particularly 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, where the traditional process would require several hours of work on Figma or Sketch.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Act as a senior UI/UX designer with 15 years of experience. I need to create a mockup for [PROJECT_TYPE: mobile app / website / dashboard / landing page]. Here is the context:
- Industry: [INDUSTRY]
- Target audience: [AUDIENCE_DESCRIPTION]
- Main page goal: [conversion / information / navigation / onboarding]
- Desired visual style: [minimalist / corporate / creative / luxury / tech]
- Color palette: [main colors or "to propose"]
Generate a detailed mockup including:
- The complete page structure (header, sections, footer) with visual hierarchy
- Realistic textual content for each element (headings, subheadings, CTAs, paragraphs)
- Specifications for each component (suggested dimensions, spacing, typography)
- Recommended interactions and micro-animations
- 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
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
This prompt works by assigning a precise expert role that activates ChatGPT's specialized knowledge in UI/UX design. The numbered 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.
Use Cases
Variants
Expected Output
You will get a complete architectural description of your mockup with each section detailed, textual content ready to integrate, and an image generated by DALL-E representing the visual rendering. The result includes typography, spacing, and interaction recommendations that can be directly transferred to Figma or any other design tool.
Frequently Asked Questions
Can ChatGPT really generate usable mockup images?
Yes, thanks to the integrated DALL-E, ChatGPT can generate visually realistic mockup images. However, these images primarily serve as visual references and communication tools. For pixel-perfect, editable mockups, 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 can I get a mockup that matches my existing brand guidelines?
Provide ChatGPT with key elements of your brand guidelines: hex color codes, font names, button and component styles, plus 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's 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, usually in black and white. A high-fidelity mockup includes colors, typography, images, and realistic content to represent the final rendering. In your prompt, explicitly state the desired fidelity level. Always start with a wireframe to validate the structure before moving on to the detailed mockup.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour obtenir un rendu exploitable, précisez le générateur d'images en sortie (ex: "Génère une image avec DALL-E 3") ou, si absent, remplacez l'étape 5 par une spécification design token (couleurs hex, polices, espacements) prête pour Figma.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Perplexity Prompt for Creating Instagram Stories
Perplexity stands out from other AI tools with its ability to perform real-time web searches, making it a valuable ally for creating impactful Instagram Stories. Unlike a simple text generator, Perplexity can analyze current trends, high-performing formats, and best practices on Instagram. Whether you are a community manager, entrepreneur, or content creator, using Perplexity to design your Stories saves significant time while producing content aligned with what actually works on the platform. The tool can provide complete scripts, visual ideas, narrative sequences, and even sticker or call-to-action suggestions tailored to your audience. By combining researched information with creative generation, Perplexity helps you overcome writer's block and publish Stories that capture attention from the first slide. Here is an optimized prompt to fully exploit this capability.
Write a color system rationale
Document color system decisions
Perplexity Prompt for Generating Advertising Visuals
Perplexity AI, with its augmented search capabilities and advanced contextual understanding, becomes a valuable ally for designing impactful advertising visuals. Unlike traditional image generation tools, Perplexity allows you to anchor your creative briefs in real market data: current visual trends, industry color codes, platform-specific high-performing formats. By crafting precise prompts, you can obtain detailed visual descriptions, structured creative briefs for your designers or generative AI tools, and even composition recommendations based on what actually works in your industry. The approach leverages Perplexity's integrated web search to feed each creative decision with concrete data, avoiding generic visuals that drown in the advertising feed. Whether you are preparing a Meta Ads, Google Display, or LinkedIn Sponsored campaign, a well-constructed prompt transforms Perplexity into an augmented art director capable of producing actionable and differentiating visual briefs.
Gemini Prompt to Create a Logo
Gemini, Google's multimodal artificial intelligence, offers remarkable capabilities for logo creation thanks to its advanced understanding of language and visual design. Whether you're an entrepreneur launching a new brand, a freelancer looking to quickly prototype visual identities, or a designer seeking to explore creative avenues, Gemini can generate professional logo concepts from precise textual descriptions. The tool excels particularly at interpreting complex creative briefs, combining typographic style, symbolism, color palette, and brand positioning. By crafting a structured prompt that details your industry, brand values, and aesthetic preferences, you will obtain coherent and actionable logo proposals. This approach does not replace the work of a professional designer for finalization, but it significantly accelerates the ideation phase and allows you to arrive at meetings with concrete visual concepts rather than mere abstract descriptions.