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.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Similar Prompts
Evaluate Climate Impact on Architectural Design
Analyze climate impact on your architectural projects and integrate resilience strategies from the design phase.
Write Impactful Advertising Copy
Writes persuasive advertising copy by exploring multiple creative angles using the AIDA method.
Midjourney Prompt for Creating Mockups
Mockups have become an essential part of the creative process, whether to present a logo on packaging, visualize a website design on a screen, or stage a product in a realistic context. Midjourney revolutionizes this step by generating photorealistic mockups in seconds, without the need for complex PSD files or expensive stock images. Thanks to its advanced understanding of materials, lighting, and perspectives, Midjourney produces professional-quality staging that rivals studio photography. Whether you are a graphic designer presenting a visual identity to a client, an entrepreneur looking to visualize packaging before production, or a marketer creating visuals for a campaign, mastering mockup prompts will save you considerable time. The main challenge lies in the precision of the instructions: type of support, viewing angle, lighting, environment, and level of realism must be carefully described to obtain a usable result. This guide provides optimized and tested prompts for creating compelling mockups with Midjourney, from simple product previews to ultra-realistic renders worthy of a professional shoot.
Claude Prompt for Creating YouTube Thumbnails
YouTube thumbnails are the first visual element viewers see before clicking on a video. An effective thumbnail can double or triple your click-through rate, making it one of the most powerful growth levers on the platform. Claude excels at thumbnail design thanks to its ability to generate precise visual descriptions, balanced compositions, and catchy text tailored to your niche. By using Claude as a creative assistant, you can quickly iterate on thumbnail concepts, get high-contrast color recommendations, structure visual hierarchy, and write short, emotionally impactful text. Whether you are a beginner creator or an established YouTuber, Claude helps you systematize your thumbnail creation process to produce visuals that are consistent with your brand, optimized for mobile, and designed to trigger the click. This guide provides ready-to-use prompts to turn Claude into a true art director for your YouTube thumbnails.