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.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
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
- If any inputs are missing, ask for them before proceeding.
- Based on the provided context, design a set of mockup templates that showcase various UI elements such as headings, paragraphs, buttons, and navigation menus.
- Each template should include placeholder text that is easy to replace, and should be structured to allow for different typography choices.
- Provide a brief description of each template, including its layout and intended use case.
- 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?