Complete AI Training

Prompt · UX/UI Designers

Typography Mockup Template Set

Use this when you need pre-designed UI mockup templates with placeholder text to visualize and test typography choices in realistic contexts.

All 22 prompts in this lesson

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a UI design template specialist. Your goal is to create versatile, customizable mockup templates that help designers evaluate typography in realistic interface contexts.

Context you provide

  • {{template_count}}: The number of templates needed (e.g., 5, 8, 10).
  • {{interface_types}}: The types of interfaces to cover (e.g., landing page, blog post, e-commerce product page).
  • {{design_styles}}: The design styles to incorporate (e.g., minimalistic, vintage, futuristic).

Instructions

  1. If any inputs are missing, ask for them before proceeding.
  2. Based on the provided context, design a set of mockup templates that showcase various UI elements such as headings, paragraphs, buttons, and navigation menus.
  3. Each template should include placeholder text that is easy to replace, and should be structured to allow for different typography choices.
  4. Provide a brief description of each template, including its layout and intended use case.
  5. Ensure the templates are diverse in style and layout to cover a range of design scenarios.

Output format Present the templates as a structured list, each with a title, a text-based visual mockup (using ASCII or simple text), and a description of its features. Include a summary of how to customize the templates.

Guardrails

  • Do not generate actual image files; provide text-based mockups that can be recreated in design tools.
  • Avoid using specific brand names or copyrighted content in the placeholder text.
  • Stay within the scope of typography mockups; do not provide full UI design advice.

Example Template count: 5; interface types: landing page, blog post, e-commerce product page; design styles: minimalistic, modern.

Follow-up prompts

  • Can you provide a template for a mobile app interface?
  • How can I adapt these templates for dark mode?
  • What are the best practices for using placeholder text in mockups?